This is my first time building and publishing a website for myself :<.
I'm not a frontend dev by trade, I'm more of an AI/ML guy, I guess. So naturally, I figured it wouldn't be that hard. Just some HTML, a bit of CSS, deploy, done.
I was wrong.
AI can't save you from your own logs
The first real struggle was performance. LCP warnings, layout shift errors, scrollbar jank. My Lighthouse score was not something I wanted anyone to see.
I kept throwing prompts at AI hoping something would stick. It helped, sometimes. But the honest truth? Most of the issues only made sense once I actually read the logs myself. AI doesn't see what you see. It can suggest fixes, but it can't tell you why your specific page is slow if you haven't told it what's happening.
So I learned to read logs. Not fun, but necessary.
The fancy theme transition that never worked
At some point I thought: wouldn't it be cool if switching dark/light mode did a bubble-expand animation across the whole page?
Yes. It would be cool. It was also completely broken on mobile.
Framer Motion, heavy CSS effects, full-page overlays. The phone lagged, the transition stuttered, and it looked worse than no animation at all. I spent way too long trying to fix it before finally swapping it out for a simple CSS fade.
I'll never get those hours back.
Mobile testing: a saga
I assumed I had to deploy before testing on mobile. Turns out you can just use your local network IP. Except it didn't work.
Theories I received:
- Windows Firewall (from random forum posts)
- "Your laptop doesn't want to talk to your phone" (from a friend, very helpful)
- "You might be using the wrong IP" (from AI, also very helpful)
Actually.. not helpful..
What actually worked: binding the dev server to 0.0.0.0 and connecting through my laptop's IPv4 address. Not the most secure setup, but it's my bedroom, a miniscule probability I'll get hacked (right?).
Samsung Browser is a crime against web developers
Everything looked fine in Chrome. Everything looked fine in Edge. Then I opened Samsung Browser.
The grid background disappeared. Styles were overridden by whatever the Blink-based engine felt like doing that day. The dark mode somehow clashed with my theme and made half the page invisible.
After a lot of googling, I found out this is just... a known Samsung Browser thing. Something about how it handles color-scheme and default stylesheets differently. Matt Sibson wrote a really good breakdown of exactly this if you want the full explanation.
I added color-scheme: light to my CSS. It didn't help at all. The grid still disappeared. At some point I just accepted it and moved on.
Samsung Browser, respectfully: please fix your browser. (I'm a Samsung user btw.)
Anyway. The site is live, it works on Chrome and Edge, and I'm pretty happy with how it looks. If you're reading this on Samsung Browser and something's broken, I'm sorry, I tried.