(Re-)building my personal website with an ensemble of AI tools
side quest no. 1: playing with ChatGPT, Webflow, and Midjourney
After 2.5 years of neglect, my website was in desperate need of an overhaul.
I’m no longer a ‘new grad’ as I’d advertised in my bio. ChatGPT became a thing antiquating my 2021 research on AI tutoring agents. And my motive for having a site has shifted from trying to ‘sell myself’ to just having fun expressing myself.
This month, I decided to yank the dust cover off my site and give it an uplift.
Starting point: The initial design
I used Webflow to develop the first design that’s been live for the past few-ish years. As you can see, it’s literally black and white with some janky, lightweight highlight interactions that were neither polished nor inspiring.
The last time I tried to build a cool-looking site, I found it confusing to use Webflow—a hybrid of a no-code website builder (limited customizability) and straight-up coding (maximum customizability). I’m no engineer nor am I designer, and I felt like Webflow was built for a designer-almost-engineer. As a result, I heavily procrastinated on learning how wield its full functionality. And instead, I’ve been settling with very plain and simple designs because I didn’t know how to add the pizazz imagined in my head.
New concept
Before diving into the nitty-gritty, I wanted to ensure this next iteration of my site was up-to-date and a bit more fun. Here’s what I had in mind:
Minimalist yet impactful: Strip away excess pages and irrelevant links to create a zero-click navigation experience.
Distinctly personal: Add playful, hand-drawn illustrations to bring some personality to the visuals.
Smooth and dynamic: Introduce page load animations and smoother hover interactions to make the experience feel interactive and polished.
More contrast: Update the hero typeface to a bold serif and experiment with elegant yet imperfect design details.
My tool stack
To bring my vision to life, I leaned on three powerful tools:
Webflow: My go-to website builder for both design and coding, offering rich functionality despite a learning curve.
ChatGPT-4o: My AI assistant for guiding and educating me when I get stuck.
Midjourney: My creative companion for generating supporting visuals.
How I used each tool
Webflow
Webflow serves as a design editor that has drag-and-drop elements and a style panel control center used to customize the looks and layout of those elements. I love it because of its powerful set of features and functionality (e.g. interactions, custom css properties and values) that enable you to customize and personalize your site more so than other drag-and-drop website builders like Wix and Squarespace. There’s a bit of learning curve to understand how it works, but once you figure it out, you can build some unique and stunning websites.
My initial site was built using Webflow, so I decided to use the same tool/project to work off.
ChatGPT
If Webflow was my main instrument, then ChatGPT was my help assistant. I used ChatGPT to troubleshoot my problems that came up.
Use case #1: Guiding me through implementation
When I wouldn’t know how to build a specific animation interaction pattern in my head, I used ChatGPT to walk me through it. Some of the tips it gave weren’t a 1-to-1 match for the existing version of Webflow, but that was okay. Once it told me where else to look, I was able to find the matching keywords in the current live version that got me to where I needed.
Use case #2: Keeping my classes structured and well-organized
There were times when I’d realize that I’d need to apply the same exact interaction effect to similar elements. For example, the tooltip interactions were all the same. However, I would have to re-build the same interaction three times based on the way I named and identified each tooltip element. This felt unnecessary so I posed the question to ChatGPT to suggest a class folder structure that would enable me to do the work once and save me twice the time.
Use case #3: Educating me on web terminology and best practices
When it comes to sizing (text, padding, margin, divs, viewports, etc), there are several units of measurement you can choose from: px, %, em, rem, ch, vw, vh, svw, and svh. Why so many? Can’t everything be set in pixels?
Well, it turns out that there are different benefits of using each of these units. It depends on the nature of your design and the element you’re styling.
Different units of measurement (like px, %, rem, and vw) have specific uses depending on design needs. For example, pixels are best for small, fixed elements requiring precise control (like icons and borders), while percentages are better for elements that need to adapt to flexible layouts. I used ChatGPT to help demystify these nuances.
I wouldn’t have known any of this without the help of ChatGPT to explain it all in a table breakdown. ChatGPT is definitely a great companion to have at your side when working in a new domain with low-risk consequences should it ever hallucinate and lead you astray.
Use case #4: Brainstorming and consulting design ideas
ChatGPT gave me a starting point that I often used but built upon later. I think it’s really good at providing leads or clues for what to explore next. When I asked ChatGPT how to add an animation on page load, it proactively provided a few simple and slightly more fancy ideas I could start with. It also raised some nifty suggestions that made the design more dynamic and less clunky such as adding a bézier keyframe transition to each animation.
Overall, ChatGPT handled a lot of unwanted thinking for me in seconds, leaving me in the pilot’s seat to control the creative direction.
Midjourney
I knew I wanted some illustrations on my site, but I’m not artist. My options would have been 1) spend days learning how to draw ($ in time, bad quality), 2)commission someone to do it for me ($ in money); or 3) find some existing digital assets that someone is selling ($ in money, but low in precise expression/customization). But lo and behold, times have changed. Midjourney exists!
I paid $7 for a monthly subscription on Midjourney to generate some nice visuals on my site. It did not disappoint. I used 118 prompts, iterating and building upon each one to tweak the first set of Clip Art-y images that divulged my prompting ineptitude. I’m so embarrassed by some of the initial images that I immediately clicked on the ‘Hide’ button on a few of them to sweep them under the rug and forget that they ever existed. The more and more I played around with Midjourney’s features and keywords, the better the images became. By the end, I was extremely elated by the results.
Here are a few fun ones I created with the following prompt:
A flat vector playful, hand-drawn illustration of a [fill in the blank] in the style of Matisse Once I got a few images that I liked, I was able to use the “Use in prompt” feature to reference the style in my next prompt. This was one of the most delightful features I came across since it made all the illustrations look cohesive.
Final result
Here it is! Now, with newer personality-filled animations and hand-drawn illustrations, it finally reflects the personality I wanted when I first decided to start a website.
Takeaways
AI tools unlock limitless possibilities, with human imagination and clear communication as the only constraints. Even the most complex interactions that once felt exasperating and made me want to (╯°□°)╯︵ ┻━┻ are now easily achievable, empowering creators to surpass their own skills.
Webflow + supplemental AI tools are breaking down barriers, making design and development more accessible to non-designers and non-engineers like me. Together, these tools enable individuals to tackle creative and complex projects independently, redefining the traditional roles of product, design, and engineering in the process. Each function may begin to shift their focus towards the more complex and creative work, such as motion and interaction design.
ChatGPT is a powerful assistant, but switching between tools remains a challenge. Despite the friction of tab-switching, its ability to answer questions and provide solutions far outweighs the inconvenience, and deeper integrations could streamline its utility even further by introducing contextual help and up-to-date internal knowledge.
Update: I think Webflow is building this as we speak! Webflow AI Assistant is currently in limited beta as of Dec 2024.
Future plans
This project gave me a taste of how distributed generative AI tooling can enhance and transform design and development workflows. With the pace of innovation accelerating, I’m eager to dive deeper and see how these tools will reshape our workflows in ways we can’t yet imagine.
Up next:
🌶️ Test-drive in-house copilots like Webflow’s AI Assistant to see how seamlessly it integrates into the design workflow.
🌶️ Go all-in using next-gen full-stack generators like v0, bolt.new, and lovable.dev to build a website from the ground up using just human language prompting.
🌶️ Combine a full-stack generator with co-pilot LLM support to code more complex design patterns and interactions
Stay tuned!
Wanna see the full result? 👀 Check out the refreshed site at kacinguyen.webflow.io (view on desktop for the best experience!)
