Every year I find myself rebuilding my portfolio. I've tried just about tried everything: hired developers, wrestled with WordPress, even subscription to Squarespace and Cargo Collective. But honestly, paying to showcase my own design work? That just never felt right. So, last Christmas, I decided to go fully custom. CSS and HTML from the ground up, with JavaScript thrown in for those page transitions and type movement.
Getting the Basic Structure: Google Gemini Advanced was my go-to for the core code. I made sure to build it responsive right from the start. Now, I know there are tools like V0 and Cursor that can whip up a site super fast, but I actually chose a more manual, collaborative way with AI, especially as these tools were in their infancy then. Plus, using my own HTML, CSS, and JavaScript know-how, it felt good to really custom-build something.
Transitions and Movement: Gemini was awesome for getting the page structure down, but ChatGPT really shined with the final touches, especially for movement and transitions. There was definitely some serious back-and-forth there; I'd often feed it examples directly from my Figma prototypes just to get the exact feel and flow I was after. This was particularly useful for page transitions and some rolling text on the homepage.
Styling and css Once I had the structural CSS in place, the rest of the styling was pretty manual. I was deep in the CSS file, pulling snippets directly from Figma's Dev Mode. This is where Gemini really shone again over chat gpt; it was incredibly useful at explaining individual CSS elements and, once I fed it my entire stylesheet, it could seamlessly provide snippets that integrated perfectly with other parts of the file. It also followed my prompts for the responsive nature of the site, which was a huge help.
The Unexpected Colour Guru: The real shocker for me was ChatGPT's talent with colour. We had some pretty in-depth back and forth about palette choices; I'd ask it to be more subtle, or to really nail a specific emotion. It kept giving some fantastic options, always with some human-like reasoning, scary stuff! It did, however, fall short with accessibility, so I had to check and tweak accordingly.
Conclusion: Simple and Effective It's a basic, clean site. Yes, the HTML's a bit messy, and sure, I could ask Gemini to tidy it up, or even go more extravagant. But for me, it's a simple, clean portfolio that works, and I can keep playing with it, alongside my AI friends.