Skip to content
Arataki.br’s BaseEMA / 02
All articlesJOURNAL / ARTICLE

Personal Website Dev Log 01: From an Idea to the First Prototype

My first attempt at building this site: why I wanted a space of my own, what the first prototype looked like, and how I hope to improve it next.

This is a look back at an early prototype. It records my thinking and the state of the site at the first-prototype stage, which may differ from how the site looks today.

Hello, world.

As the first blog post on this site, I want to start by recording my very first attempt at building it: why I wanted a space of my own, what the first prototype looked like, and how I hope to improve it from here.

I’ve been learning to program for a while, and I’m also interested in game development, AI, and all kinds of open-source tools. I wanted a place of my own where I could gradually organize my study notes, the projects I want to build, and my scattered ideas. That way, when I look back later, I can see what I was exploring at the time and how I worked through it step by step.

And so this personal website began.

Settling on a style, starting from reference sites

At first, I described the style I wanted as “slightly fresh and clean, with an anime feel.”

I wanted it to reflect my interest in anime and games, with pages that feel a little relaxed and suit reading an article quietly from start to finish. Colors, images, text, and white space should all serve that feeling.

To make this direction clear, I looked for reference sites. It’s much easier to talk about what you like once you’re looking at actual pages. Even so, “fresh and clean” and “an anime feel” are still very broad—the same description can lead to wildly different designs.

The first prototype didn’t live up to expectations

The first prototype laid out sections for the home page, projects, articles, and collections, and it also tried out theme switching and search. But when I saw the overall result, my feedback was blunt: this still isn’t what I want.

Even with all those sections in place, the overall feel of the pages was still some distance from what I’d hoped for. That’s also something I want to keep in this first entry: my first attempt started from a prototype that still needed more work.

Next, I want to break “it doesn’t feel right” down into more specific problems. First, what stands out most on the home page, and whether the self-introduction and the way into the articles are in the right places; then the colors, fonts, the share of space given to images, and how dense the content is.

I also plan to narrow the scope when making changes: settle the home page first, then the article pages, and after that check reading and interaction on phones. Focusing each change on one clear problem makes it easier to judge the result.

AI helped shape the prototype and the plan

In this attempt, AI helped put together the prototype and the plan, turning my initial ideas into something I could actually look at and discuss.

When I use AI to help with development from now on, I want to be more specific about what I ask for. For example: what should the home page show first, what would make the article pages more comfortable to read, and which exact problem should a given change solve. All of this needs me to think it through first, then judge it against the actual pages.

At the same time, I hope to gradually understand the code involved: where a piece of content is maintained, what controls the styles, and what steps it takes to add a new article. Being able to keep maintaining this site myself is also one of the things I want to learn through this project.

What I plan to write about here

For now, I want to focus the blog on a few areas I’ll keep working with:

  • Learning to program: the process of understanding a concept, problems I run into while practicing, and what I eventually figure out.
  • Game development and AI experiments: turning interesting ideas into small experiments and noting the methods I tried and what came of them.
  • Website dev logs: changes to pages, features, and content structure, and the reasons behind each change.

Some posts might only cover a very small question—say, why a conditional gives a particular result, or why some detail on a page needed changing. As long as I can explain it clearly in my own words, it’s worth writing down.

Building up slowly from the first post

From here, I want to keep refining the site’s look and reading experience, and gradually fill it with my own articles and projects.

In future dev logs, I hope to write clearly about the problems I ran into, what I tried, and how things actually turned out. Anything still unsolved can be noted down first and picked up again in a later update.

For now, this post simply records where the site began.

If you happen to be passing by, welcome. In time, this place will hold code, games, a fair amount of tinkering, and the story of me slowly learning how to make things.