-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1 lines (1 loc) · 29.9 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 29.9 KB
1
<!DOCTYPE html><html class="dark" lang="en"><head><meta charset="utf-8"><link href="/favicon.ico" rel="icon"><link href="/favicon.svg" rel="icon" type="image/svg+xml"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="#000000" name="theme-color"><link href="/rss.xml" rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed"><meta content="codex by fezcode..." name="description"><meta content="website" property="og:type"><meta content="https://fezcode.com/" property="og:url"><meta content="Fezcodex - Personal Blog and Projects" property="og:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." property="og:description"><meta content="/images/asset/ogtitle.png" property="og:image"><meta content="summary_large_image" name="twitter:card"><meta content="https://fezcode.com/" name="twitter:url"><meta content="Fezcodex - Personal Blog and Projects" name="twitter:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." name="twitter:description"><meta content="/images/asset/ogtitle.png" name="twitter:image"><link href="/logo192.png" rel="apple-touch-icon"><link href="/manifest.json" rel="manifest"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" 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"><title>Fezcodex Project | Fezcodex</title><title>Fezcodex Project | Fezcodex</title><title>fezcodex</title><script defer src="/static/js/main.48454598.js"></script><link href="/static/css/main.4258c315.css" rel="stylesheet"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect"><link href="https://github.com" rel="preconnect"><link href="https://release-assets.githubusercontent.com" rel="preconnect"><meta content="This website... The app you are currently on. Personal website and blog, written in React." name="description"><meta content="blog, personal-website, react, tailwind, webdev" name="keywords"><meta content="Fezcodex Project | Fezcodex" property="og:title"><meta content="This website... The app you are currently on. Personal website and blog, written in React." property="og:description"><meta content="https://fezcode.com/images/projects/fezcodex/fezcodex.webp" property="og:image"><meta content="https://fezcode.com/projects/fezcodex/" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/projects/fezcodex/fezcodex.webp" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="Fezcodex Project | Fezcodex" name="twitter:title"><meta content="This website... The app you are currently on. Personal website and blog, written in React." name="twitter:description"><meta content="https://fezcode.com/images/projects/fezcodex/fezcodex.webp" name="twitter:image"><meta content="https://fezcode.com/projects/fezcodex/" name="twitter:url"><link href="https://fezcode.com/projects/fezcodex/" rel="canonical"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect"><link href="https://github.com" rel="preconnect"><link href="https://release-assets.githubusercontent.com" rel="preconnect"><meta content="This website... The app you are currently on. Personal website and blog, written in React." name="description"><meta content="blog, personal-website, react, tailwind, webdev" name="keywords"><meta content="Fezcodex Project | Fezcodex" property="og:title"><meta content="This website... The app you are currently on. Personal website and blog, written in React." property="og:description"><meta content="https://fezcode.com/images/projects/fezcodex/fezcodex.webp" property="og:image"><meta content="https://fezcode.com/projects/fezcodex/" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/projects/fezcodex/fezcodex.webp" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="Fezcodex Project | Fezcodex" name="twitter:title"><meta content="This website... The app you are currently on. Personal website and blog, written in React." name="twitter:description"><meta content="https://fezcode.com/images/projects/fezcodex/fezcodex.webp" name="twitter:image"><meta content="https://fezcode.com/projects/fezcodex/" name="twitter:url"><link href="https://fezcode.com/projects/fezcodex/" rel="canonical"></head><body class="bg-slate-950" style="cursor:default;user-select:auto"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height:auto;opacity:1"><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 fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><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">SWAT TACTICS IS ONLINE: ENGAGE IN HIGH-STAKES STRATEGIC ENCOUNTERS. ACCESS AT /SWAT-TACTICS.</p><a 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" href="https://fezcode.com/Swat-Tactics/">Play Swat Tactics<svg fill="currentColor" height="12" viewBox="0 0 256 256" width="12" xmlns="http://www.w3.org/2000/svg"><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 fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><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="flex-1 flex flex-col transition-all duration-300 md:ml-0"><main class="flex-grow"><div class="min-h-screen bg-product-bg text-product-body-text font-nunito selection:bg-product-card-icon/30 selection:text-white"><nav class="sticky top-0 z-50 bg-product-bg/80 backdrop-blur-xl border-b border-white/5 px-6 py-4"><div class="max-w-7xl mx-auto flex items-center justify-between"><div class="flex items-center space-x-8"><a class="text-xl font-instr-serif italic text-white hover:text-product-card-icon transition-colors" href="/" data-discover="true">fezcodex</a><div class="h-4 w-px bg-white/10 hidden md:block"></div><a class="font-nunito text-product-body-text hover:text-white transition-colors hidden md:block" href="/projects" data-discover="true">Projects</a><div class="h-4 w-px bg-white/10 hidden md:block"></div><span class="font-nunito text-product-card-text font-bold hidden md:block uppercase tracking-widest text-xs">Fezcodex Project</span></div><div class="flex items-center space-x-6"><div class="hidden md:flex items-center space-x-6"><a class="text-sm font-nunito text-product-body-text hover:text-white transition-colors" href="#integrations">Exploration</a><a class="text-sm font-nunito text-product-body-text hover:text-white transition-colors" href="#features">Features</a><a class="text-sm font-nunito text-product-body-text hover:text-white transition-colors" href="#technical">Stack</a><a class="text-sm font-nunito text-product-body-text hover:text-white transition-colors" href="#details">Philosophy</a></div><a class="bg-product-card-icon hover:bg-product-card-icon/90 text-product-bg font-nunito font-black px-5 py-2 rounded-lg text-xs uppercase tracking-widest transition-all transform hover:scale-105 active:scale-95" href="https://fezcode.com/about" rel="noopener noreferrer" target="_blank">Visit Project</a></div></div></nav><main class="max-w-7xl mx-auto px-6 pb-24"><section class="pt-20 pb-8"><div class="flex flex-col items-center justify-center text-center py-10"><div class="flex items-center space-x-2 mb-6 px-3 py-1 bg-product-card-bg/50 border border-white/5 rounded-full"><span class="font-mono text-product-card-icon text-sm">◯</span><span class="font-mono text-product-body-text text-xs tracking-tight">Optimizing...</span></div><div class="flex flex-wrap items-center justify-center gap-3"><h1 class="text-5xl md:text-7xl font-instr-serif text-white italic tracking-tight">Built for</h1><div class="flex items-center"><div class="text-product-card-icon mx-2"><svg fill="none" height="32" viewBox="0 0 64 64" width="32" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 md:w-12 md:h-12"><path d="M19.2617 9.77173C19.9088 9.07558 20.9191 8.91467 21.7314 9.31665L21.8906 9.40356L21.9355 9.43481L22.1914 9.6311C22.2037 9.64058 22.2161 9.6508 22.2275 9.66138L44.627 30.4622C45.0537 30.8586 45.2997 31.4154 45.2998 32.0002C45.2998 32.4378 45.1632 32.862 44.9141 33.2141C44.9036 33.2289 44.8919 33.2435 44.8799 33.2571L44.6611 33.5032C44.6504 33.5153 44.6388 33.5273 44.627 33.5383L22.2275 54.3381C21.3775 55.127 20.0506 55.0769 19.2617 54.2278H19.2607C18.4721 53.3777 18.5226 52.0508 19.3721 51.262L40.1182 32.0002L19.3721 12.7385C19.3602 12.7275 19.3487 12.7155 19.3379 12.7034L19.1221 12.4592C19.1105 12.4462 19.0999 12.4324 19.0898 12.4182C18.5226 11.6235 18.5712 10.5162 19.2607 9.77271L19.2617 9.77173Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><span class="text-5xl md:text-7xl font-instr-serif text-product-card-icon italic tracking-tight min-w-[200px] text-left">explorers<span class="animate-pulse ml-1">|</span></span></div></div></div><div class="max-w-5xl mx-auto my-12 rounded-2xl overflow-hidden border border-white/10 hover:border-product-card-icon transition-all duration-500 shadow-2xl relative group"><img alt="Product Preview" class="w-full h-auto" src="/images/projects/fezcodex/fezcodex.webp"><div class="absolute inset-0 bg-gradient-to-t from-product-bg via-transparent to-transparent opacity-60"></div><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none shadow-[inset_0_0_40px_rgba(217,119,87,0.1)]"></div></div><div class="max-w-3xl mx-auto text-center mt-4"><p class="text-xl md:text-2xl text-product-body-text leading-relaxed font-nunito">Fezcodex is more than just a portfolio; it's a living digital garden, a personal operating system, and a testament to the brutalist aesthetic of the modern web.</p></div></section><section class="mb-12"><div class="py-12 border-y border-white/5 bg-white/[0.02]"><div class="max-w-7xl mx-auto px-6"><p class="text-center text-xs font-nunito font-bold text-product-body-text uppercase tracking-[0.2em] mb-10 opacity-50">Built with</p><div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-40 grayscale hover:grayscale-0 transition-all duration-500"><div class="text-xl font-bold text-white tracking-tighter uppercase">REACT</div><div class="text-xl font-bold text-white tracking-tighter uppercase">TAILWIND</div><div class="text-xl font-bold text-white tracking-tighter uppercase">FRAMER MOTION</div><div class="text-xl font-bold text-white tracking-tighter uppercase">PIML</div><div class="text-xl font-bold text-white tracking-tighter uppercase">MARKDOWN</div></div></div></div></section><section class="py-4"><div class="max-w-4xl mx-auto my-8 bg-[#0a0a0a] rounded-2xl border border-white/10 shadow-3xl overflow-hidden font-mono"><div class="flex bg-white/5 border-b border-white/10 overflow-x-auto"><button class="px-6 py-3 text-sm transition-all border-r border-white/10 whitespace-nowrap bg-[#141413] text-product-card-icon border-b-2 border-b-product-card-icon">Search</button><button class="px-6 py-3 text-sm transition-all border-r border-white/10 whitespace-nowrap text-product-body-text hover:bg-white/5">Theme</button><button class="px-6 py-3 text-sm transition-all border-r border-white/10 whitespace-nowrap text-product-body-text hover:bg-white/5">Archive</button></div><div class="p-8 min-h-[300px]"><div class="flex items-center space-x-3 mb-6"><span class="text-product-card-icon">$</span><span class="text-white">fezcodex, search "brutalist design"</span></div><div class="text-product-body-text/80 leading-relaxed whitespace-pre-wrap animate-in fade-in slide-in-from-bottom-2 duration-500">Searching digital archive... Found 12 posts related to brutalism. Opening search results...</div></div></div></section><section class="py-24 border-t border-white/5" id="integrations"><h2 class="text-4xl md:text-6xl font-instr-serif text-white italic mb-16 text-center">Exploration Modes</h2><div class="grid grid-cols-1 md:grid-cols-3 gap-8"><div class="flex flex-col space-y-6 group"><div class="rounded-2xl overflow-hidden border border-white/10 hover:border-product-card-icon transition-all duration-500 shadow-2xl relative"><img alt="Command Palette" class="w-full h-auto aspect-video object-cover" src="/images/projects/fezcodex/command.png"><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none shadow-[inset_0_0_40px_rgba(217,119,87,0.1)]"></div></div><div class="space-y-4"><h3 class="text-2xl md:text-3xl font-instr-serif text-white italic">Command Palette</h3><p class="text-base text-product-body-text leading-relaxed">Deep system access from any page via Cmd+K.</p><a class="inline-flex items-center gap-2 bg-product-card-bg hover:bg-white/5 border border-white/10 text-product-card-icon font-black px-4 py-2 rounded-lg text-xs uppercase tracking-widest transition-all transform hover:scale-105 active:scale-95" href="/commands" data-discover="true">Explore <span>→</span></a></div></div><div class="flex flex-col space-y-6 group"><div class="rounded-2xl overflow-hidden border border-white/10 hover:border-product-card-icon transition-all duration-500 shadow-2xl relative"><img alt="The Vague: Magazine" class="w-full h-auto aspect-video object-cover" src="/images/projects/fezcodex/the_vague.png"><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none shadow-[inset_0_0_40px_rgba(217,119,87,0.1)]"></div></div><div class="space-y-4"><h3 class="text-2xl md:text-3xl font-instr-serif text-white italic">The Vague: Magazine</h3><p class="text-base text-product-body-text leading-relaxed">Raw notes and work-in-progress thoughts.</p><a class="inline-flex items-center gap-2 bg-product-card-bg hover:bg-white/5 border border-white/10 text-product-card-icon font-black px-4 py-2 rounded-lg text-xs uppercase tracking-widest transition-all transform hover:scale-105 active:scale-95" href="/the-vague" data-discover="true">Explore <span>→</span></a></div></div><div class="flex flex-col space-y-6 group"><div class="rounded-2xl overflow-hidden border border-white/10 hover:border-product-card-icon transition-all duration-500 shadow-2xl relative"><img alt="Interactive Timeline" class="w-full h-auto aspect-video object-cover" src="/images/projects/fezcodex/timeline.png"><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none shadow-[inset_0_0_40px_rgba(217,119,87,0.1)]"></div></div><div class="space-y-4"><h3 class="text-2xl md:text-3xl font-instr-serif text-white italic">Interactive Timeline</h3><p class="text-base text-product-body-text leading-relaxed">A chronological journey through the archive.</p><a class="inline-flex items-center gap-2 bg-product-card-bg hover:bg-white/5 border border-white/10 text-product-card-icon font-black px-4 py-2 rounded-lg text-xs uppercase tracking-widest transition-all transform hover:scale-105 active:scale-95" href="/timeline" data-discover="true">Explore <span>→</span></a></div></div></div></section><section class="py-24 border-t border-white/5" id="features"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"><div class="bg-product-card-bg p-8 rounded-2xl border border-white/5 hover:border-product-card-icon/20 transition-all group"><div class="mb-6 inline-flex p-3 rounded-xl bg-product-card-icon/10 text-product-card-icon group-hover:scale-110 transition-transform duration-300"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M208,76h0a28,28,0,0,1-28,28H152V76a28,28,0,0,1,28-28h0A28,28,0,0,1,208,76ZM76,48h0A28,28,0,0,0,48,76h0a28,28,0,0,0,28,28h28V76A28,28,0,0,0,76,48ZM180,152H152v28a28,28,0,0,0,28,28h0a28,28,0,0,0,28-28h0A28,28,0,0,0,180,152ZM48,180h0a28,28,0,0,0,28,28h0a28,28,0,0,0,28-28V152H76A28,28,0,0,0,48,180Z" opacity="0.2"></path><path d="M180,144H160V112h20a36,36,0,1,0-36-36V96H112V76a36,36,0,1,0-36,36H96v32H76a36,36,0,1,0,36,36V160h32v20a36,36,0,1,0,36-36ZM160,76a20,20,0,1,1,20,20H160ZM56,76a20,20,0,0,1,40,0V96H76A20,20,0,0,1,56,76ZM96,180a20,20,0,1,1-20-20H96Zm16-68h32v32H112Zm68,88a20,20,0,0,1-20-20V160h20a20,20,0,0,1,0,40Z"></path></svg></div><h3 class="text-2xl font-instr-serif text-product-card-text italic mb-4">Command Palette</h3><p class="text-product-body-text font-nunito leading-relaxed text-sm">Navigate, toggle themes, or hack the system with a power-user Cmd+K interface.</p></div><div class="bg-product-card-bg p-8 rounded-2xl border border-white/5 hover:border-product-card-icon/20 transition-all group"><div class="mb-6 inline-flex p-3 rounded-xl bg-product-card-icon/10 text-product-card-icon group-hover:scale-110 transition-transform duration-300"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M224,127.17a96.48,96.48,0,0,1-2.39,22.18A24,24,0,0,1,198.21,168H152a24,24,0,0,0-24,24,24,24,0,0,1-32,22.61C58.73,201.44,32,169.81,32,128a96,96,0,0,1,95-96C179.84,31.47,223.55,74.35,224,127.17Z" opacity="0.2"></path><path d="M200.77,53.89A103.27,103.27,0,0,0,128,24h-1.07A104,104,0,0,0,24,128c0,43,26.58,79.06,69.36,94.17A32,32,0,0,0,136,192a16,16,0,0,1,16-16h46.21a31.81,31.81,0,0,0,31.2-24.88,104.43,104.43,0,0,0,2.59-24A103.28,103.28,0,0,0,200.77,53.89Zm13,93.71A15.89,15.89,0,0,1,198.21,160H152a32,32,0,0,0-32,32,16,16,0,0,1-21.31,15.07C62.49,194.3,40,164,40,128a88,88,0,0,1,87.09-88h.9a88.35,88.35,0,0,1,88,87.25A88.86,88.86,0,0,1,213.81,147.6ZM140,76a12,12,0,1,1-12-12A12,12,0,0,1,140,76ZM96,100A12,12,0,1,1,84,88,12,12,0,0,1,96,100Zm0,56a12,12,0,1,1-12-12A12,12,0,0,1,96,156Zm88-56a12,12,0,1,1-12-12A12,12,0,0,1,184,100Z"></path></svg></div><h3 class="text-2xl font-instr-serif text-product-card-text italic mb-4">Visual Modes</h3><p class="text-product-body-text font-nunito leading-relaxed text-sm">Switch between Cyberpunk, Retro, and Terminal modes to match your aesthetic preference.</p></div><div class="bg-product-card-bg p-8 rounded-2xl border border-white/5 hover:border-product-card-icon/20 transition-all group"><div class="mb-6 inline-flex p-3 rounded-xl bg-product-card-icon/10 text-product-card-icon group-hover:scale-110 transition-transform duration-300"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M208,88H152V32Z" opacity="0.2"></path><path d="M181.66,146.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L164.69,152l-18.35-18.34a8,8,0,0,1,11.32-11.32Zm-72-24a8,8,0,0,0-11.32,0l-24,24a8,8,0,0,0,0,11.32l24,24a8,8,0,0,0,11.32-11.32L91.31,152l18.35-18.34A8,8,0,0,0,109.66,122.34ZM216,88V216a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V40A16,16,0,0,1,56,24h96a8,8,0,0,1,5.66,2.34l56,56A8,8,0,0,1,216,88Zm-56-8h28.69L160,51.31Zm40,136V96H152a8,8,0,0,1-8-8V40H56V216H200Z"></path></svg></div><h3 class="text-2xl font-instr-serif text-product-card-text italic mb-4">Dynamic Content</h3><p class="text-product-body-text font-nunito leading-relaxed text-sm">Integrated blog engine with complex markdown support and live component rendering.</p></div><div class="bg-product-card-bg p-8 rounded-2xl border border-white/5 hover:border-product-card-icon/20 transition-all group"><div class="mb-6 inline-flex p-3 rounded-xl bg-product-card-icon/10 text-product-card-icon group-hover:scale-110 transition-transform duration-300"><svg fill="currentColor" height="32" viewBox="0 0 256 256" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M138.54,149.46C106.62,96.25,149.18,43.05,239.63,48.37,245,138.82,191.75,181.39,138.54,149.46ZM16.26,88.26c-3.8,64.61,34.21,95,72.21,72.21C111.27,122.47,80.87,84.46,16.26,88.26Z" opacity="0.2"></path><path d="M247.63,47.89a8,8,0,0,0-7.52-7.52c-51.76-3-93.32,12.74-111.18,42.22-11.8,19.48-11.78,43.16-.16,65.74a71.37,71.37,0,0,0-14.17,26.95L98.33,159c7.82-16.33,7.52-33.36-1-47.49C84.09,89.73,53.62,78,15.79,80.27a8,8,0,0,0-7.52,7.52c-2.23,37.83,9.46,68.3,31.25,81.5A45.82,45.82,0,0,0,63.44,176,54.58,54.58,0,0,0,87,170.33l25,25V224a8,8,0,0,0,16,0V194.51a55.61,55.61,0,0,1,12.27-35,73.91,73.91,0,0,0,33.31,8.4,60.9,60.9,0,0,0,31.83-8.86C234.89,141.21,250.67,99.65,247.63,47.89ZM86.06,146.74l-24.41-24.4a8,8,0,0,0-11.31,11.31l24.41,24.41c-9.61,3.18-18.93,2.39-26.94-2.46C32.47,146.31,23.79,124.32,24,96c28.31-.25,50.31,8.47,59.6,23.81C88.45,127.82,89.24,137.14,86.06,146.74Zm111.06-1.36c-13.4,8.11-29.15,8.73-45.15,2l53.69-53.7a8,8,0,0,0-11.31-11.32L140.65,136c-6.76-16-6.15-31.76,2-45.15,13.94-23,47-35.8,89.33-34.83C232.94,98.34,220.14,131.44,197.12,145.38Z"></path></svg></div><h3 class="text-2xl font-instr-serif text-product-card-text italic mb-4">Digital Garden</h3><p class="text-product-body-text font-nunito leading-relaxed text-sm">A living space for raw notes, discovery logs, and work-in-progress architectural thoughts.</p></div></div></section><section class="py-24 border-t border-white/5" id="technical"><h2 class="text-4xl md:text-6xl font-instr-serif text-white italic mb-16 text-center">Technical Overview</h2><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="bg-white/[0.03] p-8 rounded-2xl border border-white/5 hover:bg-white/[0.05] transition-all hover:border-product-card-icon/20 group"><p class="text-product-body-text leading-relaxed font-nunito"><span class="text-white block mb-2 text-lg font-instr-serif italic">Frontend:</span> React (CRA + Craco) for component-based architecture.</p></div><div class="bg-white/[0.03] p-8 rounded-2xl border border-white/5 hover:bg-white/[0.05] transition-all hover:border-product-card-icon/20 group"><p class="text-product-body-text leading-relaxed font-nunito"><span class="text-white block mb-2 text-lg font-instr-serif italic">Styling:</span> Tailwind CSS + Framer Motion for high-fidelity animations.</p></div><div class="bg-white/[0.03] p-8 rounded-2xl border border-white/5 hover:bg-white/[0.05] transition-all hover:border-product-card-icon/20 group"><p class="text-product-body-text leading-relaxed font-nunito"><span class="text-white block mb-2 text-lg font-instr-serif italic">Routing:</span> React Router DOM for seamless navigation.</p></div><div class="bg-white/[0.03] p-8 rounded-2xl border border-white/5 hover:bg-white/[0.05] transition-all hover:border-product-card-icon/20 group"><p class="text-product-body-text leading-relaxed font-nunito"><span class="text-white block mb-2 text-lg font-instr-serif italic">Content:</span> Custom Markdown pipeline using remark/rehype.</p></div><div class="bg-white/[0.03] p-8 rounded-2xl border border-white/5 hover:bg-white/[0.05] transition-all hover:border-product-card-icon/20 group"><p class="text-product-body-text leading-relaxed font-nunito"><span class="text-white block mb-2 text-lg font-instr-serif italic">State:</span> Context API for global themes, audio, and preferences.</p></div></div></section><section class="py-24 border-t border-white/5" id="details"><div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center"><h2 class="text-3xl md:text-5xl font-instr-serif text-white italic mb-6 mt-12 first:mt-0">Core Philosophy</h2><p class="text-lg text-product-body-text leading-relaxed mb-6">Fezcodex was designed to break away from the sterile, corporate look of standard portfolios. It embraces brutalism, raw honesty, and a level of interactivity that rewards exploration.</p><div class="my-12 rounded-xl overflow-hidden border border-white/10 hover:border-product-card-icon hover:shadow-[0_0_30px_rgba(217,119,87,0.15)] transition-all duration-500 shadow-xl"><img alt="Detail Preview" class="w-full h-auto" src="/images/projects/fezcodex/about-my-page.webp"></div><div class="my-12 rounded-xl overflow-hidden border border-white/10 hover:border-product-card-icon hover:shadow-[0_0_30px_rgba(217,119,87,0.15)] transition-all duration-500 shadow-xl"><img alt="Detail Preview" class="w-full h-auto" src="/images/projects/fezcodex/terminal.webp"></div><h2 class="text-3xl md:text-5xl font-instr-serif text-white italic mb-6 mt-12 first:mt-0">Tech Stack</h2><p class="text-lg text-product-body-text leading-relaxed mb-6">Built on a modern foundation of React and Tailwind CSS, utilizing a custom Markdown pipeline for rich, dynamic content delivery and Framer Motion for high-fidelity animations.</p></div></section><section class="py-24 border-t border-white/5 text-center" id="cta"><h2 class="text-4xl md:text-6xl font-instr-serif text-white italic mb-8">Explore the Source</h2><p class="text-lg text-product-body-text mb-8">Fezcodex is open-source. Clone the repository to see how it works under the hood:</p><pre><div class="max-w-2xl mx-auto my-10"><div class="bg-product-card-bg border border-white/10 rounded-xl overflow-hidden shadow-2xl"><div class="flex items-center justify-between px-4 py-2 bg-white/5 border-b border-white/5"><div class="flex items-center space-x-2"><svg fill="currentColor" height="16" viewBox="0 0 256 256" width="16" xmlns="http://www.w3.org/2000/svg" class="text-product-body-text"><path d="M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z"></path></svg><span class="text-xs font-mono text-product-body-text uppercase tracking-widest">Get the Project</span></div><div class="flex space-x-1.5"><div class="w-2.5 h-2.5 rounded-full bg-red-500/20 border border-red-500/40"></div><div class="w-2.5 h-2.5 rounded-full bg-yellow-500/20 border border-yellow-500/40"></div><div class="w-2.5 h-2.5 rounded-full bg-green-500/20 border border-green-500/40"></div></div></div><div class="p-4 flex items-center justify-between group"><code class="font-mono text-product-card-text text-sm md:text-base break-all"><span class="text-product-card-icon mr-2">$</span>git clone https://github.com/fezcode/fezcode.github.io.git</code><button class="ml-4 p-2 rounded-lg bg-white/5 hover:bg-white/10 transition-colors border border-white/10 text-product-body-text hover:text-white" title="Copy to clipboard"><svg fill="currentColor" height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg></button></div></div></div></pre></section></main><footer class="py-12 border-t border-white/5 text-center text-lg font-instr-serif text-product-body-text/50">© 2026 Handcrafted by Fezcode · Built with love and code.</footer></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(94.2434vw)"><div class="relative" style="transform:scaleX(-1)"><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(-3.81576px) scale(1.04228) rotate(1.28703deg)"><svg fill="currentColor" height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M224,118.31V200a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V118.31h0A191.14,191.14,0,0,0,128,144,191.08,191.08,0,0,0,224,118.31Z" opacity="0.2"></path><path d="M104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112ZM232,72V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V72A16,16,0,0,1,40,56H80V48a24,24,0,0,1,24-24h48a24,24,0,0,1,24,24v8h40A16,16,0,0,1,232,72ZM96,56h64V48a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8ZM40,72v41.62A184.07,184.07,0,0,0,128,136a184,184,0,0,0,88-22.39V72ZM216,200V131.63A200.25,200.25,0,0,1,128,152a200.19,200.19,0,0,1-88-20.36V200H216Z"></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:#10b981;transform:translateY(-.323001px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-1.677px)"></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></body></html>