landigf.github.io/blog.html at main · landigf/landigf.github.io · GitHub

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
<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <!-- begin SEO -->
  <title>Blog Posts - Gennaro Francesco Landi</title>
  <meta property="og:locale" content="en-US">
  <meta property="og:site_name" content="Gennaro Francesco Landi">
  <meta property="og:title" content="Blog Posts - Gennaro Francesco Landi">
  <link rel="canonical" href="https://landigf.github.io/blog.html">
  <meta property="og:url" content="https://landigf.github.io/blog.html">
  <meta property="og:description" content="Blog posts by Gennaro Francesco Landi - Computer Engineering Student">

  <script type="application/ld+json">
  {
    "@context" : "http://schema.org",
    "@type" : "Person",
    "name" : "Gennaro Francesco Landi",
    "url" : "https://landigf.github.io",
    "sameAs" : ["https://www.linkedin.com/in/landigf", "https://github.com/landigf"]
  }
  </script>
  <!-- end SEO -->

  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script>
    document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
  </script>

  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon-32x32.png" type="image/png">
  <meta http-equiv="cleartype" content="on">

  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
  <!--[if lt IE 9]>
  <div class="notice--danger align-center" style="margin: 0;">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div>
  <![endif]-->

  <!-- Top Navigation Bar -->
  <nav class="top-nav">
    <div class="nav-container">
      <a href="index.html" class="nav-brand">Master's Student</a>
      <div class="nav-links">
        <a href="blog.html" class="active">Blog Posts</a>
        <a href="eth-materials.html">ETH Materials</a>
        <a href="https://drive.google.com/file/d/1I1sEeulfPVFbF_8xYnmB6Xys3JaatR5r/view?usp=sharing" target="_blank">CV</a>
        <button id="theme-toggle" class="theme-toggle" title="Toggle dark mode">
          <i class="fas fa-moon"></i>
        </button>
      </div>
    </div>
  </nav>

  <!-- Main Content Container -->
  <div class="main-container">
    <!-- Left Sidebar with Profile -->
    <aside class="sidebar">
      <div class="profile-section">
        <div class="profile-image">
          <img src="profile_pic.png" alt="Gennaro Francesco Landi">
        </div>
        <div class="profile-info">
          <h2>Gennaro Francesco</h2>
          <div class="contact-info">
            <div class="contact-item">
              <i class="fas fa-map-marker-alt"></i>
              <span>Zurich, Switzerland</span>
            </div>
            <div class="contact-item">
              <i class="fas fa-envelope"></i>
              <a href="mailto:landigf.work@gmail.com">Email</a>
            </div>
            <div class="contact-item">
              <i class="fab fa-linkedin"></i>
              <a href="https://www.linkedin.com/in/landigf" target="_blank">LinkedIn</a>
            </div>
            <div class="contact-item">
              <i class="fab fa-github"></i>
              <a href="https://github.com/landigf" target="_blank">Github</a>
            </div>
            <div class="contact-item">
              <i class="fas fa-envelope-open-text"></i>
              <a href="https://landigf.github.io/Broletter/" target="_blank">Broletter</a>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main Content Area -->
    <main class="content">
      <div class="content-header">
        <h1>Blog Posts</h1>
        <div class="blog-disclaimer">
          <p><em>I've always wanted to write a blog but never convinced myself I was capable of it. However, I honestly use LLMs to quickly transform my thoughts into words - at least something remains! So non-technical posts will be co-authored by some model :)</em></p>
        </div>

        <!-- Tag Filter System -->
        <div class="tag-filter-container">
          <h3>Filter by topics:</h3>
          <div class="tag-filters">
            <button class="tag-filter active" data-tag="all">
              <i class="fas fa-globe"></i>
              All Posts
            </button>
            <button class="tag-filter" data-tag="Big Data">
              <i class="fas fa-database"></i>
              Big Data
            </button>
            <button class="tag-filter" data-tag="Competitive Programming">
              <i class="fas fa-code"></i>
              Competitive Programming
            </button>
            <button class="tag-filter" data-tag="ETH Zurich">
              <i class="fas fa-university"></i>
              ETH Zurich
            </button>
            <button class="tag-filter" data-tag="University">
              <i class="fas fa-graduation-cap"></i>
              University Life
            </button>
            <button class="tag-filter" data-tag="Algorithms">
              <i class="fas fa-project-diagram"></i>
              Algorithms
            </button>
            <button class="tag-filter" data-tag="Data Management">
              <i class="fas fa-server"></i>
              Data Management
            </button>
            <button class="tag-filter" data-tag="Machine Learning">
              <i class="fas fa-brain"></i>
              Machine Learning
            </button>
            <button class="tag-filter" data-tag="Probabilistic AI">
              <i class="fas fa-chart-line"></i>
              Probabilistic AI
            </button>
            <button class="tag-filter" data-tag="Bayesian">
              <i class="fas fa-balance-scale"></i>
              Bayesian Methods
            </button>
            <button class="tag-filter" data-tag="Networking">
              <i class="fas fa-network-wired"></i>
              Networking
            </button>
            <button class="tag-filter" data-tag="Resources">
              <i class="fas fa-book"></i>
              Learning Resources
            </button>
          </div>
        </div>
      </div>

      <!-- Blog Posts Section -->
      <section class="blog-section">
        <div class="blog-post" data-tags="Travel,Maps,Just for Fun,Personal">
          <div class="post-meta">
            <span class="post-date">3 June 2026</span>
            <span class="post-category">Just for Fun</span>
          </div>
          <h2 class="post-title">
            <a href="world-bucket-list.html">The Ultimate World Bucket List: How Many Weekends to See the Whole Planet?</a>
          </h2>
          <div class="post-excerpt">
            <p>🌍 A little side project: I mapped every iconic place and experience on Earth I'd love to see into one interactive dashboard — counted in "weekend-units" so the whole planet becomes a checklist you can actually plan.</p>
            <p>The verdict? <strong>~154 destinations, ~199 weekend-units, ~$185k</strong> — roughly 4 years if you travelled every single weekend. It's got an interactive world map, live progress you can tick off (saved in your browser), and local know-how for each spot: what to eat, a custom to know, and the faux-pas to avoid.</p>
          </div>
          <div class="post-footer">
            <a href="world-bucket-list.html" class="read-more">Open the bucket list →</a>
            <div class="post-tags">
              <span class="tag">Travel</span>
              <span class="tag">Maps</span>
              <span class="tag">Just for Fun</span>
              <span class="tag">Personal</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="Hackathon,Procurement,Fuzzy Logic,Azure,Metaflow">
          <div class="post-meta">
            <span class="post-date">23 March 2026</span>
            <span class="post-category">Projects</span>
          </div>
          <h2 class="post-title">
            <a href="starthack-2026-auditchain.html">We Won START Hack 2026 with AuditChain: Fuzzy Logic, Metaflow, and an Audit-Ready Procurement Agent</a>
          </h2>
          <div class="post-excerpt">
            <p>How our team won START Hack 2026 by building <strong>AuditChain</strong>, an autonomous procurement decision engine that keeps the LLM on parsing and explanation duty while the actual decision path stays deterministic, auditable, and boring in exactly the right places.</p>
            <p>The post covers the real architecture from the hackathon solution: FastAPI, React, Metaflow observability, Azure-facing deployment proxies, fuzzy handling of borderline procurement cases, and why this problem is much more about decision discipline than flashy AI demos.</p>
            <p>Also included: the prize-stage photos, the officially nonchalant photo, and a defense of fuzzy logic that survived both a hackathon jury and my own skepticism.</p>
          </div>
          <div class="post-footer">
            <a href="starthack-2026-auditchain.html" class="read-more">Read full post →</a>
            <div class="post-tags">
              <span class="tag">Hackathon</span>
              <span class="tag">Procurement</span>
              <span class="tag">Fuzzy Logic</span>
              <span class="tag">Azure</span>
              <span class="tag">Metaflow</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="AI,Automation,Open Source,Telegram,Personal">
          <div class="post-meta">
            <span class="post-date">10 March 2026</span>
            <span class="post-category">Projects</span>
          </div>
          <h2 class="post-title">
            <a href="Broletter-post.html">I Built a Free AI Newsletter That Learns What I Like</a>
          </h2>
          <div class="post-excerpt">
            <p>The best things I've ever learned came from friends doing stuff and telling me about it. So I built a "friend" that reads arXiv every night and explains the interesting stuff like an excited colleague.</p>
            <p><strong>Broletter</strong> is a fully automated, personalized daily science newsletter. It runs on my laptop at 11 PM, costs $0/day, and delivers ~7 minutes of curated science to Telegram each morning — with a gentle feedback loop that adapts to my interests without becoming an echo chamber.</p>
            <p>Built with Gemini 2.5 Flash, arXiv API, and Telegram. Fully open source — fork it and make your own.</p>
          </div>
          <div class="post-footer">
            <a href="Broletter-post.html" class="read-more">Read full post →</a>
            <div class="post-tags">
              <span class="tag">AI</span>
              <span class="tag">Automation</span>
              <span class="tag">Open Source</span>
              <span class="tag">Telegram</span>
              <span class="tag">Personal</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="Interview Prep,Systems,Trading,Resources">
          <div class="post-meta">
            <span class="post-date">10 March 2026</span>
            <span class="post-category">Interview Prep</span>
          </div>
          <h2 class="post-title">
            <a href="optiver-prep.html">Optiver Career Kickstarter — Technical Interview Prep Guide</a>
          </h2>
          <div class="post-excerpt">
            <p>Structured prep guide for Optiver's 75-min technical interview covering code review, deployment planning, CS fundamentals (memory, concurrency, architecture), behavioral STAR stories, and smart questions to ask.</p>
            <p>Covers everything from cache locality and lock-free data structures to order book implementation and branch prediction — tailored for low-latency trading systems engineering.</p>
          </div>
          <div class="post-footer">
            <a href="optiver-prep.html" class="read-more">Start prepping →</a>
            <div class="post-tags">
              <span class="tag">Interview Prep</span>
              <span class="tag">Systems</span>
              <span class="tag">Trading</span>
              <span class="tag">Resources</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="Networking,Interview Prep,Learning,Resources">
          <div class="post-meta">
            <span class="post-date">1 February 2026</span>
            <span class="post-category">Resources</span>
          </div>
          <h2 class="post-title">
            <a href="meta-networking-prep.html">1-Day Networking Interview Prep - Interactive Learning Platform</a>
          </h2>
          <div class="post-excerpt">
            <p>🚀 Need to prep for a networking interview fast? I built an interactive learning platform covering TCP, BGP, routing protocols, ARP, DNS, DHCP, NAT, IPv4/IPv6, and Linux troubleshooting.</p>

            <p>Features include:</p>
            <ul>
              <li>6 comprehensive modules with hands-on practice</li>
              <li>30+ W3Schools-style interactive exercises with real-time validation</li>
              <li>Inline exercises throughout - test your understanding as you learn</li>
              <li>Linux command toolkit organized by troubleshooting questions</li>
              <li>Mock interview scenarios and rapid-fire Q&A</li>
            </ul>

            <p>Perfect for anyone preparing for networking roles at tech companies. Learn by doing - zero time wasted on theory you won't use!</p>
          </div>
          <div class="post-footer">
            <a href="meta-networking-prep.html" class="read-more">Start learning →</a>
            <div class="post-tags">
              <span class="tag">Networking</span>
              <span class="tag">Interview Prep</span>
              <span class="tag">Learning</span>
              <span class="tag">Resources</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="Machine Learning,Deep Learning,Bayesian Networks,Academic Exercise">
          <div class="post-meta">
            <span class="post-date">9 November 2025</span>
            <span class="post-category">Machine Learning</span>
          </div>
          <h2 class="post-title">
            <a href="pomodoro-learning-paper.html">Should Machines Learn Only from Failures? Exploring Pomodoro Technique</a>
          </h2>
          <div class="post-excerpt">
            <p>📝 A summary of a pseudo-realistic scientific paper exploring an interesting concept: what if machines could learn from their successes, not just their failures?</p>

            <p>In supervised learning, we typically focus on minimizing errors. But what happens when our model predicts something correctly? Standard learning doesn't update anything. This paper explores Pomodoro Learning, a two-phase training cycle inspired by alternating work and reflection, using Bayesian uncertainty estimation to learn from confident predictions without overfitting...</p>
          </div>
          <div class="post-footer">
            <a href="pomodoro-learning-paper.html" class="read-more">Read full post →</a>
            <div class="post-tags">
              <span class="tag">Machine Learning</span>
              <span class="tag">Deep Learning</span>
              <span class="tag">Bayesian Networks</span>
              <span class="tag">Academic Exercise</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="Research,Academia,Open Science,Personal">
          <div class="post-meta">
            <span class="post-date">5 November 2025</span>
            <span class="post-category">Ideas & Thoughts</span>
          </div>
          <h2 class="post-title">
            <a href="papers-platform-idea.html">Papers: A Platform for Real Research Sharing</a>
          </h2>
          <div class="post-excerpt">
            <p>I'll begin by acknowledging that I could be wrong, and perhaps even highly likely to be, but this is simply how I perceive things.</p>

            <p>Research, at its core, represents one of the greatest forms of human expression and collaboration. I respect it deeply, but to be honest, it no longer feels as exhilarating as it once did.</p>

            <p>What I truly want is to <strong>collaborate</strong>, plain and simple. I see the potential for a platform dedicated to genuine research collaboration — where people can comment on papers, highlight problems, run experiments, and improve work together...</p>
          </div>
          <div class="post-footer">
            <a href="papers-platform-idea.html" class="read-more">Read full post →</a>            <div class="post-tags">
              <span class="tag">Research</span>
              <span class="tag">Academia</span>
              <span class="tag">Open Science</span>
              <span class="tag">Personal</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="PAI,Mathematics,Inference,Gaussian,High-dimensional,ETH Zurich">
          <div class="post-meta">
            <span class="post-date">27 January 2025</span>
            <span class="post-category">Mathematical Foundations</span>
          </div>
          <h2 class="post-title">
            <a href="fundamentals-inference-notes.html">Fundamentals of Inference: Mathematical Foundations</a>
          </h2>
          <div class="post-excerpt">
            <p>🔢 Diving deep into the mathematical foundations that make probabilistic inference possible. This post explores why high-dimensional spaces are so challenging and how Gaussian distributions provide elegant solutions.</p>

            <p>From the curse of dimensionality to the beauty of conjugate priors - understanding the theoretical underpinnings of modern AI methods requires grappling with some fundamental mathematical concepts.</p>

            <p>Exploring concepts like concentration of measure, the advantages of Gaussian assumptions, and why certain mathematical structures make inference tractable in high-dimensional spaces...</p>
          </div>
          <div class="post-footer">
            <a href="fundamentals-inference-notes.html" class="read-more">Read full post →</a>
            <div class="post-tags">
              <span class="tag">PAI</span>
              <span class="tag">Mathematics</span>
              <span class="tag">Inference</span>
              <span class="tag">Gaussian</span>
              <span class="tag">High-dimensional</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="Probabilistic AI,Bayesian Methods,Uncertainty,ETH Zurich,Machine Learning,Reinforcement Learning">
          <div class="post-meta">
            <span class="post-date">25 September 2025</span>
            <span class="post-category">Artificial Intelligence</span>
          </div>
          <h2 class="post-title">
            <a href="pai-notes.html">PAI Course Notes: Probabilistic AI and Uncertainty</a>
          </h2>
          <div class="post-excerpt">
            <p>🧠 Welcome to my deep dive into Probabilistic Artificial Intelligence! This course is fundamentally changing how I think about machine learning and AI systems.</p>

            <p>It's not just about making machines <em>smart</em>, but about making them <em>humble</em>: systems that <strong>know what they don't know</strong>, and act cautiously when uncertainty is high.</p>

            <p>From Bayesian linear regression to Gaussian processes, from active learning to reinforcement learning - exploring how intelligent agents can reason about uncertainty and make better decisions when the stakes are high...</p>
          </div>
          <div class="post-footer">
            <a href="pai-notes.html" class="read-more">Read full post →</a>
            <div class="post-tags">
              <span class="tag">Probabilistic AI</span>
              <span class="tag">Bayesian Methods</span>
              <span class="tag">Uncertainty</span>
              <span class="tag">ETH Zurich</span>
              <span class="tag">Machine Learning</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="Big Data,Distributed Systems,ETH Zurich,Data Management">
          <div class="post-meta">
            <span class="post-date">22 September 2025</span>
            <span class="post-category">Data Management</span>
          </div>
          <h2 class="post-title">
            <a href="big-data-notes.html">Big Data Course Notes: Rebuilding the Tech Stack for Scale</a>
          </h2>
          <div class="post-excerpt">
            <p>💽 Welcome to my journey through ETH's Big Data course! This is where theory meets reality, and where I'm learning that handling petabytes of data requires fundamentally rethinking everything.</p>

            <p>The core challenge? "We will have to rebuild the entire technology stack, bottom to top, with those same concepts from the past decades, but on a cluster of machines rather than on a single machine."</p>

            <p>From the three Vs (Volume, Variety, Velocity) to HDFS and MapReduce, this post covers the foundations of distributed data systems and why we need to completely rethink traditional databases...</p>
          </div>
          <div class="post-footer">
            <a href="big-data-notes.html" class="read-more">Read full post →</a>
            <div class="post-tags">
              <span class="tag">Big Data</span>
              <span class="tag">Distributed Systems</span>
              <span class="tag">ETH Zurich</span>
              <span class="tag">Data Management</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="Competitive Programming,Algorithms,ETH Zurich,Data Structures">
          <div class="post-meta">
            <span class="post-date">22 September 2025</span>
            <span class="post-category">Computer Science</span>
          </div>
          <h2 class="post-title">
            <a href="competitive-programming-notes.html">Competitive Programming Notes: From Self-Doubt to Understanding</a>
          </h2>
          <div class="post-excerpt">
            <p>"Competitive Programming is a Bad Word" - that's how I started these notes. My self-esteem had decreased by 69% after the first AlgoLab lesson at ETH 😅</p>

            <p>This post is my raw, honest journey through the prerequisites for AlgoLab: graphs, algorithms, and data structures. It's filled with code examples, performance tips learned the hard way, and the kind of notes I wish I had when starting out.</p>

            <p>From DFS and BFS to Dijkstra's algorithm and the pain of getting TLE errors - it's all here, explained in a way that doesn't make you feel stupid.</p>
          </div>
          <div class="post-footer">
            <a href="competitive-programming-notes.html" class="read-more">Read full post →</a>
            <div class="post-tags">
              <span class="tag">Competitive Programming</span>
              <span class="tag">Algorithms</span>
              <span class="tag">ETH Zurich</span>
              <span class="tag">Data Structures</span>
            </div>
          </div>
        </div>

        <div class="blog-post" data-tags="University,Study Tips,Life Lessons,Computer Engineering">
          <div class="post-meta">
            <span class="post-date">11 September 2025</span>
            <span class="post-category">University Life</span>
          </div>
          <h2 class="post-title">
            <a href="studying-tips.html">How I Survived University: Study Tips & Life Lessons</a>
          </h2>
          <div class="post-excerpt">
            <p>Hey everyone! 👋 So you want to know how I made it through my Computer Engineering degree? Well, grab a coffee and let me share some real talk about university life...</p>

            <p>The biggest game changer? Finding the right study partner. I was incredibly lucky to find an amazing friend who became my study buddy (and eventually my girlfriend! 😉). We were perfectly complementary - where I had intuition, she had perseverance; where she excelled at perfectionism, I brought different perspectives.</p>

            <p>But there's so much more to share about study techniques, the magic of vacation planning during exam season, and those study materials I created that helped tons of students...</p>
          </div>
          <div class="post-footer">
            <a href="studying-tips.html" class="read-more">Read full post →</a>
            <div class="post-tags">
              <span class="tag">University</span>
              <span class="tag">Study Tips</span>
              <span class="tag">Life Lessons</span>
              <span class="tag">Computer Engineering</span>
            </div>
          </div>
        </div>
      </section>
    </main>

  <script>
    // Dark mode toggle functionality
    document.addEventListener('DOMContentLoaded', function() {
      const themeToggle = document.getElementById('theme-toggle');
      const themeIcon = themeToggle.querySelector('i');

      // Check for saved theme preference
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme) {
        document.body.classList.add(savedTheme);
        if (savedTheme === 'dark-mode') {
          themeIcon.classList.replace('fa-moon', 'fa-sun');
        }
      }

      themeToggle.addEventListener('click', function() {
        document.body.classList.toggle('dark-mode');

        if (document.body.classList.contains('dark-mode')) {
          themeIcon.classList.replace('fa-moon', 'fa-sun');
          localStorage.setItem('theme', 'dark-mode');
        } else {
          themeIcon.classList.replace('fa-sun', 'fa-moon');
          localStorage.setItem('theme', 'light-mode');
        }
      });

      // Blog filter functionality
      const filterButtons = document.querySelectorAll('.tag-filter');
      const blogPosts = document.querySelectorAll('.blog-post');

      filterButtons.forEach(button => {
        button.addEventListener('click', function() {
          const filterValue = this.getAttribute('data-tag');

          // Update active button
          filterButtons.forEach(btn => btn.classList.remove('active'));
          this.classList.add('active');

          // Filter posts
          blogPosts.forEach(post => {
            if (filterValue === 'all') {
              post.style.display = 'block';
              post.style.animation = 'fadeIn 0.3s ease-in-out';
            } else {
              const postTags = post.getAttribute('data-tags');
              if (postTags && postTags.includes(filterValue)) {
                post.style.display = 'block';
                post.style.animation = 'fadeIn 0.3s ease-in-out';
              } else {
                post.style.display = 'none';
              }
            }
          });
        });
      });
    });
  </script>
  </div>

</body>
</html>