From 750 Lines to 60: Component Extraction

The Problem

My index.astro had grown to 750 lines. Hero, About, Work, Contact, Logs—all inline in one file. Changing one section meant scrolling through hundreds of lines. Finding bugs was a treasure hunt.

The Solution

Extract everything into composable components. No barrel files, no unnecessary abstractions—just logical grouping.

src/components/
├── header/
├── footer/
├── sections/
│   ├── hero/
│   ├── work/
│   ├── About.astro
│   ├── Contact.astro
│   └── Logs.astro
└── terminal/

Results

Key Principles

1. No barrel files (index.ts)—just import directly
2. Flat over nested—sections/work/, not sections/work/components/
3. Co-locate by usage—components live where they’re used
4. Delete dead code—if it’s not used, it’s gone

The codebase now feels lightweight. Each component has one responsibility, one file, one purpose.