About This Website

This website is built with modern web technologies, focusing on performance, accessibility, and a delightful user experience. It features interactive SVG visuals, responsive design, and a unique random theme system. It's a showcase of how to build a fast, beautiful portfolio/blog using cutting-edge static site generation.

The homepage includes five distinct interactive visual components that reinforce the mental models described in each section, all built with React and SVG for smooth, performant animations.

✨ Open Source: This entire project is available as a public repository on GitHub. Feel free to use it as a starting point for your own portfolio, blog, or website. Fork it, customize it, and make it your own!

Framework & Build

Astro

Static site generator with component islands architecture

View Transitions

Native browser API for smooth page transitions

Styling

TailwindCSS v4

Utility-first CSS framework with PostCSS

Space Mono

Monospace font for headings and highlights

Plus Jakarta Sans

Sans-serif font for body text

Content & Data

Astro Content Collections

Type-safe content management with Markdown

TypeScript

Type-safe data structures for timeline and structured content

Performance & UX

Link Pre-fetching

Hover-based pre-fetching for instant navigation

Intersection Observer

Scroll-triggered animations for content sections

CSS Animations

Smooth fade-in and transition effects

React Components

Interactive SVG visuals with React for homepage sections

RequestAnimationFrame

Smooth, performant animations for timeline and visual components

Development

PostCSS

CSS processing and optimization

Vite

Fast build tool and dev server (via Astro)

Design Philosophy

This website embodies several key principles:

  • Performance First: Static generation, minimal JavaScript, and optimized assets ensure fast load times and smooth interactions.
  • Design System: Consistent typography, spacing, and colors defined through CSS variables and Tailwind utilities.
  • Accessibility: Semantic HTML, proper ARIA labels, and keyboard navigation support.
  • Progressive Enhancement: Core content works without JavaScript, with enhancements for modern browsers.
  • Developer Experience: Type-safe content collections, component-based architecture, and clear code organization.

Random Theme System

This website features a hidden random theme system that can be activated by clicking on the hero shapes on the homepage. Here's how it works:

How It Works

  • Activation: Click any of the three animated shapes (diamond, circle, hexagon) in the hero section to generate and apply a random theme.
  • Theme Generation: The system uses a curated pool of WCAG AA compliant color combinations, ensuring all themes meet accessibility standards with a minimum contrast ratio of 4.5:1 for text.
  • Theme Persistence: Random themes persist across page navigation using Astro View Transitions, allowing you to browse the site while maintaining your selected theme.
  • Reset Options:
    • Desktop: A toast notification appears in the bottom-right corner with a "Reset" button to return to the default theme.
    • Mobile: Use the "Reset Theme" option in the mobile menu (FAB menu) to return to default.

Technical Implementation

  • Color System: Themes are generated using CSS custom properties (CSS variables) that cascade throughout the entire site, affecting backgrounds, text, borders, shadows, and UI elements.
  • Accessibility: Each theme combination is validated using WCAG luminance and contrast ratio calculations to ensure readability. The system uses the relative luminance formula: L = 0.2126 × R + 0.7152 × G + 0.0722 × B
  • Dynamic Toast Colors: The toast notification itself adapts to each theme, with background and text colors calculated to contrast with the page background while maintaining accessibility standards.
  • Theme Storage: Themes are stored in localStorage to persist across page refreshes and navigation.
  • SVG Color Updates: Hero shapes and logo SVGs dynamically update their fill colors to match the current theme using CSS custom properties.

Theme Pool

The system includes a diverse collection of accessible color palettes:

  • Dark themes with light text (various shades of navy, charcoal, and deep blues)
  • Light themes with dark text (soft grays, creams, and whites)
  • Warm tones (yellows, purples, greens with appropriate contrast)
  • Cool tones (blues, teals, mint greens)

Each theme maintains consistent typography, spacing, and design system variables while providing a unique visual experience.

Built with ❤️ using Astro and modern web standards

View on GitHub Learn Astro