Personal Portfolio

I wanted one place to bring together my applications, home lab and technical writing, with enough explanation to show what I have actually worked on. Most of that content is text and images, so Astro’s static rendering is a useful fit.

Public content pages are prerendered into HTML. The contact endpoint runs on the server through the Vercel adapter, so the site can serve static case studies while still handling form submissions.

Shared layouts and components keep project cards, headings, navigation and metadata consistent. Blog and CTF content use Astro collections, with drafts excluded from public routes and the sitemap.

Client-side JavaScript is limited to interactions that use it: navigation, theme selection, project browsing, filters and the screenshot gallery. React hydrates the contact form when it becomes visible. Astro produces responsive WebP screenshots, and the variable font is hosted locally.

The project deck and mobile navigation need to work across narrow screens, short viewports and keyboard input. The gallery also needs to announce which screenshot is selected. Those behaviours are easy to miss when only reviewing a desktop screenshot.

The browser checks exercise responsive layouts, overflow, image loading, keyboard controls, reduced motion and light/dark accessibility using Playwright and axe. Contact validation has separate unit tests; browser tests mock successful submission so they do not send real email.

Astro check and the production build provide additional checks on the source and generated pages. Deployment uses the existing Vercel configuration, with cache policies for static assets and uncached contact responses.

The challenge is keeping a small site understandable while adding more work to it. Reusing the existing components helps me improve the content without making each page behave differently.

I am learning to treat accessibility, responsive behaviour and accurate writing as part of the implementation. A case study is more useful when it explains a real decision and its limits than when it simply lists technologies.