Background

I built this site together with AI, and it never behaved like a one-click website generator. The split was the same every time: I decide why the site exists, who it is for, what matters and what to leave out; AI turns those decisions into drafts, code, alternatives and clearer explanations; I test, look, delete, revise, and carry the result.

The site has gone through three iterations so far: V1 to make it exist, V2 to give it a personality, V3 to give it a world. What follows is the timeline of what I did, what went wrong, where AI helped, and what it still cannot replace.

Timeline overview

The earliest approach

At the very beginning, we only deployed a single page: one file that held the homepage, bio, portfolio and contact information.

My workflow was crude. I copied thousands of lines of code into AI, asked it to add something, and copied the result back to my computer. Two problems showed up quickly. Every change forced AI to re-read the whole file, which wasted time; and the file kept growing until I could no longer find a specific section inside it.

What I actually wanted was a multilingual site with a personal database and a portfolio behind it. So I moved to the current architecture, where content, pages, styles and components are managed separately. Changing text no longer means digging through thousands of lines. Every project gets its own folder for articles, covers, version images and translations. Chinese, English and Dutch share one page structure, and the portfolio can keep growing without turning into chaos: to edit a project, I go to its folder.

The cost is real, and it is worth stating plainly. This architecture is more complex than a single-page file, every new project has to follow the folder structure and the frontmatter format, translations are maintained by hand so a language is easily forgotten, a change to global styles can affect every project, and the learning curve is steeper at the start. For long-term maintenance it is still the better trade, and it is what a personal database plus portfolio actually needs.

V1: Make it exist

What I did

• Started from X:\Github\my-portfolio;
• Decided on the basic sections: who I am, what I make, how to contact me;
• Put real content in, no empty shell;
• Made sure it could at least open correctly on a computer.

Problems

1. I did not know where to start. A website looks like one big thing, but it is really content, structure, visuals and deployment.
2. The page looked like a puzzle. Each section was fine on its own, but together they did not feel like one website.
3. Mobile layout broke. Positions that looked fine on desktop squeezed together on a phone.
4. I did not understand “going live”. A file on my computer is not a website; it has to be published online.
5. Writing content was harder than writing code. Code can be copied or generated, but only I can answer “who am I”.
6. V1 was too stylised. I wanted to put everything in at once, so the page became crowded and tiring to read. Not every good-looking element belongs together.

What AI did

• Translated “I want a personal website” into a concrete page structure;
• Produced the first page draft;
• Explained domains, hosting, deployment and responsive design;
• Helped make stiff Chinese text sound more natural;
• Explained what each error message meant.

What I did by hand

• Decided who the site was for and what impression it should leave;
• Provided real experiences, projects, images and contact details;
• Judged whether the page felt right;
• Tested it on a real phone, not only a desktop preview;
• Decided that V1 did not need to be perfect.

What I learned

V1 does not need to be impressive; it needs to exist. Get “opens, readable, contactable” working first, then talk about style.

V2: Give it a personality

What I did

• Added a neural network background on top of V1;
• Added a hacker terminal to create a “system boot” feeling;
• Unified the dark background, typography, colors and motion;
• Made the background move without covering the content.

Problems

1. The effects looked cool but used too much performance. Fans spun up; old phones stuttered.
2. The background competed with the content. Readers did not know whether to look at the terminal or the body text.
3. AI code ran, but I did not understand why. When it broke, I did not know where to fix it.
4. Contrast was not enough. When the background got bright, white text became hard to read.
5. Screens differed greatly. The same effect behaved differently on widescreen, laptop and phone.
6. Neural networks felt cliché. They suggest technology, but they have been overused and are hard to remember.
7. The hacker terminal made the page messy. The terminal, body text and background all competed for attention.

What AI did

• Offered several visual directions, not a single answer;
• Generated the first version of the animated background and terminal interaction;
• Explained why the background should recede and the text should come forward;
• Proposed lighter alternatives for performance;
• Helped me turn “cool vs. readable” into a list of clear trade-offs.

What I did by hand

• Decided which effects stayed and which were removed;
• Turned the motion down; better less effect than worse reading;
• Tested on real devices, not only the development computer;
• Checked whether every passage was clear;
• Deleted anything that looked impressive but had no real use.

What I learned

Style is about being memorable without getting in the way. V2’s real progress was that the site began to have a personality.

V3: Give it a world

What I did

• Moved the visual theme from “technology” to “cosmos”;
• Added NASA punk, neumorphism and glassmorphism on top of a retro-futuristic base;
• Added a starfield, a black hole and gravitational lensing in one sentence: light bends around the black hole, and the stars, black hole and content share one scene and reinforce each other;
• Aimed for a “chimera” that spans time and mixes several technology aesthetics.

Problems

1. Performance vs. beauty. The more realistic the effect, the more computing power it needs; the smoother it is, the less detail it can show.
2. Parameters are extremely sensitive. A small change to the black hole’s position, size, brightness or rotation speed turns “impressive” into “strange”.
3. The black hole steals the show. Once the background becomes the main character, the body text becomes a supporting actor.
4. Every screen needs a different composition. Desktop, phone, portrait and landscape cannot all place the black hole in the same spot.
5. “Beautiful” and “readable” often fight. Some frames look great, but text disappears on top of them.
6. Credits have to be handled properly. If I reference someone else’s visuals or implementation, I should keep the source, link and attribution.
7. Resolution changes the composition completely. 2K and 1080p need different black hole positions and spacing; on mobile, some effects should be hidden or simplified.

