Skip to content

CLAUDE.md

Latest commit

 

History

History
43 lines (29 loc) · 2.26 KB

CLAUDE.md

File metadata and controls

43 lines (29 loc) · 2.26 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Build & Development Commands

npm run dev        # Start dev server at localhost:4321 (with --host)
npm run build      # Production build to dist/
npm run preview    # Preview production build

Node >=18.20.8 required. ES modules project.

Architecture

This is a personal portfolio site built with Astro 5 (static/island architecture), Tailwind CSS 4 (via @tailwindcss/vite), and GSAP for scroll animations.

Content & Data

  • Projects & Photos: Stored as JSON in src/data/ (projects.json, photos.json with 1000+ entries)
  • Blog posts: Astro Content Collections using MDX in src/content/blog/, schema defined in src/content/config.ts
  • Static assets: public/images/ (photos as DSC_*.jpg, project screenshots, profile images)

Routing

  • src/pages/index.astro — Homepage with hero, featured projects carousel, skills grid
  • src/pages/projects.astro — Projects grid with client-side search & category filtering
  • src/pages/photography.astro — Photo gallery with category filtering, favorites showcase, EXIF metadata
  • src/pages/blog/index.astro and src/pages/blog/[slug].astro — Blog listing and dynamic posts
  • src/pages/photo/[filename].astro — Dynamic photo detail pages

Key Patterns

  • Dark mode: Class-based (dark on <html>), persisted in localStorage key theme, with system preference fallback
  • Layout: Single BaseLayout.astro wraps all pages (meta tags, fonts, dark mode script, global styles)
  • Filtering: Projects and photos use client-side DOM manipulation (vanilla JS in <script> tags), not framework reactivity
  • Animations: GSAP ScrollTrigger on homepage; Tailwind keyframe animations (fade-in, slide-up, scale-in) defined in tailwind.config.mjs
  • Components: Header.astro (fixed nav with mobile menu, auto-hides on scroll), ProjectCard.astro (typed props interface), PhotoModal.astro, AboutMe.astro

Styling

Global styles in src/styles/global.css. Custom color palette (full slate spectrum), Inter font family, and animations configured in tailwind.config.mjs. Uses glassmorphic effects and gradient text (.gradient-text class in BaseLayout).