Clément

Corbin

Project goal ➡️ Create a stunning landing page for a luxury watch Expected features: ✅ Include a 3D model of the watch with realistic render ✅ Allow the user to change the colors of the dial and the bracelet ✅ Scroll-based animation ➡️ The page is done with React and TypeScript. I used the Three.js library, for 3D manipulation and rendering in the browser. React-Three-Fiber (R3F) is used as a bridge between Three.js & React. ➡️ Scroll animation is powered by Drei (also used for other useful abstractions in this project). When the user scrolls, we update the position of the camera, along with the position of a target object (not shown to the user) that the camera "looks at". ➡️ The hands of the watch are animated to keep in sync with the user's device time ➡️ Proper lighting and post-processing techniques are applied to improve the realism of the render ➡️ https://time.nibroc.fr/

Project goal ➡️ Automatically create a website from a collection of icons. The icons are available on the web from 3 different sources and get updates. When it happens, the website needs to be updated too. The website has to be SEO-optimized. Each icon is associated with metadata and is available in multiple versions (sizes, formats, dark/light mode). ➡️ Programmatically retrieve the icons from the providers and store them in a consistant way. This is done with a NodeJS script, periodically triggered and executed in a Github Action workflow. ➡️ A JSON file is generated from the icons file hierarchy. This JSON metadata is used to build the site. Each icon has a dedicated page and human-readable URL. Users can download each icon in a variety of formats, sizes, etc. Icons are organized by categories and subcategories. https://cloud-icons.onemodel.app/