I wanted my personal website to feel more like me: curious, bright, and always halfway into another experiment.

The result is the design you are looking at now, a theme named Digital Field Journal. I worked with GPT-6 Astra to explore the visual direction, then used Codex in VS Code to help implement it in my existing Next.js project (which is current website).

The active prompting and implementation iteration took roughly four to five hours. The work stretched over a little more than a day, with usage-limit waits in between. That estimate describes the implementation sessions, rather than the full design process or every manual adjustment. I already had a working site, years of content, and part of the new structure in place.

The redesign also led me to investigate something I had overlooked: my static export was 2.31 GB. After the changes, it was around 130 MB.

I expected to come away with a new interface. I also came away with a clearer understanding of what I wanted the site to communicate—and a rather embarrassing explanation for all those bytes.

Why I wanted to redesign it again

My website has followed me through several stages of learning: hosted blogging platforms, WordPress version, Hugo version, my first self-designed theme in 2022, and a Next.js rebuild in 2025.

Earlier in 2026, I worked with Claude on a theme inspired by wabi-sabi. It was quiet, restrained, and influenced by Japanese temple websites. That direction suited a period when I wanted more stillness in my life.

You can see the original Wabi-Sabi design sample here.

But when I revisited my portfolio while updating my résumé, I had an uncomfortable thought:

Why do projects I have spent so much time on still look like university assignments?

The work behind them had grown. The presentation had not quite caught up.

I wanted visitors to understand what I build, what I am interested in, and how I think. I also wanted the site to make room for the parts of my life beyond software: travel, writing, languages, and the subjects I investigate simply because they interest me.

A field journal felt like a fitting way to bring those things together.

The hardest part was making the idea visible

I started my career in backend development before moving into frontend work. Implementing an interface and deciding what that interface should look like have always felt like two different challenges.

I can imagine an atmosphere: mountain light, a sense of distance, something calm but alive. Then I open Figma and somehow produce a few rectangles and circles.

Knowing that typography, spacing, and color matter does not automatically tell me how to combine them.

This was where working with AI helped most. It gave me something concrete to react to. I could look at a proposed design, identify what felt right, and explain what needed to change.

Before asking for a mockup, I described three things:

• The feeling: bright, spacious, slightly detached from the noise of everyday life.
• The content: projects, long-form articles, a short introduction, and my résumé.
• The visitor’s path: get a sense of who I am, explore what I make and write, then find a way to contact me.

An abbreviated version of my brief looked like this:

I want to redesign my existing personal website. Use a large travel photograph for the desktop hero, with a portrait-oriented treatment on mobile. Keep the navigation simple: Home, Articles, and Résumé.

The homepage should include a hero, an introduction, projects, recent writing, and contact information. I am interested in a fixed photographic background, subtle glass effects, and white text where appropriate.

The overall feeling should be calm and spacious, while the photography brings brightness and a sense of exploration.

The brief became more specific through discussion. The resulting mockups were images, which I then passed to Codex as visual references for the implementation.

Design references generated during the exploration stage; the implementation was adapted to my actual content.

Turning the mockup into an existing Next.js site

I kept the existing Next.js and React foundation and static deployment to GitHub Pages. This was a redesign of a working site with more than 300 articles, so the existing content and project structure were important inputs.

I had previously used AI mainly for questions and smaller pieces of code. I enjoy building things step by step, and I was cautious about accepting larger changes that I did not fully understand.

This time, I let Codex with GPT-6 Astra take on more implementation work while I directed the changes and reviewed the results.

Give the agent context before asking for changes

Alongside the mockup, I described the project structure, what I had already implemented, and the areas where I needed help. I asked for a plan before proceeding.

My request was roughly:

This project already has a theme with a substantial amount of existing code. I have prepared the homepage structure, with its sections organized into components.

Use the attached mockup as the visual reference and build on that structure. Part of the page is already implemented.

I need help with the remaining sections, especially the transitions between them. The typography and colors still inherit too much from the old theme, so propose changes that better match the new direction.

First, outline your implementation plan.

That produced a sequence of smaller tasks: establish the homepage styling and section navigation, implement the hero section, continue through the remaining sections, and refine the result.

Work section by section

I followed the plan incrementally, checking each completed section and asking for adjustments where necessary. I also made changes myself when that was more straightforward.

This made the work easier to steer. A mockup can communicate an overall direction, but the real content quickly raises additional questions: how much text fits, how sections transition, and which details deserve emphasis.

Git checkpoints are useful here. They give each stage a clear boundary and make it easier to review or undo a change.

