Portfolio Website v2

Overview

A complete redesign and rebuild of my personal portfolio, migrating from Nuxt 2 to Nuxt 3 with a focus on performance, animations, and user experience.

The Challenge

My previous portfolio was a simple single-page site. I needed something that could:

• Showcase projects with detailed case studies
• Host technical blog posts
• Support dark mode
• Feature smooth animations
• Be easily maintainable with Markdown content

Key Features

Dynamic Content with @nuxt/content

All projects and blog posts are written in Markdown with frontmatter, making it easy to add new content without touching code.

Dark Mode

Full dark mode support with system preference detection and manual toggle, persisted across sessions.

Smooth Animations

Page transitions, scroll animations, and micro-interactions using @vueuse/motion for a polished feel.

Performance Optimized

• Static site generation for instant loads
• Image optimization
• Code splitting
• Minimal JavaScript bundle

Technical Implementation

The site uses Nuxt 3's file-based routing and auto-imports:

// Automatic content fetching
const { data: projects } = await useAsyncData('projects', () =>
  queryContent('projects')
    .where({ featured: true })
    .sort({ date: -1 })
    .find()
)

Results

• Lighthouse score: 95+ across all metrics
• Built and deployed in under a week
• Easy content management via Markdown