01 // The Stack
| Component | Technology | Purpose |
|---|---|---|
| Framework | Astro 5.0 (SSR) + React 19 | Hybrid rendering for performance & interactivity |
| Styling | Tailwind CSS + Custom CSS | Utility-first with bespoke design tokens |
| Animations | GSAP 3 + Framer Motion | Fluid interactions & narrative transitions |
| Database | Supabase (PostgreSQL 15) | Real-time data, auth (RLS), and storage |
| Deployment | Vercel (Serverless) | Edge network delivery & serverless functions |
| Resend | Transactional & broadcast messaging | |
| Audio | Web Audio API | Native browser audio processing without bloat |
02 // Typography System
- → Primary: Poppins
Geometric, clean sans-serif for UI and body text.
- → Editorial: Crimson Pro
Classic serif for storytelling and narrative depth.
- → Data/Code: Inconsolata
Monospace for technical specifications and raw data.
03 // Logic & Optimization
- → Obsidian Bridge
Private Edge Function parses raw Markdown wikilinks into HTML, bridging personal notes to public site.
- → Atomic Research Engine
Client-side algorithm builds weighted frequency clouds instantly from JSON tag arrays.
- → Lazy-Performance
IntersectionObserverkeeps DOM light, loading 3D/Video assets only when scrolled into view.
04 // Audio Engine
- → Native Web Audio API
No heavy libraries. Pure browser-native audio processing for maximum performance.
- → Real-time Spectrum
Visualizes audio frequencies using FFT (Fast Fourier Transform) data directly on screen.
- → Scroll-based Ducking
Audio volume automatically lowers, "ducking" out of the way as you scroll down to read content.
- → Lyric Synchronization
Precise time-stamp checking ensures lyrics appear exactly in rhythm with the music.
05 // Interactive Experiments
- → Invisible Punctum
Live OpenRouter API connection analyzes image composition to generate poetic, AI-driven emotional narratives.
- → Polaroid Physics
Card-stacking mechanism uses plane curves for distribution and physics-based drag gestures for natural interaction.
- → Algorithmic Color
Adaptive palette generator clusters pixel data to sense the "mood" of images, creating dynamic themes.
06 // Custom CMS
- → Content Dashboard
Bespoke admin interface to manage research papers, films, and journals without touching code.
- → Drag & Drop Sequencing
Intuitively re-order content and curated lists using
dnd-kitsortable interfaces.
07 // Broadcast System
- → Newsletter Engine
Integrated system using Resend's Batch API to email thousands of subscribers instantly.
- → Audience Logic
Segmented delivery ensures the right content reaches the right curious minds.
08 // Ethics & Optimization
- → Inclusive Design
ARIA-labeled visualizers, semantic
<button>controls, and keyboard-navigable interfaces ensure access for all. - → Zero-Tracking
No cookies, no analytics pixels, no invasion. Just pure, unadulterated code.
- → Reduced Motion
Respects system preferences to disable complex physics and parallax effects for sensitive users.
09 // Award Protocols
- → Lighthouse Score
Targeting 4x100 (Performance, Accessibility, Best Practices, SEO) via static generation.
- → Progressive Enhancement
Core content works without JavaScript. "Magic" is layered on top, not required for basic consumption.
Understanding the stack is just step one.
If you want to build a site like this—with your own content,
ideas, and soul—I offer personalized guidance.