Skip to content

Commit 8ba62c4

Browse files
jbamptonjbampton
authored
Add random theme and update bio page design (#222)
1 parent 83f05ee commit 8ba62c4

File tree

4 files changed

+235
-219
lines changed

4 files changed

+235
-219
lines changed

‎src/_includes/bio.njk‎

Lines changed: 90 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,89 +3,127 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>{{ name }} | Developer Bio</title>
7-
6+
<title>{{ name }} | {{ role }}</title>
87
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="stylesheet" href="/assets/css/style.css">
99
<script>
10-
tailwind.config = { darkMode: 'class' }
11-
12-
// Sync theme on load
13-
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
14-
document.documentElement.classList.add('dark');
15-
} else {
16-
document.documentElement.classList.remove('dark');
17-
}
10+
const saved = localStorage.getItem('theme');
11+
if (saved === 'dark') document.documentElement.classList.add('dark');
1812
</script>
19-
<link rel="stylesheet" href="/assets/css/style.css">
2013
</head>
21-
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen">
14+
<body class="min-h-screen">
2215

23-
<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">
16+
<header class="sticky top-0 z-50 bg-[var(--bg-page)]/80 backdrop-blur-md border-b border-[var(--border-color)] py-4">
2417
<div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
25-
26-
<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">
18+
<a href="/" class="group flex items-center gap-2 font-bold text-accent transition-colors">
2719
<span class="transition-transform group-hover:-translate-x-1">←</span>
28-
<span class="hidden sm:inline">Directory</span>
20+
<span>Directory</span>
2921
</a>
30-
31-
<div class="text-center">
32-
<h2 class="text-sm font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">Developer Profile</h2>
33-
<p class="font-bold text-slate-900 dark:text-white">{{ name }}</p>
22+
<div class="text-center hidden sm:block">
23+
<p class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)]">Viewing Profile</p>
24+
<p class="font-bold text-sm">{{ name }}</p>
3425
</div>
35-
36-
<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">
37-
<span class="dark:hidden text-indigo-600 text-lg">🌙</span>
38-
<span class="hidden dark:block text-yellow-400 text-lg">☀️</span>
26+
<button onclick="toggleTheme()" class="p-2.5 rounded-full bg-[var(--bg-card)] border border-[var(--border-color)] shadow-sm">
27+
<span id="theme-icon">🌙</span>
3928
</button>
40-
4129
</div>
4230
</header>
4331

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

51-
<div class="mt-4 flex flex-wrap gap-3">
52-
<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">
53-
{{ location }}{% if country %}, {{ country }}{% endif %}
54-
</span>
35+
<div class="lg:col-span-1 space-y-6">
36+
<div class="user-card p-8 rounded-3xl sticky top-24">
37+
<div class="mb-6">
38+
<h1 class="text-3xl font-black leading-tight">{{ name }}</h1>
39+
<p class="text-accent font-bold mt-1">{{ role }}</p>
5540
</div>
56-
</header>
5741

