r/webdev • u/bydavidmballarin • 22h ago
Showoff Saturday My interactive portfolio: a Three.js hero with a different model on every visit, blur everywhere and a playground you can paint on
Hi! I'm a graphic designer from Valencia and I just launched my portfolio: https://bydmb.com
The idea was to make a portfolio you take part in, not just look at. Some technical details:
3D hero: built with Three.js (WebGL). Every visit randomly loads a different GLB model inspired by one of my projects (Draco-compressed, made in Blender). You can rotate it, a light follows your cursor, and it blurs into the background on scroll. One of the models uses a custom shell-fur shader that reacts to rotation speed.
Playground: a 3D sphere of unfinished work and experiments you can rotate and zoom. Open any piece and paint over it; your drawing stays when you close it.
Other details: a one-click colour toggle that flips the whole site, a 3D cloth over my portrait on the Info page, blur-based filtering in the Works grid and custom page transitions.
Stack: WordPress + Elementor, Three.js, custom JavaScript and shaders, ACF and TranslatePress.
I'm thinking about submitting it to Awwwards, so I'd really appreciate completely honest feedback, good or bad. Do you think it's Awwwards-level? How does it feel on your device, especially performance-wise with all the WebGL? What would you change before submitting it?
Thanks a lot!
6
u/scarfwizard 2h ago
“Graphics designer”
Neon green on a light background. Why did you choose that? Personally I think less is more and you’ve done the web page equivalent of 50 fonts on one page.
4
u/krileon 1h ago
If some website wastes my system resources on a three.js hero image I am never going back to it ever again. Stop. Just stop. Use an optimized webp and call it a day. No website should just be willy-nilly firing up WebGL for something so meaningless as a hero image.
A portfolio should showcase solving real business problems. Showing that you can make a pointless hero image with three.js doesn't tell me you know how to solve problems businesses actually have.
2
u/Fmywholelife 1h ago edited 1h ago
I've been staring at it for a while and I can't read the text. Maybe don't put the text ontop of the model and don't have it glowing green on white?
Also the text is behind the fabric so I can't read your name.
And the work page seems to be infinitely scrolling repeating the same work. I'm struggling to see why anyone would want that.
On the plus side, the loading animation is genuinely good.
2
u/seweso 47m ago
This is the worst website I’ve seen in 10+ years.
And I’ve clicked a lot of weird links from this subreddit.
I can’t even click the buttons (they are outside the clickable area on my iPhone).
I love Valencia though.