🚀 Creative Toolbox: portfolio

Portfolio Website based on a parallell between a physical toolbox and creative skills. Throughout my journey, I've had so many diverse experiences that have led me to where I am - someone who's able to come up with creative concepts, design, code, and bring them to market. I didn't study a full computer science BSc but I can pull from my different experiences in a way that makes me more creative and driven. This is what this portfolio is all about.

The branding is very much me, where all the objects which I physically have in my house, are linked to an experience and have a meaning, whilst showcasing skills in 3D modeling, web animation, and interactive design - all hosted on Digipeasy.

📷 Camera 👉🏼 my 3D photography website

🇪🇺 Old European Investment Fund business card 👉🏼 my previous work and business background

🎹 Keyboard 👉🏼 my party planning website done in my coding bootcamp, Gather Go

🧵 Spool of thread 👉🏼 sewing, which is what sparked an interest in design, composition, along with several art related workshops I've done over the years

🎙️ Podcast microphone 👉🏼 the first time I've ever pitched anything - my own startup project, Surf the Job

📦 Technologies

• React Three Fiber
• Styled Components
• GSAP (GreenSock Animation Platform)
• React Draggable
• Matter JS (for physics-based interactions)
• Blender (for 3D model preparation)
• GLTF Loader (for 3D model integration)

🍿 Demo

Experience the interactive portfolio directly at Digipeasy Studio.

👩🏽‍🍳 The Process

From conceptualization to deployment, the project was a deep dive into 3D web technologies. Starting with modeling in Blender, each model was carefully prepared and optimized for web usage. React Three Fiber was instrumental in bringing these models to life within a React framework, with GSAP adding fluid animations. The project also explored the innovative use of physics with Matter JS, making the digital environment more engaging and realistic.

📚 What I Learned

This project was a substantial learning opportunity, covering:

• 3D Web Rendering: Leveraging React Three Fiber to integrate 3D models into a web environment.
• Animation and Physics: Using GSAP for smooth animations and Matter JS for physics interactions. Performance techniques in combining these.
• Interactive Design: Crafting an interactive experience that's both engaging and informative.

Visitors can explore a virtual space where objects can be interacted with — drag, drop, and watch them react to virtual physics. This interactive environment demonstrates skills in real-time 3D rendering, user interaction design, physics interactions and animation.

💭 Features in progress

• Mobile responsiveness and interaction alternatives for the toolbox 3D environment on mobile.
• Adding an About Me, Playground and Journal of Experiments sections.
• More interactive elements and animations to showcase additional skills.
• Performance improvements.

🚦 Running the Project

To experience the Creative Toolbox locally:

1. Clone the repository.
2. Execute npm install to fetch dependencies.
3. Run npm run dev to start the development server.
4. Open the provided local server URL (usually http://localhost:3000) in your web browser.

🎨 Credits

• Vitra's Drop Box 3D model

• Yeti Blue Microphone's 3D model

• Leica M6 3D model

• Font Monument Grotesk by Dinamo

  Any unmentioned assets, have been created by me from scratch.