Booting Animation
Hero section
Interets
Identity
Nero AI
Cybertron-os
Animated-chess
Contacts

Inspiration

I didn't really sit down and plan this out. I saw some sick 3D websites online and was like yeah I want something like that but make it mine. The whole dark terminal aesthetic with cyan glowing stuff just clicked with me. I wanted it to feel like you're entering some kind of digital archive, not just browsing a portfolio.

The boot sequence idea came from those anime openings where the system is booting up before the story starts. I told the AI I wanted a loading screen that looks like a system initializing with rings spinning and a glowing core and it just nailed it. That set the vibe for the whole project.

How I Built It

Honestly I didn't write most of this code myself. I used AI the whole way through. But it wasn't like I just said "make me a website." I had a very specific vision in my head and I spent a lot of time guiding the AI to get it right.

I'd tell it things like "make the particles float slower" or "the rings need to rotate in opposite directions" or "add fog so the background fades into darkness." Every time it generated something I'd look at it and go nah that's not it and keep pushing until it felt right.

The whole thing runs on React with Three.js for the 3D stuff. The AI handled the actual code but I made all the creative decisions. The color palette, the timing of animations, how many particles there are, the layout of each section — all that came from me just describing what I wanted over and over until we got there.

The tech stack ended up being React, TypeScript, Three.js, Vite, Tailwind, and Framer Motion. I didn't pick these myself obviously, the AI suggested them and I trusted the process.

What I Learned

Even though I didn't write every line I still learned a ton just from guiding the whole thing. I learned how 3D rendering works on the web, what WebGL is, why you can't have nested Canvas elements, how scroll syncing works, how animation timing affects the feel of a site.

I also learned that building something creative with AI is way different than just prompting it once. You have to iterate. You have to know what you want. You have to look at something and say "the camera needs to move smoother" or "that transition is too fast" and know exactly how to describe the fix. The AI is the hands but you're the brain.

Challenges I Faced

The biggest fight was the nested Canvas thing. The app kept freezing on the boot screen and I had no idea why. Turns out you can't put a 3D Canvas inside another 3D Canvas. The AI kept trying to fix it in different ways but nothing worked until we restructured the whole thing into one single Canvas. That was frustrating but we got there.

Scroll syncing was also pain. I wanted the 3D scene to respond to scrolling but the Canvas is fixed in place while the HTML scrolls. We had to throw out the built in scroll system and do it manually. It took a lot of back and forth to get the camera movement feeling smooth and natural.

The other thing was making everything feel connected. The 3D background can't just exist separately from the HTML content. They had to feel like one experience. Getting the colors, timing, and transitions to match across both layers took a lot of tweaking. I'd say "the fog color doesn't match the background" and the AI would adjust it until it blended perfectly.

At the end of the day this project taught me that AI is an insane tool but it still needs someone with a vision to guide it. Without me pushing for specific looks and feels it would've just been a generic template. The AI gave me the power to build something I could never build alone but the creative direction was all me.