Personal Portfolio

Context

The problem

I wanted one home for project case studies, experience, technical writing, and my resume. The current site replaces an earlier Blazor WebAssembly portfolio with a content-focused static build.

Solution

How TeachMate works

Astro generates the portfolio pages from typed TypeScript content modules and Markdown/MDX blog posts. Reusable layouts and components present project details, career information, and writing, with small browser scripts for theme switching and interactive filters.

Capabilities

What it includes

• Project directory with category and technology filters, search, and generated case-study pages
• Experience, skills, profile, and resume pages with PDF download and print support
• Markdown/MDX engineering blog with an RSS feed
• Responsive layouts with persistent light and dark themes
• Canonical and Open Graph metadata, structured data, sitemap, and optimized images

System design

Architecture

• Astro 7 builds the site as static pages; project detail routes are generated from the typed PROJECTS collection.
• Typed TypeScript modules hold site, project, experience, and skills data, while Astro content collections load Markdown/MDX articles.
• Tailwind CSS 4 is integrated through Vite; small JavaScript modules handle theme, navigation, filters, and progressive interactions.
• Astro integrations generate the sitemap and support MDX; the site also publishes an RSS feed and structured metadata.

Trade-offs

Engineering decisions

• Use static generation for a content-focused site that does not need a runtime application server or database.
• Keep structured portfolio data in typed modules and long-form writing in Markdown/MDX so each content type stays easy to maintain.
• Limit browser-side JavaScript to interactions such as theme switching, project filtering, and navigation.