diff --git a/src/_includes/bio.njk b/src/_includes/bio.njk index 7f5a21b2..1633a4d4 100644 --- a/src/_includes/bio.njk +++ b/src/_includes/bio.njk @@ -3,89 +3,127 @@ - {{ name }} | Developer Bio - + {{ name }} | {{ role }} + - - + -
+
- - + ← - + Directory - -
-

Developer Profile

-

{{ name }}

+ - - -
-
-
-
-
-

{{ name }}

-

{{ role }}

+
+
-
- - {{ location }}{% if country %}, {{ country }}{% endif %} - +
+
+
+

{{ name }}

+

{{ role }}

-
-
-

About Me

-
+
+
+ 📍 + {{ location }}{% if country %}, {{ country }}{% endif %} +
+ + {% if email %} +
+ ✉️ + {{ email }} + +
+ {% endif %} + + {% if website %} +
+ 🔗 + {{ website | replace("https://", "") }} +
+ {% endif %} +
+ +
+

Connect

+
+ {% if github %} + + GitHub + + {% endif %} + {% if linkedin %} + + LinkedIn + + {% endif %} + {% if twitter %} + + Twitter + + {% endif %} + {% if instagram %} + + Instagram + + {% endif %} +
+
+
+
+ +
+
+

+ Professional Bio +

+
{{ bio }}
-
-

Tech Stack

-
+
+

Technologies

