DK Portfolio
Personal developer portfolio
Role
Solo — design, development, content, SEO
Stack
Overview
This portfolio is the project I've spent the most time thinking about. The brief sounds simple — showcase the work — but a developer portfolio is also a demonstration of taste, technical ability, and the kind of problems you choose to solve. The previous version didn't reflect any of that, so I rebuilt it from scratch.
The challenge
The challenge with a portfolio is that it's simultaneously the hardest and least forgiving project you can build. Every decision is visible to exactly the people you're trying to impress. Generic is death. Overdesigned is worse. The goal was to build something that feels genuinely considered without drawing attention to itself.
Approach
- 01
Started with a design system before writing any component code. Defined the colour tokens, type scale, spacing units, and glass panel style as CSS custom properties in globals.css.
- 02
Built a dynamic data layer so the portfolio updates automatically — Vercel API for live project URLs, GitHub API for archive projects — with graceful static fallbacks when APIs are unavailable.
- 03
Treated the blog as a first-class feature, not an afterthought. Markdown files in /content/blog are parsed at build time with gray-matter and marked, producing static HTML with zero JavaScript overhead.
- 04
Designed the CV page to serve two audiences: a visual dark-studio presentation for human readers, and a clean single-column ATS-friendly PDF via browser print (no PDF generation library required).
Key features
Dark studio design system
A cohesive visual system built around three tokens: near-black background (#080A0F), sky-400 accent, and violet-400 secondary. Glass panels, ambient radial glows, and restrained use of colour throughout.
Dynamic project data
Featured project URLs are enriched at request time from the Vercel API. Archive projects are pulled from GitHub Pages repos. Static fallbacks mean the page never breaks.
Blog system
Markdown-based blog with frontmatter for title, description, date, and tags. Fully static — built at deploy time, zero client-side JS for the reading experience.
Scroll animations
Scroll-triggered fade and stagger animations using Motion (Framer Motion v12). All animations respect prefers-reduced-motion and use viewport-based triggers so they only play once.
Print-optimised CV
A single-page CV that looks great on screen and prints as a clean ATS-readable PDF using pure CSS print media queries — no PDF libraries, no backend.
Full SEO setup
robots.ts, sitemap.ts, PWA manifest, OpenGraph, Twitter Cards, and JSON-LD Person/WebSite structured data. Canonical URLs and noindex on utility pages.
Outcome
The site is live at davidkilgallon.dev. Build scores 100 on Lighthouse performance, and the SEO setup is indexed correctly. Project detail pages (like this one) are the most recent addition, providing case study depth for each featured project.
Next project
ReadFit
Personalised reading comfort tool
From the blog
Read writing on development and design