-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
560 lines (506 loc) · 30.6 KB
/
index.html
File metadata and controls
560 lines (506 loc) · 30.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Meta Tags -->
<title>Ethan - Personal Portfolio & Blog</title>
<meta name="description" content="Welcome to Ethan's personal space on the web. Explore my bio, blog, insights, and get in touch.">
<meta name="keywords" content="Ethan, personal website, portfolio, blog, tech, design, contact">
<meta name="author" content="Ethan">
<meta name="theme-color" content="#121218"> <!-- Default dark theme color -->
<!-- Favicon Placeholder -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧑💻</text></svg>">
<link rel="stylesheet" href="assets/emoji.css">
<style>
/* 1. Reset & Base Styles */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.3s ease, color 0.3s
}
/* 2. Color Themes Variables */
:root {
/* Default: Dark Mode */
--primary-color: #a09eff;
--secondary-color: #c6caff; /* Lighter Purple - Used for H2/H3 in Dark Mode */
--surface-color-rgb: 60, 60, 80;
--background-color: #121218;
--text-color: #e8e8ff; /* Main text in Dark Mode */
--text-secondary: #a8a8d0; /* Muted text */
--heading-color: var(--secondary-color); /* Default heading color */
--highlight-color: var(--primary-color);
--border-color-light: rgba(255, 255, 255, 0.1);
--border-color-form: rgba(255, 255, 255, 0.2);
--shadow-color: rgba(0, 0, 0, 0.3);
--theme-toggle-icon-color: var(--text-secondary);
--theme-toggle-hover-bg: rgba(255, 255, 255, 0.1);
--glass-bg-opacity: 0.4;
--form-bg-opacity: 0.3;
--glass-blur: 10px;
--border-radius: 16px;
--section-padding: 6rem 2rem;
--content-max-width: 900px;
}
body.light-mode {
/* Light Mode Overrides */
--primary-color: #6750A4; /* Material You Purple */
--secondary-color: #625B71; /* Slightly different muted purple/gray for specific elements if needed */
--surface-color-rgb: 240, 238, 250; /* Light Gray-Purple for Glass */
--background-color: #FFFBFE; /* Almost White */
--text-color: #1D1B20; /* Very Dark Gray - Main text in Light Mode */
--text-secondary: #49454F; /* Medium Gray - Muted text */
--heading-color: #1D1B20; /* Default heading (H1) color */
--border-color-light: rgba(0, 0, 0, 0.12); /* Slightly stronger border */
--border-color-form: rgba(0, 0, 0, 0.3);
--shadow-color: rgba(103, 80, 164, 0.15);
--theme-toggle-icon-color: var(--text-secondary);
--theme-toggle-hover-bg: rgba(0, 0, 0, 0.05);
--glass-bg-opacity: 0.6; /* More opaque glass */
--form-bg-opacity: 0.8; /* More solid form fields */
}
/* 3. Typography */
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
line-height: 1.2;
color: var(--heading-color); /* Use heading variable */
font-weight: 600;
transition: color 0.3s ease;
}
/* Specific heading overrides for Light Mode */
body.light-mode h2, body.light-mode h3 {
color: var(--primary-color); /* Use accent color for H2/H3 */
}
h1 { font-size: clamp(2.5rem, 6vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
p { margin-bottom: 1rem; color: var(--text-color); transition: color 0.3s ease; } /* Use main text color */
/* Override p color specifically for dark mode where we want muted */
body:not(.light-mode) p { color: var(--text-secondary); }
/* Ensure hero paragraph is also muted in dark mode */
body:not(.light-mode) #bio p { color: var(--text-secondary); }
a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; }
a:hover, a:focus-visible {
color: var(--secondary-color); /* Use secondary for hover in dark */
text-decoration: underline; outline-offset: 2px;
}
body.light-mode a:hover, body.light-mode a:focus-visible {
color: #4A4458; /* Use a darker purple for hover in light */
}
:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 4px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
/* 4. Layout & Sections */
.container { max-width: var(--content-max-width); margin: 0 auto; padding: 0 1.5rem; }
main > section {
min-height: 80vh; padding: var(--section-padding); display: flex; flex-direction: column;
justify-content: center; border-bottom: 1px solid var(--border-color-light);
transition: border-color 0.3s ease;
}
main > section:last-child { border-bottom: none; min-height: auto; }
.section-content { max-width: var(--content-max-width); width: 100%; margin: 0 auto; }
/* 5. Navigation */
.main-nav {
position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 1rem 0;
transition: background-color 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease, border-bottom 0.4s ease;
background-color: transparent; border-bottom: 1px solid transparent;
}
.main-nav .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.nav-brand {
font-size: 1.5rem; font-weight: 700; color: var(--text-color); text-decoration: none;
transition: color 0.3s ease; flex-shrink: 0;
}
.nav-brand:hover, .nav-brand:focus-visible { color: var(--primary-color); text-decoration: none; }
.nav-links { list-style: none; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin: 0; }
.nav-links a {
color: var(--text-secondary); text-transform: uppercase; font-size: 0.9rem; font-weight: 500;
letter-spacing: 0.5px; padding: 0.5rem 0.8rem; border-radius: 8px;
transition: color 0.3s ease, background-color 0.3s ease; white-space: nowrap;
}
.nav-links a:hover, .nav-links a:focus-visible {
color: var(--text-color); background-color: rgba(var(--surface-color-rgb), 0.5); text-decoration: none;
}
.nav-links a.active { color: var(--text-color); font-weight: 700; }
/* Scrolled Nav State */
.main-nav.scrolled {
background-color: rgba(var(--surface-color-rgb), 0.75); /* Slightly more opaque nav */
backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--border-color-light); box-shadow: 0 2px 10px var(--shadow-color);
}
body.light-mode .main-nav.scrolled { background-color: rgba(var(--surface-color-rgb), 0.85); } /* Even more opaque in light */
/* Theme Toggle Button */
.theme-toggle {
background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%;
display: flex; align-items: center; justify-content: center; color: var(--theme-toggle-icon-color);
transition: background-color 0.3s ease, color 0.3s ease; flex-shrink: 0;
}
.theme-toggle:hover, .theme-toggle:focus-visible { background-color: var(--theme-toggle-hover-bg); color: var(--text-color); outline: none; }
.theme-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.light-mode .theme-toggle .moon-icon { display: none; }
.theme-toggle .sun-icon { display: none; }
.light-mode .theme-toggle .sun-icon { display: block; }
/* 6. Hero Section (Bio) */
#bio { min-height: 100vh; text-align: center; display: flex; align-items: center; }
#bio h1 { color: var(--text-color); margin-bottom: 0.5rem; } /* Use main text color for H1 */
#bio .subtitle {
font-size: clamp(1rem, 3vw, 1.3rem); color: var(--primary-color);
margin-bottom: 2rem; font-weight: 400;
}
/* 7. Glassmorphism Card Style */
.glass-card {
background: rgba(var(--surface-color-rgb), var(--glass-bg-opacity)); /* Use variable opacity */
backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: var(--border-radius); border: 1px solid var(--border-color-light);
padding: 2rem; box-shadow: 0 4px 20px var(--shadow-color); margin-bottom: 2rem;
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:last-child { margin-bottom: 0; }
/* 8. Blog Section Placeholder */
.blog-post-preview h3 { margin-bottom: 0.5rem; }
.blog-post-preview .date { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.5rem; display: block; }
/* 9. Contact Form */
.contact-form { display: grid; gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; }
.contact-form label { margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); font-weight: 500; }
.contact-form input, .contact-form textarea {
background-color: rgba(var(--surface-color-rgb), var(--form-bg-opacity)); /* Variable opacity */
border: 1px solid var(--border-color-form); border-radius: 8px; padding: 0.8rem 1rem;
font-size: 1rem; color: var(--text-color); font-family: inherit;
transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-secondary); opacity: 0.7; }
.contact-form input:focus, .contact-form textarea:focus {
outline: none; border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 160, 158, 255), 0.4);
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.submit-btn {
background-color: var(--primary-color); color: #FFFFFF; /* Always white text on primary btn */
border: none; padding: 0.9rem 1.8rem; font-size: 1rem; font-weight: 600;
border-radius: 8px; cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
justify-self: start;
}
.submit-btn:hover, .submit-btn:focus-visible {
/* Slightly darken primary color on hover? Or use secondary? Let's try darkening */
/* filter: brightness(90%); */ /* Filter approach can be inconsistent */
background-color: var(--secondary-color); /* Using secondary for hover consistency */
color: var(--text-color); /* Adjust text color if secondary is light */
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(var(--primary-color-rgb, 160, 158, 255), 0.3);
}
body.light-mode .submit-btn:hover, body.light-mode .submit-btn:focus-visible {
background-color: #4A4458; /* Darker purple on hover in light mode */
color: #FFFFFF; /* Keep text white */
}
/* 10. Animations (Scroll-Triggered Reveal) */
.animate-on-scroll {
opacity: 0; transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.section-content > * { transition-delay: calc(0.1s * var(--child-index, 0)); }
/* 11. Footer */
footer {
text-align: center; padding: 2rem 1rem; margin-top: 4rem; color: var(--text-secondary);
font-size: 0.9rem; border-top: 1px solid var(--border-color-light);
transition: border-color 0.3s ease, color 0.3s ease;
}
footer p { margin-bottom: 0.5rem; }
footer p:last-child { margin-bottom: 0; }
footer a { color: var(--text-secondary); } /* Keep links subtle */
footer a:hover, footer a:focus-visible { color: var(--primary-color); text-decoration: underline; }
/* Styling for the Creative Commons License - FIX ATTEMPT */
.cc-license {
font-size: 0.85em; color: var(--text-secondary); opacity: 0.8;
margin-top: 0.75rem; line-height: 1.5;
}
/* Force spans to inherit color - might help with -- -- bug */
.cc-license span {
color: inherit;
}
.cc-license a {
text-decoration: none; color: inherit; /* Inherit from p tag */
white-space: nowrap; transition: color 0.3s ease;
display: inline-block; /* Ensure layout consistency */
}
.cc-license a:hover, .cc-license a:focus-visible {
color: var(--primary-color); text-decoration: underline;
}
.cc-license img {
height: 18px !important; margin-left: 3px; vertical-align: text-bottom;
display: inline-block; opacity: 0.7; transition: opacity 0.3s ease;
}
.cc-license a:hover img, .cc-license a:focus-visible img { opacity: 1; }
/* 12. Responsiveness Improvements */
@media (max-width: 768px) {
html { font-size: 15px; }
:root { --section-padding: 4rem 1rem; }
.main-nav .container { flex-wrap: wrap; justify-content: space-between; }
.nav-links { order: 3; width: 100%; justify-content: center; margin-top: 0.8rem; gap: 0.2rem 0.5rem; }
.nav-links a { padding: 0.4rem 0.6rem; }
.theme-toggle { order: 2; }
h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.glass-card { padding: 1.5rem; }
.contact-form { gap: 1rem; }
.contact-form input, .contact-form textarea { width: 100%; }
.submit-btn { width: 100%; padding: 0.8rem; }
#bio { min-height: 90vh; }
}
@media (max-width: 480px) {
html { font-size: 14px; }
h1 { font-size: clamp(1.8rem, 9vw, 2.5rem); }
.nav-links { gap: 0.1rem 0.3rem; }
.nav-links a { font-size: 0.85rem; }
.glass-card { padding: 1.2rem; }
.cc-license img { height: 16px !important; }
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<nav class="main-nav" id="mainNav" aria-label="Main Navigation">
<div class="container">
<a href="#bio" class="nav-brand">Ethan</a>
<ul class="nav-links">
<li><a href="#bio" class="nav-link">Bio</a></li>
<li><a href="#blog" class="nav-link">Blog</a></li>
<li><a href="#info" class="nav-link">Info</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<!-- Theme Toggle Button -->
<button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode" aria-label="Toggle light/dark mode" aria-live="polite">
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.166 7.758a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"></path></svg>
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-3.51 1.713-6.622 4.431-8.528a.75.75 0 01.818.162z" clip-rule="evenodd"></path></svg>
</button>
</div>
</nav>
<!-- Main Content Area -->
<main>
<!-- Section 1: Bio / Hero -->
<section id="bio" aria-labelledby="bio-heading">
<div class="section-content animate-on-scroll">
<h1 id="bio-heading" style="--child-index: 1;">Ethan</h1>
<p class="subtitle" style="--child-index: 2;">[Creative Writer | Web Developer | Minecrafter | Part of <strong>#TeamPixel</strong> ]</p>
<p style="--child-index: 3;">[Welcome! This is my corner of the internet. I'm passionate about building elegant digital experiences and exploring the intersection of technology and design. Scroll down to learn more about my work and thoughts.]</p>
<!-- <img src="placeholder.jpg" alt="A picture of Ethan" style="width: 150px; height: 150px; border-radius: 50%; margin-top: 2rem; --child-index: 4; display: block; margin-left: auto; margin-right: auto;"> -->
</div>
</section>
<!-- Section 2: Blog -->
<section id="blog" aria-labelledby="blog-heading">
<div class="section-content animate-on-scroll">
<h2 id="blog-heading" style="--child-index: 1;">Blog / Thoughts</h2>
<article class="blog-post-preview glass-card" style="--child-index: 2;">
<h3><a href="blog-posts/showcase_001.html">Showcase: The Stormlander 📚</a></h3>
<span class="date">March 27th, 2025</span>
<p>Find out more about my new short story, The Stormlander.</p>
<a href="blog-posts/showcase_001.html">Read More →</a>
</article>
<article class="blog-post-preview glass-card" style="--child-index: 3;">
<h3><a href="blog-posts/welcome_to_posts.html">Welcome To The Blog!</a></h3>
<span class="date">March 27, 2025</span>
<p>Look here to find what to expect here.</p>
<a href="blog-posts/welcome_to_posts.html">Read More →</a>
</article>
<!-- Add more articles using the snippet provided previously, updating --child-index -->
<a href="other-pages/all-posts.html" style="--child-index: 4; margin-top: 2rem; text-align: center; display: block;">
[See all posts →]
</a>
</div>
</section>
<!-- Section 3: Info / About -->
<section id="info" aria-labelledby="info-heading">
<div class="section-content animate-on-scroll">
<h2 id="info-heading" style="--child-index: 1;">More Info / About Me</h2>
<div class="glass-card" style="--child-index: 2;">
<p>I am Ethan, a gamer/web developer. I make websites for <a href="Project-Fireplace.github.io/website" ><strong>Project Fireplace.</strong> </a> I own a Minecraft Realm too, which I play on in my spare time with my friends. By the way, I'm on <strong>#TeamPixel</strong> and <strong>#TeamAndroid</strong>. I am a good writer, and love to problem solve. I have an aspiration to be a <strong>YouTuber</strong> one day. </p>
</div>
</div>
</section>
<!-- Section 4: Contact Me -->
<section id="contact" aria-labelledby="contact-heading">
<div class="section-content animate-on-scroll">
<h2 id="contact-heading" style="--child-index: 1;">Get In Touch</h2>
<p style="--child-index: 2;">[Interested in collaborating, have a question, or just want to say hi? Feel free to reach out using the form below or connect with me on other platforms.]</p>
<form class="contact-form glass-card" action="mailto:ethan.h.patmore@gmail.com" method="GET" enctype="text/plain" style="--child-index: 3;">
<!-- Remember to change your.email@example.com -->
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required placeholder="your.email@example.com">
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Regarding...">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="body" required placeholder="Your message here..."></textarea>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container">
<!-- Copyright Line -->
<p>© <span id="currentYear"></span> Ethan. All Rights Reserved.</p>
<!-- Creative Commons License Line -->
<p class="cc-license" xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/">
<span property="dct:title">Ethan's Website</span> by <span property="cc:attributionName">Ethan</span> is licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-ND 4.0<img style="height:18px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt="CC icon"><img style="height:18px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt="BY icon"><img style="height:18px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt="NC icon"><img style="height:18px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1" alt="ND icon"></a>
</p>
<!-- Optional: Add social media links back if desired -->
<!-- <p style="margin-top: 0.75rem;"> ... links ... </p> -->
</div>
</footer>
<script>
// NO CHANGES to Javascript needed from previous version
document.addEventListener('DOMContentLoaded', () => {
const body = document.body;
const themeToggleButton = document.getElementById('themeToggle');
const themeMetaTag = document.querySelector('meta[name="theme-color"]');
const lightModeClass = 'light-mode';
const lightThemeColor = '#FFFBFE';
const darkThemeColor = '#121218';
// --- Theme Preference Handling ---
const currentTheme = localStorage.getItem('theme');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
const applyTheme = (theme) => {
if (theme === 'light') {
body.classList.add(lightModeClass);
themeMetaTag.setAttribute('content', lightThemeColor);
themeToggleButton.setAttribute('aria-label', 'Switch to dark mode');
themeToggleButton.setAttribute('aria-pressed', 'true');
} else {
body.classList.remove(lightModeClass);
themeMetaTag.setAttribute('content', darkThemeColor);
themeToggleButton.setAttribute('aria-label', 'Switch to light mode');
themeToggleButton.setAttribute('aria-pressed', 'false');
}
};
const toggleTheme = () => {
const newTheme = body.classList.contains(lightModeClass) ? 'dark' : 'light';
localStorage.setItem('theme', newTheme);
applyTheme(newTheme);
};
if (currentTheme) { applyTheme(currentTheme); }
else { applyTheme('dark'); /* Defaulting to dark */ }
themeToggleButton.addEventListener('click', toggleTheme);
// --- Navigation Bar Styling on Scroll ---
const nav = document.getElementById('mainNav');
const scrollThreshold = 50;
const handleNavScroll = () => {
if (window.scrollY > scrollThreshold) nav.classList.add('scrolled');
else nav.classList.remove('scrolled');
};
window.addEventListener('scroll', handleNavScroll, { passive: true });
handleNavScroll();
// --- Active Navigation Link Highlighting ---
const sections = document.querySelectorAll('main > section');
const navLinks = document.querySelectorAll('.nav-links a');
const handleActiveLink = () => {
let currentSectionId = '';
const offset = window.innerHeight * 0.4;
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= sectionTop - offset && window.scrollY < sectionTop + sectionHeight - offset) {
currentSectionId = section.getAttribute('id');
}
});
const nearBottom = (window.innerHeight + window.scrollY) >= document.body.offsetHeight - 50;
if (!currentSectionId && window.scrollY < window.innerHeight * 0.5) currentSectionId = sections[0]?.id || '';
if (!currentSectionId && nearBottom) currentSectionId = sections[sections.length - 1]?.id || '';
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${currentSectionId}`) link.classList.add('active');
});
};
let scrollTimeout;
window.addEventListener('scroll', () => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(handleActiveLink, 50);
}, { passive: true });
handleActiveLink();
// --- Scroll-Triggered Animations ---
const animatedElements = document.querySelectorAll('.animate-on-scroll');
const observerCallback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
// observer.unobserve(entry.target); // Optional: Stop observing
} else {
entry.target.classList.remove('is-visible'); // Optional: Reverse animation
}
});
};
const observer = new IntersectionObserver(observerCallback, { threshold: 0.1 });
animatedElements.forEach(el => {
observer.observe(el);
const children = el.querySelectorAll('.section-content > *');
children.forEach((child, index) => child.style.setProperty('--child-index', index));
});
// --- Update Footer Year ---
const yearSpan = document.getElementById('currentYear');
if (yearSpan) yearSpan.textContent = new Date().getFullYear();
// --- Smooth Scroll & Focus Management ---
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
const href = this.getAttribute('href');
if (href.startsWith('#')) {
const targetElement = document.querySelector(href);
if (targetElement) {
const focusTarget = targetElement.querySelector('h1, h2') || targetElement;
setTimeout(() => {
focusTarget.setAttribute('tabindex', '-1');
focusTarget.focus({ preventScroll: true });
focusTarget.removeAttribute('tabindex');
}, 800);
}
}
});
});
// --- Define Primary Color RGB for Box Shadow/Focus ---
function hexToRgb(hex) {
let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) { return r + r + g + g + b + b; });
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null;
}
const updatePrimaryRgbVariable = () => {
const primaryColorHex = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
const primaryColorRgb = hexToRgb(primaryColorHex);
if (primaryColorRgb) {
document.documentElement.style.setProperty('--primary-color-rgb', `${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}`);
}
};
updatePrimaryRgbVariable();
themeToggleButton.addEventListener('click', updatePrimaryRgbVariable);
}); // End DOMContentLoaded
</script>
</body>
</html>