Refined and immersive

The website offers a comprehensive overview of everything Courchevel has to offer: activities, accommodations, dining, and services. The design mirrors the sophistication of the destination itself, with a clean and elegant aesthetic that guides visitors through the region's highlights.

The Apidae API integration ensures that events, weather conditions, and local information are always current and accurate. Combined with Storyblok, the client has full editorial control over every aspect of the site, enabling seamless content updates without developer intervention.

A premium digital experience

Courchevel is one of the most prestigious alpine destinations, blending luxury with mountain adventure. The website is built with Next.js and Tailwind CSS, using Storyblok as the CMS and the Apidae API to deliver dynamic, real-time content about the resort and its surroundings.

Courchevel

A rich, multi-faceted platform

The site connects visitors with e-retailers and partner stores carrying Cloudy Bay wines. Users can browse vintages by year and follow the brand's latest news via Instagram integration. A key technical challenge was managing multiple markets, dynamically showing or hiding content depending on the user's selected region.

For undecided visitors, the Wine Finder, developed by one of Ultranoir's engineers, recommends the ideal bottle based on personal preferences. Purchases are handled externally through WineDirect, keeping the platform focused on discovery and brand experience.

Key features

Cloudy Bay is an e-commerce platform built with Gatsby and Drupal for a subsidiary of the Moet Hennessy group. The site showcases their premium wine collection, allows event bookings across two locations, and handles multi-market content delivery. I contributed to its development during my internship at Ultranoir.

Cloudy Bay

Ultranoir

An intuitive and scalable workflow

Once connected to a Notion account, the back-office displays all authorized workspaces. Users can browse their pages and blocks, then customize the styling: colors, fonts, and layout are all adjustable. The configuration is managed through React Context and persisted in the database, which generates the corresponding static site.

The workflow is straightforward: create a page in Notion, fill it with content blocks (callouts, images, text), and Selfer pulls everything through the Notion API. From there, users can fine-tune their content in the app and publish their static site with a single action.

Easy and customizable

A clean</br>two-layer structure

The back-end is built with Symfony backed by a MySQL database. API routes handle all communication with the front-end. Incoming data is validated and sanitized before being persisted, ensuring only expected content reaches the database.

The front-end uses React with TypeScript, a natural choice given the variety of content types being manipulated. Data is fetched through the API routes and managed via multiple React Contexts, which are shared and updated across components to keep the state consistent throughout the application.

Code architecture

Selfer is a CMS-like web application powered by the Notion API. Built with React and TypeScript on the front-end and Symfony on the back-end, it allows users to generate and publish static websites directly from their Notion workspaces. The entire project was developed in just 10 days.

Selfer App

Valentin

Robin

A cloud-native architecture on Firestore

The project is structured around two interconnected layers. The back-end relies entirely on Firestore, with a GraphQL playground powered by Apollo to streamline data operations. Each entity follows a well-defined schema, ensuring clean communication with the front-end. All queries are ID-based, enabling a fully dynamic application.

The back-end logic is split into two distinct parts: queries and mutations. Queries handle all read operations, fetching users, posts, and related content from the database. Mutations manage data updates, allowing users to modify their profile information and interact with the platform in real time.

Building the back-end

Seamless on both iOS and Android

To ensure cross-platform compatibility, we built the front-end with Expo. Before connecting the back-end, we designed a local JSON structure mirroring the API schema, allowing both teams to work in parallel. Data is fetched through GraphQL queries targeting specific elements by ID, and navigation between tabs follows the same dynamic pattern, passing parameters to load the corresponding content.

Map pins are rendered using React Native's MapView and Marker components. When a user submits a report and grants location access, their coordinates are captured via a custom useLocation hook and stored in the database. Each existing report is then plotted on the map by retrieving its latitude, longitude, and content. Users can also photograph the reported issue using expo-camera, with access to both front and rear cameras upon permission.

A cross-platform front-end

Vis ma ville is a civic mobile application that empowers citizens to report infrastructure damage and safety concerns in public spaces. By connecting an entire community, it enables residents to actively contribute to improving their city's daily life.

Vis ma ville

Toronto's food scene, online

The website captures the energy and diversity of Table Food Hall's culinary offerings. Each vendor is presented with dedicated content, alongside practical details about the venue. The design is modern and approachable, reflecting the lively atmosphere of the hall itself.

Dato CMS gives the client full autonomy over content updates, from adding new vendors and menus to promoting upcoming events. A blog section offers deeper stories about the food hall and its community. Nuxt.js powers a fast, responsive experience that keeps navigation smooth and intuitive across all devices.

A culinary showcase

Table Food Hall is a vibrant food destination in the heart of Toronto. The website highlights the diverse roster of food vendors and provides visitors with everything they need to plan their visit. Built with Nuxt.js and Tailwind CSS, it uses Dato CMS for content management.

Table food Hall

A fresh creative direction

This portfolio marked a turning point in my approach to personal projects. Unlike my first attempt years prior, which was more of an experiment with React, this one was built with a clear intention: to showcase my front-end capabilities through deliberate design and interaction choices.

A dark mode aesthetic was a priority from the start, paired with an emphasis on usability, making projects and information instantly accessible. The horizontal scroll pattern, inspired by various creative websites, became the backbone of the navigation and allowed me to explore GSAP in depth.

New portfolio, new vision

A core interaction pattern

Implementing horizontal scrolling was both a design goal and a learning opportunity with GSAP. I dove deep into scroll-driven animations, triggering transitions for each section as the user navigates. A subtle skew effect tied to scroll velocity adds an extra layer of dynamism to the experience.

Bridging horizontal and vertical scroll on the project pages was another technical challenge I tackled successfully. Cursor animations, fade-in and fade-out transitions were all orchestrated through GSAP. The about page relies primarily on CSS animations combined with data attributes to dynamically link content to the hovered section.

Horizontal scrolling

My 2021 portfolio was built with HTML, CSS and JavaScript using Vite as a development environment. It served as a personal playground to push my front-end skills further, with GSAP powering all the animations throughout the site.

Portfolio 2021

Where fiction meets interaction

To present our concept, we designed an immersive website that walks visitors through the Eclipse universe. The main page introduces the project's narrative, while a digital booklet details the explanatory diagrams behind our vision. Darkprints break down each cabin component and its purpose, and a dedicated interface simulates the experience a volunteer would face upon entering.

The 3D models are showcased both in a traditional slider and through an immersive product page that explores the cabin in detail: exterior, interior, and the crematorium storage system. As a tribute to the volunteers, we also imagined a memorial tower where urns containing their ashes would be gathered, turning the space into a place of remembrance.

An immersive narrative

Eclipse is a design fiction project set in a dystopian future threatened by famine and overpopulation. To address the crisis, the state deploys sacrifice capsules throughout the city, where volunteers can give their lives in exchange for financial compensation for their families, calculated based on health and age.

Eclipse

An immersive narrative
Eclipse
Eclipse

Where fiction meets interaction

More projects