A radical change

My 2021 portfolio was an opportunity for me to take on several challenges and to push my limits. The first portfolio I made was several years ago only to discover React and not to showcase my front-end development skills. For this portfolio, it was different, I liked several feature ideas and I wanted to implement them.

First of all I wanted a portfolio in dark mode because I liked it and I had been thinking about it for a while. I also wanted my portfolio to be as easy to use as possible and to access the information and my projects as easily as possible. I also saw the horizontal scroll on different sites and wanted to implement it on this one, using GSAP, it also allowed me to make some effects.

New portfolio, new idea

A base that I wanted to put in place

One of the features I wanted to implement on my site was horizontal scrolling. Moreover, I wanted to learn how to use GSAP so what better way than to learn with a goal. I was able to go deeper into this subject, by animating the different sections with scroll. For those who have the eye, I also added a skew according to the velocity of the scroll on the sections to bring more dynamism.

Linking the horizontal and vertical scroll (on the project page) was also another challenge I wanted to tackle and that I managed to implement. The different animations of the cursor, the fade-in, fade-out was also designed with the help of GSAP. The about page was totally designed using mostly CSS animations and attribute data to link the content according to the hovered section in JS. 

The horizontal scroll

My portfolio for the year 2021 was designed in html / css / js with Vite set up as a dev environment. It was my first personal project where I already had several challenges that I wanted to execute. I used GSAP to design the different animations.

Portfolio 2021

Many features available

As you browse the site you will be able to discover the different e-retailers / partner stores selling Cloudy Bay wines. It is also possible to follow the Instagram news of this site and choose the different wines according to the year. Another complexity of this site is the fact of dealing with the different markets, while displaying / hiding some elements according to the chosen market.

For those who are hesitant, it is possible to use the Wine Finder (produces one of the developers of ultranoir) which will allow you to choose the ideal wine according to the different criteria you give it. The purchase of wines is not done on the platform, it is connected to WineDirect which will allow you to buy the selected wines.

Some of the features

Cloudy Bay is an e-commerce website designed in React JS / Gatsby using Drupal as a back-office. This site is produced for a subsidiary of the Moet Hennesy group. You can buy different exceptional wines. It is also possible to book your place for the many events set up by Cloudy Bay, in their 2 different locations. I contributed to the development of this site during my internship at ultranoir with the different devs of the team.

Cloudy Bay

Ultranoir

A valued sacrifice

 At the time of our restitution we wished to put forward the various achievements by setting up an immersive site to the topic of the Eclipse. Through the navigation, on the main page, different explanations of our conception. A booklet is also available to present the different explanatory diagrams of our idea. Detailed darkprints are also present to explain each element, which is in the cabins and their utility. Finally, we have also put forward the interface that the martyr would face if he had to enter the cabin to sacrifice himself.

We have also presented the different 3D models in a classic way through a slider but we wanted to put them in front of us so that they could be visualized as well as possible. The product page presents in an immersive way all the elements of the cabin, be it the exterior, the interior or even our storage logic with the crematorium. Finally, in order not to forget the martyrs and to value them, we imagined a tower of martyrs where all the urns containing the ashes would be deposited, becoming a place of remembrance.

A unique design

Eclipse was born from a design fiction project where we imagined a dystopian future threatened by famine and overpopulation. To remedy this, the state sets up different capsules allowing people wishing to sacrifice themselves to reduce overpopulation and help their loved ones who would receive a sum of money according to the health and age of the person. These different capsules would be placed in various places in the city.

Eclipse

Ines

Robin

Valentin

A taste of Toronto

The Table Food Hall website is designed to provide visitors with a taste of Toronto’s culinary scene. The site features information about the different food vendors located in the hall, as well as details about the venue itself. The design is clean and modern, reflecting the vibrant and diverse food offerings available at the food hall.

The integration of Dato CMS allows for easy content management, enabling the client to update the site with new vendors, menus, and events as needed. The site also includes a blog section where visitors can learn more about the food hall and its vendors. The use of Nuxt.js ensures a fast and responsive user experience, making it easy for visitors to navigate the site and find the information they need.

A culinary experience

Table Food Hall is a food hall located in the heart of Toronto. The website is designed to showcase the different food vendors and provide visitors with information about the venue. The site is built using Nuxt.js, styled with Tailwind CSS, and integrates Dato as the CMS.