Colophon
The tech stack, design decisions, and integrations that make this site tick.
Astro 5
Static-first framework with islands architecture. Astro components handle server-side rendering, React components hydrate client-side only where interactivity is needed.
React 19
Used for interactive islands — animated icons, GitHub calendar, social links — hydrated via client:idle and client:visible directives.
Netlify
Static output with serverless API routes for Spotify, Discogs, Hardcover, view counting, and password-protected posts.
TypeScript
End-to-end type safety across components, API routes, content schemas, and utility functions.
Astro Content Collections
Four collections — Thoughts, TIL, Projects, Photography — with Zod schemas, Markdown/MDX support, and frontmatter validation.
Shiki
Syntax highlighting with dual themes (Catppuccin Latte for light, Tokyo Night for dark), plus transformers for filename labels, line highlighting, and diff notation.
Custom Rehype Plugins
Sidenotes rendered as margin notes on wide screens, external link indicators, and GFM support via remark-gfm.
Pages CMS
Git-based content management for data files — bookmarks, brain dumps, networks, and speaker bio copy on the media page.
Changelogs
Auto-generated at build time by running git log via Node's execSync. Parses conventional commit prefixes, filters out content-only noise, and groups entries by month — no manual changelog maintenance needed.
Tailwind CSS 3
Utility-first CSS with class-based dark mode. Extended via a custom design system token layer built on CSS custom properties.
Design Tokens
CSS variables for colours, shadows, radii, z-index scale, and transition speeds. Every component references tokens, never raw values.
Typography
Literata (serif) for body and headings, system sans-serif for UI elements. Font size accessibility controls for reader preference.
View Transitions
Astro's ClientRouter for smooth page transitions. Dark mode toggle uses a clip-path circle reveal animation from the click point.
Spotify
Now-playing widget with marquee text, spinning vinyl disc animation, and idle state. OAuth token refresh handled server-side.
Hardcover
GraphQL-powered reading list rendered as an interactive bookshelf. Click any spine to open a modal with cover art, star rating, genres, description, and a deep-link to Hardcover.
Discogs
Vinyl collection displayed in a grid with spinning disc animations and YouTube-powered single playback for each record.
Upstash Redis
View counting for Thoughts and TIL posts with per-session deduplication, stale-while-revalidate caching, and graceful fallback.
GitHub
Contribution calendar on the projects page via react-github-calendar.
Microlink
Auto-generated bookmark preview thumbnails for the curated links collection.
Cloudflare Web Analytics
Privacy-friendly, cookie-free analytics with no pageview limits. No individual visitor tracking.
YouTube IFrame API
Lofi music player powered by a hidden YouTube iframe. Global singleton on <html> survives Astro view transitions. Optimistic play state, CSS vinyl disc, and spring-animated playlist toggle.
30+ Animated Icons
SVG React components with hover animations, derived from itshover.com and wrapped in a shared animation controller.
Motion
Layout animations and presence transitions throughout the site — most notably the talks accordion, where photo thumbnails morph into a full gallery on expand via shared layoutId, with spring-animated height and coordinated AnimatePresence exit sequences.
Cambio
Drag-to-dismiss photo lightbox in the talks section. Sheet-style overlay with spring entry animation, pointer-capture swipe-to-close gesture, and scroll lock while open.
Typed.js
Typewriter animation for the rotating quote in the sidebar. Lazy-loaded on first use to avoid blocking initial paint.
Sound Effects
Web Audio API piano notes on bookshelf hover (mapped across a jazz pentatonic scale), transition sounds for modal open and close, button taps, and page navigation. Off by default with a persistent mute toggle.
Haptic Feedback
Vibration API patterns on mobile for button presses, toggles, and form submissions.
Command Palette & Search
Cmd+K interface for keyboard navigation across all pages and posts, plus g+key shortcuts. Full-text search powered by Pagefind — indexes at build time, loads on demand with zero upfront JS cost.
PWA
Installable with offline support via service worker. Save individual posts for offline reading.
OG Images
Dynamic Open Graph image generation via Vercel OG for every blog post.
Static Output
Pre-rendered HTML with selective hydration. Only interactive islands ship JavaScript to the client.
Asset Compression
Images optimised to AVIF via Astro's image pipeline. CSS and JS compressed at build time.
Prefetching
All routes prefetched on page load for near-instant navigation.
Caching
Build-time API response caching with 5-minute TTL. Redis view counts use stale-while-revalidate headers.
LQIP Blur Placeholders
Build-time generated 20px base64 WebP thumbnails used as blurred CSS placeholders across the site — profile photos, press photos, talk gallery images, and more. Fades out once the full image loads.
For the full story behind building this site, read Building itsmeray v6. For a running log of every feature and fix shipped, see the Changelogs.