-
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) · 14.1 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 14.1 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>yap | 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 lightweight, terminal-based YouTube audio player written in Go with synced lyrics and advanced playback controls." name="description"><meta content="Go, TUI, FFmpeg, Audio" name="keywords"><meta content="yap | Fezcodex" property="og:title"><meta content="A lightweight, terminal-based YouTube audio player written in Go with synced lyrics and advanced playback controls." property="og:description"><meta content="https://fezcode.com/images/projects/yap/yap-banner.webp" property="og:image"><meta content="https://fezcode.com/projects/yap/" property="og:url"><meta content="website" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/projects/yap/yap-banner.webp" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="yap | Fezcodex" name="twitter:title"><meta content="A lightweight, terminal-based YouTube audio player written in Go with synced lyrics and advanced playback controls." name="twitter:description"><meta content="https://fezcode.com/images/projects/yap/yap-banner.webp" name="twitter:image"><meta content="https://fezcode.com/projects/yap/" name="twitter:url"><link href="https://fezcode.com/projects/yap/" 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">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 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-[#f3f1e9] text-black p-8 md:p-16 flex flex-col font-instr-sans overflow-hidden transition-colors duration-500"><div class="flex justify-between items-center mb-16 z-10"><div class="flex items-center gap-8"><button class="flex items-center gap-2 text-zinc-500 hover:text-black transition-colors group w-fit"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" class="group-hover:-translate-x-1 transition-transform"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span class="text-sm font-bold uppercase tracking-widest">Back to Projects</span></button><button class="p-2 rounded-full border-2 border-black hover:bg-zinc-500/10 transition-all" title="Switch to Black"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M236.37,139.4a12,12,0,0,0-12-3A84.07,84.07,0,0,1,119.6,31.59a12,12,0,0,0-15-15A108.86,108.86,0,0,0,49.69,55.07,108,108,0,0,0,136,228a107.09,107.09,0,0,0,64.93-21.69,108.86,108.86,0,0,0,38.44-54.94A12,12,0,0,0,236.37,139.4Zm-49.88,47.74A84,84,0,0,1,68.86,69.51,84.93,84.93,0,0,1,92.27,48.29Q92,52.13,92,56A108.12,108.12,0,0,0,200,164q3.87,0,7.71-.27A84.79,84.79,0,0,1,186.49,187.14Z"></path></svg></button></div><div class="flex gap-12 items-center"><div class="hidden md:flex gap-6 items-center border-r-2 border-zinc-200 pr-12 mr-4"><a class="flex items-center gap-2 hover:opacity-50 transition-opacity" href="https://github.com/fezcode/yap" rel="noopener noreferrer" target="_blank" title="Github Repository"><svg fill="currentColor" height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M212.62,75.17A63.7,63.7,0,0,0,206.39,26,12,12,0,0,0,196,20a63.71,63.71,0,0,0-50,24H126A63.71,63.71,0,0,0,76,20a12,12,0,0,0-10.39,6,63.7,63.7,0,0,0-6.23,49.17A61.5,61.5,0,0,0,52,104v8a60.1,60.1,0,0,0,45.76,58.28A43.66,43.66,0,0,0,92,192v4H76a20,20,0,0,1-20-20,44.05,44.05,0,0,0-44-44,12,12,0,0,0,0,24,20,20,0,0,1,20,20,44.05,44.05,0,0,0,44,44H92v12a12,12,0,0,0,24,0V192a20,20,0,0,1,40,0v40a12,12,0,0,0,24,0V192a43.66,43.66,0,0,0-5.76-21.72A60.1,60.1,0,0,0,220,112v-8A61.5,61.5,0,0,0,212.62,75.17ZM196,112a36,36,0,0,1-36,36H112a36,36,0,0,1-36-36v-8a37.87,37.87,0,0,1,6.13-20.12,11.65,11.65,0,0,0,1.58-11.49,39.9,39.9,0,0,1-.4-27.72,39.87,39.87,0,0,1,26.41,17.8A12,12,0,0,0,119.82,68h32.35a12,12,0,0,0,10.11-5.53,39.84,39.84,0,0,1,26.41-17.8,39.9,39.9,0,0,1-.4,27.72,12,12,0,0,0,1.61,11.53A37.85,37.85,0,0,1,196,104Z"></path></svg><span class="text-[10px] font-black uppercase tracking-widest">Source</span></a></div><div class="hidden md:flex flex-col items-end"><span class="text-[10px] text-zinc-400 font-bold uppercase tracking-[0.2em]">Project Phase</span><span class="text-sm font-black uppercase tracking-widest">OVERVIEW</span></div><div class="w-12 h-12 border-2 border-black flex items-center justify-center font-black">1</div></div></div><div class="flex flex-col lg:flex-row gap-12 lg:gap-24 flex-grow"><div class="lg:w-2/5 flex flex-col space-y-12"><div class="group cursor-pointer relative"><div class="flex items-center gap-6"><span class="text-sm font-black transition-colors text-black">01</span><div class="flex flex-col"><span class="text-[10px] font-bold uppercase tracking-[0.3em] transition-colors text-zinc-500">The Overview</span><h2 class="text-4xl md:text-6xl font-black uppercase transition-all duration-300 text-black translate-x-2">YAP</h2></div></div><div class="overflow-hidden pl-12" style="height:auto;opacity:1;margin-top:24px"><div class="max-w-lg prose prose-sm prose-zinc border-l-4 border-black pl-6"><p>Yap is a lightweight, terminal-based YouTube audio player written in Go. It allows users to stream audio directly from YouTube URLs, offering features such as playback queuing, synced lyrics, and advanced playback controls.</p></div></div></div><div class="group cursor-pointer relative"><div class="flex items-center gap-6"><span class="text-sm font-black transition-colors text-zinc-300">02</span><div class="flex flex-col"><span class="text-[10px] font-bold uppercase tracking-[0.3em] transition-colors text-zinc-300">Functionality</span><h2 class="text-4xl md:text-6xl font-black uppercase transition-all duration-300 text-zinc-300 group-hover:text-zinc-500">Features</h2></div></div></div><div class="group cursor-pointer relative"><div class="flex items-center gap-6"><span class="text-sm font-black transition-colors text-zinc-300">03</span><div class="flex flex-col"><span class="text-[10px] font-bold uppercase tracking-[0.3em] transition-colors text-zinc-300">The Stack</span><h2 class="text-4xl md:text-6xl font-black uppercase transition-all duration-300 text-zinc-300 group-hover:text-zinc-500">Technical</h2></div></div></div><div class="group cursor-pointer relative"><div class="flex items-center gap-6"><span class="text-sm font-black transition-colors text-zinc-300">04</span><div class="flex flex-col"><span class="text-[10px] font-bold uppercase tracking-[0.3em] transition-colors text-zinc-300">Get Started</span><h2 class="text-4xl md:text-6xl font-black uppercase transition-all duration-300 text-zinc-300 group-hover:text-zinc-500">Access</h2></div></div></div></div><div class="lg:w-3/5 relative"><div class="w-full aspect-[4/5] lg:h-[70vh] relative overflow-hidden border-[8px] border-black shadow-[30px_30px_0px_0px_rgba(0,0,0,1)] bg-zinc-200 transition-all duration-500"><div class="absolute inset-0" style="opacity:0;filter:grayscale(100%);transform:scale(1.00004)"><img alt="yap" class="w-full h-full object-cover" src="/images/projects/yap/cover.webp"></div><div class="absolute top-8 left-8 mix-blend-difference text-white"><div class="text-xs font-black uppercase tracking-[0.4em] mb-2">Artifact No.</div><div class="text-4xl font-black">YAP</div></div><div class="absolute bottom-8 right-8 mix-blend-difference text-white text-right"><div class="text-[60px] font-black leading-none opacity-50">A</div></div></div></div></div><div class="mt-12 flex justify-between items-end border-t-2 border-black pt-8"><div class="text-[10px] font-black uppercase tracking-[0.5em] text-zinc-400">Digital Archive / yap / 2026</div><div class="flex gap-2"><div class="w-8 h-2 bg-black"></div><div class="w-8 h-2 bg-zinc-200"></div><div class="w-8 h-2 bg-zinc-200"></div><div class="w-8 h-2 bg-zinc-200"></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(93.5907vw)"><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(-.765326px) rotate(1.39776deg)"><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(-.728411px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-1.27159px)"></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>