Building My Portfolio Website with AI in 3 Hours

The Domain That Sat There for Years

I've owned tristancartledge.com for years. Like many developers, I had grand plans for a portfolio site that would showcase my work, attract clients, and serve as a digital home base. But somehow, it never quite happened.

The domain sat there, pointing to various half-finished attempts, placeholder pages, or sometimes nothing at all.

Why Portfolio Sites Are Hard for Developers

The irony isn't lost on me. I build software for a living. I've architected systems that handle millions of requests. I've led teams, shipped products, and solved complex technical challenges. But my own portfolio site? That was somehow always too hard.

Here's why:

Motivation Drain

When you code all day every day at work, the last thing you want to do is more coding in your spare time. Especially when it feels like "admin work" rather than solving an interesting problem.

The Design Problem

I'm not a designer. I never have been. The thought of trying to create something visually appealing, or paying for a generic template that looks like everyone else's, just killed my motivation.

The Maintenance Tax

Every portfolio site I'd started became a burden. Technologies changed, dependencies got outdated, hosting needed attention. It felt like taking on a second job.

Unclear ROI

Why bother? My LinkedIn profile was good enough. Most opportunities came through networking anyway.

What Changed

Three things converged to finally make this happen:

1. The Shift to Consulting

I'm actively looking to provide consulting services now. A professional web presence isn't optional anymore, it's essential. Having a place where potential clients can learn about my services and get in touch matters.

2. The AI Revolution

The explosion in AI capabilities has been transformative. With tools like Roo Code and a Claude Max subscription, I can work at a pace that would have seemed impossible even a year ago. The AI handles the boilerplate, suggests designs, and helps me iterate rapidly.

3. Push-Button Infrastructure

The modern deployment landscape is incredible:

• Vercel provides free hosting with git-based deployment. Push to main, site updates automatically.
• Cloudflare offers free DNS with a simple, intuitive interface.
• Analytics, speed insights, SSL... it all just works out of the box.

The friction is gone. What used to require server configuration, deployment scripts, and ongoing maintenance now happens automatically.

The Build: 3 Hours to Launch

Here's the timeline:

Hour 1: Foundation

• Scaffolded the Next.js project
• Set up the tropical theme (inspired by Cairns, where the rainforest meets the reef)
• Built the basic layout and navigation

Hour 2: Content & Sections

• Hero section with the Builder/Consultant split
• About, Services, Experience, and Skills sections
• Contact section with email integration

Hour 3: Polish & Deploy

• Responsive design tweaks
• Connected Vercel to GitHub
• Configured Cloudflare DNS
• Added Vercel Analytics and Speed Insights
• Configured Google Analytics
• Went live at tristancartledge.com

Then I spent a few more hours over the next day tweaking copy, improving SEO, and adding finishing touches. I'll admit I agonised over small things like text alignment in the experience section, when exactly to use the coral accent color for emphasis, and getting the subtle glow effects to feel right without being too much.

AI-Directed Development ≠ Vibe Coding

I want to be clear about something: this isn't "vibe coding."

Vibe coding is when you let AI generate code with minimal oversight, accepting whatever it produces and hoping for the best.

AI-Directed Development is different:

• I reviewed every file change before committing
• I guided the architecture and made design decisions
• I suggested specific tweaks to match my standards
• I maintained full understanding of the codebase
• The AI accelerated my work; it didn't replace my judgment

Think of it like pair programming with a very fast, very knowledgeable partner. You're still driving. You're still responsible. But you can move at 10x speed.

The Tech Stack

For those interested in the specifics:

• Next.js with App Router and Turbopack
• Tailwind CSS v4 with CSS-first configuration
• Framer Motion for smooth animations
• TypeScript in strict mode
• Vercel for hosting (with built-in analytics and speed insights)
• Cloudflare for DNS
• Google Analytics for additional tracking

What Makes Modern Web Development Great

Vercel is Incredible

Git-integrated deployment is the dream. I push to main and the site updates. No CI/CD configuration needed. Preview deployments for every PR. Built-in analytics that just work.

Cloudflare DNS is Effortless

I pointed my domain at Cloudflare, configured a few DNS records through their UI, and connected it to Vercel with a couple of clicks. Free SSL, free DNS, zero hassle.

AI Actually Gets Design Now

This was the game-changer for me. With the right prompts, AI can suggest color schemes, layout patterns, and visual hierarchies that actually look good. I described wanting a "tropical Cairns theme" and got a cohesive design system with teal (rainforest) and coral (reef) colors.

The Missing Piece: Self-Promotion

Now I just need to figure out how to promote myself. The site is built. The content is there. But getting the word out? That's still a challenge.

If only AI could do more than just give advice on marketing and actually execute it. Maybe someday it will help me write LinkedIn posts, engage with communities, and build a genuine online presence. For now, that's still on me.

Try It Yourself

If you've been putting off building your own site, now is the time. The barriers that existed even a year ago are gone:

1. Use AI-assisted coding (Roo Code, Cursor, GitHub Copilot)
2. Deploy on Vercel (free tier is generous)
3. Use Cloudflare for DNS (free and simple)
4. Don't overthink the design (AI can help here too)

You can go from nothing to a fully-hosted, professional site in an afternoon.

---

P.S. This blog page you're reading? Also built with AI-Directed Development. Listing page, markdown rendering, LinkedIn integration... another hour of work, same approach.

Want to discuss this post or share your own experience building with AI? Join the conversation on LinkedIn.