-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
53 lines (48 loc) · 206 KB
/
Copy pathindex.html
File metadata and controls
53 lines (48 loc) · 206 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
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<link rel="stylesheet" type="text/css" href="/assets/static/src_index-b3c78705.D41lfVcX.css">
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed" href="/rss.xml" />
<meta name="description" content="codex by fezcode..." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://fezcode.com/" />
<meta property="og:title" content="Fezcodex - Personal Blog and Projects" />
<meta property="og:description" content="Discover logs, posts, projects, and stories from Fezcode." />
<meta property="og:image" content="/images/asset/ogtitle.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://fezcode.com/" />
<meta name="twitter:title" content="Fezcodex - Personal Blog and Projects" />
<meta name="twitter:description" content="Discover logs, posts, projects, and stories from Fezcode." />
<meta name="twitter:image" content="/images/asset/ogtitle.png" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,200..900,0..100,0..1;1,9..144,200..900,0..100,0..1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=IM+Fell+English:ital@0;1&family=IM+Fell+DW+Pica:ital@0;1&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet" />
<title>fezcodex</title>
</head>
<body class="bg-slate-950">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="react-root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height: 37.7205px; opacity: 0;"><div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"><div class="flex items-center gap-3 flex-1"><span class="shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"></path></svg></span><p class="font-mono text-xs md:text-sm font-black uppercase tracking-widest leading-tight">FEZMIST IS ONLINE: A CODEX HALF-REMEMBERED — FOG PAPER, EUCALYPTUS INK, HORIZONS THAT FADE. ENABLE VIA SETTINGS OR COMMAND PALETTE.</p><a href="https://fezcode.com/settings?fezTheme=mist#fezcodex-theme" class="shrink-0 inline-flex items-center gap-1 bg-black/20 hover:bg-black/40 px-3 py-1 rounded-sm border border-white/20 transition-all font-bold text-[10px] uppercase">Enable Mist<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 256 256"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></a></div><button class="p-1 hover:bg-black/20 rounded-sm transition-colors shrink-0" aria-label="Dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg></button></div><div class="h-0.5 w-full bg-black/10"></div></div><div class="bg-[#050505] min-h-screen font-sans flex"><div class="fixed inset-0 bg-black/80 backdrop-blur-sm z-40 md:hidden transition-opacity opacity-100 pointer-events-auto"></div><aside class="fixed top-0 left-0 h-screen w-72 bg-[#060608] z-50 flex flex-col border-r border-white/10 shadow-2xl" style="transform: none;"><div class="p-8 border-b border-white/10 flex flex-col gap-2 bg-black/50 relative"><div class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-emerald-500/60 via-amber-500/30 to-transparent"></div><a class="flex items-center gap-3 group" href="/" data-discover="true"><span class="text-xl font-black uppercase tracking-tighter text-white">Fez<span class="text-emerald-500">codex</span></span></a><span class="font-arvo text-[10px] text-gray-500 uppercase tracking-widest font-medium">Digital Archive Kernel // v0.28.0 // Mistwright</span></div><div class="relative flex-grow overflow-hidden"><div class="h-full overflow-y-auto scrollbar-hide no-scrollbar"><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Main</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M222.14,105.85l-80-80a20,20,0,0,0-28.28,0l-80,80A19.86,19.86,0,0,0,28,120v96a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V164h24v52a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V120A19.86,19.86,0,0,0,222.14,105.85ZM204,204H164V152a12,12,0,0,0-12-12H104a12,12,0,0,0-12,12v52H52V121.65l76-76,76,76Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Home</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/terminal" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M72.5,150.63,100.79,128,72.5,105.37a12,12,0,1,1,15-18.74l40,32a12,12,0,0,1,0,18.74l-40,32a12,12,0,0,1-15-18.74ZM144,172h32a12,12,0,0,0,0-24H144a12,12,0,0,0,0,24ZM236,56V200a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V56A20,20,0,0,1,40,36H216A20,20,0,0,1,236,56Zm-24,4H44V196H212Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Terminal</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/about" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M234.38,210a123.36,123.36,0,0,0-60.78-53.23,76,76,0,1,0-91.2,0A123.36,123.36,0,0,0,21.62,210a12,12,0,1,0,20.77,12c18.12-31.32,50.12-50,85.61-50s67.49,18.69,85.61,50a12,12,0,0,0,20.77-12ZM76,96a52,52,0,1,1,52,52A52.06,52.06,0,0,1,76,96Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">About</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/achievements" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M232,60H212V48a12,12,0,0,0-12-12H56A12,12,0,0,0,44,48V60H24A20,20,0,0,0,4,80V96a44.05,44.05,0,0,0,44,44h.77A84.18,84.18,0,0,0,116,195.15V212H96a12,12,0,0,0,0,24h64a12,12,0,0,0,0-24H140V195.11c30.94-4.51,56.53-26.2,67-55.11h1a44.05,44.05,0,0,0,44-44V80A20,20,0,0,0,232,60ZM28,96V84H44v28c0,1.21,0,2.41.09,3.61A20,20,0,0,1,28,96Zm160,15.1c0,33.33-26.71,60.65-59.54,60.9A60,60,0,0,1,68,112V60H188ZM228,96a20,20,0,0,1-16.12,19.62c.08-1.5.12-3,.12-4.52V84h16Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Achievements</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 bg-emerald-500/5 text-emerald-400 border-l-2 border-emerald-500"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Feed</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a aria-current="page" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 bg-emerald-500/10 text-white" href="/blog" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M232,44H160a43.86,43.86,0,0,0-32,13.85A43.86,43.86,0,0,0,96,44H24A12,12,0,0,0,12,56V200a12,12,0,0,0,12,12H96a20,20,0,0,1,20,20,12,12,0,0,0,24,0,20,20,0,0,1,20-20h72a12,12,0,0,0,12-12V56A12,12,0,0,0,232,44ZM96,188H36V68H96a20,20,0,0,1,20,20V192.81A43.79,43.79,0,0,0,96,188Zm124,0H160a43.71,43.71,0,0,0-20,4.83V88a20,20,0,0,1,20-20h60Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Blogposts</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/projects" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M230.47,67.5a12,12,0,0,0-19.26-4.32L172.43,99l-12.68-2.72L157,83.57l35.79-38.78a12,12,0,0,0-4.32-19.26A76.07,76.07,0,0,0,88.41,121.64L30.92,174.18a4.68,4.68,0,0,0-.39.38,36,36,0,0,0,50.91,50.91l.38-.39,52.54-57.49A76.05,76.05,0,0,0,230.47,67.5ZM160,148a51.5,51.5,0,0,1-23.35-5.52,12,12,0,0,0-14.26,2.62L64.31,208.66a12,12,0,0,1-17-17l63.55-58.07a12,12,0,0,0,2.62-14.26A51.5,51.5,0,0,1,108,96a52.06,52.06,0,0,1,52-52h.89L135.17,71.87a12,12,0,0,0-2.91,10.65l5.66,26.35a12,12,0,0,0,9.21,9.21l26.35,5.66a12,12,0,0,0,10.65-2.91L212,95.12c0,.3,0,.59,0,.89A52.06,52.06,0,0,1,160,148Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Projects</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/logs" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M216,36H40A20,20,0,0,0,20,56V200a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A20,20,0,0,0,216,36Zm-4,160H44V60H212ZM68,92A12,12,0,0,1,80,80h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,92Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,128Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,164Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Discovery Logs</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/vocab" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M208,20H72A36,36,0,0,0,36,56V224a12,12,0,0,0,12,12H192a12,12,0,0,0,0-24H60v-4a12,12,0,0,1,12-12H208a12,12,0,0,0,12-12V32A12,12,0,0,0,208,20ZM120,44h36v59l-10.51-8.41a12,12,0,0,0-15,0L120,103Zm76,128H72a35.59,35.59,0,0,0-12,2.06V56A12,12,0,0,1,72,44H96v84a12,12,0,0,0,19.5,9.37l22.49-18,22.51,18A12,12,0,0,0,180,128V44h16Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Glossary</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/the-vague" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M200,164v8h12a12,12,0,0,1,0,24H200v12a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12h32a12,12,0,0,1,0,24ZM92,172a32,32,0,0,1-32,32H56v4a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12H60A32,32,0,0,1,92,172Zm-24,0a8,8,0,0,0-8-8H56v16h4A8,8,0,0,0,68,172Zm100,8a40,40,0,0,1-40,40H112a12,12,0,0,1-12-12V152a12,12,0,0,1,12-12h16A40,40,0,0,1,168,180Zm-24,0a16,16,0,0,0-16-16h-4v32h4A16,16,0,0,0,144,180ZM36,108V40A20,20,0,0,1,56,20h96a12,12,0,0,1,8.49,3.52l56,56A12,12,0,0,1,220,88v20a12,12,0,0,1-24,0v-4H148a12,12,0,0,1-12-12V44H60v64a12,12,0,0,1-24,0ZM160,57V80h23Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">The Vague</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Applications</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a href="https://fezcode.com/castarook/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M252,80a32,32,0,1,0-60,15.45l-20.86,25.66L150.82,74.4a32,32,0,1,0-45.64,0L84.87,121.11,64,95.45a32,32,0,1,0-35,15.78l14,84.06A19.94,19.94,0,0,0,62.78,212H193.22A19.94,19.94,0,0,0,213,195.29l14-84.06A32.05,32.05,0,0,0,252,80Zm-32-8a8,8,0,1,1-8,8A8,8,0,0,1,220,72ZM128,44a8,8,0,1,1-8,8A8,8,0,0,1,128,44ZM36,72a8,8,0,1,1-8,8A8,8,0,0,1,36,72ZM189.83,188H66.17L55.29,122.78l23.4,28.79A12,12,0,0,0,88,156a12.87,12.87,0,0,0,1.63-.11,12,12,0,0,0,9.37-7.1L127.18,84l.82,0,.82,0L157,148.79a12,12,0,0,0,9.37,7.1A12.87,12.87,0,0,0,168,156a12,12,0,0,0,9.31-4.43l23.4-28.79Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Castarook</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a href="https://fezcode.com/urban-rogue/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M229.26,90.4a108,108,0,0,1-177.63,114A108,108,0,0,1,195.41,43.63l20.1-20.11a12,12,0,0,1,17,17l-96,96a12,12,0,1,1-17-17l24-24a36,36,0,1,0,19.76,39.65,12,12,0,0,1,23.53,4.74,60,60,0,1,1-25.73-62L178.3,60.74a84,84,0,1,0,28.46,38,12,12,0,1,1,22.5-8.35Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Urban Rogue</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a href="https://fezcode.com/Swat-Tactics/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M208,36H48A20,20,0,0,0,28,56v56c0,54.29,26.32,87.22,48.4,105.29,23.71,19.39,47.44,26,48.44,26.29a12.1,12.1,0,0,0,6.32,0c1-.28,24.73-6.9,48.44-26.29,22.08-18.07,48.4-51,48.4-105.29V56A20,20,0,0,0,208,36Zm-4,76c0,35.71-13.09,64.69-38.91,86.15A126.28,126.28,0,0,1,128,219.38a126.14,126.14,0,0,1-37.09-21.23C65.09,176.69,52,147.71,52,112V60H204ZM79.51,144.49a12,12,0,1,1,17-17L112,143l47.51-47.52a12,12,0,0,1,17,17l-56,56a12,12,0,0,1-17,0Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Swat Tactics</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a href="https://fezcode.com/climb-the-tall-building-0/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M216,28H152a12,12,0,0,0-9.33,4.45L79.5,110.51l-4.66-4.65a20,20,0,0,0-28.29,0L29.86,122.55a20,20,0,0,0,0,28.29h0L45,166,23.86,187.17a20,20,0,0,0,0,28.28l16.69,16.69a20,20,0,0,0,28.28,0L90,211l15.17,15.16a20,20,0,0,0,28.29,0l16.69-16.69a20,20,0,0,0,0-28.3l-4.65-4.65,78.06-63.17A12,12,0,0,0,228,104V40A12,12,0,0,0,216,28ZM54.69,212.34l-11-11L62,183l11,11Zm64.61-6L49.65,136.7l11.05-11,69.65,69.65ZM204,98.27l-75.58,61.17L121,152l47.51-47.5a12,12,0,0,0-17-17L104,135l-7.45-7.44L157.73,52H204Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">CTTB-0</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a href="https://fezcode.com/net_run/" class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M225.6,62.64l-88-48.17a19.91,19.91,0,0,0-19.2,0l-88,48.17A20,20,0,0,0,20,80.19v95.62a20,20,0,0,0,10.4,17.55l88,48.17a19.89,19.89,0,0,0,19.2,0l88-48.17A20,20,0,0,0,236,175.81V80.19A20,20,0,0,0,225.6,62.64ZM128,36.57,200,76,128,115.4,56,76ZM44,96.79l72,39.4v76.67L44,173.44Zm96,116.07V136.19l72-39.4v76.65Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Net Run</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Utilities</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/pinned-apps" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M238.15,78.54,177.46,17.86a20,20,0,0,0-28.3,0L97.2,70c-12.43-3.33-36.68-5.72-61.74,14.5a20,20,0,0,0-1.6,29.73l45.46,45.47-39.8,39.8a12,12,0,0,0,17,17l39.8-39.81,45.47,45.46A20,20,0,0,0,155.91,228c.46,0,.93,0,1.4-.05A20,20,0,0,0,171.87,220c4.69-6.23,11-16.13,14.44-28s3.45-22.88.16-33.4l51.7-51.87A20,20,0,0,0,238.15,78.54Zm-74.26,68.79a12,12,0,0,0-2.23,13.84c3.43,6.86,6.9,21-6.28,40.65L54.08,100.53c21.09-14.59,39.53-6.64,41-6a11.67,11.67,0,0,0,13.81-2.29l54.43-54.61,55,55Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Favorites</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/apps" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M100,36H56A20,20,0,0,0,36,56v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,100,36ZM96,96H60V60H96ZM200,36H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,200,36Zm-4,60H160V60h36Zm-96,40H56a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,100,136Zm-4,60H60V160H96Zm104-60H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,200,136Zm-4,60H160V160h36Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">App Center</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/commands" data-discover="true"><div class="flex items-center gap-4"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Manuals</span></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// System</span><span class="transform transition-transform duration-300 ">↓</span></button><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// External Nodes</span><span class="transform transition-transform duration-300 ">↓</span></button></div></div><div class="p-4 border-t border-white/10 bg-black/50"><div class="grid grid-cols-4 gap-2 mb-4"><button title="COMMANDS" class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square"><div class="text-white group-hover:text-black transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg></div></button><button title="SETTINGS" class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square"><div class="text-white group-hover:text-black transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M128,76a52,52,0,1,0,52,52A52.06,52.06,0,0,0,128,76Zm0,80a28,28,0,1,1,28-28A28,28,0,0,1,128,156Zm113.86-49.57A12,12,0,0,0,236,98.34L208.21,82.49l-.11-31.31a12,12,0,0,0-4.25-9.12,116,116,0,0,0-38-21.41,12,12,0,0,0-9.68.89L128,37.27,99.83,21.53a12,12,0,0,0-9.7-.9,116.06,116.06,0,0,0-38,21.47,12,12,0,0,0-4.24,9.1l-.14,31.34L20,98.35a12,12,0,0,0-5.85,8.11,110.7,110.7,0,0,0,0,43.11A12,12,0,0,0,20,157.66l27.82,15.85.11,31.31a12,12,0,0,0,4.25,9.12,116,116,0,0,0,38,21.41,12,12,0,0,0,9.68-.89L128,218.73l28.14,15.74a12,12,0,0,0,9.7.9,116.06,116.06,0,0,0,38-21.47,12,12,0,0,0,4.24-9.1l.14-31.34,27.81-15.81a12,12,0,0,0,5.85-8.11A110.7,110.7,0,0,0,241.86,106.43Zm-22.63,33.18-26.88,15.28a11.94,11.94,0,0,0-4.55,4.59c-.54,1-1.11,1.93-1.7,2.88a12,12,0,0,0-1.83,6.31L184.13,199a91.83,91.83,0,0,1-21.07,11.87l-27.15-15.19a12,12,0,0,0-5.86-1.53h-.29c-1.14,0-2.3,0-3.44,0a12.08,12.08,0,0,0-6.14,1.51L93,210.82A92.27,92.27,0,0,1,71.88,199l-.11-30.24a12,12,0,0,0-1.83-6.32c-.58-.94-1.16-1.91-1.7-2.88A11.92,11.92,0,0,0,63.7,155L36.8,139.63a86.53,86.53,0,0,1,0-23.24l26.88-15.28a12,12,0,0,0,4.55-4.58c.54-1,1.11-1.94,1.7-2.89a12,12,0,0,0,1.83-6.31L71.87,57A91.83,91.83,0,0,1,92.94,45.17l27.15,15.19a11.92,11.92,0,0,0,6.15,1.52c1.14,0,2.3,0,3.44,0a12.08,12.08,0,0,0,6.14-1.51L163,45.18A92.27,92.27,0,0,1,184.12,57l.11,30.24a12,12,0,0,0,1.83,6.32c.58.94,1.16,1.91,1.7,2.88A11.92,11.92,0,0,0,192.3,101l26.9,15.33A86.53,86.53,0,0,1,219.23,139.61Z"></path></svg></div></button><button title="RANDOM" class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square"><div class="text-white group-hover:text-black transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M240.49,175.51a12,12,0,0,1,0,17l-24,24a12,12,0,0,1-17-17L203,196h-2.09a76.17,76.17,0,0,1-61.85-31.83L97.38,105.78A52.1,52.1,0,0,0,55.06,84H32a12,12,0,0,1,0-24H55.06a76.17,76.17,0,0,1,61.85,31.83l41.71,58.39A52.1,52.1,0,0,0,200.94,172H203l-3.52-3.51a12,12,0,0,1,17-17Zm-95.62-72.62a12,12,0,0,0,16.93-1.13A52,52,0,0,1,200.94,84H203l-3.52,3.51a12,12,0,0,0,17,17l24-24a12,12,0,0,0,0-17l-24-24a12,12,0,0,0-17,17L203,60h-2.09a76,76,0,0,0-57.2,26A12,12,0,0,0,144.87,102.89Zm-33.74,50.22a12,12,0,0,0-16.93,1.13A52,52,0,0,1,55.06,172H32a12,12,0,0,0,0,24H55.06a76,76,0,0,0,57.2-26A12,12,0,0,0,111.13,153.11Z"></path></svg></div></button><button title="CONTACT" class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square"><div class="text-white group-hover:text-black transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256"><path d="M224,44H32A12,12,0,0,0,20,56V192a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A12,12,0,0,0,224,44ZM193.15,68,128,127.72,62.85,68ZM44,188V83.28l75.89,69.57a12,12,0,0,0,16.22,0L212,83.28V188Z"></path></svg></div></button></div><div class="text-center"><p class="font-arvo text-[10px] text-gray-600 uppercase tracking-widest font-medium">© 2026 Fezcode // Theme: Brutalist</p></div></div></aside><div class="flex-1 flex flex-col min-w-0 transition-all duration-300 md:ml-72"><header class="bg-[#050505]/80 backdrop-blur-md sticky top-0 z-[60] transition-all border-b border-transparent py-4 relative"><button class="absolute top-1/2 -translate-y-1/2 left-6 text-gray-400 hover:text-emerald-500 transition-colors hidden md:block focus:outline-none" aria-label="Toggle Sidebar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z"></path></svg></button><div class="mx-auto max-w-7xl px-6 flex justify-between items-center text-white"><div class="md:hidden flex items-center gap-4"><button class="text-gray-400 hover:text-white transition-colors focus:outline-none"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z"></path></svg></button><a class="flex items-center gap-2" href="/" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40" class="text-white" style="transform: rotate(-30deg);"><g transform="translate(0, -2)"><path d="M 20 40 C 20 30, 80 30, 80 40 L 85 70 C 85 75, 15 75, 15 70 Z" fill="white" stroke="white" stroke-width="2"></path><path d="M 50 25 Q 60 15, 70 25" stroke="white" stroke-width="2" fill="none"></path></g></svg><span class="text-xl font-black tracking-tighter uppercase font-mono">Fez<span class="text-emerald-500">codex</span></span></a></div><div class="hidden md:flex items-center gap-2 ml-12"></div><div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:block"><span class="text-xs font-mono font-bold uppercase tracking-[0.3em] text-gray-500">The Fez of <span class="text-emerald-500">Code</span></span></div><div class="flex items-center gap-2 md:gap-4"><a class="group flex items-center gap-2 px-3 py-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-sm transition-all" href="/about" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M234.38,210a123.36,123.36,0,0,0-60.78-53.23,76,76,0,1,0-91.2,0A123.36,123.36,0,0,0,21.62,210a12,12,0,1,0,20.77,12c18.12-31.32,50.12-50,85.61-50s67.49,18.69,85.61,50a12,12,0,0,0,20.77-12ZM76,96a52,52,0,1,1,52,52A52.06,52.06,0,0,1,76,96Z"></path></svg><span class="hidden md:inline text-[10px] font-mono font-bold uppercase tracking-widest">About</span></a><button class="group flex items-center gap-2 px-3 py-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-sm transition-all" aria-label="Toggle Search"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="group-hover:text-emerald-500 transition-colors"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg><span class="hidden md:inline text-[10px] font-mono font-bold uppercase tracking-widest group-hover:text-emerald-500 transition-colors">Search</span></button></div></div></header><main class="flex-grow"><div style="opacity: 0;"><div class="flex min-h-screen bg-[#050505] text-white overflow-hidden relative selection:bg-emerald-500/30"><div class="absolute inset-0 opacity-20 pointer-events-none z-0"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full filter blur-3xl"><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="w-full h-full"><defs><pattern id="bg-grid-penney-s-game--the-coin-flip-bet-where-going-second-always-wins" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="0.5" fill="white" opacity="0.05"></circle></pattern></defs><rect width="100" height="100" fill="url(#bg-grid-penney-s-game--the-coin-flip-bet-where-going-second-always-wins)"></rect><rect x="10" y="30" width="67.36932586878538" height="1.8711716912221164" fill="hsl(146, 70%, 60%)" opacity="0.5606252182740719"></rect><circle cx="10" cy="30" r="3.7423433824442327" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="30" y="50" width="0.542454831302166" height="34.21462911181152" fill="hsl(146, 70%, 60%)" opacity="0.649048779066652"></rect><circle cx="30" cy="50" r="1.084909662604332" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="10" y="30" width="0.5856510761659592" height="54.213433749973774" fill="hsl(146, 70%, 60%)" opacity="0.7138796753250063"></rect><rect x="40" y="70" width="1.3450588980922475" height="70.18928597215563" fill="hsl(146, 70%, 60%)" opacity="0.48643085216172044"></rect><circle cx="40" cy="70" r="2.690117796184495" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="80" y="20" width="69.99022638890892" height="0.6779422974213958" fill="hsl(146, 70%, 60%)" opacity="0.7395109328441323"></rect><rect x="20" y="50" width="1.9823823993792757" height="66.04545571375638" fill="hsl(146, 70%, 60%)" opacity="0.7719935971312225"></rect><rect x="40" y="20" width="39.48730687610805" height="1.556137259467505" fill="hsl(146, 70%, 60%)" opacity="0.7908507226035"></rect><circle cx="40" cy="20" r="3.11227451893501" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="50" y="90" width="60.30140018090606" height="0.731167578138411" fill="hsl(146, 70%, 60%)" opacity="0.5200136796571314"></rect><circle cx="50" cy="90" r="1.462335156276822" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="20" y="0" width="1.8135563506511971" height="71.51249292306602" fill="hsl(146, 70%, 60%)" opacity="0.5448622427415103"></rect><circle cx="20" cy="0" r="3.6271127013023943" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="80" y="20" width="69.674307317473" height="1.7228745899628848" fill="hsl(146, 70%, 60%)" opacity="0.5629309582989663"></rect><circle cx="80" cy="20" r="3.4457491799257696" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="10" y="0" width="29.450245462357998" height="1.522224686224945" fill="hsl(146, 70%, 60%)" opacity="0.7893904937896878"></rect><circle cx="10" cy="0" r="3.04444937244989" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="80" y="10" width="1.699503295822069" height="78.6221164278686" fill="hsl(146, 70%, 60%)" opacity="0.661650540912524"></rect><circle cx="80" cy="10" r="3.399006591644138" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="70" y="30" width="40.28081301599741" height="1.2558848957996815" fill="#ffffff" opacity="0.6830881116911769"></rect><circle cx="70" cy="30" r="2.511769791599363" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="40" y="0" width="49.02938652317971" height="1.112039601430297" fill="#ffffff" opacity="0.8116790033411234"></rect><rect x="40" y="30" width="1.6851443832274526" height="23.484359551221132" fill="hsl(146, 70%, 60%)" opacity="0.521874469704926"></rect></svg><div class="absolute inset-0 opacity-[0.15] pointer-events-none mix-blend-overlay" style="background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)'/%3E%3C/svg%3E");"></div><div class="absolute bottom-4 right-4 flex gap-2 items-center"></div></div></div><div class="w-full 4xl:pr-[50vw] relative z-10 flex flex-col min-h-screen py-24 px-6 md:pl-20 overflow-y-auto overflow-x-hidden no-scrollbar transition-all duration-300"><header class="mb-16"><a class="mb-8 inline-flex items-center gap-2 text-xs font-mono text-gray-500 hover:text-white transition-colors uppercase tracking-widest" href="/" data-discover="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><path d="M228,128a12,12,0,0,1-12,12H69l51.52,51.51a12,12,0,0,1-17,17l-72-72a12,12,0,0,1,0-17l72-72a12,12,0,0,1,17,17L69,116H216A12,12,0,0,1,228,128Z"></path></svg><span>Home</span></a><h1 class="text-6xl md:text-8xl font-black tracking-tighter text-white mb-4 leading-none">INTEL</h1><p class="text-gray-400 font-mono text-[10px] uppercase tracking-[0.2em]">// DATA_LOGS & ARCHIVED_THOUGHTS</p></header><div class="mb-12 border-b border-white/10 pb-8 space-y-6"><div class="flex flex-wrap items-center gap-2"><button class="rounded-sm px-3 py-1 text-[10px] font-bold uppercase tracking-widest transition-all bg-emerald-500 text-black shadow-lg shadow-emerald-500/20">All</button><button class="rounded-sm px-3 py-1 text-[10px] font-bold uppercase tracking-widest transition-all bg-white/5 text-gray-500 hover:text-white hover:bg-white/10 border border-white/5">Dev</button><button class="rounded-sm px-3 py-1 text-[10px] font-bold uppercase tracking-widest transition-all bg-white/5 text-gray-500 hover:text-white hover:bg-white/10 border border-white/5">AI</button><button class="rounded-sm px-3 py-1 text-[10px] font-bold uppercase tracking-widest transition-all bg-white/5 text-gray-500 hover:text-white hover:bg-white/10 border border-white/5">Feat</button><button class="rounded-sm px-3 py-1 text-[10px] font-bold uppercase tracking-widest transition-all bg-white/5 text-gray-500 hover:text-white hover:bg-white/10 border border-white/5">Rant</button><button class="rounded-sm px-3 py-1 text-[10px] font-bold uppercase tracking-widest transition-all bg-white/5 text-gray-500 hover:text-white hover:bg-white/10 border border-white/5">Essay</button><button class="rounded-sm px-3 py-1 text-[10px] font-bold uppercase tracking-widest transition-all bg-white/5 text-gray-500 hover:text-white hover:bg-white/10 border border-white/5">Series</button><button class="rounded-sm px-3 py-1 text-[10px] font-bold uppercase tracking-widest transition-all bg-white/5 text-gray-500 hover:text-white hover:bg-white/10 border border-white/5">Gist</button><button class="rounded-sm px-3 py-1 text-[10px] font-bold uppercase tracking-widest transition-all bg-white/5 text-gray-500 hover:text-white hover:bg-white/10 border border-white/5">D&D</button></div><div class="relative group w-full max-w-md"><div class="flex items-center gap-2 bg-white/5 border border-white/10 rounded-sm px-3 py-1.5 focus-within:border-emerald-500/50 focus-within:bg-white/10 transition-all"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" class="text-gray-500 group-focus-within:text-emerald-400"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg><input placeholder="Search Blogposts..." class="bg-transparent border-none outline-none text-[10px] font-mono uppercase tracking-widest text-white placeholder-gray-600 w-full" type="text" value=""></div></div></div><div class="flex flex-col pb-32"><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/penneys-game" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-100" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-emerald-400">24/06/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight translate-x-1 text-white">Penney's Game: The Coin-Flip Bet Where Going Second Always Wins</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 translate-x-0 opacity-100" style="color: var(--color-dev-badge);"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/the-20-mile-march" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">19/06/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The 20 Mile March: Consistency Beats Heroics</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/dashcam-music-theory" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">13/06/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Dashcam Music Theory: The Only Honest Soundtrack Left</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/paseto-vs-jwt" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">18/05/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">PASETO vs JWT: Choosing the Right Token for the Job</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/a-gentlemans-lexicon-of-pejoratives" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-essay-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">02/05/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">A Gentleman's Lexicon of Pejoratives: How to Insult Your Friends Without Cursing</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-essay-badge); background-color: rgba(67, 56, 202, 0.25);">essay</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/squarified-treemaps" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">01/05/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Squarified Treemaps: Trading Order for Readable Rectangles</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/happy-path-bias-in-gemini" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-ai-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">01/05/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Happy Path Bias in Gemini: Why the Code Looks Right Until It Isn't</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-ai-badge); background-color: rgba(132, 204, 22, 0.2);">ai</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/spec-driven-development" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">25/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Spec-Driven Development: Writing the Thing Before You Build the Thing</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/debugging-opengl-samplercube-bug" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">24/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Case of the Invisible Geometry: Debugging a Silent OpenGL Driver Validation Failure</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/vite-vike-ssg-migration" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">23/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Migrating Fezcodex From CRA to Vite + Vike: A Static-Site-Generation Deep Dive</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/atlas-llm-deep-dive" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">23/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">atlas.llm: A Deep Dive Into a Single-Binary, On-Device Coding Companion</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/in-review-is-in-progress" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">15/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">In Review is In Progress</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/linguistic-shackles-sapir-whorf-hypothesis" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">12/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Linguistic Shackles: The Sapir-Whorf Hypothesis</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/why-i-built-dush" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">11/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Why I Built Dush</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/shell-architecture-in-go" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">11/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Shell Architecture in Go: From Lexer to Execution</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/implementing-everything-in-go" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">11/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Implementing Everything in Go: Built-ins, Pipes, and Jobs</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/modernizing-the-shell-dush-scripting-language" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">11/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Modernizing the Shell: The Dush Scripting Language</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/quantum-physics-101" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">05/04/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Quantum Physics 101: A Beautiful Journey into the Microscopic</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/the-lost-art-of-the-tactile-90s-cinema" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">11/03/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Lost Art of the Tactile: Why 90s Cinema Ruined Modern Movies</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/side-character-conspiracy-sitcom-rant" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">08/03/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Side Character Conspiracy: Solving the Sitcom's Greatest Mystery</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/wave-function-collapse-explained" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">07/03/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Wave Function Collapse: Taming Entropy in Procedural Generation</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/distributed-systems-consensus-and-state" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">03/03/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Deep End: Distributed Systems, Consensus, and State</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/mbti-and-astrology-modern-identity" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">02/03/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">MBTI & Astrology: The Modern Quest for Identity</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/encyclopedia-of-bad-arguments" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">28/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Encyclopedia of Bad Arguments: A Guide to Logical Fallacies</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/a-colossal-rant-on-logic" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">28/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Lost Art of Thinking: A Colossal Rant on Logic</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/the-basics-of-time-travel" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">23/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Basics of Time Travel: Theories, Paradoxes, and Spacetime</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/quadtree-algorithm-spatial-indexing" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">21/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Quadtree: Solving the O(N^2) Spatial Nightmare</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/gobake-go-build-orchestrator" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">18/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">gobake: The Build Orchestrator Go Was Missing</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/tag-file-systems-explained-go-implementation" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">18/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Escape the Hierarchy Trap: How Tag File Systems Work</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/dht-distributed-hash-tables-go-educational-guide" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">17/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Chaos Coordinator: Mastering Distributed Hash Tables (DHT)</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/series/prompt-engineering-university" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-ai-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">16/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="shrink-0" style="color: var(--color-ai-badge);"><path d="M216,72H131.31L104,44.69A15.88,15.88,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.41,15.41,0,0,0,39.39,216h177.5A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40Z"></path></svg><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Prompt Engineering University</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-ai-badge); background-color: rgba(132, 204, 22, 0.2);">ai</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/building-the-fezcodex-mcp-server" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">16/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Bridging the Gap: How We Built the Fezcodex MCP Server</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/model-context-protocol-mcp" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-ai-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">16/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Model Context Protocol (MCP): Bridging the Gap Between AI and Data</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-ai-badge); background-color: rgba(132, 204, 22, 0.2);">ai</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/linux-vs-unix-the-kernel-wars" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">15/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Linux vs. Unix: The Kernel Wars and the Philosophy of Modular Design</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/the-halo-effect" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">14/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Halo Effect: Why We Trust Idiots with Good Hair</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/mastering-git-worktrees-and-ai" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">13/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Mastering Git Worktrees: Parallel Development with AI Agents</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/series/philosophy-101" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">07/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="shrink-0" style="color: var(--color-rant-badge);"><path d="M216,72H131.31L104,44.69A15.88,15.88,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.41,15.41,0,0,0,39.39,216h177.5A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40Z"></path></svg><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Philosophy 101</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/understanding-database-normalization-3nf" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">06/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Understanding Database Normalization: The Path to Third Normal Form (3NF)</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/cqrs-in-go-for-geniuses" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">06/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">CQRS: Command Query Responsibility Segregation in Modern Architecture</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/hyrums-law" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">05/02/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Hyrum's Law: Why Your Bug Fix Broke My Spacebar Heating Workflow</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/architecting-trust-preventing-insider-threats" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">23/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Architecting Trust: 5 Patterns to Prevent Insider Threats</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/deep-link-configuration-with-url-parameters" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">21/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Deep Link Configuration: Achieving a Global Parameter Observer in React</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/introducing-fezluxe-refined-architectural-elegance" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-feat-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">20/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Introducing Fezluxe: A Study in Refined Architectural Elegance</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-feat-badge); background-color: rgba(168, 85, 247, 0.3);">feat</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/gun-and-ball" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">19/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The FIFA Paradox: Why We Spend 14 Hours Playing Games We Hate</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/what-genre-should-i-watch" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">18/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Dying is Easy, Comedy is Statistically Impossible: An IMDbayes Analysis</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/debian-upgrade-path" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-gist-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">12/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Upgrading Debian 11 to 13: The Safe Path</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-gist-badge); background-color: rgba(245, 158, 11, 0.3);">gist</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/steganography-lsb-deep-dive" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">12/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Steganography: Hiding Secrets in Plain Sight with LSB</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/pixel-art-resources-guide" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">12/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Ultimate Pixel Art Resources Guide</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/implementing-drag-and-drop-in-react" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">10/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Implementing Drag and Drop in React without Libraries</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/gh-pages-enametoolong-fix" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">08/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Fixing gh-pages: Resolving spawn ENAMETOOLONG</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/git-cheatsheet-gist" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-gist-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">08/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Git Cheatsheet: From Basics to Time Travel</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-gist-badge); background-color: rgba(245, 158, 11, 0.3);">gist</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/aether-music-player" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-feat-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">06/01/26</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Aether: Cyberpunk Audio Interface</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-feat-badge); background-color: rgba(168, 85, 247, 0.3);">feat</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/5-ways-to-pass-arguments-in-a-url" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-gist-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">24/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">5 Ways to Pass Arguments in a URL (Beyond the Basic Query)</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-gist-badge); background-color: rgba(245, 158, 11, 0.3);">gist</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/renaming-js-to-jsx-gist" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-gist-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">23/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Quick Renaming .js to .jsx for React</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-gist-badge); background-color: rgba(245, 158, 11, 0.3);">gist</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/corrupted-blood-incident" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">21/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Corrupted Blood Incident: When a Glitch Taught Us About Pandemics</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/building-the-knowledge-graph" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">21/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Building the Knowledge Graph: Visualizing Fezcodex in 3D</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/routing-revolution-ssg-and-seo" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">21/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Routing Revolution: SSG, BrowserRouter, and the SEO Fix</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/art-generation-in-fezcodex" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">20/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Art of the Algorithm: Generative Visuals in Fezcodex</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/brutalist-refactor" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-feat-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">19/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Brutalist Fezcodex: The Big Cleanup</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-feat-badge); background-color: rgba(168, 85, 247, 0.3);">feat</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/introducing-reading-experience" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-feat-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">17/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Introducing New Reading Modes: Dossier and Terminal!</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-feat-badge); background-color: rgba(168, 85, 247, 0.3);">feat</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/typeface-vs-font" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">17/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Typeface vs. Font: The Music Analogy</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/the-irrelevant-speech-effect" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">17/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Why Your Brain Hates Lyrics While You Work: The Irrelevant Speech Effect</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/react-hooks-comparison" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-gist-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">15/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">React Hooks Showdown: useMemo vs useCallback vs useState vs useEffect</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-gist-badge); background-color: rgba(245, 158, 11, 0.3);">gist</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/react-magic-markdown-components" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">12/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">React Magic: Rendering Components from Markdown Links</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/implementing-a-sliding-side-panel" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">11/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Implementing a Resizable Global Sliding Side Panel in React</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/building-a-digital-rotary-phone" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">02/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Building a Digital Rotary Phone</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/nocturnote" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">01/12/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Nocturnote: A Sleek and Modern Text Editor</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/how-fractal-flora-works" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">28/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Art of Recursive Botany: How Fractal Flora Works</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/the-fezcodex-achievement-system" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-feat-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">28/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Unlocking Your Journey: Introducing the Fezcodex Achievement System!</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-feat-badge); background-color: rgba(168, 85, 247, 0.3);">feat</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/visual-modes-easter-eggs" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-feat-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">27/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Unlocking the Multiverse: New Visual Modes in Fezcodex</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-feat-badge); background-color: rgba(168, 85, 247, 0.3);">feat</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/reducing-react-app-size" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">27/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Reducing React App Bundle Size: A Practical Guide</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/mastering-tailwind-centering" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-gist-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">26/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Mastering Tailwind CSS: The "Absolute Centering" Trick</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-gist-badge); background-color: rgba(245, 158, 11, 0.3);">gist</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/gaussian-elimination" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">23/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Gaussian Elimination: The Swiss Army Knife of Linear Systems in Computer Engineering</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/fixing-grub" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">22/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Fixing GRUB Syntax Errors Caused by Grub Customizer</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/floating-point-precision-in-javascript" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">21/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">4 Equals For Complete Equalness</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/kaprekars-routine" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">18/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Kaprekar's Routine: A Curious Number Game</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/chaos-theory-philosophical-rant" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">18/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Inevitable Dance of Entropy: A Rant on Chaos</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/decoding-the-digital-alphabet-base-xx-encodings" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">16/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Decoding the Digital Alphabet: A Comprehensive Guide to BaseXX Encodings</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/fezcodex-stories-with-git-subtrees" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">14/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Fezcodex Stories with `git subtree`</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/piml" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">12/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Parenthesis Intended Markup Language</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/publish-to-npm" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">13/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Publishing to NPM</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/image-toolkit-deep-dive" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">10/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Image Toolkit Deep Dive</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/picker-wheel-deep-dive" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">09/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Picker Wheel Deep Dive</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/demystifying-tailwind-css" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">07/11/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Demystifying Tailwind CSS</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/dnd-content" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dnd-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">21/10/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">The Necessary D&D Post</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dnd-badge); background-color: rgba(236, 72, 153, 0.3);">d&d</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/about-fezcodex" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-rant-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">14/10/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">About Fezcodex</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-rant-badge); background-color: rgba(16, 185, 129, 0.2);">rant</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/ubuntu-once-more" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">29/10/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Ubuntu Once More</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/series/react-of-fezcodex" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">25/10/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="shrink-0" style="color: var(--color-dev-badge);"><path d="M216,72H131.31L104,44.69A15.88,15.88,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.41,15.41,0,0,0,39.39,216h177.5A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40Z"></path></svg><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">React of Fezcodex</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/series/gemini-explains" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">25/10/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="shrink-0" style="color: var(--color-dev-badge);"><path d="M216,72H131.31L104,44.69A15.88,15.88,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.41,15.41,0,0,0,39.39,216h177.5A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40Z"></path></svg><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Gemini Explains</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/do-i-need-to-create-a-lib-for-that" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">16/10/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Do I Need to Create a Lib For That?</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/hashrouter-vs-browserrouter" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">15/10/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">HashRouter vs. BrowserRouter</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/series/algos" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">01/10/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="shrink-0" style="color: var(--color-dev-badge);"><path d="M216,72H131.31L104,44.69A15.88,15.88,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.41,15.41,0,0,0,39.39,216h177.5A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40Z"></path></svg><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Algorithms</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div><div class="relative mr-4 md:mr-12" style="opacity: 0; transform: translateX(-10px);"><a class="group relative flex items-center justify-between border-b border-white/10 py-6 pr-20 transition-all duration-300" href="/blog/series/interview-journal" data-discover="true"><div class="absolute left-0 top-0 h-full w-1 transition-all duration-300 opacity-0" style="background-color: var(--color-dev-badge);"></div><div class="flex flex-1 items-center gap-6 pl-4 md:pl-8 min-w-0 pr-12"><span class="font-mono text-[10px] tracking-widest flex-shrink-0 transition-colors duration-300 text-gray-600">01/01/25</span><div class="flex items-center gap-3 min-w-0 flex-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" class="shrink-0" style="color: var(--color-dev-badge);"><path d="M216,72H131.31L104,44.69A15.88,15.88,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.41,15.41,0,0,0,39.39,216h177.5A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40Z"></path></svg><div class="flex flex-col gap-1"><h3 class="text-xl font-medium uppercase tracking-tight transition-all duration-300 md:text-2xl break-words leading-tight text-gray-500 group-hover:text-gray-300">Interview Journal</h3></div></div></div><div class="flex items-center gap-4 flex-shrink-0"><span class="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color: var(--color-dev-badge); background-color: rgba(59, 130, 246, 0.3);">dev</span><div class="w-10 flex justify-end"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" class="transition-all duration-300 -translate-x-4 opacity-0 text-gray-500"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></div></div></a></div></div><div class="mt-auto pt-20 border-t border-white/10 text-gray-600 font-mono text-[10px] uppercase tracking-widest">Total Stored Entries: 93</div></div><div class="hidden 4xl:block fixed right-0 top-0 h-screen w-1/2 bg-neutral-900 overflow-hidden border-l border-white/10 z-20"><div class="absolute inset-0" style="opacity: 0;"><div class="absolute inset-0 z-0"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full opacity-60"><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" class="w-full h-full"><defs><pattern id="bg-grid-penney-s-game--the-coin-flip-bet-where-going-second-always-wins" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="0.5" fill="white" opacity="0.05"></circle></pattern></defs><rect width="100" height="100" fill="url(#bg-grid-penney-s-game--the-coin-flip-bet-where-going-second-always-wins)"></rect><rect x="10" y="30" width="67.36932586878538" height="1.8711716912221164" fill="hsl(146, 70%, 60%)" opacity="0.5606252182740719"></rect><circle cx="10" cy="30" r="3.7423433824442327" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="30" y="50" width="0.542454831302166" height="34.21462911181152" fill="hsl(146, 70%, 60%)" opacity="0.649048779066652"></rect><circle cx="30" cy="50" r="1.084909662604332" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="10" y="30" width="0.5856510761659592" height="54.213433749973774" fill="hsl(146, 70%, 60%)" opacity="0.7138796753250063"></rect><rect x="40" y="70" width="1.3450588980922475" height="70.18928597215563" fill="hsl(146, 70%, 60%)" opacity="0.48643085216172044"></rect><circle cx="40" cy="70" r="2.690117796184495" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="80" y="20" width="69.99022638890892" height="0.6779422974213958" fill="hsl(146, 70%, 60%)" opacity="0.7395109328441323"></rect><rect x="20" y="50" width="1.9823823993792757" height="66.04545571375638" fill="hsl(146, 70%, 60%)" opacity="0.7719935971312225"></rect><rect x="40" y="20" width="39.48730687610805" height="1.556137259467505" fill="hsl(146, 70%, 60%)" opacity="0.7908507226035"></rect><circle cx="40" cy="20" r="3.11227451893501" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="50" y="90" width="60.30140018090606" height="0.731167578138411" fill="hsl(146, 70%, 60%)" opacity="0.5200136796571314"></rect><circle cx="50" cy="90" r="1.462335156276822" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="20" y="0" width="1.8135563506511971" height="71.51249292306602" fill="hsl(146, 70%, 60%)" opacity="0.5448622427415103"></rect><circle cx="20" cy="0" r="3.6271127013023943" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="80" y="20" width="69.674307317473" height="1.7228745899628848" fill="hsl(146, 70%, 60%)" opacity="0.5629309582989663"></rect><circle cx="80" cy="20" r="3.4457491799257696" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="10" y="0" width="29.450245462357998" height="1.522224686224945" fill="hsl(146, 70%, 60%)" opacity="0.7893904937896878"></rect><circle cx="10" cy="0" r="3.04444937244989" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="80" y="10" width="1.699503295822069" height="78.6221164278686" fill="hsl(146, 70%, 60%)" opacity="0.661650540912524"></rect><circle cx="80" cy="10" r="3.399006591644138" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="70" y="30" width="40.28081301599741" height="1.2558848957996815" fill="#ffffff" opacity="0.6830881116911769"></rect><circle cx="70" cy="30" r="2.511769791599363" fill="hsl(236, 80%, 60%)" opacity="0.8"></circle><rect x="40" y="0" width="49.02938652317971" height="1.112039601430297" fill="#ffffff" opacity="0.8116790033411234"></rect><rect x="40" y="30" width="1.6851443832274526" height="23.484359551221132" fill="hsl(146, 70%, 60%)" opacity="0.521874469704926"></rect></svg><div class="absolute inset-0 opacity-[0.15] pointer-events-none mix-blend-overlay" style="background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)'/%3E%3C/svg%3E");"></div><div class="absolute bottom-4 right-4 flex gap-2 items-center"></div></div><div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black/40"></div></div><div class="absolute bottom-0 left-0 w-full p-16 z-10 flex flex-col gap-8"><div class="flex items-center gap-6"><div class="flex items-center gap-2 text-emerald-400 font-mono text-[10px] tracking-widest uppercase"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"></path></svg><span>24/06/2026</span></div><div class="flex items-center gap-2 text-white font-mono text-[10px] tracking-widest uppercase bg-white/10 px-2 py-1 border border-white/10 rounded-sm"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256"><path d="M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z"></path></svg><span>dev</span></div></div><div class="flex flex-col gap-4"><h2 class="text-6xl md:text-7xl font-instr-serif text-white uppercase tracking-normal leading-none">Penney's Game: The Coin-Flip Bet Where Going Second Always Wins</h2><p class="text-lg text-gray-300 font-syne leading-relaxed max-w-xl">A short explainer on Penney's Game, the non-transitive coin-flip game where the second player can always pick a three-flip sequence that beats the first player's — sometimes 7 to 1. Includes the optimal-response rule and the full odds table.</p></div><div class="flex flex-wrap gap-2 max-w-xl"><span class="inline-flex items-center gap-1 text-[9px] font-mono font-bold uppercase tracking-wider text-gray-400 bg-black/40 px-2 py-1 rounded-sm border border-white/5"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 256 256"><path d="M224,88H175.4l8.47-46.57a8,8,0,0,0-15.74-2.86l-9,49.43H111.4l8.47-46.57a8,8,0,0,0-15.74-2.86L95.14,88H48a8,8,0,0,0,0,16H92.23L83.5,152H32a8,8,0,0,0,0,16H80.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,80,224a8,8,0,0,0,7.86-6.57l9-49.43H144.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,144,224a8,8,0,0,0,7.86-6.57l9-49.43H208a8,8,0,0,0,0-16H163.77l8.73-48H224a8,8,0,0,0,0-16Zm-76.5,64H99.77l8.73-48h47.73Z"></path></svg> probability</span><span class="inline-flex items-center gap-1 text-[9px] font-mono font-bold uppercase tracking-wider text-gray-400 bg-black/40 px-2 py-1 rounded-sm border border-white/5"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 256 256"><path d="M224,88H175.4l8.47-46.57a8,8,0,0,0-15.74-2.86l-9,49.43H111.4l8.47-46.57a8,8,0,0,0-15.74-2.86L95.14,88H48a8,8,0,0,0,0,16H92.23L83.5,152H32a8,8,0,0,0,0,16H80.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,80,224a8,8,0,0,0,7.86-6.57l9-49.43H144.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,144,224a8,8,0,0,0,7.86-6.57l9-49.43H208a8,8,0,0,0,0-16H163.77l8.73-48H224a8,8,0,0,0,0-16Zm-76.5,64H99.77l8.73-48h47.73Z"></path></svg> math</span><span class="inline-flex items-center gap-1 text-[9px] font-mono font-bold uppercase tracking-wider text-gray-400 bg-black/40 px-2 py-1 rounded-sm border border-white/5"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 256 256"><path d="M224,88H175.4l8.47-46.57a8,8,0,0,0-15.74-2.86l-9,49.43H111.4l8.47-46.57a8,8,0,0,0-15.74-2.86L95.14,88H48a8,8,0,0,0,0,16H92.23L83.5,152H32a8,8,0,0,0,0,16H80.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,80,224a8,8,0,0,0,7.86-6.57l9-49.43H144.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,144,224a8,8,0,0,0,7.86-6.57l9-49.43H208a8,8,0,0,0,0-16H163.77l8.73-48H224a8,8,0,0,0,0-16Zm-76.5,64H99.77l8.73-48h47.73Z"></path></svg> games</span><span class="inline-flex items-center gap-1 text-[9px] font-mono font-bold uppercase tracking-wider text-gray-400 bg-black/40 px-2 py-1 rounded-sm border border-white/5"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 256 256"><path d="M224,88H175.4l8.47-46.57a8,8,0,0,0-15.74-2.86l-9,49.43H111.4l8.47-46.57a8,8,0,0,0-15.74-2.86L95.14,88H48a8,8,0,0,0,0,16H92.23L83.5,152H32a8,8,0,0,0,0,16H80.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,80,224a8,8,0,0,0,7.86-6.57l9-49.43H144.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,144,224a8,8,0,0,0,7.86-6.57l9-49.43H208a8,8,0,0,0,0-16H163.77l8.73-48H224a8,8,0,0,0,0-16Zm-76.5,64H99.77l8.73-48h47.73Z"></path></svg> statistics</span><span class="inline-flex items-center gap-1 text-[9px] font-mono font-bold uppercase tracking-wider text-gray-400 bg-black/40 px-2 py-1 rounded-sm border border-white/5"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 256 256"><path d="M224,88H175.4l8.47-46.57a8,8,0,0,0-15.74-2.86l-9,49.43H111.4l8.47-46.57a8,8,0,0,0-15.74-2.86L95.14,88H48a8,8,0,0,0,0,16H92.23L83.5,152H32a8,8,0,0,0,0,16H80.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,80,224a8,8,0,0,0,7.86-6.57l9-49.43H144.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,144,224a8,8,0,0,0,7.86-6.57l9-49.43H208a8,8,0,0,0,0-16H163.77l8.73-48H224a8,8,0,0,0,0-16Zm-76.5,64H99.77l8.73-48h47.73Z"></path></svg> non-transitive</span><span class="inline-flex items-center gap-1 text-[9px] font-mono font-bold uppercase tracking-wider text-gray-400 bg-black/40 px-2 py-1 rounded-sm border border-white/5"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 256 256"><path d="M224,88H175.4l8.47-46.57a8,8,0,0,0-15.74-2.86l-9,49.43H111.4l8.47-46.57a8,8,0,0,0-15.74-2.86L95.14,88H48a8,8,0,0,0,0,16H92.23L83.5,152H32a8,8,0,0,0,0,16H80.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,80,224a8,8,0,0,0,7.86-6.57l9-49.43H144.6l-8.47,46.57a8,8,0,0,0,6.44,9.3A7.79,7.79,0,0,0,144,224a8,8,0,0,0,7.86-6.57l9-49.43H208a8,8,0,0,0,0-16H163.77l8.73-48H224a8,8,0,0,0,0-16Zm-76.5,64H99.77l8.73-48h47.73Z"></path></svg> fun</span></div><div class="mt-8" style="opacity: 0; transform: translateY(10px);"><a class="inline-flex items-center gap-4 text-white border-b-2 border-emerald-500 pb-2 hover:bg-emerald-500 hover:text-black transition-all px-2 py-2" href="/blog/penneys-game" data-discover="true"><span class="text-sm font-syne font-normal uppercase tracking-[0.2em]">Read Post</span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M232,44H160a43.86,43.86,0,0,0-32,13.85A43.86,43.86,0,0,0,96,44H24A12,12,0,0,0,12,56V200a12,12,0,0,0,12,12H96a20,20,0,0,1,20,20,12,12,0,0,0,24,0,20,20,0,0,1,20-20h72a12,12,0,0,0,12-12V56A12,12,0,0,0,232,44ZM96,188H36V68H96a20,20,0,0,1,20,20V192.81A43.79,43.79,0,0,0,96,188Zm124,0H160a43.71,43.71,0,0,0-20,4.83V88a20,20,0,0,1,20-20h60Z"></path></svg></a></div></div></div></div></div></div></main></div></div><div class="fixed bottom-0 left-0 w-full h-32 pointer-events-none z-[9999]"><div class="absolute bottom-2 flex flex-col items-center pointer-events-auto cursor-help" style="width: 60px; transform: translateX(24.8702vw);"><div class="relative" style="transform: scaleX(0.132087);"><div class="w-10 h-10 flex items-center justify-center rounded-lg border-2 bg-[#050505] border-[#10B981]/40 text-[#10B981] shadow-lg" style="transform: translateY(-2.03662px) rotate(3.55547deg);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M208,104a79.86,79.86,0,0,1-30.59,62.92A24.29,24.29,0,0,0,168,186v6a8,8,0,0,1-8,8H96a8,8,0,0,1-8-8v-6a24.11,24.11,0,0,0-9.3-19A79.87,79.87,0,0,1,48,104.45C47.76,61.09,82.72,25,126.07,24A80,80,0,0,1,208,104Z" opacity="0.2"></path><path d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z"></path></svg><div class="absolute top-2 left-2 flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div></div></div><div class="flex justify-around mt-[-4px]"><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color: rgb(16, 185, 129); transform: translateY(-1.7411px);"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color: rgb(16, 185, 129); transform: none;"></div></div></div></div></div><div class="fixed top-24 right-6 md:right-12 z-[100] pointer-events-none flex flex-col items-end gap-2"><div class="pointer-events-auto flex flex-col-reverse gap-3"></div></div></div>
<script id="vike_pageContext" type="application/json">{"pageProps":{"is404":false},"urlPathname":"\\/blog","pageId":"\\/pages","routeParams":{"*":"blog"}}</script>
<script id="vike_globalContext" type="application/json">{}</script>
<script src="/assets/entries/entry-server-routing.B6G23p4v.js" type="module" async></script>
<link rel="modulepreload" href="/assets/entries/pages.DPFuqVFd.js" as="script" type="text/javascript">
<link rel="modulepreload" href="/assets/chunks/chunk-BXl3LOEh.js" as="script" type="text/javascript">
</body>
</html>