Web Server

I built my personal website to be a living portfolio, not just a set of static pages. It loads quickly, looks great on phones, and has a simple behind-the-scenes editor so I can add or tweak projects in seconds. I approached it “mobile first,” keeping the layout clean, text easy to read, and images steady as you scroll. The project also doubled as my UI/UX bootcamp: I practiced with Frontend Mentor challenges, took notes from the UI Breakfast podcast, and kept iterating until it felt effortless to use. On the back end, I keep the live site stable while I experiment in a separate working copy, so updates are frequent but safe.

I wanted a site that reflects how I actually work: ship quickly, iterate, and keep content fresh. The app uses a small CMS-style admin panel for editing project cards and docs, a data provider to hydrate routes quickly, and a responsive layout that feels good on phones first.

UI/UX skills gap

I’m strong on backend/automation, less so on visual systems. My first drafts looked functional but not polished. * **Content update friction:** Editing JSON/files and redeploying slowed me down.

Perceived latency on route change

Waterfall fetches and spinners hurt the feel on slower networks.

Editable content

Admin controls to create/update project tiles and doc entries (titles, images, links, descriptions).

Mobile-first UI

Clean typography, spacing, and touch targets that scale to desktop.

Fast Navigation

Pre-load the common data once and reuse it across routes.

Simple, safe stack

Keep it maintainable and secure enough for a personal site.

Architecture / Stack

Frontend: Next.js (App Router) + React + TypeScript

UI: Tailwind + Mantine components (for modals, inputs)

State: A lightweight Context provider exposes shared data via useContext

Images: Next/Image with constrained aspect ratios for stable layout

Infra: NGINX reverse proxy in front of the Node app

Content Editing (Admin Panel)

Admin route only available on internal network. (will be implementing logins soon)

Add/edit cards (title, image, link, description)

Modal forms with client-side validation

Optimistic UI on save; server persists changes

Refresh button that re-hydrates the in-memory list without a full reload

Performance

I fetch the common content once (in a root/layout loader) and seed it into a Context.

Route components use context to get data immediately—no spinner on first paint.

If I need fresher data, a “Refresh” action does a targeted fetch (cache: no-store) and updates Context, avoiding route-level waterfalls.

Responsive Design

Mobile-first constraints

Flex/grid utilities to reflow cards from 1-col (mobile) to 2–3 cols (tablet/desktop)

Not proficient in UI/UX

Symptoms

Uneven spacing, inconsistent type scale, crowded cards.

Solutions

Studied patterns and practiced challenges on Frontend Mentor to calibrate spacing, hierarchy, and responsiveness.

Consumed UI Breakfast (podcast) for product/UX thinking and read Learning React to simplify component structure.

Standardized a small design system: heading/body scales, spacing tokens, consistent card layout with a single image ratio.

Content updates required DB changes

Fix: Built a minimal admin panel (Mantine modals & inputs) that writes to the backend, plus a refresh hook to hot-load updates into Context.

Route loads felt sluggish

Fix: Context seeding from the root; avoid re-fetching shared lists on every page. Memoize heavy components; keep images object-fit: contain inside fixed wrappers.

Overflow & alignment issues

Fix: Bounded widths (e.g., 80vw/95vw), consistent gaps, and card internals as flex columns; ensured vertical centering with parent flex + items-center only where appropriate.

Sketch & inventory: Defined the structure, design, and main features, and routes

Build the data layer: API route + Context provider that can be hydrated once.

Ship a minimal admin: Modal-based CRUD with optimistic saves.

UI/UX sprints: Took a few Frontend Mentor challenges; applied spacing/typography lessons back into my site.

Polish: Tightened breakpoints, fixed CLS, refined image fitting and headings.

Measure & iterate: Checked layout on real devices; trimmed unnecessary re-renders.

Faster perceived loads: Shared content is instantly available on navigation.

Lower maintenance: I can add/update projects from the admin UI in seconds.

Cleaner mobile experience: Cards read well, images don’t jump, and actions are mobile-friendly.

Better UX judgment: Practicing with Frontend Mentor noticeably improved my spacing and hierarchy decisions.

SEO Optimization

Draft/publish states in the admin panel

Basic analytics (which projects get the most clicks)

Accessible keyboard focus states and skip links