Treat responsive layouts as proposals to review

One pleasant surprise was that Codex produced a mobile layout even though I had not supplied a separate mobile mockup. It also adapted sections where my content differed from the reference images.

That saved implementation effort, but those adaptations were still design decisions to review. A desktop reference leaves plenty unspecified: stacking order, image crops, spacing, and how much content should appear before the next section.

My takeaway is to use those generated choices as a starting point, then check them against the actual reading and browsing experience.

Giving the content more room

In previous versions, I kept adding information. I wanted visitors to see everything I had done and everything I knew.

Eventually, that made the site harder to take in.

For this version, I brought the key introduction, project, and contact content together on the homepage. The navigation stayed simple, and the page could introduce the site in a more coherent sequence: the atmosphere, the person, the work, the writing, and a way to get in touch.

Travel photography became a central visual element. It connects the technical work to the curiosity behind the rest of the site.

I also refined the article table of contents. Many of my posts are long, so readers need a clear sense of the structure and a way to jump to the part that interests them.

The new design feels more expressive to me, even though I removed content and a substantial amount of styling code. The photography, typography, and spacing do more of the work now.

The unexpected discovery: a 2.31 GB static export

The previous theme looked minimal, but the generated site was surprisingly large. Running the static build produced around 2.31 GB of output, and deployments took a long time. (Also made the desktop fan loud voice due to CPU / Memory computation.)

After the redesign and cleanup, the output was around 130 MB.

At first, it was tempting to connect that difference to the reduced code.

Then I looked into it and found a bug I had written back when I was learning Next.js and frontend development.

I had accidentally included the content of every blog post on every article page. And I had no idea.

So, instead of including only the article someone wanted to read, each page also carried the content of more than 300 posts. The same content was repeated across hundreds of pages.

That meant the same collection of content was being repeated across hundreds of generated pages. At roughly 6 MB per page, the duplication could account for a large portion of the export size.

The before-and-after numbers describe the total generated static output. And fortunately this bug has been fixed at the new theme development.

It also gave me a concrete debugging lesson: when a static site grows unexpectedly, inspect the data included in its generated pages alongside its code and assets. (It might be caused by any bugs xD.)

An interface can look simple while its output tells a very different story.

What I would carry into the next project

This experiment changed how I want to use AI in development. Being able to delegate larger implementation tasks gives me more room to explore ideas, compare results, and refine a product.

It also makes a few responsibilities especially visible.

Define the direction.

Which means Idea, what is the soul of the product, what is the concept of the idea, what's the problem is resolve?

The most useful input was a clear explanation of the content, the visitor’s path, and the feeling I wanted to create. “Make it beautiful” would have left too many decisions unspecified.

Understand the implementation.

I still need to know how the site works well enough to question a change, review the code, and investigate behavior such as the oversized static export. Fast implementation is more useful when I can maintain the result.

-- So Software Enginner with enough knowledge is also required and important.

Decide what deserves to stay.

Generating another section is easy. Deciding whether that section helps the reader takes judgment. Some of the most satisfying improvements in this redesign came from removing things.

What kind of content want to present to users? How to organize content, what needs to be target and present well in product, how to guide Users to content and great experiences. UX is important.

Validate beyond the mockup.

Visual similarity is one part of quality. Responsive behavior, navigation, article readability, metadata, and the deployed site also need attention. Automated checks can cover repeatable behavior, while hands-on review helps assess whether the experience feels clear and comfortable. That is the standard I want to keep applying as the site evolves.

During one of our conversations, GPT brought up something that stayed with me: AI can build quickly and help with testing, but the people using the product still have their own feelings and expectations. That is why I think human testing still matters—it helps us understand how a product actually feels to the people using it.

I still enjoy writing code by hand. This project gave me another way to work: use AI to shorten the distance between an idea and something I can inspect, then keep asking questions about the result.

Building faster, leaving more space

A personal website is a useful place to experiment because it can express more than a list of skills. It can show what catches my attention, what I choose to build, and how those interests change over time.

This version feels closer to who I am now. It has more light, more room, and less need to explain everything at once.

There is something amusing about using faster tools to make a website that feels quieter.

I bring the ideas, and AI helps me build faster, so I can focus more on the concept, the content, the user flow, and how to make the experience more useful and meaningful.

I believe every product or project has a soul: the idea behind it, the reason it exists, and what its creator wants to share. To me, building software is a form of creative expression, much like making art. Every website or app can carry a deeper meaning to share with its users.