How I Built This Site

Building a personal portfolio is a rite of passage for developers. Here’s the story of how this one came together.

Why Astro?

I chose Astro for several reasons:

1. Performance by default - Static HTML with zero JavaScript shipped unless needed
2. Component islands - Add interactivity only where necessary
3. MDX support - Write content in Markdown with embedded components
4. Framework agnostic - Use React, Vue, Solid, or Svelte components

Why SolidJS for Interactive Parts?

For the interactive components, I went with SolidJS because:

• Tiny bundle size - Much smaller than React
• True reactivity - No virtual DOM diffing
• Familiar syntax - Similar to React, easy to pick up

The Design System

I built a custom design system using:

/* Semantic color tokens */
--ui-bg: var(--color-paper);
--ui-text: var(--color-black);
--ui-primary: var(--color-blue-600);

This approach allows for:

• Easy theme switching (light/dark)
• Consistent spacing and typography
• Reusable component styles

Key Architectural Decisions

Content Collections

Using Astro’s Content Collections for type-safe content:

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    type: z.enum(['article', 'experiment', 'video', 'note']),
    tags: z.array(z.string()),
  }),
});

Component Structure

Organizing components by function:

components/
├── common/        # Shared utilities
├── embed/         # Embeddable interactive components
└── [Section].astro  # Page sections

Lessons Learned

1. Start with content structure before design
2. Invest in a solid design token system early
3. Keep interactive components minimal
4. Test on real devices, not just simulators

What’s Next?

• Adding more interactive experiments
• Implementing full-text search
• Creating an RSS feed
• Adding a newsletter signup