How I Built My Developer Portfolio with AI-Assisted Workflows, Framer Motion & Heavy SEO Optimization

If you're a frontend developer, this one's for you. I recently shipped my personal portfolio — buildwithxela.com — and the process behind it was anything but conventional. Here's an honest breakdown of how I built it, the tools I leaned on, and the workflow decisions that made the biggest difference.

Starting with Lovable I scaffolded the initial project using Lovable, an AI-powered UI generation tool that lets you go from zero to a working codebase in minutes. Once the scaffold was solid, I synced it directly to GitHub so I could pull it down and work on it locally — giving me full control over the codebase without losing the speed advantage of AI generation.

Structured AI Instructions with skills.sh One of the less-talked-about problems with AI-assisted development is prompt drift — the longer your project gets, the vaguer and less useful your prompts become. I solved this with skills.sh, a tool that generates detailed, streamlined instruction sets you can feed to an AI agent consistently across sessions. Instead of re-explaining my stack and conventions every time, I had a structured brief ready to go. It made every agent interaction more precise and reduced the back-and-forth significantly.

Dynamic Text Positioning with Pretext For text layout, I used the latest version of Pretext, a library by Cheng Lao that uses an algorithm to calculate dynamic text positioning automatically. The old approach required manually computing positions using the DOM — measuring elements, doing the math yourself, and fighting with reflows. Pretext handles all of that under the hood, which freed me up to focus on the creative side rather than the geometry.

Animations with Framer Motion The portfolio features a good number of animations, all handled with Framer Motion. From entrance transitions to the interactive avatar drag mechanic you'll notice on the homepage, Framer Motion kept the animation logic clean and composable without sacrificing performance. The goal was to make interactions feel intentional, not decorative.

SEO Optimization — Iteratively SEO was treated as a first-class feature, not an afterthought. I used PageSpeed Insights and Seobility to audit the site and improve my scores iteratively — running checks, identifying bottlenecks, shipping fixes, and re-checking. This loop-based approach made it easy to measure real progress rather than guessing.

A Multi-Model AI Workflow Here's where things get interesting. Rather than using one AI tool for everything, I divided responsibilities across models based on what each does best:

Gemini — UI generation and design suggestions Claude — Logic implementation and code reasoning Claude (again) — Code review, using structured Skill instructions for consistency GitHub Copilot — In-editor autocomplete and quick refactors

This separation of concerns meant I wasn't fighting a single model to do things outside its strengths. Each tool had a defined lane, and the output quality reflected that.

The portfolio is live at buildwithxela.com — feel free to check it out. If you're building your own and want to talk through any part of this workflow, drop a comment or reach out directly.