🧑💻 In today's Developer Spotlight, Quentin Hocde shares his passion for creative coding, animations, and interactive experiences. Check out his journey and projects!
Read it here: /codrops/?p=85060
#webdeveloper #developerspotlight
coutumes.com
New project ✨
Coutumes with @indexstd
Built with our handcrafted Shopify theme, I had the opportunity to developed this project with Jean-Christophe Suzanne 🤝
quentinhocde.com - v26.0
A few months ago, I started an online design course by @louispaquet83 called « Innovative Web Design in Figma: A Step-by-Step Process ».
I wanted to follow the full process of creating a website, from the very first idea to the final result.
Before that, I usually designed a few quick screens in Figma and jumped almost immediately into code. This time, I wanted to slow down, learn new things, and better understand modern design workflows in Figma (even as a developer it was super useful).
As an exercise, I decided to redesign and develop my own website (what a surprise), and the result is now live: quentinhocde.com
Decathlon Lifestyle 🔵
https://decathlonlifestyle.index.studio
Another great project made with @indexstd 🤟
Colorful collection for everyday life by Decathlon. I had a lot of fun playing with the UI and following cool motion concepts.
#frontend #webdesign #webdev #javascript #css #motiondesign #userinterface #visualdesign #interactiondesign #webdevelopment #cssanimation #webdesigninspiration #javascriptanimation #developer #coding #creativecoding #microinteractions #uianimation
My first Shopify website is out - templier.com
Modernist and Art Deco jewelry by Raymond Templier.
Made with @indexstd
I really enjoyed working on this project, it was really rewarding to launch an e-commerce site.
Promotional motion by @philippeneveu
New microsite for @elevabzh - eleva.bzh
A fun little project made with friends ⬇️⬇️
Design & Art Direction : @maelanlemeur
3D : @inprocessstudio
Dev : 🙋♂️
#frontend #webdesign #webdev #javascript #css #motiondesign #userinterface #visualdesign #interactiondesign #webdevelopment #cssanimation #webdesigninspiration #javascriptanimation #developer #coding #creativecoding #microinteractions #uianimation
goodroads.agency/fr
Exciting new project with @indexstd 🔥(dev insights below)
Introducing goodroads: Discover France by motorcycle with custom-designed routes
Thrilled to have worked on this project with the best team and with stunning videos and photos content.
My biggest dev challenge? Developing a custom map (built with mapbox) to display all points of interest 📍with some cool creative effects (like clouds made with a custom shader ☁️)
#frontend #webdesign #webdev #javascript #css #motiondesign #userinterface #visualdesign #interactiondesign #webdevelopment #cssanimation #webdesigninspiration #javascriptanimation #developer #coding #creativecoding #microinteractions #uianimation
[FOCUS] - 3D section on design.cash.app
One of the funniest part to code, fully crafted with CSS 3D and transparent background videos.
Transition build with the Flip plugin from @gsap_greensock
Made with @indexstd and Cash App
#frontend #webdesign #webdev #javascript #css #motiondesign #userinterface #visualdesign #interactiondesign #webdevelopment #cssanimation #webdesigninspiration #javascriptanimation #developer #coding #creativecoding #microinteractions #uianimation
New project 🚨 design.cash.app
Excited to unveil my latest project with @indexstd and Cash App 🔥
[tech part below]
I had the opportunity to develop 6 custom, draggable and scrollable navigation systems to showcase Cash App’s visual assets. The infinite grid with physics-based interactions was particularly challenging and rewarding to build.
Thrilled with the result and can’t wait for users to experience it 👀
[tech part 🔨]
For this project, I used:
- piecesjs 🧩 → A tiny JS framework to manage web components
- Astro → For data fetching and static site generation
- @gsap_greensock → Everywhere ✨ All navigations are timeline-based, dynamically linked to scroll & drag—giving me full creative control over every interaction 🧈
#frontend #webdesign #webdev #javascript #css #motiondesign #userinterface #visualdesign #interactiondesign #webdevelopment #cssanimation #webdesigninspiration #javascriptanimation #developer #coding #creativecoding #microinteractions #uianimation
Nouvelle collaboration : magicstreet.be
Pour ce projet, nous avons une fois de plus uni nos forces ! Maëlan a pris en charge la direction artistique, en créant une interface minimaliste qui met en lumière les œuvres de l’artiste numérique bruxellois Antoine Goldschmidt. Quentin s’est chargé du développement, intégrant des animations subtiles pour une expérience de navigation immersive.
Développement — @quentin_internet
Design — @maelanlemeur
Artiste — @ant.gold / @magicstreetstudio
Update here ➡️ quentinhocde.com
[Folio 2024]
It’s a better reflection of my work as a creative developer, specializing in interactive projects with dynamic UI and animated typography.
More straightforward, with clear previews of the projects I’ve developed.
#frontend #interactive #layoutdesign #fonts #uxdesign #fonts #typographydesign #gsap #greensock #webdesign #webdevelopment #graphicdesign #designinspiration #designfeed #javascript #graphicdesignuiweb #uitrends
We created a clean, smooth and user-friendly portfolio website for Héloïse Thibodeau Architecte. The goal was to let the stunning projects shine without any unnecessary distractions. So we focused on creating an experience as smooth, elegant and easy to navigate as possible.
Check it out → htarchitecte.com
![[FOCUS] - 3D section on design.cash.appOne of the funniest part to code, fully crafted with CSS 3D and transparent background videos.Transition build with the Flip plugin from @gsap_greensockMade with @indexstd and Cash App#frontend #webdesign #webdev #javascript #css #motiondesign #userinterface #visualdesign #interactiondesign #webdevelopment #cssanimation #webdesigninspiration #javascriptanimation #developer #coding #creativecoding #microinteractions #uianimation](https://sp1.picnob.com/p/pt_6751503339671438432611_0_9d048289fff836dc5091721e250ad0ba.jpg?o=aHR0cHM6Ly9zY29udGVudC1vcmQ1LTIuY2RuaW5zdGFncmFtLmNvbS92L3Q1MS4yODg1LTE1LzQ4NTUwMjYyNF8xODAwMTU0OTk1ODc2MDE3OV81NTYzOTMxMTUwNDgzNDI1MzY1X24uanBnP3N0cD1jMC45MC43MjAuNzIwYV9kc3QtanBnX2UxNV9zNjQweDY0MF90dDYmX25jX2h0PXNjb250ZW50LW9yZDUtMi5jZG5pbnN0YWdyYW0uY29tJl9uY19jYXQ9MTExJl9uY19vYz1RNmNaMmdGWmkxM2NRNzRmcW94ZUtwZXRUYUtmMWxGUDJobU5WcVRtNzRLOE9CU1ZjWUJEZGRlMDMxaHFtaEpGQ3FDa2diU2E5Umt4bVVyUE1neFh2TW9HRk0tcCZfbmNfb2hjPWpoaTkzeWJXRG9NUTdrTnZ3RTlPazRGJl9uY19naWQ9SW51SnREMkk5LTg4OFB5OXNCQTF4dyZlZG09QVBVODlGQUJBQUFBJmNjYj03LTUmb2g9MDBfQWY3anJsendrTW1oZHVQRDF3bFpTd3Vpb214OWxmeEh1VjFXVlBMTXR0bmk5QSZvZT02QTExNDVGQiZfbmNfc2lkPWJjMGMyYw==&h=376019f47e6943bab5c4412f623304c2)
![New project design.cash.appExcited to unveil my latest project with @indexstd and Cash App [tech part below]I had the opportunity to develop 6 custom, draggable and scrollable navigation systems to showcase Cash App’s visual assets. The infinite grid with physics-based interactions was particularly challenging and rewarding to build.Thrilled with the result and can’t wait for users to experience it [tech part ]For this project, I used:- piecesjs → A tiny JS framework to manage web components- Astro → For data fetching and static site generation- @gsap_greensock → Everywhere All navigations are timeline-based, dynamically linked to scroll & drag—giving me full creative control over every interaction #frontend #webdesign #webdev #javascript #css #motiondesign #userinterface #visualdesign #interactiondesign #webdevelopment #cssanimation #webdesigninspiration #javascriptanimation #developer #coding #creativecoding #microinteractions #uianimation](https://sp1.picnob.com/p/pt_6745154143256638684846_0_7a0026e0cbc868352f69cc8b4dfac64b.jpg?o=aHR0cHM6Ly9zY29udGVudC1vcmQ1LTIuY2RuaW5zdGFncmFtLmNvbS92L3Q1MS4yODg1LTE1LzQ3MjYyNTk5OF8xNzk5ODk2Mzk3Mzc2MDE3OV84ODQ4MTQ2MTczNDE2ODI3MTY5X24uanBnP3N0cD1jMC45MC43MjAuNzIwYV9kc3QtanBnX2UxNV9zNjQweDY0MF90dDYmX25jX2h0PXNjb250ZW50LW9yZDUtMi5jZG5pbnN0YWdyYW0uY29tJl9uY19jYXQ9MTExJl9uY19vYz1RNmNaMmdGWmkxM2NRNzRmcW94ZUtwZXRUYUtmMWxGUDJobU5WcVRtNzRLOE9CU1ZjWUJEZGRlMDMxaHFtaEpGQ3FDa2diU2E5Umt4bVVyUE1neFh2TW9HRk0tcCZfbmNfb2hjPVVuX1J0RkYxUVg0UTdrTnZ3R004dzcwJl9uY19naWQ9SW51SnREMkk5LTg4OFB5OXNCQTF4dyZlZG09QVBVODlGQUJBQUFBJmNjYj03LTUmb2g9MDBfQWY0WHhDTF9NOU5XR2M3ODN4dkphV0pVWnktVUhSUGVNelBjdGlkdy1TdzZSUSZvZT02QTExNUFFNyZfbmNfc2lkPWJjMGMyYw==&h=2cf4a0e44ff50c83ea3a4a0651776bc9)
![Update here ️ quentinhocde.com[Folio 2024]It’s a better reflection of my work as a creative developer, specializing in interactive projects with dynamic UI and animated typography.More straightforward, with clear previews of the projects I’ve developed.#frontend #interactive #layoutdesign #fonts #uxdesign #fonts #typographydesign #gsap #greensock #webdesign #webdevelopment #graphicdesign #designinspiration #designfeed #javascript #graphicdesignuiweb #uitrends](https://sp1.picnob.com/p/pt_6773127122595668545463_0_0ee21ddd0e7bf394b7ff299a62d79fa4.jpg?o=aHR0cHM6Ly9zY29udGVudC1vcmQ1LTMuY2RuaW5zdGFncmFtLmNvbS92L3Q1MS43MTg3OC0xNS82MjI1ODQ3NTBfODg2MjY3OTgwOTY2OTgyXzMxNjIzODA2OTU3OTI4Mzg2MzVfbi5qcGc/c3RwPWRzdC1qcGdfZTE1X3M2NDB4NjQwX3R0NiZfbmNfaHQ9c2NvbnRlbnQtb3JkNS0zLmNkbmluc3RhZ3JhbS5jb20mX25jX2NhdD0xMTAmX25jX29jPVE2Y1oyZ0ZaaTEzY1E3NGZxb3hlS3BldFRhS2YxbEZQMmhtTlZxVG03NEs4T0JTVmNZQkRkZGUwMzFocW1oSkZDcUNrZ2JTYTlSa3htVXJQTWd4WHZNb0dGTS1wJl9uY19vaGM9clpVZ2JhWWpUMnNRN2tOdndGcFR4YUkmX25jX2dpZD1JbnVKdEQySTktODg4UHk5c0JBMXh3JmVkbT1BUFU4OUZBQkFBQUEmY2NiPTctNSZvaD0wMF9BZjdnMHdwWkJXNFRKc21PZ0YtN0hadWZuMWRIMlRpNUg0WUQxOG91VWtCMVdnJm9lPTZBMTE1NTM2Jl9uY19zaWQ9YmMwYzJj&h=8b1039b7644df757b570e2878cea335d)
