Building My Personal Website with GenAI: A Tech Bro's Pro's Journey from Concept to Launch
As a software engineer with over two decades hands on keyboard, I've always said I have zero ability to code from scratch. But when it came time to revamp my personal website—a digital portfolio showcasing my projects, blog posts, and professional journey—I decided to embrace the future. Enter Generative AI (GenAI). What started as a quick project ballooned into a few hours of collaboration with AI tools like ChatGPT, Grok, Claude, and Gemini. It wasn't just about automating tasks; it was a full-blown partnership that taught me as much about AI's capabilities as it did about my own creative process. In this post, I'll walk you through how I wireframed the concept, nailed down the Product Requirements Document (PRD), and iterated relentlessly on the final product. Spoiler: It took way less time than expected, and the results were worth every session.
The journey began with a vague idea: I wanted a sleek, modern website that wasn't just a static resume but a dynamic hub for my tech musings, open-source contributions, and even a contact form for potential collaborations. As a technical professional juggling a full-time job, I didn't have weeks to dedicate to this. That's where GenAI came in as my brainstorming buddy. I spent the first few minutes feeding prompts into an AI chatbot, describing my vision in broad strokes. "Imagine a minimalist portfolio site for a tech enthusiast: homepage with hero image, sections for projects, blog, and about me." The AI spat back initial concepts, suggesting layouts inspired by popular sites like those of indie developers or tech influencers. This back-and-forth helped me refine my thoughts without staring at a blank page.
Wireframing the concept was the next logical step, and it's where GenAI really shone in accelerating what could have been a tedious manual process. Traditionally, I'd grab a pen and paper or fire up tools like Figma or Sketch to doodle rough layouts. But with GenAI, I turned it into an interactive session. I prompted the AI to generate textual descriptions of wireframes first: "Describe a wireframe for a single-page app with a navigation bar, hero section, grid of project cards, and footer." It output something like: "Top: Fixed nav with Home, Projects, Blog, Contact. Hero: Full-width image with overlay text 'John Doe: Turning Data into Insights.' Below: Three-column grid for projects, each with thumbnail, title, and brief desc." From there, I iterated by asking for variations—"Make it responsive for mobile"—and even used image-generation AIs to visualize these ideas. I refined prompts to get closer to my aesthetic: clean lines, dark mode toggle, and subtle animations. I had a solid wireframe blueprint, exported as simple sketches via AI-assisted tools, saving me from the usual design software learning curve.
With the wireframe in hand, it was time to nail the PRD—the holy grail of any product development, even for a solo project. As a tech pro, I'm no stranger to PRDs from my day job, but crafting one for my personal site felt oddly formal. GenAI made this phase efficient yet thorough. I started by outlining key sections in a prompt: "Write a PRD for a personal website including goals, user stories, features, tech stack, and non-functional requirements." The AI generated a draft that included objectives like "Attract potential employers" and "Showcase 5-10 projects with live demos." I then spent a few iterations editing and prompting for refinements: "Add SEO considerations and accessibility features." We debated (well, I debated with the AI's responses) on must-haves versus nice-to-haves—e.g., integrating a blog with Markdown support was essential, while a newsletter signup was deprioritized. The PRD evolved into a comprehensive document: goals (e.g., load time under 2 seconds), features (e.g., responsive design using CSS Grid), and even edge cases like handling broken links.
Armed with the PRD, I dove into the build phase, where GenAI transitioned from planner to co-coder. I chose a stack I was familiar with—React for the frontend, Node.js for any backend needs, and hosted on Akamai—but let the AI handle the boilerplate. Prompts like "Generate React components for a project card with props for image, title, and description" produced code snippets I could tweak. Minutes were spent debugging and integrating: the AI suggested optimizations for performance, like lazy-loading images, and even helped with styling via Tailwind CSS classes. But it wasn't all smooth; GenAI hallucinations meant I had to verify every output, turning quick tasks into iterative loops. For instance, when the generated code for a contact form didn't handle validation properly, I prompted refinements until it worked seamlessly.
Iteration on the final product was where the real magic—and frustration—happened. Once I had a deployable version, I tested it across devices, gathering feedback from peers via quick shares. GenAI became my rapid prototyping ally here. For every issue, like "The mobile nav is clunky," I'd prompt: "Suggest improvements for a hamburger menu in React with smooth transitions." This led to multiple deploys, each better than the last. I spent yime A/B testing elements—does a blue accent color convert better than green? The AI analyzed my descriptions and proposed data-driven tweaks, drawing from web design best practices. One memorable session involved iterating on the blog section: initial AI-generated Markdown parser had rendering bugs, so we fixed it step-by-step over a few minutes. By the end, after perhaps 3+ hours total, the site felt polished—fast, intuitive, and uniquely mine.
Reflecting on this experience, using GenAI to build my personal website transformed what could have been a solo slog into a collaborative adventure. It democratized design and development, allowing a busy tech professional like me to punch above my weight in creativity and efficiency. Sure, it took hours—probably 4 in total—but those were invested in learning, not drudgery. If you're a fellow techie eyeing a personal project, give GenAI a shot. It won't replace your expertise, but it'll amplify it in ways you might not expect. Check out my site at https://joeleboube.com and let me know what you think—iterations never truly end!