PORTFOLIO_V2 OK
dev@nguu0123:~/logs/creating-new-personal-website-with-agent.md$ less creating-new-personal-website-with-agent.md
[ FILE ] Creating new personal website with agent LOG

Creating new personal website with agent

Context

After using AI agents for a while in my work, I have some free time during Ascension Day to do something outside of work and I realized that I haven’t updated my personal website in a while so I decided to redesign my personal website to fit my personal taste. This is my personal log about how I do it and also my first public post!

Previous design

Previously, I used Academic pages template to create my personal website. It is super easy to use and add new contents to it and it fits my situation back then when I was still a student and working as a research assistant. I update the template with my contact information, my CV, some details about my publications and projects. Actually quite happy with it as I don’t have much experience in design.

New design

However, the academic page doesn’t show who I am and what I do! So I decided to create a new one, something more personal, something more vim, more linux, more exciting, and more me!

Designing

Then, I have known about Google Stitch for a while but haven’t tried it yet so I decided to give it a try. Although I have tried Claude Design before, it is too costly to use and I have canceled my Claude subscription. Later I realized that Stitch offers 400 daily credits, which is a crazy amount of credit for a free trial. I guess Google really has so much compute to offer.

My first prompt for it is “Personal website for SWE, currently I’m using https://nguu0123.github.io/ from https://github.com/nguu0123/nguu0123.github.io”, basically I gave Stitch my information so that it can generate more relevant website without much prompting. However, my current public information is not what I’m so I have to update the design system with new prompt “make the web more like a vim, linux person”. It returns something more like a terminal interface which I found very interesting and decided to go with it.

Implementing

After I have a working design from Stitch, I tried to export it to some format that can become a handoff to my coding agent. Currently, Stitch supports:

  • AI Studio: send the current design to Gemini for implementing. This works but I have to update my information
  • Figma: haven’t tried
  • MCP: haven’t tried but in theory it should work quite well
  • .zip: export the DESIGN.md, generated html and image to a zip file. This’s what I chose
  • Code to clipboard: copy only the generated html to your clipboard. Quite handy if I just change small stuffs and can directly update the downloaded html
  • Project brief: generate briefly what the project is about but I don’t find it have enough information as a handoff to my agent

With the zip file, I extracted it and then went to opencode for implementing the new design. My previous website has had all my information in it so the agent understands it and can start migrating it to the new design. I decided to stay with Jekyll because I still want to host my website on Github pages.

After a while, the agent finally finished the migration but the layout is not correct, which is predictable as I have found GPT to be quite struggle with the web design from my work experience. To let’s the agent understand its problems, Chrome Devtools MCP is a very efficient way as it allows the agent to really “see” the website, not just from the code.

After the new design is working, I found that it’s still not “interesting” enough so I went back to Stitch and asked it to make it more interesting and below is what it suggested:

  • Terminal Glitch: Hovering over navigation items triggers a high-frequency jitter and color-shift animation, mimicking a CRT monitor experiencing signal interference. (This looks amazing!)
  • Scanline Refresh: A subtle green scanline now moves vertically across the menu items on hover, reinforcing the sense of a live, hardware-accelerated terminal interface. (Also amazing!)
  • Phosphor grid or shadow mask effect in retro-computing aesthetics (I don’t understand what this is before I asked Stitch what the pattern is)

Final words

I’m quite happy with my new personal website. I think now with agent getting so good, we can do a lot of fun stuffs with it! It allows me with zero design experience to create something looks quite cool!