58-
<div class="border-t border-slate-100 dark:border-slate-800 pt-8">
59-
<h3 class="text-xs uppercase tracking-[0.2em] font-black text-slate-400 dark:text-slate-500 mb-4">About Me</h3>
60-
<div class="text-slate-600 dark:text-slate-300 leading-relaxed whitespace-pre-line text-lg">
42+
<div class="space-y-4 text-sm border-t border-[var(--border-color)] pt-6">
43+
<div class="flex items-center gap-3">
44+
<span class="text-lg">📍</span>
45+
<span class="text-[var(--text-muted)]">{{ location }}{% if country %}, {{ country }}{% endif %}</span>
46+
</div>
47+
48+
{% if email %}
49+
<div class="flex items-center gap-3 group cursor-pointer" onclick="copyToClipboard('{{ email }}', this)">
50+
<span class="text-lg">✉️</span>
51+
<span class="text-[var(--text-muted)] group-hover:text-accent truncate">{{ email }}</span>
52+
<span class="hidden group-hover:inline text-[10px] bg-accent text-white px-2 py-0.5 rounded">Copy</span>
53+
</div>
54+
{% endif %}
55+
56+
{% if website %}
57+
<div class="flex items-center gap-3">
58+
<span class="text-lg">🔗</span>
59+
<a href="{{ website }}" target="_blank" class="text-accent font-bold hover:underline truncate">{{ website | replace("https://", "") }}</a>
60+
</div>
61+
{% endif %}
62+
</div>
63+
64+
<div class="mt-8 pt-8 border-t border-[var(--border-color)]">
65+
<h3 class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] mb-4">Connect</h3>
66+
<div class="grid grid-cols-2 gap-3">
67+
{% if github %}
68+
<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">
69+
<span class="font-bold text-xs">GitHub</span>
70+
</a>
71+
{% endif %}
72+
{% if linkedin %}
73+
<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">
74+
<span class="font-bold text-xs text-[#0077b5]">LinkedIn</span>
75+
</a>
76+
{% endif %}
77+
{% if twitter %}
78+
<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">
79+
<span class="font-bold text-xs">Twitter</span>
80+
</a>
81+
{% endif %}
82+
{% if instagram %}
83+
<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">
84+
<span class="font-bold text-xs text-pink-500">Instagram</span>
85+
</a>
86+
{% endif %}
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<div class="lg:col-span-2 space-y-8">
93+
<div class="user-card p-8 sm:p-12 rounded-3xl">
94+
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
95+
<span class="w-8 h-[2px] bg-accent"></span> Professional Bio
96+
</h2>
97+
<div class="text-[var(--text-main)] text-lg leading-relaxed whitespace-pre-line">
6198
{{ bio }}
6299
</div>
63100
</div>
64101

65-
<div class="mt-10">
66-
<h3 class="text-xs uppercase tracking-[0.2em] font-black text-slate-400 dark:text-slate-500 mb-4">Tech Stack</h3>
67-
<div class="flex flex-wrap gap-2">
102+
<div class="user-card p-8 rounded-3xl">
103+
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6">Technologies</h2>
104+
<div class="flex flex-wrap gap-3">
68105
{% set skills = languages.split(' ') %}
69106
{% for skill in skills %}
70-
<span class="px-3 py-1.5 bg-slate-900 dark:bg-slate-700 text-white text-xs font-bold rounded-lg uppercase">
107+
<span class="px-4 py-2 bg-accent text-white text-xs font-black rounded-xl uppercase tracking-widest shadow-sm">
71108
{{ skill }}
72109
</span>
73110
{% endfor %}
74111
</div>
75112
</div>
76-
77-
<div class="mt-12 pt-8 border-t border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row gap-4">
78-
<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">
79-
GitHub Profile
80-
</a>
81-
<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">
82-
LinkedIn Profile
83-
</a>
84-
</div>
85113
</div>
114+
86115
</div>
87116
</main>
88117

89118
<script src="/assets/js/script.js"></script>
119+
<script>
120+
// Specific helper for the bio page email copy
121+
function copyToClipboard(text, el) {
122+
navigator.clipboard.writeText(text);
123+
const span = el.querySelector('span:last-child');
124+
span.innerText = 'Copied!';
125+
setTimeout(() => span.innerText = 'Copy', 2000);
126+
}
127+
</script>
90128
</body>
91129
</html>

‎src/assets/css/style.css‎

