Phillip Hirsch — Developer Portfolio

Personal portfolio site built with Astro, React, and Tailwind CSS. Deployed on Vercel.

Features

• Astro 6 with page animations
• React 19 for server-rendered integrations
• Tailwind CSS v4 for styling with custom theme tokens
• Dark / light theme toggle with persistence (falls back to prefers-color-scheme on first visit)
• Responsive layout — mobile-first with adaptive grid
• Phosphor Icons for a consistent icon set
• Auto-generated OG images via @vercel/og
• ESLint for linting
• Prettier for formatting
• TypeScript in strict mode

Architecture

Single-page layout — index.astro is the only content page. Nav links use anchor IDs (#experience, #education, #skills) for smooth scroll navigation.

Components follow atomic design: atoms (ButtonLink, TimelineDot), molecules (HeroPortrait, PageHeader, EducationEntry), and organisms (Hero, Nav, ExperienceSection, SkillsSection).

Static .astro components by default; there are currently no hydrated React islands. React remains in use for server-rendered integrations such as icons and the OG image endpoint.

Tech Stack

Layer	Technology
Framework	Astro 6
UI	React 19
Styling	Tailwind CSS 4
Icons	Phosphor Icons
Fonts	Space Grotesk, Space Mono (via Astro Fonts)
Linting	ESLint
Formatting	Prettier
Hosting	Vercel (hybrid — static pages + OG endpoint as serverless fn)
Runtime	Bun

Project Structure

src/
├── components/
│   ├── atoms/         # ButtonLink, TimelineDot, etc.
│   ├── molecules/     # HeroPortrait, PageHeader, EducationEntry, etc.
│   └── organisms/     # Hero, Nav, ExperienceSection, SkillsSection, etc.
├── data/              # Content data (experience, education, skills, nav)
├── images/            # Optimized image assets
├── layouts/           # BaseLayout
├── pages/             # index.astro, 404.astro, og.png.ts
└── styles/            # Global CSS and theme variables
public/
└── assets/            # Static files (resume PDF, favicons)

Getting Started

# Install dependencies
bun install

# Start the dev server
bun run dev

# Build for production
bun run build

Linting & Formatting

# Check for lint issues
bun run lint

# Check formatting
bun run format:check

# Auto-fix lint issues
bun run lint:fix

# Rewrite files with Prettier
bun run format

# Type-check Astro and TypeScript files
bun run astro:check