My personal portfolio website with a cosmic theme where you navigate through an interactive solar system. Each orbiting planet takes you to a different section - About, Projects, Resume, Blog, and Experiments.
The Concept
I was tired of seeing the same portfolio layouts everywhere - hero section, about me, grid of projects, contact form. They work, but they're forgettable. I wanted something that felt more like me - someone who builds things for fun and gets nerdy about the details.
The solar system idea started as a joke ('What if my portfolio was literally my own universe?') and I couldn't stop thinking about it. So here we are.
Interactive Features
Orbital Navigation - Five planets orbit the central star at different speeds and distances. Each planet represents a section of the site. Hover to see the label, click to navigate. The orbits use pure CSS animations with no JavaScript required for the movement.
Clickable Starfield - The background isn't just decoration. Click any star and you'll get a random Chuck Norris-style quote about me. There are 50+ quotes covering both tech humor ('Ben Purdy can exit vim on the first try') and general absurdity ('Ben Purdy counted to infinity. Twice.'). It's a fun easter egg that rewards exploration.
Keyboard Navigation - Full keyboard support for accessibility and power users. Press 1-5 to jump directly to any section, Escape to return home, and ? to see all shortcuts. No mouse required.
Content Sections
About - My background, interests, and what I'm currently working on. Includes social links to GitHub and LinkedIn.
Projects - You're looking at this page right now! Each project has both a PM-friendly overview and a technical deep-dive.
Resume - My work history at ThreatConnect and Premier Inc., education, and skills. Downloadable PDF version available.
Blog - Technical posts about Python, React Native, tooling, and occasional philosophical tangents about software development. Filterable by category and searchable.
Experiments - A showcase of the interactive features built into this site, like the starfield and keyboard navigation.
Design Philosophy
No frameworks, no bloat. The entire frontend is vanilla JavaScript and CSS. Pages load fast because there's nothing to load - no 500KB of React, no build step that takes 30 seconds. Just HTML served by Python with some CSS animations for visual polish.
The cosmic theme uses a dark color palette with accent colors for each planet/section. Everything is responsive - the solar system scales down on mobile while keeping the planets clickable.
A full-stack Python web application demonstrating modern async patterns, clean architecture, and vanilla frontend development.
Architecture Overview
Backend Framework - Starlette (the ASGI framework that powers FastAPI) chosen for its simplicity and async-first design. No magic, no decorators - just functions that take requests and return responses. Perfect for a site that's mostly serving rendered HTML.
Templating - Jinja2 with template inheritance. Base template defines the starfield background and common styles, section templates extend it. Custom filters for markdown rendering and date formatting.
Data Layer - File-based JSON storage using a custom DAO (Data Access Object) pattern. Each model type (Profile, Resume, Projects, Posts) has its own DAO class handling serialization and file I/O. No database needed for a portfolio site - data lives in data/ directory as JSON files.
Frontend Implementation
Orbital Animation System - Pure CSS using transform: rotate() and translateX() with CSS custom properties (--orbit-radius, --angle). Each planet's position is calculated as:
transform: rotate(var(--angle))
translateX(calc(var(--orbit-radius) / 2))
rotate(calc(-1 * var(--angle)));
The double rotation keeps planet labels upright while orbiting.
Starfield Architecture - Three parallax layers (small, medium, large stars) created with CSS radial gradients on absolutely positioned divs. Interactive stars are a separate overlay of button elements with click handlers. Larger hitboxes (25-40px) with smaller visual dots (4-8px) via CSS pseudo-elements for easier clicking.
Quote Popup System - On star click, JavaScript selects a random quote from a 60-item array, positions a popup near the click location (with viewport boundary detection), and auto-hides after 4 seconds. Uses CSS transitions for fade-in/out.
API Endpoints
GET /api/projects - Returns all projects as JSONGET /api/projects/{id} - Single project detailGET /api/posts - Returns all blog posts as JSONGET /api/posts/{slug} - Single post detailGET /feed.xml - RSS feed for blog posts
All JSON serialization uses orjson for 10x faster encoding than stdlib.
Build & Development
Package Management - uv (Astral's Rust-based tool) for dependency management. Sub-second installs, automatic virtual environment creation, lockfile for reproducibility.
Linting - ruff for linting and formatting. One tool replaces black, isort, flake8, and dozens of plugins. Runs in milliseconds.
Type Checking - pyright for static type analysis. Full type hints on all functions and Pydantic models.
Testing - pytest with pytest-asyncio for async test support. Uses httpx's ASGITransport to test the full application stack without running a server. 200+ tests covering routes, models, and data access.
File Structure
app/
server.py # Route definitions, startup handlers
db.py # Database facade aggregating all DAOs
seed_data/ # Default content for fresh installs
models/ # Pydantic models (Profile, Resume, Project, BlogPost)
dao/ # Data access objects for each model type
static/
css/ # Base, universe, and section-specific styles
js/ # Starfield interactions, keyboard navigation
templates/
base.html # Common layout with starfield
sections/ # Individual page templates