DesignByTheo.com – Personal Brand Website & AI-Assisted Development
Intro
As part of an ongoing effort to modernise my personal brand and explore emerging AI-assisted development workflows, I designed and built a new homepage for my portfolio website alongside a supporting “Snapshot” page.
The project combined branding, UX/UI design, front-end development, content strategy, and AI-assisted coding. Rather than relying on a single tool, I deliberately adopted a multi-tool workflow, using each platform for the areas where it performed best.
The result is a modern, interactive portfolio experience that reflects both my design background and my willingness to embrace new technologies and processes.
The Challenge
The objective was to create a portfolio website that felt contemporary, technically polished, and visually distinctive without sacrificing clarity or usability.
As a designer, I wanted the site to communicate creativity and personality while remaining focused on the work itself. At the same time, I viewed the project as an opportunity to explore how AI tools could be integrated into a professional design and development workflow.
Rather than treating AI as a replacement for creative decision-making, I approached it as a collaborative tool that could accelerate production, generate technical solutions, and assist with implementation while still requiring human direction, refinement, and critical judgement.
Design & Development Process
The project began with a clear vision for the site’s visual identity, colour palette, structure, and content hierarchy. Using OpenCode running locally, I provided detailed specifications for each section of the website, including layout requirements, content structure, visual direction, and user experience goals.
Once the initial framework was established, development became an iterative process of testing, refinement, feedback, and continuous improvement.
As the project evolved, I focused on:
- Refining layout and spacing
- Improving visual hierarchy
- Enhancing colour usage and consistency
- Introducing subtle interaction and motion
- Optimising responsiveness and usability
- Integrating the design into a WordPress environment
Alongside OpenCode, I used Claude to review and refine sections of the generated code, create additional CSS enhancements, assist with PHP integration for WordPress, and generate modern SEO-focused head and metadata structures.
This approach allowed me to move rapidly between design, implementation, testing, and iteration while maintaining creative control throughout the process.
Creating the Hero Experience
One of the key goals for the project was creating a hero section that immediately captured attention while remaining appropriate for a professional portfolio.
I explored multiple approaches using OpenCode, Gemini Labs, and various experimental AI-generated solutions. While several concepts produced interesting results, none achieved the balance I was looking for between visual engagement and content readability.
After researching alternative approaches, I explored CodePen and reviewed a range of community-created interactive front-end experiments. I eventually identified a solution that aligned with the aesthetic and experience I wanted to achieve.
Once integrated into the website, I used AI-assisted development workflows to adapt and refine the code, ensuring it aligned with my brand colours, visual identity, and performance requirements. Particular attention was given to ensuring that the animation enhanced the experience rather than distracting from the content itself.
The final result delivers an engaging visual introduction while keeping the focus firmly on the portfolio and professional messaging.
AI as a Creative Partner
One of the most valuable outcomes of this project was gaining practical experience using AI across multiple stages of the design and development process.
Rather than relying on a single platform, I evaluated and combined several tools, leveraging the strengths of each while working around their limitations. This included concept exploration, front-end development, code refinement, technical problem solving, SEO implementation, and WordPress integration.
The project reinforced an important lesson: successful AI-assisted workflows still depend heavily on creative direction, critical thinking, testing, iteration, and the ability to recognise when a solution needs further refinement.
In many ways, the role shifted from manually creating every component to directing, evaluating, and orchestrating a collection of tools to achieve a specific outcome.
Outcome
The final website successfully combines personal branding, portfolio presentation, and modern web interaction into a cohesive experience.
Beyond the finished design itself, the project represents an evolution in my creative process—demonstrating how traditional design skills can be combined with emerging AI technologies to accelerate production, solve technical challenges, and create polished digital experiences.
It serves not only as a showcase of my work, but also as a reflection of how I continue to adapt, learn, and embrace new tools within an ever-changing creative industry.