Lines changed: 47 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,59 @@
1-
/* --- 1. CORE ANIMATIONS --- */
2-
3-
/* Glow effect for cards and random selection highlight */
4-
@keyframes glow-pulse {
5-
0% {
6-
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
7-
}
8-
70% {
9-
box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
10-
}
11-
100% {
12-
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
13-
}
14-
}
15-
16-
/* Apply pulse on manual hover (class-based for performance) */
17-
.card-glow:hover,
18-
.highlight-pulse {
19-
animation: glow-pulse 2s infinite;
20-
}
21-
22-
/* State for the JS "Surprise Me" selection */
23-
.highlight-pulse {
24-
border-color: #6366f1 !important; /* Tailwind Indigo-500 */
25-
transform: translateY(-8px);
26-
}
27-
28-
/* --- 2. THEME TRANSITIONS --- */
29-
30-
/* Ensures background and text colors change smoothly when toggling themes */
1+
:root {
2+
/* Default Light Mode */
3+
--bg-page: #f8fafc;
4+
--bg-card: #ffffff;
5+
--bg-footer: #f1f5f9;
6+
--text-main: #0f172a;
7+
--text-muted: #64748b;
8+
--border-color: #e2e8f0;
9+
--accent: #4f46e5;
10+
}
11+
12+
/* Dark Mode Class */
13+
.dark {
14+
--bg-page: #020617;
15+
--bg-card: #0f172a;
16+
--bg-footer: #1e293b50;
17+
--text-main: #f8fafc;
18+
--text-muted: #94a3b8;
19+
--border-color: #1e293b;
20+
--accent: #818cf8;
21+
}
22+
23+
/* Base Styles */
3124
body {
32-
transition: background-color 0.3s ease, color 0.3s ease;
25+
background-color: var(--bg-page);
26+
color: var(--text-main);
27+
transition: background-color 0.4s ease, color 0.4s ease;
3328
}
3429

35-
/* Apply transitions to containers and borders to prevent "flashing" */
36-
.user-card,
37-
header,
38-
main,
39-
.bg-white,
40-
.bg-slate-50,
41-
.bg-slate-900,
42-
.bg-slate-950,
43-
.border-slate-200,
44-
.border-slate-800 {
45-
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
30+
.user-card {
31+
background-color: var(--bg-card);
32+
border: 1px solid var(--border-color);
33+
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
4634
}
4735

48-
/* --- 3. CUSTOM SCROLLBAR --- */
49-
50-
/* Light mode scrollbar (Subtle) */
51-
::-webkit-scrollbar {
52-
width: 8px;
53-
}
54-
55-
::-webkit-scrollbar-track {
56-
background: #f1f5f9; /* slate-100 */
36+
.card-footer {
37+
background-color: var(--bg-footer);
38+
border-top: 1px solid var(--border-color);
5739
}
5840

59-
::-webkit-scrollbar-thumb {
60-
background: #cbd5e1; /* slate-300 */
61-
border-radius: 10px;
62-
}
41+
/* Accent Color Overrides */
42+
.text-accent { color: var(--accent); }
43+
.bg-accent { background-color: var(--accent); }
44+
.border-accent { border-color: var(--accent); }
6345

64-
::-webkit-scrollbar-thumb:hover {
65-
background: #94a3b8; /* slate-400 */
66-
}
67-
68-
/* Dark mode scrollbar (Integrated with UI) */
69-
.dark ::-webkit-scrollbar {
70-
width: 8px;
71-
}
72-
73-
.dark ::-webkit-scrollbar-track {
74-
background: #020617; /* slate-950 */
75-
}
76-
77-
.dark ::-webkit-scrollbar-thumb {
78-
background: #1e293b; /* slate-800 */
79-
border-radius: 10px;
80-
border: 2px solid #020617; /* adds padding effect */
81-
}
82-
83-
.dark ::-webkit-scrollbar-thumb:hover {
84-
background: #334155; /* slate-700 */
85-
}
86-
87-
/* --- 4. UTILITY OVERRIDES --- */
88-
89-
/* Fix for smooth scrolling behavior */
90-
html {
91-
scroll-behavior: smooth;
46+
/* Animations */
47+
@keyframes glow-pulse {
48+
0% { box-shadow: 0 0 0 0 var(--accent); opacity: 0.7; }
49+
70% { box-shadow: 0 0 0 15px transparent; }
50+
100% { box-shadow: 0 0 0 0 transparent; }
9251
}
9352

94-
/* Prevents the card content from shifting when the "→" moves */
95-
.inline-block {
96-
display: inline-block;
97-
vertical-align: middle;
53+
.highlight-pulse {
54+
animation: glow-pulse 2s infinite;
55+
transform: translateY(-8px);
56+
border-color: var(--accent) !important;
9857
}
9958

100-
/* Ensure images/icons in dark mode aren't too bright */
101-
.dark img {
102-
filter: brightness(.8) contrast(1.2);
103-
}
59+
html { scroll-behavior: smooth; }

0 commit comments

Comments
 (0)