Skip to content

Case study 02

Portfolio Redesign 2026

Timeline: 2026

Editorial collage showing the 2026 portfolio redesign

The vision

I wanted this redesign to keep what I liked about my previous portfolio: modern, fairly restrained, and not too playful. At the same time, I wanted to give it more character. The goal was something less minimalist and more editorial, with a quieter color palette, serif typography, asymmetrical layouts, and more visual material. I usually work in Figma, but for the first drafts I tried Google Stitch. It was surprisingly good at getting to a convincing direction quickly, though I still had to finish the details and make the design work as a real site. I used OpenAI Codex for the initial implementation.

After about a year and a half of mostly working with Vue, I also wanted to use React again. I chose TanStack Start because I already liked TanStack Query and wanted something a bit lower-level than Next.js, with TanStack Router's type-safe approach. I used Tailwind CSS 4 for the styling and kept the case studies in Markdown so the content stays easy to edit.

Images were one of the more annoying technical parts. Since the content is static, I wanted to optimize them at build time instead of adding runtime overhead. vite-plugin-image-optimizer clashed with Nitro, while vite-imagetools did not fit the Markdown workflow particularly well. In the end I wrote a small Sharp script that creates the exact hero, gallery, and Open Graph images the site needs.

Later I extended the same visual direction to my resume. Stitch struggled with the A4 format, and the first LaTeX implementation through Codex was too uneven. What worked better was finalizing the design, giving Codex screenshots and specific areas to compare, and iterating until the result was close to the reference. That took longer, but it was a much better way to use AI for detailed visual work.

Strategic goals

  1. 01

    Add more character without making the site feel playful

    Keep the restraint of the previous portfolio while introducing a richer visual language and more deliberate editorial details.

  2. 02

    Return to React with a new framework

    Use the project to work with React again after about a year and a half of mostly using Vue, while learning TanStack Start.

The challenge

Turning a strong AI-generated prototype into a finished responsive site took much more manual detail work than the first draft suggested.

Resolution

I used Stitch as a starting point, refined the typography and layouts in code, iterated with screenshots, and wrote a small Sharp pipeline when existing image plugins did not fit the setup.

Homepage of the finished 2026 portfolio
Work archive of the finished 2026 portfolio
About page of the finished 2026 portfolio

The first direction came from Google Stitch, then developed through design work, implementation, and a lot of visual iteration.

Process

Early portfolio direction shown in Google Stitch
Resume design using the same visual direction as the portfolio

Next Experience

Portfolio 2024