a page for every commit

i was looking at my own website a few days after launching it and something felt off. it looked finished. which is weird, because it wasn't — i was still pushing commits every day, fixing small things, trying out layouts. but the site itself gave no indication of that. it looked like a static portfolio, frozen.

i wanted the site to show that it was alive. that it was being worked on. that the code behind it had a history.

so i built /journey — a page that turns my git log into a visible timeline.

the simple idea

every commit is a note i wrote to myself. every day's batch of commits is a chunk of progress. string them together and you get a story of the site growing. if i can read that story from git log, i can render it on a page.

no database. no cms entry for each milestone. just execSync('git log ...') at build time, parse the output, render.

here's the whole data layer in pseudo-code:

const raw = execSync('git log --format="%H|%aI|%s" --reverse')
const commits = raw.split('\n').map(parseLine)
const grouped = groupBy(commits, c => c.date.slice(0, 10)) // by day
const milestones = grouped.map(day => ({
  date: day.key,
  commits: day.commits,
  title: bestTitle(day.commits),
  category: guessCategory(day.commits),
}))
return milestones.reverse() // newest first

the page renders the milestones as a vertical timeline. each card shows the date, a category badge (feat, fix, refactor, design), the title derived from the most descriptive commit of the day, and the full commit list below.

the thing i got wrong on the first try

the first version had a big black vertical line running down the left side of the page, with little square dots marking each milestone. very timeline-y. very gimmicky.

i showed it to myself in the browser and immediately knew it was wrong. the line was shouting for attention. it made the page feel busy. the whole point of the page is to show the work, not the visual metaphor for "this is a timeline." i stripped the line out, kept the dates as stickers, and the page started breathing.

lesson: if a design element isn't earning its space, it's in the way.

making it more useful over time

i've added a few things to the page since the first version.

area tags. each milestone now shows which parts of the codebase changed that day — "cms admin", "blog", "data layer", etc. this came from running git show --stat per commit and mapping file paths to human-readable areas. a milestone that touched src/app/blog, src/components, and src/lib shows those three tags. it makes the shape of each chunk of work legible at a glance.

per-file count. underneath the area tags, the page shows how many files changed in that day's work. small number for a typo fix. big number for a feature rollout.

line stats. the most recent addition. each milestone shows +N / -M in green and magenta. insertions vs deletions, aggregated across all the commits in that day. at the top of the page there's a running total for the whole project — right now it says about 38k insertions and 3k deletions since the first commit. the magnitude is nice. it tells you "this day was bigger than that day" without having to think.

category colors. the category badge sets the color of the timeline dot on that milestone's card (when i still had the line — it's just the card accent now). feat is neon yellow, fix is magenta, design is blue. the zine-collage color palette maps cleanly to engineering intent.

the thing i love about this page

it's one of those rare pages where i don't have to update it. i commit code, i push, the site rebuilds on vercel, /journey is current. it writes itself.

and it's honest. i can't hide a lazy day. if i pushed one typo-fix commit, it shows as one milestone with one line of work. if i pushed a big refactor, the line count reflects that. there's no performative polish. it's just the actual record.

stuff i'd still like to add

filter by category. click the feat badge at the top to show only feature commits. click design to see just the visual iterations. useful for skimming.

anchor per milestone. right now each milestone has no direct url. i'd like /journey#2026-04-15 to jump to a specific day. also lets me link to a particular day from a blog post.

diff preview. hover a milestone and see the full file tree that changed. maybe even a collapsible git show preview.

none of these are urgent. the page does its main job — making the work visible — already.

why i'm writing about it

i almost didn't. the page is small. it's a side feature. it's not groundbreaking engineering.

but building it taught me something. most of the time when we build a portfolio site, we hide the process. we polish the finished screens, take the screenshots, write the case studies later. the actual making — the iterations, the throwaway code, the "i don't know why this isn't working" moments — gets erased.

this page keeps that stuff visible. it's a small resistance against the finished-looking portfolio.

if you want to see how juuni.dev was actually built, you don't have to take my word for it. /journey is right there.