Skip to content
Projects

Personal Portfolio — Front Architecture & Standards Showcase

Personal website and portfolio built with Nuxt 4 and Nuxt Content v3. Front engineering showcase demonstrating strict TypeScript typing, thoughtful accessibility (RGAA / Advanced Opquast), optimal SEO score, and automated CI/CD workflow.

  • Nuxt 4
  • Nuxt Content v3
  • NuxtSEO
  • NuxtI18n
  • TypeScript
  • TailwindCSS

Role

Lead Developer & Designer

Entity

nicolaswalter.fr (Projet Personnel Open Source)

Date

2024-2026

Impact

  • 100% strict TypeScript
  • RGAA & Opquast compliant (808 pts)
  • 100/100 Lighthouse SEO
Visit websiteView code
Personal Portfolio — Front Architecture & Standards Showcase

Context & Engineering Philosophy

A web engineer's portfolio should never be just a static showcase: it is the ideal canvas to autonomously demonstrate one's highest technical standards.

I designed this personal website as a real-world demonstrator of modern software craft: modern Nuxt 4 architecture, declarative content management via Nuxt Content v3, seamless bilingual internationalization (Nuxt I18n), strict legal digital accessibility (RGAA / Advanced Opquast), and cutting-edge SEO optimization.

Architecture & Technical Decisions

The project leverages the latest capabilities of the Vue and Nuxt ecosystem:

  • Nuxt 4 & Vue 3: Lightning-fast static site generation (SSG) with optimized hydration, auto-imported modular components, and custom reactive composables.
  • Strict TypeScript Typing: Complete end-to-end static type safety covering UI data structures, typed I18n translation keys, and structured content collections.
  • Nuxt Content v3 & Markdown: Modular, bilingual technical case study management powered by declarative collections (projets_fr and projets_en), bound to typed metadata.
  • TailwindCSS Minimalist Design: Dynamic dark/light theme switching respecting user system preferences with zero flash of unstyled content (FOUC).

Accessibility, Web Quality & SEO

Holding the Advanced Opquast Certification (808 points), I applied rigorous standards to web quality and digital inclusion:

  • Native Accessibility (RGAA / WCAG): Strict semantic HTML5 landmarks, skip links ("Skip to content"), verified color contrast compliance, and full keyboard navigation with visible focus indicators.
  • SEO Excellence (Nuxt SEO): Automated XML sitemap generation, dynamic OpenGraph social cards, canonical URL resolution, and Schema.org structured metadata.
  • Automated Quality Pipeline: Pre-commit Git hooks (Husky, lint-staged) coupled with automated ESLint and TypeScript compiler validations on every push.

Impact & Key Results

  • 100/100 Lighthouse scores across Performance, Accessibility, Best Practices, and SEO.
  • 100% strict TypeScript with zero untyped escape hatches.
  • Open Source codebase: Publicly shared under the MIT License on GitHub.