How To Create An Immersive 3D Portfolio: Webflow, GSAP, ThreeJS
How do you make a worldie of a portfolio?
Hello you 3D curious beauty,
I have this theory that life is like a casserole dish and you choose how rich you want it to taste, how long you want to cook it for, the ingredients and what time they go in.
Why the deuce am I telling you this?
Because I firmly believe websites are the same - you choose what ingredients give you the desired flavour.
Colours, shapes, movement - these all combine to either give you a dish you detest or something that truly tastes other worldly.
And that, dear reader, is Mael Ruffini’s website:
In this newsletter, I’ll also tell you about Peachweb which I think will blow your cheesy socks off.
Ok, let’s cook!
How To Create An Immersive 3D Portfolio: Webflow, GSAP, ThreeJS
Maël Ruffini & Gaétan Pautler interview
You can of course watch this cheeky ep yourself but here’s a high level overview of a couple of chefs, Gaetan Pautler and Mael Ruffini, said about this perfectly cooked project:
Design
1) Inspo was given to Gaétan by Maël
The fun of a website like Toyfight.co and the 3D and movement of a site like Silencio.es. Maël said “Cook, my guy. Just cook,” (or words to that effect) and Gaetan obliged.
2) Mad Moodboarding
First, a mad moodboard was set up on figma. Screenshots from Instagram, Savee.it and beyond.
3) Finessing and tightening
Then, the finessing and ideating began as they narrowed in on a direction together.
4) Homepage cooked → Other pages
When a homepage had been established, Gaetan cooked on the other pages.
It’s worth saying that Gaétan’s approach is that you need to keep iterating.
“It has to be my favourite project ever. If you’re not super happy with it, you’re not done with the design to make it your favourite project. If you haven’t reached that point, keep iterating.”
Then, once the veg was chopped and chicken marinated, Maél took over.
Development
1) 3D
Maël had a hell of a job. Not only did he need to work out how to develop the site but also design and develop the 3D scenes in Blender.
5 different scenes!
2) Baking
To ensure fast load speed, he “baked,” the lighting in to the project. Check out info about that here
3) Three.Js
So, Maél compressed the file in Blender, exported the baked version, compressed again in photoshop and then hosted it on a local server using Node.js.
Then, he used Three.js to load the scene on his website (100vw, 100vh).
What’s sick about this method is that you can modify the Blender scene dynamically in Three.js.
More info on that here:
More inspo here on portfolio’s too.
5) Site development
Maél developed the site in node.js and then used Prismic for a headless CMS (project pages), Lenis scroll for the beautiful scroll effect and GSAP for the text animations.
Madness.
Some lessons here:
1) Put yourself in the way of difficult problems
Maël’s curiosity meant that he pushed and pulled with different tools to explore and play.
Mael said that if you’re not sick of a project by the end, you haven’t spent enough time developing it.
2) Don’t get your inspo from just other websites
Want an award winning website? Don’t just copy another award winning website.
3) Don’t follow the rules, break them
Want to use 10 different fonts? Do it. Explore.
4) Pick a lane
Designing and developing requires mad breadth of skillset. But focussing on either design OR dev makes you a master.
PeachWeb
Stop what you’re doing and click this link
Peachweb is madness and I really think it’s worth tinkering with.
You can design a 3D scene, animate the 3D scene following the camera movement and then add UI to bring this from an abstract scene to something alive for the web.
Oh, and it’s responsive and fast loading.
Ya bish.
Have a play here
Holy mackeral paté what a day to be alive.
Hope this email fires you up to get out there and make like it has done for me.
Let’s go!
Jack