Problem

My original portfolio worked fine when I only had a few static pages, but it didn’t scale well as I started adding more content.

Every new blog post or project meant manually duplicating pages and updating sections, which quickly became inefficient. I needed a way to keep the site lightweight while making it easier to publish content, organize projects, and maintain everything over time.

What I built

I rebuilt the site using a static content workflow with Eleventy.

The main idea was to separate content more clearly:

  • core pages for the main site
  • blog posts written in Markdown and generated automatically
  • a Projects section with overview cards and individual project pages

I also created reusable components like a shared header and footer, along with dedicated layouts for blog posts and project pages. This way, new content can follow the same structure without rebuilding everything from scratch.

Tools used

  • HTML, CSS, and JavaScript for the frontend
  • Eleventy for static site generation
  • Markdown for writing posts and project case studies
  • Cloudflare Pages for deployment (_site build output)
  • Git for version control and publishing

Key results

  • turned the blog into a Markdown-based workflow instead of manually editing pages
  • added navigation features like calendar and tags
  • implemented image overlay with keyboard navigation
  • separated source files from generated output for cleaner deployments
  • restructured the Projects section into proper case-study pages instead of simple links

What this shows

  • I can structure a frontend project in a way that scales beyond a simple landing page
  • I understand how to troubleshoot deployment and align build configuration with the project structure
  • I can design systems that balance usability, organization, and maintainability

What I learned

This project made it clear that a portfolio shouldn’t feel like a collection of disconnected pages.

Defining content types early, using reusable layouts, and keeping the build process aligned with the structure makes everything easier to maintain and expand. It also reinforced that usability, visual design, and content workflow are all part of the same problem.

Next steps

  • add more project case studies using this structure
  • link related blog posts to each project
  • include screenshots or diagrams where they add clarity