README-ES-MX.md

👇 Índice

• 👇 Índice
• ✨ Características
• 🚀 Usos
  • Como página de inicio
  • Como una nueva pestaña
• 🎨 Personalización
  • 👋 General: Nombre, Imagen De Fondo y Saludos
  • 🏷️ Botones de enlace
  • 📑 Lista de enlaces
  • ⛈️ Clima: Clave De La Api, Iconos y Grupos
  • 💛 Colores

✨ Características

• Configuración Sencilla de archivos.
• Modo Claro/Obscuro puedes alternarlos y se guardara en tu almacenamiento local.
• Fecha y Hora, puedes utilizar el formato de 24 horas (predeterminado) o el de 12 horas.
• Saludos fáciles de modificar.
• Variables para colores y tamaños de fuente personalizados en el código del archivo style.css.
• Iconos todos los iconos provienen de Feather Icons (Otros los hice yo mismo, tomando los iconos de Feather Icons como base).
• Archivos Modulares de JavaScript para una lectura sencilla.

🚀 Usos

Como página de inicio

1. Haz un Fork de este repositorio
2. Activa el servicio de GitHub Pages Settings > GitHub Pages > Source [rama master] > Save
3. Configúrala como página de inicio:
   • Haz click en el botón Menú, selecciona Opciones, selecciona Preferencias
   • Haz click en el panel de inicio.
   • Haz click en el menú al lado de Inicio y Nuevas Ventanas. Elige la opción de mostrar URL's personalizadas, después, añade el enlace de tu GitHub Pages.

Como una nueva pestaña

Puedes utilizar distintos Add-ons/Extensiones para ello

• Si usas Firefox: Custom New Tab Page
• Si usas Chromium (Brave, Vivaldi, Chrome): Custom New Tab URL

🎨 Personalización

Casi todas la personalización puede ser configurada desde el archivo config.js:

👋 General: Nombre, Imagen De Fondo y Saludos

Para cambiar el nombre por defecto, los saludos y si deseas tener una imagen de fondo o abrir los enlaces en una nueva pestaña, edita las primeras configuraciones en el archivo config.js.

 // General
  name: 'John',
  imageBackground: false,
  openInNewTab: true,

  // Saludos
  greetingMorning: 'Good morning!',
  greetingAfternoon: 'Good afternoon,',
  greetingEvening: 'Good evening,',
  greetingNight: 'Go to Sleep!',

Puedes cambiar el fondo, sustituyendo el archivo background.jpg en la carpeta assets.

🏷️ Botones de Enlace****

Para editar los botones solo tienes que cambiar la siguiente lista en el archivo config.js eligiendo un enlace, un icono proveniente de Feather Icons y un nombre:

cards: [
    {
      id: '1',
      name: 'Github',
      icon: 'github',
      link: 'https://github.com/',
    },
    {
      id: '2',
      name: 'Mail',
      icon: 'mail',
      link: 'https://mail.protonmail.com/',
    },
    {
      id: '3',
      name: 'Todoist',
      icon: 'trello',
      link: 'https://calendar.google.com/calendar/r',
    },
    {
      id: '4',
      name: 'Calendar',
      icon: 'calendar',
      link: 'https://calendar.google.com/calendar/r',
    },
    {
      id: '5',
      name: 'Reddit',
      icon: 'bookmark',
      link: 'https://reddit.com',
    },
    {
      id: '6',
      name: 'Odysee',
      icon: 'youtube',
      link: 'https://odysee.com/',
    },
  ],

📑 Lista de enlaces

Lo mismo pasa con la lista de enlaces, puedes cambiar la lista de iconos (también provenientes de Feather Icons) y los enlaces:

  //Iconos
  firstListIcon: 'music',
  secondListIcon: 'coffee',

  // Enlaces
  lists: {
    firstList: [
      {
        name: 'Inspirational',
        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      },
      {
        name: 'Classic',
        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      },
      {
        name: 'Oldies',
        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      },
      {
        name: 'Rock',
        link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      },
    ],
    secondList: [
      {
        name: 'Linkedin',
        link: 'https://linkedin.com/',
      },
      {
        name: 'Figma',
        link: 'https://figma.com/',
      },
      {
        name: 'Dribbble',
        link: 'https://dribbble.com',
      },
      {
        name: 'Telegram',
        link: 'https://webk.telegram.org',
      },
    ],
  },

⛈️ Clima: Clave De La Api, Iconos y Grupos

Para configurar el widget del clima necesitaras una clave de API proveniente de: https://openweathermap.org/. Una vez que hayas obtenido tu clave, necesitaras configurar tu latitud y longitud, para ello puedes usar: https://www.latlong.net/ para obtenerlas.

Finalmente, escoge un set de iconos:

• Nord Usa el esquema de colores Nord si te encantan los colores agradables a la vista.
• OneDark (Predeterminado) Usa el esquema de colores One Dark Pro.
• Dark Para usuarios que solo usan temas claros y quieren un look minimalista.
• White Para usuarios que solo usan temas oscuros y quieren un look minimalista.

Finalmente, solo añádelos al archivo config.js.

  // clima
  weatherKey: 'InsertYourAPIKeyHere123456',
  weatherIcons: 'OneDark',
  weatherUnit: 'C',
  weatherLatitude: '37.774929',
  weatherLongitude: '-122.419418',

💛 Colores

En el archivo app.css puedes cambiar las variables para cualquiera de los temas (Oscuro y Claro):

/* Tema Claro  */

:root {
  --accent: #61b0f1; /* Hover color */
  --bg: #f5f5f5; /* Background color */
  --sbg: #e4e6e6; /* Cards color */
  --fg: #3a3a3a; /* Foreground color */
  --sfg: #3a3a3a; /* Sceondary Foreground color */
}

/* Tema Oscuro  */

.darktheme {
  --accent: #61b0f1; /* Hover color */
  --bg: #19171a; /* Background color */
  --sbg: #201e21; /* Cards color */
  --fg: #d8dee9; /* Foreground color */
  --sfg: #3a3a3a; /* Secondary Foreground color */
}