Changelog

Added

CRT Vintage Display Designs 🖥️

• 3 new authentic retro CRT-inspired Three.js scenes:

- CRT CAD Wireframe: 1980s Tektronix/HP amber phosphor CAD workstation aesthetic

- 5 rotating technical wireframe models (mechanical parts, architecture, gyroscope, teapot, nested cubes)

- 5 authentic phosphor colors (P3 Amber 602nm, P31 Green 530nm, White, Infrared Red, Cyan)

- Retro HUD with system info and controls

- Controls: [SPACE] cycle phosphor • [M] cycle model • [R] toggle rotation

- Vector Oscilloscope Display: Tektronix oscilloscope and vector arcade game aesthetic

- 5 display modes: Lissajous curves, waveforms, spectrum analyzer, X-Y scatter plot, Asteroids-style game

- Authentic graticule grid and crosshair

- Adjustable signal parameters (frequency, phase)

- Controls: [SPACE] cycle mode • [C] cycle phosphor • [↑↓←→] adjust frequencies

- Retro Terminal: 1970s mainframe terminal experience

- 5 classic themes: DEC VT100 green, IBM 3270 amber, Apple ][ green, Commodore 64 blue, White phosphor

- 5 display modes: boot sequence, system status monitor, ASCII art, Matrix rain, diagnostic readout

- Authentic cursor blink and scanline effects

- Controls: [SPACE] cycle theme • [M] cycle mode • [ENTER] add message

CRT Shader Effects Library 🔬

• Authentic phosphor physics based on RCA/Tektronix specifications:

- P3 Amber: 602nm peak, bi-exponential decay (k₁=0.85, τ₁=7ms, k₂=0.15, τ₂=25ms)

- P31 Green: 530nm peak, ZnS:Cu,Al composition, single exponential decay (τ=1.2ms)

- P22R Red: 611nm peak, Y₂O₂S:Eu composition, bi-exponential decay (~6ms)

- P4 White: Ultra-fast decay (~0.03ms), standard TV phosphor

• Shadow-mask (RGB triads) and aperture-grille (vertical stripes) patterns

• Scanline rendering with configurable intensity

• Bloom/glow with separable Gaussian blur

• Screen curvature distortion and vignette darkening

• Proper gamma pipeline (γ≈2.2)

CRT Showcase Page (/crt-showcase) 📄

• Comprehensive documentation for all three CRT scenes

• Technical implementation details (phosphor physics, rendering pipeline)

• Historical context (1970s-1990s display technology)

• References to RCA phosphor datasheets, Tektronix oscilloscope manuals, JVC professional monitor specs

• Visual preview cards with phosphor glow effects

Digital Plotting & Pen Plotter Art Page (/plotting) 🖊️

• Complete 12-month roadmap for pen plotter art practice

• 4-phase approach with detailed checklists:

- Phase 1 (1-2mo): Foundation & Learning

- Equipment research (AxiDraw SE/A3, pens, paper)

- Software ecosystem (Inkscape, vpype, p5.js-svg)

- First plots (circles, hatching, parametric curves)

- Phase 2 (2-4mo): Algorithmic Foundations

- Flow fields & noise-based art

- Stippling & halftone algorithms (TSP art, Voronoi, dithering)

- Recursive & fractal systems (L-systems, space-filling curves)

- Physics simulations (particle systems, differential growth)

- Phase 3 (4-8mo): Advanced Techniques

- Multi-layer & multi-pen plotting with color theory

- Typography & text treatment (Hershey fonts, calligraphic algorithms)

- Photographic input processing (edge detection, contour tracing)

- Custom tooling development (SVG optimizer, plot time estimator)

- Phase 4 (6-12mo): Portfolio & Exhibition

- 4 portfolio series (40-80 works): Algorithmic Portraits, Urban Flows, Noise Studies, Typographic Experiments

- Exhibition preparation (framing, documentation, pricing)

- Online presence integration

- Community engagement (#plottertwitter)

• Technical integration plans (P5.js → plotter pipeline, photography × plotting fusion)

• Learning resources (Tyler Hobbs, Inconvergent, Licia He)

• Budget estimate: $1,275-1,850 (AxiDraw, pens, paper, archival materials)

NYC Subway Time-Space Diagram 🚇

• Marey diagram visualization with Canvas-based 2D rendering

• 3 subway lines (1, A, L) with authentic station sequences

• Animated train trajectories with play/pause controls

• Time range adjustment (1-6 hours)

• Delay visualization toggle

• 747 lines of code with proper TypeScript interfaces

Glitch Art Studio 🎨

• Interactive datamoshing tool with Canvas API

• 9 different glitch effects:

- Pixel sorting (brightness threshold)

- RGB channel shift (chromatic aberration)

- Displacement mapping

- JPEG compression artifacts

- Color channel swapping

- Bit crushing

- Scanline displacement

- Color quantization

- Random noise injection

• Image upload and real-time processing

• Download button for processed images

• 803 lines of code

Analog Film Emulation 📷

• WebGL/GLSL shader-based film stock emulation

• 4 classic film stocks:

- Kodak Portra 400 (warm pastels, magenta shadows)

- Ilford HP5 Plus (high contrast B&W)

- CineStill 800T (tungsten balanced, halation)

- Kodak Tri-X 400 (classic B&W with grain)

• Adjustable parameters: grain intensity, grain size, vignette strength

• Film-specific color grading with custom LUTs

• Procedural noise-based grain generation

• Image upload and download

• 927 lines of code

Changed

Complete Navigation Redesign 🧭

• Removed hamburger menu entirely (per user requirement: "NO HAMBURGER MENU I HATE THOSE")

• Implemented modern mega-menu system that surfaces all pages

• Organized into 4 main categories:

- Portfolio (4 pages): Photography, Photo Collection, Projects, Pen Plotting

- Interactive (8 pages): Three.js Gallery, CRT Showcase, Generative Art, Code Art, Film Emulation, Glitch Studio, Subway Diagram, Urban GIS

- Writing (4 pages): Blog, Cooking (hub with all recipes), Travel Log, Interests (hub with all sub-pages)

- Meta (3 pages): Roadmap, Changelog, Inventory

• Plus About and Contact as standalone top-level links

• Desktop: hover-activated mega-menu dropdowns

• Mobile: click-to-expand accordion (still NO hamburger!)

• Improved transparency: rgba(26, 26, 26, 0.95) for nav, rgba(36, 36, 36, 0.98) for dropdowns

• Stronger backdrop blur (12px) for better readability over content

• All 38 pages now accessible and organized (previously only 13 were visible in nav)

Contact Page Enhancement 📧

• Added comprehensive contact information

• Email and LinkedIn alongside existing Twitter/GitHub

• New "Let's Talk About" section with 5 collaboration topics

• Grid layout for better organization

Fixed

CRT Scene Loading 🔧

• Fixed "Init function not found" errors for all three CRT scenes

• Converted from ES6 module exports to IIFE pattern with window.initSceneName functions

• Pattern now matches existing Three.js scenes (rotating-cube.js, etc.)

• Proper error handling with THREE undefined checks

CRT Scene Canvas Error 🖼️

• Fixed "e.getContext is not a function" error

• Updated all CRT scenes to accept container div instead of canvas element

• Scenes now create WebGLRenderer and append to container (matching existing scene pattern)

• Updated onWindowResize methods to use container dimensions

• Removed unused onSceneReady callbacks

Subway Diagram Train Rendering 🚂

• Fixed trains not appearing on initial page load

• Changed animationTime initial value from 0 to -currentTimeRange * 60

• Trains now start at beginning of time range and are visible immediately

• Consistent with reset button behavior

Security Camera Scene 📹

• Disabled tutorial overlay requiring "BEGIN SHIFT" button click

• Scene now auto-starts immediately when loaded

• Changed isPaused to false and commented out showTutorial()

• Better user experience (no confusing instructions screen)

Photography Arrow Navigation 🔄

• Fixed arrows jumping to inconsistent images functionally

• Changed from tracking DOM elements to tracking numeric indices

• Fixed arrows moving around visually on screen

• Locked arrows to exact viewport coordinates: calc(50vh - 32px) from top, 32px from edges

• Removed transforms that caused subpixel shifts

• Final fix: position: fixed with exact pixel positioning (no transforms)

Netlify Build Deployment 🚀

• Fixed TypeScript compilation errors preventing production deployment

• Navigation component: Added optional chaining (category.submenu?.map()) to prevent undefined access errors

• Astro v5 compatibility: Removed deprecated AstroComponentFactory type (no longer exported in Astro v5)

• Changed enhancement loader type from AstroComponentFactory to any in enhancements.ts:6 and BaseLayout.astro

• Removed type annotations from inline scripts (photo-collection.astro:1070,1554) - not supported in tag in P5Gallery.astro template literal (line 399)

• Fixed return statements outside function in InteractiveParticles.astro

• Replaced deprecated substr() with substring() in P5Sketch.astro

• Fixed TypeScript timeout type error in CustomCursor.astro

Performance

InteractiveParticles Optimizations (70% reduction in resource usage):

• Reduced max particles from 100 → 30 (70% reduction)

• Added ~60fps throttling to mousemove events using performance.now()

• Stop animation loop completely when no particles exist (major CPU savings)

• Removed expensive radial gradient glow effect (simplified to solid fill)

• Reduced particle lifetime: 60-120 frames → 40-80 frames

• Added will-change: contents for GPU acceleration

• Hidden on mobile devices and for users who prefer reduced motion

• Lower opacity (0.7 → 0.6) for subtler effect

CustomCursor Optimizations (idle animation elimination):

• Changed from continuous 60fps animation to event-driven animation

• Animation stops after 100ms of mouse inactivity (saves CPU when idle)

• Switched from left/top to transform3d for GPU acceleration

• Added passive: true to mousemove listener

• Reduced animation smoothing coefficients (0.3→0.25, 0.1→0.08)

• Added will-change: transform CSS hint

• Hidden for users who prefer reduced motion

• Faster transitions (0.3s → 0.2s)

AnimatedBackground Optimizations (70% content reduction):

• Reduced symbol layer text content by ~70% (fewer unicode characters)

• Faster animation durations: 180s→120s, 150s→100s, 200s→140s

• Smaller orb sizes: 600px→500px, 500px→400px, 400px→350px

• Lower opacity on all elements (0.15→0.12, 0.15→0.08, etc.)

• Added will-change: transform to all animated elements

• Symbol layers completely hidden on mobile (display: none)

• All animations disabled for reduced-motion users

• Reduced orb blur on mobile (80px→60px)

ScrollAnimations Optimizations (memory cleanup):

• Elements automatically unobserved after animation (frees memory)

• Animations completely skipped for reduced-motion users

• Added will-change hints during animation, removed after completion

• Increased threshold from 0.1 → 0.15 for better performance

• Increased rootMargin from -50px → -80px

• Faster transitions (0.6s → 0.5s)

Accessibility

All animated components now respect prefers-reduced-motion setting

Improved experience for motion-sensitive users

Animations completely disabled (not just reduced) when preference is set

Technical

All event listeners now use passive: true where appropriate

Extensive use of GPU acceleration via transform3d and will-change

Animation loops now stop when idle instead of running continuously

Reduced canvas particle rendering complexity

Build passes with 0 errors, 0 warnings (only 9 hints for unused variables)

Expected Impact

Higher FPS during mouse interactions (especially on lower-end devices)

Significantly lower CPU usage when page is idle

Faster page load times due to reduced animation complexity

Better battery life on laptops and mobile devices

Improved accessibility compliance

Fixed

Three.js Gallery: Fixed script loading race condition that prevented scenes from initializing

• Added programmatic THREE.js loading in ThreeGallery component to ensure library loads before scene initialization

• Removed redundant script tag from threejs.astro page

• Fixed "THREE is not defined" errors and variable redeclaration errors

P5Gallery: Fixed template string syntax error with escaped script tag that prevented build

Technical

Improved script loading reliability with promise-based CDN loading

Better error handling for failed library loads

Added

Enhanced Interests System: Complete redesign inspired by gwern.net with hub-and-spoke architecture

• New index page (/interests) with tiered presentation:

- Primary interests (5): Deep, ongoing engagement

- Active tracking (2): Organized inventories

- Exploring (2): Early-stage interests

• Stats dashboard: 8 metrics displayed prominently (active interests, projects, books, miles biked, repairs, years in NYC)

• Activity feed: Recent updates across all interests with timestamps and icons

• Metadata-driven architecture: interests.json with rich metadata (status, depth, started date, color themes, icons, tags, stats, relationships)

Detail pages for primary interests (gwern-inspired long-form):

• /interests/diy - DIY & Making (electronics, woodworking, repairs, tools, philosophy)

• /interests/nyc - NYC & Brooklyn (neighborhoods, food, culture, transit, urban observation)

• /interests/biking - Biking & Urban Cycling (setup, maintenance, routes, gear, advocacy)

• /interests/geopolitics - Geopolitics & Current Events (US politics, international relations, economics, tech & society, analytical approach)

Consistent page structure for all detail pages:

• Breadcrumb navigation

• Rich header with metadata badges (status, depth, dates)

• Statistics display specific to each interest

• Table of contents for quick navigation

• Long-form content with proper hierarchy

• Related interests section with cross-linking

• Back to index navigation

Redirect pages for existing interests:

• /interests/books - Reading & Books component

• /interests/kitchen - Kitchen inventory component

• /interests/workshop - Workshop inventory component

Design system:

• Color-coded interests (DIY=orange, NYC=blue, Biking=green, Geopolitics=purple, Books=amber, Kitchen=beige, Workshop=blue-gray)

• Consistent card patterns with hover effects

• Tiered visual hierarchy (primary > active > exploring)

• Animated entrances with staggered delays

• Responsive layout for mobile

Cross-linking and relationships:

• Bidirectional interest relationships (DIY ↔ Workshop, Biking ↔ NYC, Geopolitics ↔ Books)

• Related interests section on each detail page

• Tag-based organization

Changed

Interests page reorganization: Moved from single long page to hub-and-spoke model

Navigation structure: All interests now under /interests/* hierarchy

Content organization: Split 715-line monolithic page into focused, navigable sections

Fixed

Resolved route collision between interests.astro and interests/index.astro (moved old file to backup)

Fixed TypeScript errors with non-null assertions for interest lookups

Fixed naming conflict in books.astro (renamed import to BooksComponent)

Technical

Created src/data/interests.json with 9 interests and 6 recent activity items

4 new detail pages (~500-700 lines each with rich content)

3 redirect pages for existing components

Updated build process: 32 pages (was 23)

Metadata includes: id, title, slug, status, depth, started, updated, color, icon, summary, tags, relatedTo, tier, stats

Added

Workshop & Creative Space Inventory: Tech-focused inventory for NYC apartment workspace

• 7 categories: Computer & Peripherals, Homelab & Network, Drawing & Design, Writing & Notes, Planning & Organization, Furniture & Setup, Maker & Electronics

• 28 items tracked with comprehensive metadata (brand, specs, acquisition date, condition, notes)

• Favorite items highlighting with star badge

• Statistics display: total items and favorites count

• Blue/gray color palette with tech-inspired aesthetic

• Grid-based card layout with hover effects and responsive design

• Emoji icons for visual categorization

• Added to Interests page alongside Kitchen Inventory

Fixed

Three.js scenes now properly load with global script tag in page head

Removed OrbitControls dependencies from particle-system and fractal-tree scenes

Simplified scenes to auto-rotate for better reliability and browser compatibility

Added

Kitchen Inventory: Japanese-inspired minimalist tracker for kitchen tools and furniture

• Organized by categories: Cookware, Knives, Tools, Appliances, Storage, Furniture

• Metadata tracking: brand, size, acquisition date, condition, notes

• Favorite items highlighting with star badge

• Statistics display: total items and favorites count

• Neutral color palette (beige, cream, soft grays) inspired by Japanese aesthetic

• Grid-based card layout with hover effects

• Emoji icons for visual categorization

• Added to Interests page

Fixed

OrbitControls loading made optional with fallback CDN (unpkg.com)

Three.js CDN URL corrected to proper jsdelivr path

Changelog page now accessible at /changelog instead of GitHub link

Added

Three.js Gallery: New section featuring interactive 3D scenes

• Rotating cube with Phong material and lighting

• Interactive particle system with orbit controls

• Geometric waves with vertex displacement animation

• 3D procedural fractal tree

• Modal viewer with keyboard navigation

• Scene complexity and type badges

Footer Component: Site-wide footer with version number and links

• Version display (v2.1.0)

• GitHub repository link

• Changelog link

• Contact information

Changed

Navigation: Added Three.js link to main menu

Layout: Footer now appears on all pages

Fixed

Theme toggle initialization moved to for instant load

Theme toggle system mode properly resolves to dark/light

Major Changes

Complete migration from Gatsby to Astro 5.14.7

Comprehensive redesign with dark/light theme support

Interactive p5.js generative art gallery with URL-based seed sharing

Professional typography and reading experience enhancements

Added

Theme System: Dark/light/system theme toggle with keyboard shortcut (T key)

P5.js Gallery Enhancements:

• URL-based seed sharing (?seed=12345)

• Full-screen mode (F key)

• Download PNG functionality (D key)

• Comprehensive keyboard shortcuts (Space, F, D, C, arrows, ESC, ?)

• Performance badges (light/medium/heavy complexity)

• SVG sketch thumbnails with hover effects

• Deterministic seeded random number generation

• Lazy loading and performance optimization

Reading Section: Books currently reading, recently finished, stats, and favorites

Navigation: Improved spacing and mobile responsiveness

Interactive Features:

• Custom cursor (desktop)

• Scroll animations

• Keyboard navigation

• Interactive particles

• Reading progress indicator

• Tilt effects

• Parallax scrolling

• Floating action menu

• Link previews

• Sidenotes and footnotes

• Collapsible sections

• Advanced typography

• Smooth page transitions

Photography Section: Enhanced gallery with lightbox and zoom functionality

Recipe Pages: Comprehensive on-site recipe pages with TOC and reading time

Projects Page: In-depth content and GitHub integration

Blog: Markdown-based blog system with syntax highlighting

Changed

Framework: Gatsby → Astro 5.14.7

Design: Complete visual overhaul with gwern.net-inspired aesthetics

Performance: Upgraded p5.js to v1.11.1 with optimization

Layout: Consolidated navigation and improved mobile experience

Typography: Enhanced with Recursive font and refined spacing

Fixed

Template literal syntax error in P5Gallery component

Theme toggle system mode handling

Navigation spacing between logo and menu items

Generative page content visibility (z-index fix)

Initial Release

Basic Gatsby-based personal website

Photography gallery

Code art examples (chaos, gradient, noise, spiro, waves)

Blog functionality

Responsive design

Basic navigation

---