Theme: Weird Web Renaissance—Bring back experimental interfaces, analog aesthetics, and technical craft
This isn't a typical portfolio roadmap. We're building weird things: memory palaces you can walk through, sound that controls visuals, surveillance feeds from nowhere, film grain that never touched film. The web used to be stranger. Let's make it strange again.
Progress Overview
Recently Completed
Horror Aesthetics, 80s CRT Mode & Photography Overhaul 📺🎃
- Silent Hill Security Camera Dashboard: 4-cam surveillance system with GLSL shaders, 3 color modes (Phosphor Green, Amber CRT, Infrared), procedurally generated scenes with horror elements
- 80s Retro CRT Mode: Chromatic aberration with cyan/magenta gradients, scanlines, RGB text split, color polarization effects—toggle with 📺 button
- Photography Lightbox Enhancements: Minimal fullscreen experience (95vw×95vh), hover-only UI, download button, image info panel, smooth animations
- Halloween Theme Toggle: Easy-access floating pumpkin button, spooky decorations (spiders, bats, webs), complete theme transformation
- Site Cohesiveness: Global film grain texture, homepage design improvements with photography page patterns, enhanced navigation styling
- Roadmap Philosophy Shift: "Weird Web Renaissance" theme—experimental playground over polished portfolio
Travel Log & NYC API Improvements ✈️
- Travel Log Page: Interactive scratch-off style world map with 12 visited locations
- Web Mercator Projection: Accurate geographic positioning for all locations and continents
- Enhanced Building Footprints: L-shaped buildings, varied aspect ratios, real lot dimensions from MapPLUTO
- Street Grid Overlay: Major NYC streets for geographic context in Urban GIS
- API Migration: Fixed deprecated Building Footprints API, switched to stable MapPLUTO
- Documentation: Updated NYC_OPEN_DATA.md with verified working APIs and migration guides
Urban GIS & Photography Optimization 🏙️
- Interactive 3D Urban Planning GIS: Real NYC Open Data with ~500 buildings from Ditmas Park
- Photography Page Optimization: 167MB → 628KB (99.6% reduction) with WebP conversion
- Workshop Inventory Expansion: Photography, Architecture, Finance categories added
- NYC Interests Updates: Brooklyn Botanic Garden membership, Green-Wood Cemetery added
- Post-Processing Effects: UnrealBloomPass, ACES tone mapping, dynamic time-of-day lighting
- Building Interactivity: Click detection, MapPLUTO metadata, layer toggles
Performance Section Complete 🏆
- Code splitting optimization: 140KB bundle (46.57KB gzipped) - top 10% vs industry standards
- P5 modal layout fixes: Fixed iframe sizing, added collapsible metadata
- Photography optimization: 98% faster loading with two-tier lazy loading strategy
- Multi-dimensional filtering: Comprehensive filter system for P5 sketches
- Metadata expansion: Rich documentation for all 11 P5 sketches
Performance & Bug Fixes
- 70% particle reduction, idle animation stopping
- GPU acceleration for cursor and animations
- Accessibility improvements (prefers-reduced-motion)
- Build error fixes across components
Three.js Gallery Launch
- Advanced seed sharing for p5.js gallery
- Dark/light/system theme toggle
- Versioning and changelog infrastructure
- Three.js gallery with 6 interactive scenes
Next Priorities
- ✅ Security Camera Dashboard - COMPLETE!
Silent Hill-inspired surveillance system with 4-cam VHS feeds, GLSL shaders for glitches/static, green monitor aesthetic.
- ✅ Photography Lightbox Overhaul - COMPLETE!
Minimal fullscreen experience (95vw×95vh) to showcase high-res images. Hover-only UI, smooth animations, keyboard nav.
- ✅ 80s Retro CRT Mode - COMPLETE!
Chromatic aberration, cyan/magenta color grading, RGB text split, scanlines. Toggle with 📺 button or keyboard.
- ✅ Hypertext Garden - COMPLETE!
Zettelkasten-style bidirectional links between posts. Visual graph of connections. Explore ideas spatially, not chronologically.
- Sound-Reactive Generative Art
P5.js sketches that respond to microphone input. FFT analysis drives visuals. Create personal synesthesia experiments.
Estimated: 4-5 hours - ✅ NYC Subway Time-Space Diagram - COMPLETE!
Marey diagram showing all subway lines as trajectories through spacetime. Real-time train positions animated on 2D plot.
- ✅ Analog Film Emulation Shaders - COMPLETE!
GLSL post-processing: Portra 400, Tri-X, CineStill 800T. Accurate grain structure, color shifts, halation. Apply to photos.
- ✅ Glitch Art Studio - COMPLETE!
Interactive datamoshing tool: pixel sorting, channel shifting, compression artifacts. Save variations as NFT-ready outputs.
Key Objectives
- Make interactions feel weird and memorable—CRT modes, glitch effects, unconventional navigation
- Treat personal site as experimental playground—try things commercial sites can't
- Bridge analog/digital: film emulation, VHS aesthetics, physical computing influences
- Build tools that create unexpected outputs—generative, reactive, emergent systems
- Prioritize unique over polished—interesting failure beats boring success
Design Philosophy
This site isn't a portfolio—it's a digital sketchbook. The goal is to build things that are technically interesting and aesthetically provocative, even if impractical. A memory palace navigator isn't the most usable way to browse projects, but it's more memorable. Sound-reactive visuals aren't necessary, but they're expressive.
Influences: Gwern.net's depth, Hundred Rabbits' self-sufficiency, early web's weirdness, demo scene's technical craft. Rejecting: flat minimalism, infinite scroll, analytics-driven design, SEO obsession.
Recent Creative Direction
- ✅ Horror Aesthetics: Silent Hill security cams, VHS glitch effects, retro surveillance themes
- ✅ Analog Emulation: 80s chromatic aberration, film grain, CRT scanlines—digital nostalgia for physical media
- ✅ Photography as Primary: Fullscreen lightbox prioritizes image quality over page layout
- → Next Experiments: Spatial knowledge navigation, synesthetic visualizations, datamoshing tools
Note: This roadmap is a living document. Priorities shift based on what's most interesting in the moment. Last updated: .
View the full changelog for detailed version history.