-
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) · 54.9 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 54.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>Friends of the Show | Fezcodex</title><title>fezcodex</title><script defer src="/static/js/main.87f8d95f.js"></script><link href="/static/css/main.c666da2c.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="A curated list of signals, portals, and archives from the digital garden." name="description"><meta content="Friends of the Show | Fezcodex" property="og:title"><meta content="A curated list of signals, portals, and archives from the digital garden." property="og:description"><meta content="https://fezcode.com/images/asset/ogtitle.png" property="og:image"><meta content="https://fezcode.com/about/friends" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/asset/ogtitle.png" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="Friends of the Show | Fezcodex" name="twitter:title"><meta content="A curated list of signals, portals, and archives from the digital garden." name="twitter:description"><meta content="https://fezcode.com/images/asset/ogtitle.png" name="twitter:image"><meta content="https://fezcode.com/about/friends" name="twitter:url"><link href="https://fezcode.com/about/friends" rel="canonical"></head><body class="bg-slate-950"><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 viewBox="0 0 256 256" fill="currentColor" height="20" 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">CLIMB THE TALL BUILDING 0 IS ONLINE: BUILD YOUR DECK AND CLIMB. ACCESS AT /CLIMB-THE-TALL-BUILDING-0.</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/climb-the-tall-building-0/">Play Climb the Tall Building 0<svg viewBox="0 0 256 256" fill="currentColor" height="12" 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 viewBox="0 0 256 256" fill="currentColor" height="20" 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 style="opacity:1"><div class="min-h-screen bg-[#0c0a09] text-white p-8 md:p-24 selection:bg-emerald-500/30 relative overflow-x-hidden"><div class="fixed inset-0 opacity-[0.05] pointer-events-none" style="background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:100px 100px"></div><div class="fixed inset-0 opacity-[0.08] pointer-events-none"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full"><svg viewBox="0 0 100 100" class="w-full h-full" preserveAspectRatio="xMidYMid slice"><defs><pattern height="20" id="bg-grid-friends-of-the-show-2" patternUnits="userSpaceOnUse" width="20"><circle cx="1" cy="1" fill="white" opacity="0.05" r="0.5"></circle></pattern></defs><rect fill="url(#bg-grid-friends-of-the-show-2)" height="100" width="100"></rect><g transform="translate(0, 0) rotate(0, 10, 10)"><rect fill="none" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="#ffffff" stroke-width="1.5"></rect></g><g transform="translate(0, 20) rotate(270, 10, 10)"><polygon fill="hsl(9, 70%, 60%)" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(9, 70%, 60%)" stroke-width="0"></polygon></g><g transform="translate(0, 60) rotate(270, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(9, 70%, 60%)"></path></g><g transform="translate(20, 0) rotate(180, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(9, 70%, 60%)" stroke-width="1.5"></polygon></g><g transform="translate(20, 40) rotate(270, 10, 10)"><polygon fill="hsl(189, 60%, 50%)" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(189, 60%, 50%)" stroke-width="0"></polygon></g><g transform="translate(20, 60) rotate(0, 10, 10)"><circle cx="10" cy="10" fill="hsl(9, 70%, 60%)" opacity="0.9" r="8" stroke="hsl(9, 70%, 60%)" stroke-width="0"></circle></g><g transform="translate(40, 0) rotate(90, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(9, 70%, 60%)" stroke-width="1.5"></polygon></g><g transform="translate(40, 20) rotate(90, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(9, 70%, 60%)"></path></g><g transform="translate(40, 60) rotate(90, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(9, 70%, 60%)" stroke-width="1.5"></polygon></g><g transform="translate(60, 0) rotate(0, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(189, 60%, 50%)" stroke-width="1.5"></polygon></g><g transform="translate(60, 40) rotate(180, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(9, 70%, 60%)" stroke-width="1.5"></polygon></g><g transform="translate(60, 80) rotate(90, 10, 10)"><circle cx="10" cy="10" fill="none" opacity="0.9" r="8" stroke="hsl(9, 70%, 60%)" stroke-width="1.5"></circle></g><g transform="translate(80, 60) rotate(90, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(189, 60%, 50%)" stroke-width="1.5"></polygon></g><g transform="translate(80, 80) rotate(180, 10, 10)"><polygon fill="hsl(189, 60%, 50%)" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(189, 60%, 50%)" stroke-width="0"></polygon></g></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="fixed inset-0 pointer-events-none z-50 overflow-hidden opacity-20"><div class="w-full h-24 bg-gradient-to-b from-transparent via-emerald-500/10 to-transparent" style="transform:translateY(33.7125px)"></div></div><div class="relative z-10"><div class="mb-16 flex items-center gap-4" style="opacity:1;transform:none"><button class="group flex items-center gap-3 text-gray-500 hover:text-white transition-all duration-300 font-mono text-xs uppercase tracking-[0.3em] bg-white/5 px-4 py-2 border border-white/10 hover:border-emerald-500/50"><svg viewBox="0 0 256 256" class="group-hover:-translate-x-1 transition-transform" fill="currentColor" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><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>Return to Archive</span></button><div class="h-px flex-grow bg-white/10"></div></div><div class="max-w-7xl mx-auto"><header class="mb-32 relative"><div class="absolute -left-12 top-0 bottom-0 w-1 bg-emerald-500 hidden xl:block"></div><h1 class="text-7xl md:text-9xl font-black font-playfairDisplay italic uppercase tracking-tighter mb-6 leading-none"><span class="text-emerald-500">Friends</span> of the <span class="text-lime-500">Show</span></h1><p class="text-xl md:text-2xl text-gray-500 font-arvo max-w-2xl leading-relaxed border-l-2 border-white/10 pl-6">Signals from parallel realities and archived transmissions from the digital garden.</p></header><div class="space-y-48"><section class="space-y-16" style="opacity:1;transform:none"><div class="flex items-center gap-8"><div class="p-6 bg-white/5 border border-white/10 rounded-sm relative group overflow-hidden"><div class="absolute inset-0 bg-emerald-500/0 group-hover:bg-emerald-500/5 transition-colors"></div><svg viewBox="0 0 256 256" class="text-emerald-500" fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M136,108A52,52,0,1,1,84,56,52,52,0,0,1,136,108Z" opacity="0.2"></path><path d="M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z"></path></svg></div><div class="flex-grow"><div class="flex items-center gap-4 mb-2"><h2 class="text-4xl md:text-6xl font-normal font-playfairDisplay uppercase tracking-tighter">Parallel Realities</h2><div class="h-px flex-grow bg-white/10"></div><span class="font-mono text-[10px] text-emerald-500/50 uppercase tracking-[0.2em]">Section_1</span></div><p class="text-xs font-mono text-gray-500 uppercase tracking-[0.4em]">Transmissions detected in the friends sector.</p></div></div><div class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16"><div class="group relative flex flex-col overflow-hidden rounded-sm bg-[#0c0a09] border border-white/10 h-full transition-all duration-500 hover:border-emerald-500/50 hover:shadow-[0_0_30px_rgba(16,185,129,0.1)]"><div class="absolute inset-0 bg-[#443627] opacity-[0.03] pointer-events-none group-hover:opacity-[0.05] transition-opacity"></div><div class="absolute top-0 right-0 w-4 h-4 border-t border-r border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><div class="absolute bottom-0 left-0 w-4 h-4 border-b border-l border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><button class="flex flex-col h-full text-left relative z-10"><div class="relative h-48 w-full overflow-hidden border-b border-white/5"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full opacity-40 transition-transform duration-1000 ease-out group-hover:scale-125 group-hover:opacity-60 sepia-[0.2]"><svg viewBox="0 0 100 100" class="w-full h-full" preserveAspectRatio="xMidYMid slice"><defs><pattern height="20" id="bg-grid-2celil-yi-it--" patternUnits="userSpaceOnUse" width="20"><circle cx="1" cy="1" fill="white" opacity="0.05" r="0.5"></circle></pattern></defs><rect fill="url(#bg-grid-2celil-yi-it--)" height="100" width="100"></rect><g transform="translate(0, 0) rotate(90, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(159, 70%, 60%)" stroke-width="1.5"></polygon></g><g transform="translate(0, 20) rotate(90, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(339, 60%, 50%)" stroke-width="1.5"></polygon></g><g transform="translate(0, 40) rotate(0, 10, 10)"><circle cx="10" cy="10" fill="hsl(339, 60%, 50%)" opacity="0.9" r="8" stroke="hsl(339, 60%, 50%)" stroke-width="0"></circle></g><g transform="translate(0, 80) rotate(180, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(159, 70%, 60%)"></path></g><g transform="translate(20, 40) rotate(90, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="#ffffff"></path></g><g transform="translate(20, 60) rotate(270, 10, 10)"><circle cx="10" cy="10" fill="none" opacity="0.9" r="8" stroke="hsl(159, 70%, 60%)" stroke-width="1.5"></circle></g><g transform="translate(40, 20) rotate(90, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="#ffffff"></path></g><g transform="translate(60, 20) rotate(180, 10, 10)"><circle cx="10" cy="10" fill="#ffffff" opacity="0.9" r="8" stroke="#ffffff" stroke-width="0"></circle></g><g transform="translate(60, 60) rotate(180, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(159, 70%, 60%)" stroke-width="1.5"></polygon></g><g transform="translate(80, 20) rotate(90, 10, 10)"><rect fill="none" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="hsl(159, 70%, 60%)" stroke-width="1.5"></rect></g><g transform="translate(80, 60) rotate(270, 10, 10)"><rect fill="hsl(339, 60%, 50%)" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="hsl(339, 60%, 50%)" stroke-width="0"></rect></g></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-[#0c0a09] via-[#0c0a09]/20 to-transparent"></div><div class="absolute inset-0 opacity-0 group-hover:opacity-10 pointer-events-none transition-opacity bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%]"></div><div class="absolute bottom-4 left-6 flex items-center gap-3"><span class="px-3 py-1 text-[10px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color:#10b981;background-color:rgba(16,185,129,.1)">Signal</span></div></div><div class="flex flex-col flex-grow p-8 relative bg-inherit"><div class="absolute top-0 right-0 p-4 font-mono text-[10px] text-white/5 uppercase select-none tracking-widest">friends</div><h3 class="text-3xl font-normal font-playfairDisplay text-white mb-4 group-hover:text-emerald-400 transition-colors line-clamp-2 leading-tight tracking-tighter">Celil Yiğit</h3><p class="text-base text-gray-400 font-arvo line-clamp-3 mb-8 leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">He is a backend engineer specializing in high-performance computing and machine learning with a passion for technical writing and interactive projects.</p><div class="mt-auto pt-6 flex items-center justify-between border-t border-white/5 group-hover:border-emerald-500/20 transition-colors"><div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div><span class="text-[10px] font-mono font-bold uppercase tracking-[0.3em] text-gray-500 group-hover:text-white transition-colors">Access Intel</span></div><svg viewBox="0 0 256 256" class="text-emerald-500 transform -translate-x-2 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" fill="currentColor" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z"></path></svg></div></div></button></div><div class="group relative flex flex-col overflow-hidden rounded-sm bg-[#0c0a09] border border-white/10 h-full transition-all duration-500 hover:border-emerald-500/50 hover:shadow-[0_0_30px_rgba(16,185,129,0.1)]"><div class="absolute inset-0 bg-[#443627] opacity-[0.03] pointer-events-none group-hover:opacity-[0.05] transition-opacity"></div><div class="absolute top-0 right-0 w-4 h-4 border-t border-r border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><div class="absolute bottom-0 left-0 w-4 h-4 border-b border-l border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><button class="flex flex-col h-full text-left relative z-10"><div class="relative h-48 w-full overflow-hidden border-b border-white/5"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full opacity-40 transition-transform duration-1000 ease-out group-hover:scale-125 group-hover:opacity-60 sepia-[0.2]"><svg viewBox="0 0 100 100" class="w-full h-full" preserveAspectRatio="xMidYMid slice"><defs><pattern height="20" id="bg-grid-2mustafa-t-rk--" patternUnits="userSpaceOnUse" width="20"><circle cx="1" cy="1" fill="white" opacity="0.05" r="0.5"></circle></pattern></defs><rect fill="url(#bg-grid-2mustafa-t-rk--)" height="100" width="100"></rect><rect fill="hsl(7, 70%, 60%)" height="1.13062308577355" width="55.12865790631622" opacity="0.6879447167273611" x="90" y="60"></rect><circle cx="90" cy="60" fill="hsl(97, 80%, 60%)" opacity="0.8" r="2.2612461715471"></circle><rect fill="#ffffff" height="1.2844335864065215" width="74.22692792490125" opacity="0.6132697846740485" x="0" y="30"></rect><circle cx="0" cy="30" fill="hsl(97, 80%, 60%)" opacity="0.8" r="2.568867172813043"></circle><rect fill="hsl(7, 70%, 60%)" height="32.67835011705756" width="1.1692896698368713" opacity="0.4299932506401092" x="0" y="20"></rect><circle cx="0" cy="20" fill="hsl(97, 80%, 60%)" opacity="0.8" r="2.3385793396737427"></circle><rect fill="hsl(7, 70%, 60%)" height="77.41535065229982" width="0.759244805551134" opacity="0.8947128071915358" x="70" y="60"></rect><rect fill="hsl(7, 70%, 60%)" height="0.9925542840501294" width="27.754786415025592" opacity="0.6195461479015648" x="50" y="40"></rect><circle cx="50" cy="40" fill="hsl(97, 80%, 60%)" opacity="0.8" r="1.9851085681002587"></circle><rect fill="hsl(7, 70%, 60%)" height="61.66122353170067" width="1.1138730110833421" opacity="0.7060709102079272" x="80" y="10"></rect><rect fill="hsl(7, 70%, 60%)" height="48.95456369034946" width="0.9696616402361542" opacity="0.8806486841756851" x="30" y="60"></rect><rect fill="hsl(7, 70%, 60%)" height="28.654520115815103" width="1.2266596738481894" opacity="0.7783795766532422" x="70" y="40"></rect><circle cx="70" cy="40" fill="hsl(97, 80%, 60%)" opacity="0.8" r="2.453319347696379"></circle><rect fill="hsl(7, 70%, 60%)" height="1.9464898833539337" width="43.85870137717575" opacity="0.6537201043684036" x="90" y="10"></rect><circle cx="90" cy="10" fill="hsl(97, 80%, 60%)" opacity="0.8" r="3.8929797667078674"></circle><rect fill="hsl(7, 70%, 60%)" height="21.014120443724096" width="1.989304174669087" opacity="0.873446324467659" x="50" y="40"></rect><circle cx="50" cy="40" fill="hsl(97, 80%, 60%)" opacity="0.8" r="3.978608349338174"></circle><rect fill="hsl(7, 70%, 60%)" height="76.49950733873993" width="0.805847170879133" opacity="0.9281716346275062" x="0" y="10"></rect><circle cx="0" cy="10" fill="hsl(97, 80%, 60%)" opacity="0.8" r="1.611694341758266"></circle><rect fill="hsl(7, 70%, 60%)" height="67.63980882242322" width="1.000195222091861" opacity="0.516466538561508" x="30" y="70"></rect><circle cx="30" cy="70" fill="hsl(97, 80%, 60%)" opacity="0.8" r="2.000390444183722"></circle><rect fill="#ffffff" height="75.33168085385114" width="1.2427695153746754" opacity="0.46779436338692904" x="60" y="90"></rect><circle cx="60" cy="90" fill="hsl(97, 80%, 60%)" opacity="0.8" r="2.485539030749351"></circle><rect fill="hsl(7, 70%, 60%)" height="75.31635547988117" width="0.7083693760214373" opacity="0.9576869492884725" x="90" y="50"></rect><circle cx="90" cy="50" fill="hsl(97, 80%, 60%)" opacity="0.8" r="1.4167387520428747"></circle><rect fill="hsl(7, 70%, 60%)" height="0.8580863793613389" width="66.09000269323587" opacity="0.9902745006605983" x="60" y="90"></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-[#0c0a09] via-[#0c0a09]/20 to-transparent"></div><div class="absolute inset-0 opacity-0 group-hover:opacity-10 pointer-events-none transition-opacity bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%]"></div><div class="absolute bottom-4 left-6 flex items-center gap-3"><span class="px-3 py-1 text-[10px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color:#10b981;background-color:rgba(16,185,129,.1)">Signal</span></div></div><div class="flex flex-col flex-grow p-8 relative bg-inherit"><div class="absolute top-0 right-0 p-4 font-mono text-[10px] text-white/5 uppercase select-none tracking-widest">friends</div><h3 class="text-3xl font-normal font-playfairDisplay text-white mb-4 group-hover:text-emerald-400 transition-colors line-clamp-2 leading-tight tracking-tighter">Mustafa TÜRK</h3><p class="text-base text-gray-400 font-arvo line-clamp-3 mb-8 leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">"Half man, half amazing" is a persona defined by high-impact performance, drawing inspiration from icons in basketball and hip-hop to describe someone with talent and a larger-than-life presence.</p><div class="mt-auto pt-6 flex items-center justify-between border-t border-white/5 group-hover:border-emerald-500/20 transition-colors"><div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div><span class="text-[10px] font-mono font-bold uppercase tracking-[0.3em] text-gray-500 group-hover:text-white transition-colors">Access Intel</span></div><svg viewBox="0 0 256 256" class="text-emerald-500 transform -translate-x-2 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" fill="currentColor" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z"></path></svg></div></div></button></div><div class="group relative flex flex-col overflow-hidden rounded-sm bg-[#0c0a09] border border-white/10 h-full transition-all duration-500 hover:border-emerald-500/50 hover:shadow-[0_0_30px_rgba(16,185,129,0.1)]"><div class="absolute inset-0 bg-[#443627] opacity-[0.03] pointer-events-none group-hover:opacity-[0.05] transition-opacity"></div><div class="absolute top-0 right-0 w-4 h-4 border-t border-r border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><div class="absolute bottom-0 left-0 w-4 h-4 border-b border-l border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><button class="flex flex-col h-full text-left relative z-10"><div class="relative h-48 w-full overflow-hidden border-b border-white/5"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full opacity-40 transition-transform duration-1000 ease-out group-hover:scale-125 group-hover:opacity-60 sepia-[0.2]"><svg viewBox="0 0 100 100" class="w-full h-full" preserveAspectRatio="xMidYMid slice"><defs><pattern height="20" id="bg-grid-2mervan-sav-a--" patternUnits="userSpaceOnUse" width="20"><circle cx="1" cy="1" fill="white" opacity="0.05" r="0.5"></circle></pattern></defs><rect fill="url(#bg-grid-2mervan-sav-a--)" height="100" width="100"></rect><g transform="translate(0, 0) rotate(0, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="#ffffff" stroke-width="1.5"></polygon></g><g transform="translate(0, 60) rotate(180, 10, 10)"><circle cx="10" cy="10" fill="hsl(340, 60%, 50%)" opacity="0.9" r="8" stroke="hsl(340, 60%, 50%)" stroke-width="0"></circle></g><g transform="translate(0, 80) rotate(180, 10, 10)"><polygon fill="hsl(160, 70%, 60%)" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(160, 70%, 60%)" stroke-width="0"></polygon></g><g transform="translate(20, 40) rotate(180, 10, 10)"><rect fill="none" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="hsl(340, 60%, 50%)" stroke-width="1.5"></rect></g><g transform="translate(20, 60) rotate(90, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(160, 70%, 60%)"></path></g><g transform="translate(40, 40) rotate(180, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(160, 70%, 60%)" stroke-width="1.5"></polygon></g><g transform="translate(40, 80) rotate(180, 10, 10)"><rect fill="none" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="hsl(160, 70%, 60%)" stroke-width="1.5"></rect></g><g transform="translate(80, 0) rotate(180, 10, 10)"><rect fill="none" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="hsl(340, 60%, 50%)" stroke-width="1.5"></rect></g><g transform="translate(80, 40) rotate(270, 10, 10)"><polygon fill="none" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(340, 60%, 50%)" stroke-width="1.5"></polygon></g><g transform="translate(80, 80) rotate(90, 10, 10)"><polygon fill="hsl(160, 70%, 60%)" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(160, 70%, 60%)" stroke-width="0"></polygon></g></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-[#0c0a09] via-[#0c0a09]/20 to-transparent"></div><div class="absolute inset-0 opacity-0 group-hover:opacity-10 pointer-events-none transition-opacity bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%]"></div><div class="absolute bottom-4 left-6 flex items-center gap-3"><span class="px-3 py-1 text-[10px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color:#10b981;background-color:rgba(16,185,129,.1)">Signal</span></div></div><div class="flex flex-col flex-grow p-8 relative bg-inherit"><div class="absolute top-0 right-0 p-4 font-mono text-[10px] text-white/5 uppercase select-none tracking-widest">friends</div><h3 class="text-3xl font-normal font-playfairDisplay text-white mb-4 group-hover:text-emerald-400 transition-colors line-clamp-2 leading-tight tracking-tighter">Mervan Savğa</h3><p class="text-base text-gray-400 font-arvo line-clamp-3 mb-8 leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">He is a results-driven Software Engineer with a strong foundation in computer science, also a photographer and visual artist.</p><div class="mt-auto pt-6 flex items-center justify-between border-t border-white/5 group-hover:border-emerald-500/20 transition-colors"><div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div><span class="text-[10px] font-mono font-bold uppercase tracking-[0.3em] text-gray-500 group-hover:text-white transition-colors">Access Intel</span></div><svg viewBox="0 0 256 256" class="text-emerald-500 transform -translate-x-2 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" fill="currentColor" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z"></path></svg></div></div></button></div><div class="group relative flex flex-col overflow-hidden rounded-sm bg-[#0c0a09] border border-white/10 h-full transition-all duration-500 hover:border-emerald-500/50 hover:shadow-[0_0_30px_rgba(16,185,129,0.1)]"><div class="absolute inset-0 bg-[#443627] opacity-[0.03] pointer-events-none group-hover:opacity-[0.05] transition-opacity"></div><div class="absolute top-0 right-0 w-4 h-4 border-t border-r border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><div class="absolute bottom-0 left-0 w-4 h-4 border-b border-l border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><button class="flex flex-col h-full text-left relative z-10"><div class="relative h-48 w-full overflow-hidden border-b border-white/5"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full opacity-40 transition-transform duration-1000 ease-out group-hover:scale-125 group-hover:opacity-60 sepia-[0.2]"><svg viewBox="0 0 100 100" class="w-full h-full" preserveAspectRatio="xMidYMid slice"><defs><pattern height="20" id="bg-grid-2burak-uyar--" patternUnits="userSpaceOnUse" width="20"><circle cx="1" cy="1" fill="white" opacity="0.05" r="0.5"></circle></pattern></defs><rect fill="url(#bg-grid-2burak-uyar--)" height="100" width="100"></rect><rect fill="hsl(111, 70%, 60%)" height="78.72808127198368" width="1.302836954826489" opacity="0.9848155251238495" x="80" y="60"></rect><circle cx="80" cy="60" fill="hsl(201, 80%, 60%)" opacity="0.8" r="2.605673909652978"></circle><rect fill="#ffffff" height="0.8636355635244399" width="68.7798974243924" opacity="0.8094251528847962" x="90" y="10"></rect><rect fill="#ffffff" height="0.55367242381908" width="23.629982070997357" opacity="0.6014272479340435" x="30" y="60"></rect><rect fill="hsl(111, 70%, 60%)" height="1.2262831688858569" width="31.4289443846792" opacity="0.54143410846591" x="80" y="80"></rect><circle cx="80" cy="80" fill="hsl(201, 80%, 60%)" opacity="0.8" r="2.4525663377717137"></circle><rect fill="hsl(111, 70%, 60%)" height="0.7652214664267376" width="31.42155508045107" opacity="0.5248582802712918" x="30" y="10"></rect><rect fill="hsl(111, 70%, 60%)" height="1.3840610582847148" width="65.28930052183568" opacity="0.4607148670125753" x="10" y="60"></rect><circle cx="10" cy="60" fill="hsl(201, 80%, 60%)" opacity="0.8" r="2.7681221165694296"></circle><rect fill="#ffffff" height="1.9547481077024713" width="32.70451274700463" opacity="0.6894750943873078" x="30" y="30"></rect><rect fill="hsl(111, 70%, 60%)" height="69.32497683446854" width="1.3360015839571133" opacity="0.5327038363553583" x="0" y="50"></rect><rect fill="#ffffff" height="1.9069228363223374" width="50.29697027057409" opacity="0.6820341646205634" x="10" y="40"></rect><circle cx="10" cy="40" fill="hsl(201, 80%, 60%)" opacity="0.8" r="3.813845672644675"></circle><rect fill="hsl(111, 70%, 60%)" height="52.98654915764928" width="1.273206791607663" opacity="0.8842095668427646" x="70" y="50"></rect><circle cx="70" cy="50" fill="hsl(201, 80%, 60%)" opacity="0.8" r="2.546413583215326"></circle><rect fill="#ffffff" height="25.59402009472251" width="0.5559201973956078" opacity="0.5267247355077416" x="70" y="90"></rect><rect fill="hsl(111, 70%, 60%)" height="1.3847743854857981" width="21.92688750103116" opacity="0.6568286267574877" x="30" y="90"></rect><circle cx="30" cy="90" fill="hsl(201, 80%, 60%)" opacity="0.8" r="2.7695487709715962"></circle><rect fill="hsl(111, 70%, 60%)" height="41.37367493007332" width="1.8528693848056719" opacity="0.8709608575794846" x="70" y="20"></rect><rect fill="hsl(111, 70%, 60%)" height="1.30852616566699" width="74.87436552997679" opacity="0.8566983166150749" x="90" y="0"></rect><circle cx="90" cy="0" fill="hsl(201, 80%, 60%)" opacity="0.8" r="2.61705233133398"></circle><rect fill="hsl(111, 70%, 60%)" height="67.65539368614554" width="1.4096309954766184" opacity="0.5552824673242867" x="40" y="0"></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-[#0c0a09] via-[#0c0a09]/20 to-transparent"></div><div class="absolute inset-0 opacity-0 group-hover:opacity-10 pointer-events-none transition-opacity bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%]"></div><div class="absolute bottom-4 left-6 flex items-center gap-3"><span class="px-3 py-1 text-[10px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color:#10b981;background-color:rgba(16,185,129,.1)">Signal</span></div></div><div class="flex flex-col flex-grow p-8 relative bg-inherit"><div class="absolute top-0 right-0 p-4 font-mono text-[10px] text-white/5 uppercase select-none tracking-widest">friends</div><h3 class="text-3xl font-normal font-playfairDisplay text-white mb-4 group-hover:text-emerald-400 transition-colors line-clamp-2 leading-tight tracking-tighter">Burak Uyar</h3><p class="text-base text-gray-400 font-arvo line-clamp-3 mb-8 leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">A Software Engineer who is interested in Frontend, Backend, Mobile, and all sorts of mischievous technologies in between, and a YHT (High-Speed Train) enthusiast.</p><div class="mt-auto pt-6 flex items-center justify-between border-t border-white/5 group-hover:border-emerald-500/20 transition-colors"><div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div><span class="text-[10px] font-mono font-bold uppercase tracking-[0.3em] text-gray-500 group-hover:text-white transition-colors">Access Intel</span></div><svg viewBox="0 0 256 256" class="text-emerald-500 transform -translate-x-2 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" fill="currentColor" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z"></path></svg></div></div></button></div></div></section><section class="space-y-16" style="opacity:0;transform:translateY(40px)"><div class="flex items-center gap-8"><div class="p-6 bg-white/5 border border-white/10 rounded-sm relative group overflow-hidden"><div class="absolute inset-0 bg-emerald-500/0 group-hover:bg-emerald-500/5 transition-colors"></div><svg viewBox="0 0 256 256" class="text-cyan-500" fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M232,56V200H160a32,32,0,0,0-32,32,32,32,0,0,0-32-32H24V56H96a32,32,0,0,1,32,32,32,32,0,0,1,32-32Z" opacity="0.2"></path><path d="M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"></path></svg></div><div class="flex-grow"><div class="flex items-center gap-4 mb-2"><h2 class="text-4xl md:text-6xl font-normal font-playfairDisplay uppercase tracking-tighter">Archive Access</h2><div class="h-px flex-grow bg-white/10"></div><span class="font-mono text-[10px] text-emerald-500/50 uppercase tracking-[0.2em]">Section_2</span></div><p class="text-xs font-mono text-gray-500 uppercase tracking-[0.4em]">Transmissions detected in the books sector.</p></div></div><div class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-16"><div class="group relative flex flex-col overflow-hidden rounded-sm bg-[#0c0a09] border border-white/10 h-full transition-all duration-500 hover:border-emerald-500/50 hover:shadow-[0_0_30px_rgba(16,185,129,0.1)]"><div class="absolute inset-0 bg-[#443627] opacity-[0.03] pointer-events-none group-hover:opacity-[0.05] transition-opacity"></div><div class="absolute top-0 right-0 w-4 h-4 border-t border-r border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><div class="absolute bottom-0 left-0 w-4 h-4 border-b border-l border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><button class="flex flex-col h-full text-left relative z-10"><div class="relative h-48 w-full overflow-hidden border-b border-white/5"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full opacity-40 transition-transform duration-1000 ease-out group-hover:scale-125 group-hover:opacity-60 sepia-[0.2]"><svg viewBox="0 0 100 100" class="w-full h-full" preserveAspectRatio="xMidYMid slice"><defs><pattern height="20" id="bg-grid-2clean-code--a-handbook-of-agile-software-craftsmanship--" patternUnits="userSpaceOnUse" width="20"><circle cx="1" cy="1" fill="white" opacity="0.05" r="0.5"></circle></pattern></defs><rect fill="url(#bg-grid-2clean-code--a-handbook-of-agile-software-craftsmanship--)" height="100" width="100"></rect><rect fill="hsl(182, 70%, 60%)" height="50.64613342285156" width="1.8972386518726125" opacity="0.42840063511393967" x="60" y="80"></rect><circle cx="60" cy="80" fill="hsl(272, 80%, 60%)" opacity="0.8" r="3.794477303745225"></circle><rect fill="hsl(182, 70%, 60%)" height="0.8959230649052188" width="45.65212463028729" opacity="0.5670680023729802" x="10" y="40"></rect><circle cx="10" cy="40" fill="hsl(272, 80%, 60%)" opacity="0.8" r="1.7918461298104376"></circle><rect fill="hsl(182, 70%, 60%)" height="26.16197918076068" width="1.2062074731802568" opacity="0.5244773670565337" x="40" y="0"></rect><circle cx="40" cy="0" fill="hsl(272, 80%, 60%)" opacity="0.8" r="2.4124149463605136"></circle><rect fill="hsl(182, 70%, 60%)" height="54.744306853972375" width="0.5336641430621967" opacity="0.9502498011570424" x="60" y="60"></rect><rect fill="hsl(182, 70%, 60%)" height="1.7667050941381603" width="38.060370800085366" opacity="0.7119799883570522" x="90" y="20"></rect><circle cx="90" cy="20" fill="hsl(272, 80%, 60%)" opacity="0.8" r="3.5334101882763207"></circle><rect fill="hsl(182, 70%, 60%)" height="61.24089369084686" width="0.5024560970487073" opacity="0.9974911786150187" x="10" y="20"></rect><circle cx="10" cy="20" fill="hsl(272, 80%, 60%)" opacity="0.8" r="1.0049121940974146"></circle><rect fill="#ffffff" height="0.9761386490426958" width="59.715557605959475" opacity="0.4296426772605628" x="90" y="70"></rect><rect fill="hsl(182, 70%, 60%)" height="1.5929519161581993" width="70.69578490685672" opacity="0.5492516853380949" x="60" y="30"></rect><rect fill="hsl(182, 70%, 60%)" height="51.5624101087451" width="1.1707013646373525" opacity="0.5017977482639253" x="20" y="70"></rect><circle cx="20" cy="70" fill="hsl(272, 80%, 60%)" opacity="0.8" r="2.341402729274705"></circle><rect fill="#ffffff" height="0.870667802519165" width="48.59098791144788" opacity="0.9162905314937234" x="80" y="60"></rect><circle cx="80" cy="60" fill="hsl(272, 80%, 60%)" opacity="0.8" r="1.74133560503833"></circle><rect fill="hsl(182, 70%, 60%)" height="36.329963435418904" width="1.5369203466689214" opacity="0.7050571085419506" x="80" y="0"></rect><circle cx="80" cy="0" fill="hsl(272, 80%, 60%)" opacity="0.8" r="3.073840693337843"></circle><rect fill="hsl(182, 70%, 60%)" height="64.45261088665575" width="1.0805844796122983" opacity="0.8024763115216047" x="20" y="20"></rect><circle cx="20" cy="20" fill="hsl(272, 80%, 60%)" opacity="0.8" r="2.1611689592245966"></circle><rect fill="#ffffff" height="1.6448459519306198" width="31.002787766046822" opacity="0.7436825785320252" x="10" y="80"></rect><rect fill="hsl(182, 70%, 60%)" height="1.5074244880815968" width="27.41942195687443" opacity="0.5491643411573023" x="80" y="40"></rect><rect fill="hsl(182, 70%, 60%)" height="1.318009698879905" width="77.63944224454463" opacity="0.6819169536232949" x="30" y="40"></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-[#0c0a09] via-[#0c0a09]/20 to-transparent"></div><div class="absolute inset-0 opacity-0 group-hover:opacity-10 pointer-events-none transition-opacity bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%]"></div><div class="absolute bottom-4 left-6 flex items-center gap-3"><span class="px-3 py-1 text-[10px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color:#06b6d4;background-color:rgba(6,182,212,.1)">Archive</span></div></div><div class="flex flex-col flex-grow p-8 relative bg-inherit"><div class="absolute top-0 right-0 p-4 font-mono text-[10px] text-white/5 uppercase select-none tracking-widest">books</div><h3 class="text-3xl font-normal font-playfairDisplay text-white mb-4 group-hover:text-emerald-400 transition-colors line-clamp-2 leading-tight tracking-tighter">Clean Code: A Handbook of Agile Software Craftsmanship</h3><p class="text-base text-gray-400 font-arvo line-clamp-3 mb-8 leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">A fundamental guide that teaches developers how to write better, more readable code by applying principles, patterns, and practices of craftsmanship to transform "bad" code into maintainable, professional software.</p><div class="mt-auto pt-6 flex items-center justify-between border-t border-white/5 group-hover:border-emerald-500/20 transition-colors"><div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div><span class="text-[10px] font-mono font-bold uppercase tracking-[0.3em] text-gray-500 group-hover:text-white transition-colors">Access Intel</span></div><svg viewBox="0 0 256 256" class="text-emerald-500 transform -translate-x-2 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" fill="currentColor" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z"></path></svg></div></div></button></div><div class="group relative flex flex-col overflow-hidden rounded-sm bg-[#0c0a09] border border-white/10 h-full transition-all duration-500 hover:border-emerald-500/50 hover:shadow-[0_0_30px_rgba(16,185,129,0.1)]"><div class="absolute inset-0 bg-[#443627] opacity-[0.03] pointer-events-none group-hover:opacity-[0.05] transition-opacity"></div><div class="absolute top-0 right-0 w-4 h-4 border-t border-r border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><div class="absolute bottom-0 left-0 w-4 h-4 border-b border-l border-white/20 group-hover:border-emerald-500 transition-colors z-20"></div><button class="flex flex-col h-full text-left relative z-10"><div class="relative h-48 w-full overflow-hidden border-b border-white/5"><div class="w-full h-full bg-neutral-950 overflow-hidden relative w-full h-full opacity-40 transition-transform duration-1000 ease-out group-hover:scale-125 group-hover:opacity-60 sepia-[0.2]"><svg viewBox="0 0 100 100" class="w-full h-full" preserveAspectRatio="xMidYMid slice"><defs><pattern height="20" id="bg-grid-2clean-architecture--a-craftsman-s-guide-to-software-structure-and-design--" patternUnits="userSpaceOnUse" width="20"><circle cx="1" cy="1" fill="white" opacity="0.05" r="0.5"></circle></pattern></defs><rect fill="url(#bg-grid-2clean-architecture--a-craftsman-s-guide-to-software-structure-and-design--)" height="100" width="100"></rect><g transform="translate(0, 20) rotate(90, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(333, 80%, 60%)"></path></g><g transform="translate(0, 60) rotate(90, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(243, 70%, 60%)"></path></g><g transform="translate(0, 80) rotate(180, 10, 10)"><rect fill="none" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="hsl(243, 70%, 60%)" stroke-width="1.5"></rect></g><g transform="translate(20, 0) rotate(90, 10, 10)"><polygon fill="hsl(243, 70%, 60%)" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(243, 70%, 60%)" stroke-width="0"></polygon></g><g transform="translate(20, 60) rotate(0, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(243, 70%, 60%)"></path></g><g transform="translate(40, 0) rotate(180, 10, 10)"><rect fill="none" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="#ffffff" stroke-width="1.5"></rect></g><g transform="translate(40, 20) rotate(180, 10, 10)"><polygon fill="hsl(243, 70%, 60%)" opacity="0.9" points="2,18 10,2 18,18" stroke="hsl(243, 70%, 60%)" stroke-width="0"></polygon></g><g transform="translate(40, 40) rotate(90, 10, 10)"><rect fill="hsl(243, 70%, 60%)" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="hsl(243, 70%, 60%)" stroke-width="0"></rect></g><g transform="translate(40, 60) rotate(180, 10, 10)"><circle cx="10" cy="10" fill="hsl(333, 80%, 60%)" opacity="0.9" r="8" stroke="hsl(333, 80%, 60%)" stroke-width="0"></circle></g><g transform="translate(60, 0) rotate(270, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(243, 70%, 60%)"></path></g><g transform="translate(60, 60) rotate(90, 10, 10)"><circle cx="10" cy="10" fill="#ffffff" opacity="0.9" r="8" stroke="#ffffff" stroke-width="0"></circle></g><g transform="translate(60, 80) rotate(180, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(333, 80%, 60%)"></path></g><g transform="translate(80, 40) rotate(180, 10, 10)"><path d="M 2 2 L 18 2 A 16 16 0 0 1 2 18 Z" opacity="0.9" fill="hsl(243, 70%, 60%)"></path></g><g transform="translate(80, 80) rotate(0, 10, 10)"><rect fill="none" height="16" width="16" opacity="0.9" x="2" y="2" rx="1" stroke="hsl(63, 60%, 50%)" stroke-width="1.5"></rect></g></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-[#0c0a09] via-[#0c0a09]/20 to-transparent"></div><div class="absolute inset-0 opacity-0 group-hover:opacity-10 pointer-events-none transition-opacity bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_2px,3px_100%]"></div><div class="absolute bottom-4 left-6 flex items-center gap-3"><span class="px-3 py-1 text-[10px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300" style="border-color:#06b6d4;background-color:rgba(6,182,212,.1)">Archive</span></div></div><div class="flex flex-col flex-grow p-8 relative bg-inherit"><div class="absolute top-0 right-0 p-4 font-mono text-[10px] text-white/5 uppercase select-none tracking-widest">books</div><h3 class="text-3xl font-normal font-playfairDisplay text-white mb-4 group-hover:text-emerald-400 transition-colors line-clamp-2 leading-tight tracking-tighter">Clean Architecture: A Craftsman's Guide to Software Structure and Design</h3><p class="text-base text-gray-400 font-arvo line-clamp-3 mb-8 leading-relaxed opacity-60 group-hover:opacity-100 transition-opacity">An essential exploration of software design principles that focuses on creating systems with clear boundaries, ensuring that core business logic remains independent of frameworks, databases, and UI for maximum flexibility and testability.</p><div class="mt-auto pt-6 flex items-center justify-between border-t border-white/5 group-hover:border-emerald-500/20 transition-colors"><div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div><span class="text-[10px] font-mono font-bold uppercase tracking-[0.3em] text-gray-500 group-hover:text-white transition-colors">Access Intel</span></div><svg viewBox="0 0 256 256" class="text-emerald-500 transform -translate-x-2 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" fill="currentColor" height="18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z"></path></svg></div></div></button></div></div></section></div></div><footer class="mt-64 pt-24 border-t border-white/10 relative"><div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 px-8 bg-[#050505]"><svg viewBox="0 0 256 256" class="text-emerald-500 animate-pulse" fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152Zm73.71,7.14a80,80,0,0,1-14.08,22.2,8,8,0,0,1-11.92-10.67,63.95,63.95,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67,80.08,80.08,0,0,1,14.08,84.47ZM69,103.09a64,64,0,0,0,11.26,67.58,8,8,0,0,1-11.92,10.67,79.93,79.93,0,0,1,0-106.67A8,8,0,1,1,80.29,85.34,63.77,63.77,0,0,0,69,103.09ZM248,128a119.58,119.58,0,0,1-34.29,84,8,8,0,1,1-11.42-11.2,103.9,103.9,0,0,0,0-145.56A8,8,0,1,1,213.71,44,119.58,119.58,0,0,1,248,128ZM53.71,200.78A8,8,0,1,1,42.29,212a119.87,119.87,0,0,1,0-168,8,8,0,1,1,11.42,11.2,103.9,103.9,0,0,0,0,145.56Z"></path></svg></div><p class="font-mono text-[10px] text-gray-600 uppercase tracking-[0.5em] text-center mb-4">End of Line // Transmission Terminated</p><div class="flex justify-center gap-12 opacity-20"><div class="w-1 h-1 bg-white rounded-full"></div><div class="w-1 h-1 bg-white rounded-full"></div><div class="w-1 h-1 bg-white rounded-full"></div><div class="w-1 h-1 bg-white rounded-full"></div><div class="w-1 h-1 bg-white rounded-full"></div><div class="w-1 h-1 bg-white rounded-full"></div></div></footer></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(93.0083vw)"><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(-1.26151px) scale(1.01849) rotate(2.27505deg)"><svg viewBox="0 0 256 256" fill="currentColor" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M192,96a64,64,0,1,1-64-64A64,64,0,0,1,192,96Z" opacity="0.2"></path><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"></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(-1.16558px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;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></body></html>