Personal System Site

resume-log-site

A personal site that publishes projects and notes from structured content, with an optional API-backed notes feed and static fallback.

Role: Solo Developer

Highlights

Next.jsReactTypeScriptTailwind CSSshadcn/uiNext.js Route HandlersExternal Public APIPostgreSQL (notes backend)Vercel

Built a personal system site that treats projects and notes as long-lived content, not one-off resume bullets.
Kept hiring-focused pages as a secondary entry, while the main navigation stays centred on Projects and Notes.
Designed a typed JSON content model for projects, notes, and navigation so updates stay consistent and easy to review.
Implemented a notes feed that loads from a PostgreSQL-backed public API when configured, with a reliable fallback to local content.
Added a lightweight note images endpoint so the UI can render media without being coupled to upstream API details.

Problem

Traditional portfolio sites often flatten projects into short outcomes, which makes it hard to show decisions, constraints, and how the work changed over time.

A personal developer site should support hiring needs while also preserving current work, notes, and technical reasoning.

Approach

I designed the site as a hybrid between a professional profile and a personal notes system, with structured content that can grow without turning into a CMS.

I kept the interface restrained and the data model explicit so the site stays easy to maintain and explain in an interview.

I made notes optionally API-backed, but kept local fallback content so the public site never depends on a single backend.

Result

Delivered a personal site that works as both a professional profile and a structured record of projects and technical notes.

Created a public-facing system that can show completed work, current direction, and the reasoning behind engineering decisions without relying on a single backend.

Implementation

Information architecture and routing

Built Home, Projects, and Notes as primary destinations, with Work as a separate hiring-focused entry
Organised project pages around a shared write-up shape so each project can include detail without becoming unstructured
Kept copy factual and readable so the pages communicate strengths without inflated claims

Structured content model

Defined project and note types so content stays consistent across pages and components
Stored core content in a single en-AU JSON file so changes are diffable and easy to review
Separated projects from notes so long-form case studies and short reflective entries can coexist

Notes API integration and fallback

Implemented route handlers for listing notes and fetching note images behind a stable internal API
Loaded notes from an external public API when configured, with caching and error handling
Fell back to local notes when the API is unavailable, so the site remains reliable

UI system and readability

Built reusable interface components with Tailwind and shadcn/ui as a small design system
Maintained consistent spacing, type scale, and restrained motion so long-form reading stays comfortable
Kept the interface simple and professional so content remains the main focus

Deployment and iteration

Deployed the site as a public platform that can be updated as projects and notes change
Integrated lightweight analytics and performance insights to keep visibility without adding heavy tracking
Iterated on the site as an active product where design, writing, and code improve together

Lessons

A personal site becomes more useful when it records thinking and constraints, not only finished outcomes.
Typed content models and fallback paths keep a content-heavy site maintainable without a CMS.
Good personal branding comes from accurate writing, useful structure, and visible technical depth rather than polished claims alone.