Portfolio

Portfolio

React 19Next.js 16Tailwind CSSTypeScriptDesign SystemExperimental

Project goals

My portfolio is not just about showcasing projects. It’s a space to:

  • 🧭 Explore, push, and evaluate certain approaches in a real-world environment, without the constraints of a traditional commercial product
  • 🧪 Work with modern or experimental technologies
  • 🎯 Validate architecture and UX decisions
  • 🔬 Test my own libraries in a concrete context

I experiment and only keep what is relevant, not simply what is new.

Technologies explored

View Transition API

Smooth transitions between elements across different pages using the experimental React <ViewTransition /> component

When switching themes, an animated transition powered directly by the browser’s imperative API.

One API, two distinct use cases, two different integration contexts.

Server Actions

The contact form is implemented using a typed Server Action, validated on the server with Zod. The goal was to explore the constraints of this model: how to handle errors, how to type everything consistently, and how to ensure scalability.

App Router

The entire project is built using the App Router from Next.js 16. This allowed me to clearly identify:

  • The advantages: shared layouts, Server Components
  • The limitations: hydration constraints, global state management
  • Their impact on how to structure a project

Advanced Subgrid

Setting up a cascade of subgrids, a still not widely adopted technique, to ensure perfect alignment of card content without hacks.

WebGL

Cursor-responsive grid.

My Personal Libraries

This portfolio includes 2 libraries that I developed and published:

Theming system

I chose to go beyond simple dark/light mode and build a mini design engine based on three parameters:

  • Light/dark mode 🌗
  • Glassmorphism (glass effect) ⿻
  • Thematic colors 🎨

In practice, this means users can explore dozens of visual variations.

🎯 Small technical challenge

The theme is stored in a cookie so it can be applied as soon as the page loads. 👉 With server-side rendering, the state must already exist on the server during the initial render, and then continue on the client for interactions. This ensures a consistent display from the start, without any flash effect.

Note: visual stability (CLS) has a direct impact on perceived performance.

Performance and accessibility

Lighthouse score

Lighthouse score: 100/100 in Performance, Accessibility, Best Practices, and SEO.

These metrics reflect concrete decisions:

  • 📈 Maximizing reduction of client-side JavaScript thanks to Server Components, optimizing static assets and observers, pausing offscreen animations, etc.
  • 🧠 Semantic HTML, WCAG compliance, and contrast adjustments for each theme.

Internationalization

🌐 The portfolio is available in 4 languages: French, English, Dutch, and Russian.

Navigation is structured by locale, allowing search engines to properly index each version.

Architecture

A clear structure reduces cognitive load and makes future evolution easier.

This portfolio allowed me to practically explore how to organize a frontend project, especially the core/shared distinction and the feature-first approach.

Read the full breakdown

Iterative approach

This project was never meant to be “finished.” The git history shows it:

  • ♻️ Constant refactors
  • 🧩 Progressive UX improvements
  • 📝 Detail-oriented enhancements

This way of working (continuously improving rather than waiting for perfection) best reflects how I approach real-world projects.