- 3D Models & Animations:
three.js - Frontend:
Tailwind CSS,Next.js - Design:
Figma
I'm tired of every development portfolio being a dark-mode website (I am guilty of this), so I wanted to somehow incorporate a modern / experimental design into my new portfolio, but have it in light mode (and use as much white as possible).
I began studying grid layouts in design and wanted to only use rounded corners with images, and lock everything else off within a grid with 1px borders.
But with this - there was too little going on when the user first entered the site - i was greeting users with a white background, which made me consider challenge myself to implement 3D graphics into the hero section on the website. I spent some time looking for 3D models that fit my vision to begin with until I found <AsciiRenderer> in react-three-fiber/drei.
This ascii look was perfect for what i was looking for, and I found this model of a grid-like fence with a chrome texture. I thought this would be perfect and would make an interesting display to the user.
Now I had finalised on the 3D Model I would use, i incorporated this into my hero section.