Today was mostly layout and visuals. I made good progress on the home page and my site is finally starting to look like mine and less like crude crayola drawings.
I got the hero banner and services section backgrounds stretching full-width while keeping the actual content centered, stripped out the temporary red borders, and fixed the footer so it actually sits at the bottom of the page instead of floating with weird white space underneath.
I ended up wrestling with CSS a bit (of course). Removing a padding: 15% on the main page magically fixed a lot of the layout issues. The tradeoff is that I’ll probably need to apply padding per component now, which isn’t exactly DRY, but perhaps its one of those rare occasions where it's actually okay to bend the rule?
I also went with floating node-style visuals using Three.js for the herobanner. These types of visuals always feel nice to see. Very easy setup just through npm, creating a HeroScene component, wired it into the hero banner, and leaned on AI for most of the effect (and okay, for edits to these blog posts too… its the current year afterall
After a few tweaks, I’ve got a soft fade so the text stays readable and a highlight that ties into the site’s blue:
On the services side, I used a subtle SVG pattern from Hero Patterns and dropped the obscenely long CSS URL into global.css until it looked how I wanted, and also swapped the footer links over to proper icons instead of plain text, which feels much cleaner.
Next up is nailing the actual content for the service cards. I’m figuring out how to reuse a single component while passing in different data for each one. Each card needs a short blurb about what I offer and a few icons for the tech I know well. Once that’s in place, iterating on the rest of the page should be a lot smoother.