Case study / Web engineering
Personal Website
A home for projects, writing, photographs, and reading. Built around editable files and reusable components.
A portfolio that is easy to maintain.
A personal site holds several kinds of content: structured project entries, long-form posts, and images. The implementation keeps each in a simple file format, while sharing the navigation, typography, and page structure.
What the implementation covers
- Typed content loaders for projects, reading entries, artwork, and blog posts.
- MDX article rendering with syntax highlighting and generated post routes.
- A responsive gallery with a native dialog and keyboard navigation.
- Project summaries and an interactive diagram that explain the implementation.
Architecture / Explore each stage
JSON + MDX
A small, editable source of truth.
Project and reading entries live in JSON. Writing lives in MDX. Content can change without rewriting the page components.
Select a stage to look under the hood.
Decisions & tradeoffs.
Files instead of a content database
JSON and MDX are read from the repository by server-side loaders. This keeps the content workflow close to the code. Publishing changes requires a new build, and editing is less approachable for someone unfamiliar with Git.
Shared structure, focused interaction
Page content is rendered on the server. Client components handle local interactions such as the architecture diagram and gallery. The project index uses native disclosure elements, which remain usable without JavaScript.
Native dialog for artwork
The gallery uses the browser’s dialog element for modal behavior. Arrow keys navigate the collection and Escape closes the viewer. The component also locks background scrolling while artwork is open.
What you can inspect
The site itself demonstrates the content routes, responsive layout, and interactive controls. The repository exposes the implementation.
Where I’d take it next.
Add case studies as new projects are ready, introduce a downloadable résumé, and collect performance and accessibility measurements to guide further improvements.