Full-Stack · Project case study
mattcosh.com — This Portfolio
The site you're on right now — a hand-built, data-driven portfolio presenting my projects, experience, and timeline for recruiters and collaborators.
- Focus
- Full-Stack
- Timeline
- 2025
- Delivery
- Completed
- Case study
- Available
Project details
This case study covers the problem, implementation, outcomes, and practical lessons from the project. The technical narrative below is based on the project record and supporting LinkedIn export.
Skills developed
Technical and product skills applied or strengthened while delivering this work.
- Next.js
- TypeScript
- Tailwind CSS
- React Three Fiber
Project story and lessons learned
Overview
A responsive personal portfolio website built and deployed to present my software projects, experience, technical skills, and professional achievements. It provides a central home for case studies, career information, and contact details under a custom domain.
The Problem
My work spans hardware, AI, full-stack development, and networking, and none of that fits cleanly into a single-page resume or a generic template portfolio. I wanted a site that could hold the full shape of that work — including a proper timeline of everything I've built and done — without looking like it was assembled from a page builder.
What I Built
A statically-generated Next.js site with no backend, database, or CMS — just structured local data driving every page. The design leans into a motif tied to CS-M, my flagship project: a heartbeat/EKG pulse that shows up as a section divider on the homepage and as the spine of the Roadmap page's timeline. Projects, experience, and timeline data are all data-driven from typed content files, so adding new work later means editing data, not rebuilding pages.
Key Features
- A cinematic, animated landing page with a custom portrait treatment.
- A filterable project grid with full case-study pages, written in MDX.
- An Experience page covering work history, education, skills, and certifications.
- A Roadmap page visualizing everything chronologically along an animated pulse timeline.
- A ⌘K command palette for fast keyboard navigation.
Challenges
The biggest challenge was resisting the pull toward a generic "AI portfolio template" look — dark hero, gradient blob, stock animation — and instead building something that felt specific to me: the heartbeat motif, the hand-rolled scroll animations, the direct connection to real project data instead of placeholder Lorem Ipsum.
What I Learned
Building your own portfolio is a strange kind of project — you're both the client and the developer, and it's tempting to keep polishing forever. I learned to treat it like any other product: ship a real version, keep the data model clean so it's easy to extend, and let the design serve the content instead of the other way around.