chrislacey.dev

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

chrislacey.dev

Tech Stack

• Framework: Astro v5
• Styling: Tailwind CSS v4
• Fonts: Geist Sans & Geist Mono
• Deployment: Vercel
• Linting: Biome

Features

• Animated particle background
• Interactive skill icons with hover effects
• Magnetic button interactions
• Scroll-triggered reveal animations
• Dynamic OG image generation
• View transitions between pages
• Responsive design

Project Structure

src/
├── assets/          # Images and static assets
├── components/      # Astro components
├── data/            # JSON content files
├── layouts/         # Page layouts
├── pages/           # Routes (index, about, projects, contact)
│   └── api/         # API routes (OG image generation)
├── scripts/         # Client-side TypeScript
└── styles/          # Global CSS

Development

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Lint & format
pnpm check

License

MIT