Back to Projects

Astro Developer Portfolio

Built an Astro portfolio concept for a full-stack developer with themed navigation, project discovery, blog-ready routing, and polished contact interactions.

Developer workspace with laptop showing code.

Problem

A developer portfolio has to do more than look polished. It needs to communicate positioning quickly, organize proof of work, support future content, and stay fast enough that recruiters or collaborators can scan it without friction.

Solution

I built a content-forward Astro portfolio with a full-stack developer narrative, responsive navigation, theme switching, featured project cards, project search and filtering, and contact form feedback. The site is structured like a real personal brand site rather than a one-screen landing page.

What I Owned

  • Built the page structure for hero, about, projects, project discovery, and contact sections.
  • Added light and dark theme behavior with persistent local preference.
  • Implemented client-side project search, category filtering, featured-only filtering, and sorting.
  • Prepared navigation patterns for portfolio pages and blog-style expansion.

Tech

  • Astro for a fast static site with content-first routing.
  • TypeScript for safer client-side interaction code.
  • Tailwind CSS for responsive page structure and visual system styling.

Key Decisions

  • Used Astro for the main shell because the site is mostly static content with targeted interaction.
  • Kept the project discovery controls on the same page so visitors can search and filter without losing context.
  • Added theme persistence to make the site feel more complete and personal.
  • Designed project cards and archive rows as reusable patterns, because portfolio sites tend to grow over time.

Tradeoffs

  • The contact form uses frontend validation and feedback, with backend delivery left as a future integration point.
  • The project catalog is content-driven and intentionally lightweight rather than backed by a CMS.

Outcome

  • Delivered a deployed portfolio concept with fast static rendering and useful interactive details.
  • Demonstrated Astro, TypeScript, Tailwind, and content architecture in a polished public project.
  • Created a reusable foundation for project pages, blog content, and future portfolio iterations.