Skip to content

Add random theme and update bio page design #222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jbampton merged 1 commit into from
Jan 25, 2026
Merged

Add random theme and update bio page design #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 90 additions & 52 deletions src/_includes/bio.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,89 +3,127 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ name }} | Developer Bio</title>

<title>{{ name }} | {{ role }}</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="/assets/css/style.css">
<script>
tailwind.config = { darkMode: 'class' }

// Sync theme on load
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
const saved = localStorage.getItem('theme');
if (saved === 'dark') document.documentElement.classList.add('dark');
</script>
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen">
<body class="min-h-screen">

<header class="sticky top-0 z-50 bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 py-4 mb-12">
<header class="sticky top-0 z-50 bg-[var(--bg-page)]/80 backdrop-blur-md border-b border-[var(--border-color)] py-4">
<div class="max-w-7xl mx-auto px-4 flex justify-between items-center">

<a href="/" class="group flex items-center gap-2 font-bold text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors">
<a href="/" class="group flex items-center gap-2 font-bold text-accent transition-colors">
<span class="transition-transform group-hover:-translate-x-1">←</span>
<span class="hidden sm:inline">Directory</span>
<span>Directory</span>
</a>

<div class="text-center">
<h2 class="text-sm font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">Developer Profile</h2>
<p class="font-bold text-slate-900 dark:text-white">{{ name }}</p>
<div class="text-center hidden sm:block">
<p class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)]">Viewing Profile</p>
<p class="font-bold text-sm">{{ name }}</p>
</div>

<button onclick="toggleTheme()" class="p-2.5 rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-sm hover:bg-slate-100 dark:hover:bg-slate-700 transition-all active:scale-90">
<span class="dark:hidden text-indigo-600 text-lg">🌙</span>
<span class="hidden dark:block text-yellow-400 text-lg">☀️</span>
<button onclick="toggleTheme()" class="p-2.5 rounded-full bg-[var(--bg-card)] border border-[var(--border-color)] shadow-sm">
<span id="theme-icon">🌙</span>
</button>

</div>
</header>

<main class="max-w-3xl mx-auto px-4 pb-24">
<div class="bg-white dark:bg-slate-900 rounded-3xl shadow-xl overflow-hidden border border-slate-200 dark:border-slate-800">
<div class="p-8 sm:p-12">
<header class="mb-8">
<h1 class="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mb-2">{{ name }}</h1>
<p class="text-xl sm:text-2xl text-indigo-600 dark:text-indigo-400 font-medium">{{ role }}</p>
<main class="max-w-5xl mx-auto px-4 py-12">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

<div class="mt-4 flex flex-wrap gap-3">
<span class="bg-slate-100 dark:bg-slate-800 px-4 py-1.5 rounded-full text-xs font-bold text-slate-600 dark:text-slate-400 uppercase tracking-wide">
{{ location }}{% if country %}, {{ country }}{% endif %}
</span>
<div class="lg:col-span-1 space-y-6">
<div class="user-card p-8 rounded-3xl sticky top-24">
<div class="mb-6">
<h1 class="text-3xl font-black leading-tight">{{ name }}</h1>
<p class="text-accent font-bold mt-1">{{ role }}</p>
</div>
</header>

<div class="border-t border-slate-100 dark:border-slate-800 pt-8">
<h3 class="text-xs uppercase tracking-[0.2em] font-black text-slate-400 dark:text-slate-500 mb-4">About Me</h3>
<div class="text-slate-600 dark:text-slate-300 leading-relaxed whitespace-pre-line text-lg">
<div class="space-y-4 text-sm border-t border-[var(--border-color)] pt-6">
<div class="flex items-center gap-3">
<span class="text-lg">📍</span>
<span class="text-[var(--text-muted)]">{{ location }}{% if country %}, {{ country }}{% endif %}</span>
</div>

{% if email %}
<div class="flex items-center gap-3 group cursor-pointer" onclick="copyToClipboard('{{ email }}', this)">
<span class="text-lg">✉️</span>
<span class="text-[var(--text-muted)] group-hover:text-accent truncate">{{ email }}</span>
<span class="hidden group-hover:inline text-[10px] bg-accent text-white px-2 py-0.5 rounded">Copy</span>
</div>
{% endif %}

{% if website %}
<div class="flex items-center gap-3">
<span class="text-lg">🔗</span>
<a href="{{ website }}" target="_blank" class="text-accent font-bold hover:underline truncate">{{ website | replace("https://", "") }}</a>
</div>
{% endif %}
</div>

<div class="mt-8 pt-8 border-t border-[var(--border-color)]">
<h3 class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] mb-4">Connect</h3>
<div class="grid grid-cols-2 gap-3">
{% if github %}
<a href="https://github.com/{{ github }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs">GitHub</span>
</a>
{% endif %}
{% if linkedin %}
<a href="{{ linkedin }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs text-[#0077b5]">LinkedIn</span>
</a>
{% endif %}
{% if twitter %}
<a href="{{ twitter }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs">Twitter</span>
</a>
{% endif %}
{% if instagram %}
<a href="{{ instagram }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs text-pink-500">Instagram</span>
</a>
{% endif %}
</div>
</div>
</div>
</div>

<div class="lg:col-span-2 space-y-8">
<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent"></span> Professional Bio
</h2>
<div class="text-[var(--text-main)] text-lg leading-relaxed whitespace-pre-line">
{{ bio }}
</div>
</div>

<div class="mt-10">
<h3 class="text-xs uppercase tracking-[0.2em] font-black text-slate-400 dark:text-slate-500 mb-4">Tech Stack</h3>
<div class="flex flex-wrap gap-2">
<div class="user-card p-8 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">Technologies</h2>
<div class="flex flex-wrap gap-3">
{% set skills = languages.split(' ') %}
{% for skill in skills %}
<span class="px-3 py-1.5 bg-slate-900 dark:bg-slate-700 text-white text-xs font-bold rounded-lg uppercase">
<span class="px-4 py-2 bg-accent text-white text-xs font-black rounded-xl uppercase tracking-widest shadow-sm">
{{ skill }}
</span>
{% endfor %}
</div>
</div>

<div class="mt-12 pt-8 border-t border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row gap-4">
<a href="https://github.com/{{ github }}" target="_blank" rel="noopener" class="flex-1 text-center bg-slate-900 dark:bg-white dark:text-slate-900 text-white px-6 py-4 rounded-2xl font-bold hover:opacity-90 transition-opacity">
GitHub Profile
</a>
<a href="{{ linkedin }}" target="_blank" rel="noopener" class="flex-1 text-center bg-blue-600 text-white px-6 py-4 rounded-2xl font-bold hover:bg-blue-700 transition-colors">
LinkedIn Profile
</a>
</div>
</div>

</div>
</main>

<script src="/assets/js/script.js"></script>
<script>
// Specific helper for the bio page email copy
function copyToClipboard(text, el) {
navigator.clipboard.writeText(text);
const span = el.querySelector('span:last-child');
span.innerText = 'Copied!';
setTimeout(() => span.innerText = 'Copy', 2000);
}
</script>
</body>
</html>
138 changes: 47 additions & 91 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; }
Loading
Loading