From Sketchbook to meks.quest

Last Friday night, armed with sketches and an idea that had been brewing for months, I decided it was finally time to build my personal website. Seven days later, meks.quest is live – and somehow it’s already ranking first when you Google my name.

I’d been wanting a central hub for everything I create – one place for my projects, blog posts, and speaking engagements. Somewhere I could share technical knowledge, showcase the weird and wonderful things I build, and have some fun while doing it. Plus, I wanted to experiment with blending my artwork and engineering in ways I’d never tried before.

The AI-Assisted Design Dance

I started with what I always start with: sketches in my notebook. After studying dozens of personal websites and figuring out my branding direction, I had rough wireframes of what I wanted. But turning sketches into code? That’s where things got interesting.

I took my designs to Claude and asked for help crafting a prompt for Lovable. The first iteration? Honestly, it looked terrible. So back to Claude I went with feedback, refined the prompt, and fed it back into Lovable. This time I got something workable – React code that was close enough to my vision to serve as a starting point.

But here’s the thing: I’m most comfortable in Elixir Phoenix, and part of this whole project was getting something up quickly so I could start iterating. So I opened a fresh Claude session and asked it to convert the React/CSS code into Phoenix LiveView.

The result? A solid foundation that felt familiar enough to work with.

Deploy First, Polish Later

My first move with any new Phoenix project is always the same: deploy a blank page. I spun up a new LiveView app (no database, no email – keeping it simple), got the repo set up, and pushed to Fly.io. There’s something deeply satisfying about seeing that empty page live in production. It’s like planting a flag: “This is real now.”

Only then did I integrate the Claude-converted code. With just a little back-and-forth, I had my first version working. All of this happened in one late Friday night session – the kind of focused, tea fueled coding marathon that reminds you why you love building things.

The Refactoring Revelation

The initial version had placeholders for everything I knew I wanted:

• Projects showcase
• Speaking engagements
• Writing samples

But as I started filling in content over the week, I hit a wall. The code I’d inherited from the AI chain was… messy. All the styling dumped into app.css, lots of repeated styles, zero componentization. It was functional, but it didn’t feel like my code.

So one evening, I sat down and completely refactored everything. I read through every line (well, almost every line, I still have some more review and polish to do), simplified the CSS (goodbye, over-engineered scroll animations), and broke things into proper components.

The moment I finished, something clicked. This felt like my project again, not just something an AI had handed me. That sense of ownership? Critical for a project that’s supposed to represent you professionally.

The Scroll-Sync Solution

Here’s the technical challenge that taught me the most this week: my site has navigation tabs that highlight which section you’re currently viewing as you scroll. Simple concept, but the implementation had a frustrating bug.

When you clicked a tab to jump from the top of the page to the bottom, there would be this annoying delay and flashing. Each tab would briefly highlight as the page scrolled past it, creating this strobing effect that looked completely unprofessional.

The fix? Temporarily disabling the scroll spy during navigation. Here’s the key part:

handleScroll() {
  if (!this.scrollSpyEnabled) return  // Skip if disabled during navigation

  // Find which section is currently in view
  const current = sections.find(section => {
    const element = document.getElementById(section)
    const rect = element.getBoundingClientRect()
    return rect.top <= 100 && rect.bottom >= 100  // 100px threshold
  })
}

// Temporarily disable during smooth scrolling
this.scrollSpyEnabled = false
setTimeout(() => {
  this.scrollSpyEnabled = true
}, 1000) // Wait for animation to complete

That 1000ms timeout was the sweet spot – long enough for the smooth scroll animation to complete, preventing the flashing entirely. Small fix, huge improvement in polish.

The Art-to-Code Pipeline

The most fun part of this whole week? Getting my drawings onto the website. I do all my sketching in black ink in physical notebooks, and I wanted that same mixed-media feel on my site – writing interspersed with artwork, just like my journals.

I’ve refined this workflow down to about 10 minutes from sketch to SVG:

1. Photograph the notebook page
2. Import to Procreate on my iPad
3. Trace and clean the background (mileage varies here, this could be anywhere from 2 minutes to 30 depending on my mood and the art, but I consider this part of the artistic creativity flow and it has a fun factor for me)
4. Export as PNG
5. Import to Inkscape and convert to SVG
6. Drop into my Phoenix project and position with Tailwind

The whole process keeps me in the creative flow – I spend most of my time on the actual drawing, then just a few minutes on the technical conversion. And now my website has that same organic, layered feel as my physical notebooks.

My favorite addition? A little T-Rex Easter egg that, when clicked, shows a speech bubble explaining how to pronounce my name: “”meks” it rhymes with t-rex!” It’s silly, but it’s me.

The Domain Victory

I’d never bought a domain or set up DNS before, so this was completely new territory. I went with Pork Bun (great name, great service) and learned how to connect it to my Fly.io deployment. And I just adore my new domain, I feel like a crow that snatched up a shiny new coin.

The technical setup was straightforward once I understood the pieces, but the real victory was unexpected: within days of launching, meks.quest started ranking first when you Google my name. My old, outdated portfolio site that I can’t even build anymore? Buried on page two.

I’d spent two hours trying to set up redirects from the old site (and failed), but organic SEO solved the problem for me. Sometimes the best solution is just building something better.

What’s Next

This week proved something important: you can move fast without sacrificing quality if you’re smart about your tools and workflow. AI helped me get started, but the real work – the refactoring, the problem-solving, the creative integration – that was all human.

Next week, I’m diving deeper into the content. More projects, more writing, more of those little personality touches that make a site memorable. And yes, more drawings scattered throughout.

There’s something deeply satisfying about having one place where all your creative and technical work lives together. A digital home that actually feels like home – messy, personal, and uniquely yours.

Plus, it’s just fun to build something that makes you smile every time you look at it.

Keep dancing between your own ink and sparkles.