- 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.
- Haz un Fork de este repositorio
- Activa el servicio de GitHub Pages
Settings > GitHub Pages > Source [rama master] > Save
- 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.
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
Casi todas la personalización puede ser configurada desde el archivo config.js
:
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 carpetaassets
.
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/',
},
],
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',
},
],
},
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',
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 */
}