INITIAL COMMIT

src/app.css

@@ -0,0 +1,25 @@
+@import "tailwindcss";
+
+@plugin "flowbite/plugin";
+@plugin "flowbite-typography";
+
+@source "../node_modules/flowbite";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+    --color-primary-50: #eff6ff;
+    --color-primary-100: #dbeafe;
+    --color-primary-200: #bfdbfe;
+    --color-primary-300: #93c5fd;
+    --color-primary-400: #60a5fa;
+    --color-primary-500: #3b82f6;
+    --color-primary-600: #2563eb;
+    --color-primary-700: #1d4ed8;
+    --color-primary-800: #1e40af;
+    --color-primary-900: #1e3a8a;
+    
+    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
+}

src/app.js

@@ -0,0 +1,6 @@
+import './app.css';
+
+import 'flowbite';
+import './dark-mode';
+import './navbar';
+import './current-year';

src/current-year.js

@@ -0,0 +1,6 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const $currentYearText =  document.getElementById('currentYear');
+    if ($currentYearText) {
+        $currentYearText.textContent = new Date().getFullYear();
+    }
+});

src/dark-mode.js

@@ -0,0 +1,50 @@
+const themeToggleDarkIcon = document.getElementById('themeToggleDarkIcon');
+const themeToggleLightIcon = document.getElementById('themeToggleLightIcon');
+
+if (themeToggleDarkIcon && themeToggleLightIcon) {
+    // Change the icons inside the button based on previous settings
+    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        themeToggleLightIcon.classList.remove('hidden');
+    } else {
+        themeToggleDarkIcon.classList.remove('hidden');
+    }
+}
+
+const themeToggleBtn = document.getElementById('themeToggle');
+
+let event = new Event('dark-mode');
+
+if (themeToggleBtn) {
+
+    themeToggleBtn.addEventListener('click', function() {
+
+        // toggle icons
+        themeToggleDarkIcon.classList.toggle('hidden');
+        themeToggleLightIcon.classList.toggle('hidden');
+
+        // if set via local storage previously
+        if (localStorage.getItem('color-theme')) {
+            if (localStorage.getItem('color-theme') === 'light') {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('color-theme', 'dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('color-theme', 'light');
+            }
+
+        // if NOT set via local storage previously
+        } else {
+            if (document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('color-theme', 'light');
+            } else {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('color-theme', 'dark');
+            }
+        }
+
+        document.dispatchEvent(event);
+        
+    });
+
+}

src/navbar.js

@@ -0,0 +1,16 @@
+function toggleStickyNavbar() {
+    if (window.scrollY > 0) {
+        navbar.setAttribute('data-sticky', 'true');
+    } else {
+        navbar.setAttribute('data-sticky', 'false');
+    }
+}
+
+const navbar = document.querySelector("#mainNavbar");
+
+if(navbar) {
+    toggleStickyNavbar();
+    window.addEventListener("scroll", function () {
+        toggleStickyNavbar();
+    });
+}