From HTML to Nuxt: Rebuilding My Portfolio for the Modern Web

Why Migrate Away from Static HTML?

My old portfolio was built with Bootstrap and served its purpose well for several years. But as my career evolved and I started building more complex web applications for clients, the limitations of a static HTML site became increasingly apparent.

• Adding new portfolio projects meant manually editing HTML — tedious and error-prone.
• No blog functionality — I wanted to start sharing knowledge and building SEO authority.
• No proper SEO setup — missing structured data, sitemaps, and Open Graph optimization.
• The contact form relied on an external Cloudflare Worker — unnecessary complexity.
• No component reusability — every section was hand-coded HTML.

Choosing Nuxt.js as the Framework

I chose Nuxt.js for several reasons. As a Vue.js developer who builds client sites with Nuxt, it made sense to use the same framework for my own portfolio. Nuxt's file-based routing, auto-imports, and SSR capabilities make it ideal for a content-heavy portfolio site that needs to rank well in search engines.

The Data-Driven Architecture

Rather than hardcoding content into components, I adopted a data-driven architecture inspired by one of my client projects. All content — portfolio projects, blog posts, testimonials, experience — lives in typed TypeScript data files. Components simply consume this data through composables.

Benefits of This Approach

1. Type safety: TypeScript interfaces catch data errors at build time.
2. Easy content management: Adding a new portfolio project or blog post is just creating a new .ts file.
3. Composable patterns: Reusable data access logic through Vue composables.
4. SEO-ready: Each content type includes structured SEO metadata.
5. Agent-friendly: The structured data format makes it easy for AI tools to help manage content.

SEO from Day One

Using Nuxt SEO Pro, I set up comprehensive SEO from the start: automatic sitemap generation, robots.txt, Open Graph images, and Schema.org structured data. Every blog post and portfolio page gets proper metadata, making the site search-engine friendly from day one.

Lessons Learned

• Plan your data architecture before building components — it saves enormous refactoring time.
• Use the same patterns across projects — consistency accelerates development.
• Don't over-engineer the blog — start simple with TypeScript data files and iterate.
• Invest in SEO setup early — it compounds over time.
• Keep your old site as a reference until the migration is complete.

What's Next?

I plan to publish regular blog posts about digital marketing, web development, and AI automation. The data-driven architecture makes this easy — each new post is just a TypeScript file. I'm also exploring integrating Google Search Console data to optimize content based on real search performance.