Added support for more customizable greetings

app.css

@@ -13,39 +13,46 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); /* Font Import */
 
 :root {
+
+  /* Make everything fade cause special */
+  /* https://medium.com/cloud-native-the-gathering/how-to-use-css-to-fade-in-and-fade-out-html-text-and-pictures-f45c11364f08 */
+  animation: fadeIn ease 3s;
+  -webkit-animation: fadeIn ease 3s;
+  -moz-animation: fadeIn ease 3s;
+  -o-animation: fadeIn ease 3s;
+  -ms-animation: fadeIn ease 3s;
   /* Font Size */
   --fg-primary: 12vh; /* Time and Greetings */
   --fg-secondary: 3vh; /* Greetings and Weather widger */
   --fg-date: 8vh; /* Date */
   --fg-list: 2vh; /* Links List */
   --icon: 3vh; /* Icon Size */
 
-  /* Fonts Color */
-  --fg: #3a3a3a; /* Foreground color */
-  --sfg: #494949; /* Sceondary Foreground color */
+  /* Dark Colors  */
+  --accent: #1B81F3; /* Hover color */
+  --background: #08111C; /* Background color */
+  --cards: #14268C; /* Cards color */
 
-  /* Light Colors  */
-  --accent: #57a0d9; /* Hover color */
-  --background: #f5f5f5; /* Background color */
-  --cards: #e4e6e6; /* Cards color */
+  /* Fonts Color */
+  --fg: #1B81F3; /* Foreground color */
+  --sfg: #935A6B; /* Secondary Foreground color */
 
   /* Image background  */
-  --imgbg: url(assets/background.jpg); /* Image URL */
   --imgcol: linear-gradient(
-    rgba(255, 255, 255, 0.7),
-    rgba(255, 255, 255, 0.7)
+    rgba(0, 0, 0, 0.85),
+    rgba(0, 0, 0, 0.85)
   ); /* Filter color */
 }
 
 .darktheme {
   /* Dark Colors  */
-  --accent: #57a0d9; /* Hover color */
-  --background: #19171a; /* Background color */
-  --cards: #201e21; /* Cards color */
+  --accent: #1B81F3; /* Hover color */
+  --background: #08111C; /* Background color */
+  --cards: #14268C; /* Cards color */
 
   /* Fonts Color */
-  --fg: #d8dee9; /* Foreground color */
-  --sfg: #2c292e; /* Secondary Foreground color */
+  --fg: #1B81F3; /* Foreground color */
+  --sfg: #935A6B; /* Secondary Foreground color */
 
   /* Image background  */
   --imgcol: linear-gradient(
@@ -369,3 +376,49 @@ body {
     padding-right: 100px;
   }
 }
+
+
+@keyframes fadeIn {
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-moz-keyframes fadeIn {
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-o-keyframes fadeIn {
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-ms-keyframes fadeIn {
+  0% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}

assets/js/greeting.js

@@ -12,12 +12,31 @@ const gree2 = `${CONFIG.greetingMorning}\xa0`;
 const gree3 = `${CONFIG.greetingAfternoon}\xa0`;
 const gree4 = `${CONFIG.greetingEvening}\xa0`;
 
+let greeting = '';
+
 if (hour >= 23 || hour < 5) {
-  document.getElementById('greetings').innerText = gree1 + name;
+  greeting = gree1 + name;
 } else if (hour >= 6 && hour < 12) {
-  document.getElementById('greetings').innerText = gree2 + name;
+  greeting = gree2 + name;
 } else if (hour >= 12 && hour < 17) {
-  document.getElementById('greetings').innerText = gree3 + name;
+  greeting = gree3 + name;
 } else {
-  document.getElementById('greetings').innerText = gree4 + name;
+  greeting = gree4 + name;
+}
+
+// replace any name templates with the users name
+greeting = greeting.replace("{name}", name)
+
+// remove duplicate name
+// (easier and more readable than checking if the name
+// template was used in each greeting)
+
+// if the index of the first mention of the users name is not equal to the index of the name
+// at the end...
+if (greeting.indexOf(name) !== (greeting.length - name.length)) {
+  // ...assume the user used the name template and remove the name at the end
+  const lastNameIndex = greeting.length - name.length
+  greeting = greeting.slice(0, lastNameIndex)
 }
+
+document.getElementById('greetings').innerText = greeting;

config.js

@@ -11,22 +11,22 @@ const CONFIG = {
   // └─┘┴ ┴└─┘┴└─┘└─┘
 
   // General
-  name: 'John',
+  name: 'Ging',
   imageBackground: false,
-  openInNewTab: true,
-  twelveHourFormat: false,
+  openInNewTab: false,
+  twelveHourFormat: true,
 
   // Greetings
-  greetingMorning: 'Good morning!',
-  greetingAfternoon: 'Good afternoon,',
+  greetingMorning: 'Good mowning!',
+  greetingAfternoon: 'Good aftewnoon,',
   greetingEvening: 'Good evening,',
-  greetingNight: 'Go to Sleep!',
+  greetingNight: '{name}, you should go to sleep!',
 
   // Layout
   bentoLayout: 'bento', // 'bento', 'lists', 'buttons'
 
   // Weather
-  weatherKey: 'InsertYourAPIKeyHere123456', // Write here your API Key
+  weatherKey: 'b7ce85f5fedbe72b9966ab00dca8ec6d', // Write here your API Key
   weatherIcons: 'OneDark', // 'Onedark', 'Nord', 'Dark', 'White'
   weatherUnit: 'C', // 'F', 'C'
   language: 'en', // More languages in https://openweathermap.org/current#multi
@@ -59,21 +59,15 @@ const CONFIG = {
     },
     {
       id: '2',
-      name: 'Mail',
-      icon: 'mail',
-      link: 'https://mail.protonmail.com/',
+      name: 'OpenSea',
+      icon: 'anchor',
+      link: 'https://opensea.io/',
     },
     {
       id: '3',
-      name: 'Todoist',
-      icon: 'trello',
-      link: 'https://todoist.com',
-    },
-    {
-      id: '4',
-      name: 'Calendar',
-      icon: 'calendar',
-      link: 'https://calendar.google.com/calendar/r',
+      name: 'SpeedRun',
+      icon: 'fast-forward',
+      link: 'https://speedrun.com',
     },
     {
       id: '5',
@@ -89,45 +83,6 @@ const CONFIG = {
     },
   ],
 
-  secondButtonsContainer: [
-    {
-      id: '1',
-      name: 'Music',
-      icon: 'headphones',
-      link: 'https://open.spotify.com',
-    },
-    {
-      id: '2',
-      name: 'twitter',
-      icon: 'twitter',
-      link: 'https://twitter.com/',
-    },
-    {
-      id: '3',
-      name: 'bot',
-      icon: 'bot',
-      link: 'https://discord.com/app',
-    },
-    {
-      id: '4',
-      name: 'Amazon',
-      icon: 'shopping-bag',
-      link: 'https://amazon.com/',
-    },
-    {
-      id: '5',
-      name: 'Hashnode',
-      icon: 'pen-tool',
-      link: 'https://hashnode.com/',
-    },
-    {
-      id: '6',
-      name: 'Figma',
-      icon: 'figma',
-      link: 'https://figma.com/',
-    },
-  ],
-
   // ┬  ┬┌─┐┌┬┐┌─┐
   // │  │└─┐ │ └─┐
   // ┴─┘┴└─┘ ┴ └─┘
@@ -139,30 +94,30 @@ const CONFIG = {
       id: '1',
       links: [
         {
-          name: 'Inspirational',
-          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+          name: 'Briddim',
+          link: 'https://music.apple.com/us/playlist/b%CE%B3iddim/pl.u-WabZv4ZieNAvxLY',
         },
         {
-          name: 'Classic',
-          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+          name: 'Color Bass',
+          link: 'https://music.apple.com/us/playlist/colo%CE%B3-b%CE%BBss/pl.u-WabZvAVueNAvxLY'
         },
         {
-          name: 'Oldies',
-          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+          name: 'Hardstyle',
+          link: 'https://music.apple.com/us/playlist/h%CE%BB%CE%B3dstyl%CE%BE/pl.u-NpXmzeWF4yVpke7'
         },
         {
-          name: 'Rock',
-          link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
-        },
+          name: 'Riddim',
+          link: 'https://music.apple.com/us/playlist/%CE%B3iddim/pl.u-NpXmza7t4yVpke7'
+        }
       ],
     },
     {
       icon: 'coffee',
       id: '2',
       links: [
         {
-          name: 'Linkedin',
-          link: 'https://www.linkedin.com',
+          name: 'Steam',
+          link: 'https://www.steam.com',
         },
         {
           name: 'Dribbble',
@@ -178,53 +133,5 @@ const CONFIG = {
         },
       ],
     },
-  ],
-
-  // Second Links Container
-  secondListsContainer: [
-    {
-      icon: 'binary',
-      id: '1',
-      links: [
-        {
-          name: 'Spotify',
-          link: 'https://www.spotify.com',
-        },
-        {
-          name: 'Reddit',
-          link: 'https://www.reddit.com',
-        },
-        {
-          name: 'Hashnode',
-          link: 'https://www.hashnode.com',
-        },
-        {
-          name: 'Pocket',
-          link: 'https://www.pocket.com',
-        },
-      ],
-    },
-    {
-      icon: 'github',
-      id: '2',
-      links: [
-        {
-          name: 'Front',
-          link: 'https://www.reddit.com/r/Frontend/',
-        },
-        {
-          name: 'Rust',
-          link: 'https://www.reddit.com/r/rust/',
-        },
-        {
-          name: 'Go',
-          link: 'https://www.reddit.com/r/golang/',
-        },
-        {
-          name: 'Repos',
-          link: 'https://github.com/migueravila',
-        },
-      ],
-    },
-  ],
-};
+  ]
+}