What AI did

• Explained gravitational lensing in simple language;
• Suggested parameter ranges and debugging directions;
• Helped optimize the effect;
• Proposed fallback versions for low-performance devices;
• Helped organize credits and identify what needed attribution;
• Helped translate, organize and polish the text.

What I did by hand

• Decided where the black hole should sit, how large it should be and how it should feel;
• Made the final trade-off between beauty and readability;
• Checked every reference and kept the author and link;
• Tested on low-end devices, phones and different browsers;
• Left room to slow down or disable animations, respecting the visitor’s device;
• Took responsibility for the truthfulness of the content.

What I learned

Technical effects are the brush; the content is the painting. AI can help me paint a starfield and a black hole, but I must decide why it is there and who it is for.

Now: Keep iterating

V3 is not the end. At the moment I am making the site stable on more devices; making the body text clearer and giving up less readability for effects; documenting the process so the project also works as a guide; keeping the Chinese, English and Dutch text in step; collecting feedback to see what visitors actually want; and continuing to balance performance against aesthetics and content.

The next goal is easier to state than to hit:

Easier to read, easier to use, easier to maintain.

Pitfalls

Website compatibility

Resolution is one of the most underrated problems in this project.

The same black hole may look just right on a 2K screen, too large on a 1080p screen, and on a phone it can cover the text or make the page stutter.

So I adjust the black hole’s size, position and brightness separately for 2K and 1080p, I decide on mobile which effects are worth keeping and which should be hidden or reduced, and I built a debug window so its 2K and 1080p appearance can be tuned by hand. The point is to stop forcing one effect onto every device.

Judge the effect on the device, not in the abstract. A composition that works at 2K is not the composition that works on a phone.

What AI and humans do

AI accelerates the work; it does not decide anything. It moves faster than I do, but it cannot say what this is, why it exists, or who is responsible for it.

Beginner guide

1. Write content first, then design.
   A website is the container; content is the water. Decide what to say before deciding how it looks.

2. V1 only needs to ship, not to impress.
   If it opens, can be read and lets people contact you, it is already ahead of many sites that are forever being revised.

3. Treat AI as an intern, not a boss.
   It is good at producing drafts, but you are responsible for judgement, trade-offs and the final result.

4. When adding effects, consider readability and artistry.
   Will it steal the show? Does it match the theme? Does it look good in both dark and light mode? Will the layout break in other languages?

5. Always test on a real phone and an old device.
   Your computer is not your visitor’s device. Opening, readable and smooth matters more than cool.

6. Reference, do not copy blindly.
   If you use someone else’s code, visuals or ideas, keep credit and confirm permission. Public work especially needs care.

7. Change small details one at a time; back up before big changes.
   The biggest risk in iteration is a “big rewrite” after which nobody knows which step broke it.

Credits / references

The visuals did not appear from nowhere. These sources gave me important references and inspiration:

• Starfield reference: OpenAI GPT-6 Astra page
• Black hole implementation reference: Shadertoy (lstSRS)
• Gravitational lensing reference: BH+disk
• Cassette shelf reference: the tape shelf you pick a story from in Zenless Zone Zero’s Agent Story chapters (official site). The finished visuals have moved a long way from the original; the way the tapes move is what I took from it.
• Intro sequence reference: the opening animation on the Arknights: Endfield site (official site). The palette, the layout and the readout-style entrance pacing come from there; every element and all of the copy were rewritten.

Note: these are references for inspiration, visuals and implementation ideas. Different Shadertoy works may use different licences; always check the original author’s notes.

Inspiration sites

There are many reference sites, and browsing them without a plan quickly becomes overwhelming. I sorted them by purpose.

Decide on a style first

Then look for motion

Then look for implementation and components

Finally, polish the words

My order of use

1. Land-book / Siteinspire first: decide the overall style;
2. Motionsites / Landing.love next: decide the motion rhythm;
3. Then Shadertoy / 21st.dev: find concrete effects and components;
4. Finally use lieflat-less-ai-tone: remove the AI tone from the copy;
5. Use Awwwards / One Page Love / Lapa Ninja to fill gaps: save only 2–3 references at a time; do not browse while building.

A small reminder: inspiration sites are a menu, not a to-do list.
Pick 2–3 references that truly fit; otherwise you will keep looking and never start building.

What I Learned

This site grew from a simple personal homepage into a neural network and hacker terminal, and then into a starfield, black hole and gravitational lensing.

The visuals are only the visible part. What the process actually taught me is that AI can carry me across the threshold of not knowing how to code, and that once I am across, taste, judgement, content and responsibility are still mine. A website turns out to be an ongoing record of iteration.

AI makes execution cheap, which is exactly what makes judgement valuable.

AI makes ideas faster; I make them worth doing.