+
{% set skills = languages.split(' ') %} {% for skill in skills %} - + {{ skill }} {% endfor %}
- -
- - GitHub Profile - - - LinkedIn Profile - -
+
+ diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 2604b277..db4f42dd 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -1,103 +1,59 @@ -/* --- 1. CORE ANIMATIONS --- */ - -/* Glow effect for cards and random selection highlight */ -@keyframes glow-pulse { - 0% { - box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); - } - 70% { - box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); - } -} - -/* Apply pulse on manual hover (class-based for performance) */ -.card-glow:hover, -.highlight-pulse { - animation: glow-pulse 2s infinite; -} - -/* State for the JS "Surprise Me" selection */ -.highlight-pulse { - border-color: #6366f1 !important; /* Tailwind Indigo-500 */ - transform: translateY(-8px); -} - -/* --- 2. THEME TRANSITIONS --- */ - -/* Ensures background and text colors change smoothly when toggling themes */ +:root { + /* Default Light Mode */ + --bg-page: #f8fafc; + --bg-card: #ffffff; + --bg-footer: #f1f5f9; + --text-main: #0f172a; + --text-muted: #64748b; + --border-color: #e2e8f0; + --accent: #4f46e5; +} + +/* Dark Mode Class */ +.dark { + --bg-page: #020617; + --bg-card: #0f172a; + --bg-footer: #1e293b50; + --text-main: #f8fafc; + --text-muted: #94a3b8; + --border-color: #1e293b; + --accent: #818cf8; +} + +/* Base Styles */ body { - transition: background-color 0.3s ease, color 0.3s ease; + background-color: var(--bg-page); + color: var(--text-main); + transition: background-color 0.4s ease, color 0.4s ease; } -/* Apply transitions to containers and borders to prevent "flashing" */ -.user-card, -header, -main, -.bg-white, -.bg-slate-50, -.bg-slate-900, -.bg-slate-950, -.border-slate-200, -.border-slate-800 { - transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; +.user-card { + background-color: var(--bg-card); + border: 1px solid var(--border-color); + transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } -/* --- 3. CUSTOM SCROLLBAR --- */ - -/* Light mode scrollbar (Subtle) */ -::-webkit-scrollbar { - width: 8px; -} - -::-webkit-scrollbar-track { - background: #f1f5f9; /* slate-100 */ +.card-footer { + background-color: var(--bg-footer); + border-top: 1px solid var(--border-color); } -::-webkit-scrollbar-thumb { - background: #cbd5e1; /* slate-300 */ - border-radius: 10px; -} +/* Accent Color Overrides */ +.text-accent { color: var(--accent); } +.bg-accent { background-color: var(--accent); } +.border-accent { border-color: var(--accent); } -::-webkit-scrollbar-thumb:hover { - background: #94a3b8; /* slate-400 */ -} - -/* Dark mode scrollbar (Integrated with UI) */ -.dark ::-webkit-scrollbar { - width: 8px; -} - -.dark ::-webkit-scrollbar-track { - background: #020617; /* slate-950 */ -} - -.dark ::-webkit-scrollbar-thumb { - background: #1e293b; /* slate-800 */ - border-radius: 10px; - border: 2px solid #020617; /* adds padding effect */ -} - -.dark ::-webkit-scrollbar-thumb:hover { - background: #334155; /* slate-700 */ -} - -/* --- 4. UTILITY OVERRIDES --- */ - -/* Fix for smooth scrolling behavior */ -html { - scroll-behavior: smooth; +/* Animations */ +@keyframes glow-pulse { + 0% { box-shadow: 0 0 0 0 var(--accent); opacity: 0.7; } + 70% { box-shadow: 0 0 0 15px transparent; } + 100% { box-shadow: 0 0 0 0 transparent; } } -/* Prevents the card content from shifting when the "→" moves */ -.inline-block { - display: inline-block; - vertical-align: middle; +.highlight-pulse { + animation: glow-pulse 2s infinite; + transform: translateY(-8px); + border-color: var(--accent) !important; } -/* Ensure images/icons in dark mode aren't too bright */ -.dark img { - filter: brightness(.8) contrast(1.2); -} +html { scroll-behavior: smooth; } diff --git a/src/assets/js/script.js b/src/assets/js/script.js index d42bd747..b627f722 100644 --- a/src/assets/js/script.js +++ b/src/assets/js/script.js @@ -1,33 +1,64 @@ -// THEME TOGGLE LOGIC +/** + * THEME LOGIC: Light -> Dark -> Random + */ function toggleTheme() { - const html = document.documentElement; - const isDark = html.classList.toggle('dark'); - localStorage.setItem('theme', isDark ? 'dark' : 'light'); + const currentTheme = localStorage.getItem('theme') || 'light'; + let nextTheme; + + if (currentTheme === 'light') nextTheme = 'dark'; + else if (currentTheme === 'dark') nextTheme = 'random'; + else nextTheme = 'light'; + + applyTheme(nextTheme); } -// RANDOM USER SCROLL LOGIC -function scrollToRandomUser() { - const cards = document.querySelectorAll('.user-card'); - if (cards.length === 0) return; +function applyTheme(theme) { + const html = document.documentElement; + localStorage.setItem('theme', theme); - // Clear previous highlights - cards.forEach(card => card.classList.remove('highlight-pulse')); + // Reset all custom properties and classes + html.classList.remove('dark'); + const props = ['--bg-page', '--bg-card', '--bg-footer', '--text-main', '--text-muted', '--border-color', '--accent']; + props.forEach(p => html.style.removeProperty(p)); - // Pick random - const randomIndex = Math.floor(Math.random() * cards.length); - const selectedCard = cards[randomIndex]; + if (theme === 'dark') { + html.classList.add('dark'); + } else if (theme === 'random') { + // Generate a random Hue (0-360) + const h = Math.floor(Math.random() * 360); - // Scroll with offset for sticky header - selectedCard.scrollIntoView({ - behavior: 'smooth', - block: 'start' - }); + // Apply a cohesive HSL palette + html.style.setProperty('--bg-page', `hsl(${h}, 40%, 8%)`); + html.style.setProperty('--bg-card', `hsl(${h}, 35%, 12%)`); + html.style.setProperty('--bg-footer', `hsl(${h}, 35%, 15%)`); + html.style.setProperty('--text-main', `hsl(${h}, 20%, 95%)`); + html.style.setProperty('--text-muted', `hsl(${h}, 15%, 70%)`); + html.style.setProperty('--border-color', `hsl(${h}, 30%, 20%)`); + html.style.setProperty('--accent', `hsl(${(h + 150) % 360}, 80%, 65%)`); // Harmonious contrast + } - // Visual feedback - selectedCard.classList.add('highlight-pulse'); + updateIcon(theme); +} + +function updateIcon(theme) { + const icon = document.getElementById('theme-icon'); + if (!icon) return; + if (theme === 'light') icon.innerText = '🌙'; // Next is Dark + else if (theme === 'dark') icon.innerText = '🎲'; // Next is Random + else icon.innerText = '☀️'; // Next is Light +} - // Remove highlight after 3.5 seconds - setTimeout(() => { - selectedCard.classList.remove('highlight-pulse'); - }, 3500); +/** + * SURPRISE ME LOGIC + */ +function scrollToRandomUser() { + const cards = document.querySelectorAll('.user-card'); + cards.forEach(c => c.classList.remove('highlight-pulse')); + const randomCard = cards[Math.floor(Math.random() * cards.length)]; + randomCard.scrollIntoView({ behavior: 'smooth', block: 'start' }); + randomCard.classList.add('highlight-pulse'); + setTimeout(() => randomCard.classList.remove('highlight-pulse'), 3500); } + +// Initial Run +applyTheme(localStorage.getItem('theme') || 'light'); diff --git a/src/index.njk b/src/index.njk index f75d5eaf..e205537e 100644 --- a/src/index.njk +++ b/src/index.njk @@ -7,46 +7,37 @@ layout: false Developer Directory - + - - - - -
-
+ -
-

Our Developers

-

Global talent directory

-
+
+
-
-
@@ -55,19 +46,14 @@ layout: false
{% for person in collections.randomPeople %} -
- +
-

- {{ person.data.name }} -

-

- {{ person.data.role }} -

+

{{ person.data.name }}

+

{{ person.data.role }}

- + {{ person.data.location }}{% if person.data.country %}, {{ person.data.country }}{% endif %}
@@ -75,26 +61,31 @@ layout: false
{% set skills = person.data.languages.split(' ') %} {% for skill in skills %} - - {{ skill }} - + {{ skill }} {% endfor %}
-
- "{{ person.data.bio | truncate(110) }}" -
+

"{{ person.data.bio | truncate(120) }}"

-
-
- GitHub -
- LinkedIn +
+
+ {% if person.data.github %} + + GitHub + + {% endif %} + + {% if person.data.linkedin %} + + LinkedIn + + {% endif %}
- + + Full Bio - → + →