This Portfolio
The site you are reading — a static, dependency-light build with its own automated image pipeline and a content layer that renders to HTML, structured data and machine-readable text.
Role
Designer & Developer
Duration
Ongoing
Year
2026
Status
Live
0
Runtime dependencies for images
0
Secrets needed to build
Overview
A portfolio is a small project, which makes it a good place to be strict. This one is built to demonstrate the same decisions I would make on client work: own your content, own your assets, and avoid dependencies you cannot justify.
The problem
A portfolio has to do two jobs that pull in opposite directions: convince a person to start a conversation, and be legible to the search engines and AI assistants that increasingly answer 'who should I hire' before a person ever visits. Most portfolios do the first and ignore the second, or chase the second and become unreadable.
Constraints
- Static hosting with no server, no API routes and no image optimizer
- Content must be maintainable years from now without re-learning the codebase
- No dependency that cannot justify its weight
- Must render correctly without JavaScript
What I built
Everything renderable lives in one typed content layer. The same objects produce the HTML a person reads, the structured data search engines consume, and the plain-text representations AI systems can parse — so those three cannot drift apart, because there is only one source. Images are handled by a scripted pipeline: an authored manifest records which images exist and what they show, an idempotent upload script pushes them to a CDN and writes back dimensions and placeholders, and the generated map is committed so builds need no credentials and no network. Because the site is a static export, there is no image optimizer, so images are served through explicitly requested formats and a responsive source set rather than a framework component.
How it fits together
- Next.js App Router exported to static HTML — no server, no runtime rendering
- Typed content layer that renders to HTML, JSON-LD and plain-text representations from one source
- Cloudinary delivery through hand-built URLs, with AVIF and WebP offered explicitly and the browser choosing
- Image dimensions recorded at upload time, so every image reserves its space before it loads and the layout never shifts
- Blog written in Markdown, processed at build time
Running in production
Built and deployed to GitHub Pages by a GitHub Actions workflow on every push to the main branch. The build needs no secrets — the asset map is committed, so a checkout and an install are enough to reproduce it.
My role
- Design, content and build
- The image pipeline and its upload tooling
- Structured data, metadata and machine-readable output
- Accessibility and performance
Outcome
- Adding a project means editing one typed object — the page, the structured data and the machine-readable version all follow
- Images are automated end to end: no manual uploading, no hand-written URLs, no forgotten alt text
- The site works without JavaScript and reserves space for every image before it loads
Last updated
What I Delivered
One typed content layer renders HTML, structured data and machine-readable text
Scripted, idempotent image pipeline — no manual uploads, dimensions recorded automatically
AVIF and WebP offered explicitly, after measuring that automatic format selection was not serving AVIF
Zero layout shift: every image reserves its space before it loads
Renders without JavaScript