← Back to projects

Portfolio Nuxt 2026

This portfolio site built with Nuxt 4, Nuxt UI, Nuxt Content, and Nuxt Image.

NuxtVueTypeScriptTailwind
Portfolio Nuxt 2026

A modern portfolio and personal site built with Nuxt 4, Nuxt UI, Nuxt Content, and Nuxt Image. The site showcases my work, skills, and testimonials with a dark theme, warm amber accents, and a responsive layout. All project and writing content is managed in Markdown and rendered via Nuxt Content collections. Project and page images are optimized with Nuxt Image (e.g. WebP format).

Tech stack

  • Nuxt 4 – Vue meta-framework with file-based routing, auto-imports, and strong DX
  • Nuxt UI – Component library and design tokens for consistent, accessible UI
  • Nuxt Content v3 – Git-based CMS with content collections, schema validation, and MDC support
  • Nuxt Image – Image optimization (NuxtImg / NuxtPicture) with format conversion (e.g. WebP)
  • Tailwind CSS – Utility-first styling with custom design tokens
  • TypeScript – End-to-end type safety across app and content config

Site structure

The homepage is built from composable sections:

  • Hero – Headline, intro, and a terminal-style logo component
  • About me – Short bio and personality (including a rotating joke)
  • Skills – Tech and tool highlights
  • Testimonials – Social proof from colleagues and clients
  • Projects – Index at /projects and dynamic project pages at /projects/[slug], all driven by Markdown in the content/projects folder

Each project gets its own page with title, description, tags, optional image, repo/live links, and full Markdown body rendered with prose styling.

Highlights

  • Content collections – Projects (and extensible for blog) with Zod schemas, date/title indexes, and type-safe queries
  • Image optimization – Nuxt Image for responsive, WebP project cards and page images
  • SEO and social meta@nuxtjs/seo for titles, descriptions, and Open Graph
  • Accessibility – Semantic HTML, ARIA where needed, and keyboard-friendly navigation
  • Static-friendly – Builds to static assets with optional server or edge deployment
  • Developer experience – ESLint, Husky pre-commit, and GitHub Actions for lint