Project: pnetto.com

Role: Author

What is it?

  • Personal portfolio showcasing professional and pet projects
  • A logs section for writing about code, career, hobbies, and learnings
  • Photo gallery with curated albums from walks, travels, and creative experiments
  • Static site built with Eleventy (11ty) and Nunjucks templates
  • Custom design system built from scratch
  • Bio, CV, contact, and a /now page

The homepage.

Backstory

In 2021 I built a Next.js portfolio to help land a job in Copenhagen — and it worked. Fast forward to 2025 and the site was overdue for a refresh, so I rebuilt it from scratch as a simple 11ty static site, adding a photos section and a writing section called "Logs".

Migrating the old site was quite labor intensive, so I used an LLM to help with the boring migration work, which went really well. Once the skeleton was in place I tried my hand at the design, which I wanted to keep minimal, and the infrastructure: images on Cloudflare R2, hosting on GitHub Pages.

One thing I'm particularly happy with is the image pipeline. Photos are hosted on Cloudflare R2 — free up to 10GB, no egress fees — and I built a CLI tool to manage the whole thing from the terminal. Syncing albums, generating 3 responsive size variants per image, updating the JSON manifests that the build reads from — all of it is a single command away. What used to be a manual, error-prone process of uploading and referencing images is now just npm run imgSync. It's a small thing but it makes the whole photography section feel effortless to maintain, which means I actually use it.

Technical details

Stack

  • Eleventy (11ty) as the static site generator
  • Nunjucks for templating
  • Markdown for content authoring
  • Custom CSS design system
  • Vanilla JavaScript for interactivity
  • Cloudflare R2 for image hosting

Features

  • Work portfolio with categorized projects
  • Photo gallery with album management
  • Logs / writing section with categories and tags
  • Bio, CV, contact, and /now page
  • Private password-protected section
  • Sitemap generation
  • Image build pipeline with optimization