The Journey of Creating a 3D Portfolio

In this behind-the-scenes, Merouane Bali takes us through the journey of creating his portfolio project—a 3D web design that blends interactive experiences with user engagement. He shares the challenges he faced, the creative decisions that shaped the project, and the solutions he implemented, to craft an engaging and functional experience.

Building My Portfolio: A Journey in 3D Design and Development

Creating a portfolio is no small task. It’s your first impression, your digital handshake, and an opportunity to tell your story and create an experience. When I set out to rebuild mine, I wanted it to stand out, not just visually but also in how it engages visitors.

This project has been an exciting mix of creativity and problem-solving, combining 3D design and interactive elements to create something I’m genuinely proud of. While it’s farm from being perfect, it’s quite rewarding, as every step of the process has been a chance to learn and push my limits as a developer.

In this article, I’ll walk you through the general process, share what went right (and what didn’t), and give you a peek behind the scenes.

The Desktop Experience: Where 3D Meets Interaction

When I started brainstorming the desktop version, I had one goal: to make the experience memorable. I didn’t want visitors to scroll through to find what they’re looking for. Instead, I wanted them to feel like they were stepping into something unique, a little world that reflected my character.

The result? An interactive 3D scene designed in Blender and built with Three.js. Visitors can explore the environment, click on elements, and transition from one section to another as they please. But creating a “wow” factor wasn’t enough. I spent a lot of time thinking about usability, making sure the interactions felt natural and that the 3D environment didn’t get in the way of the content. Especially for people who are not so tech savvy.

Was it challenging? Oh, absolutely. But watching it come to life made the long hours and countless revisions worth it.

Adapting for Mobile: Keeping It Fun, Keeping It Simple

If desktop was all about immersion, mobile was about balance. Let’s face it: 3D experiences can be tricky on smaller screens, especially when you factor in performance, unstable mobile networks, and the limited screen real-estate. So, I took a step back and focused on creating something lighter but still engaging.

The mobile version features an interactive header with a 3D model that visitors can play with, but the rest of the site uses a more traditional layout, powered by some interesting React components, helping me craft a design that felt tailored to mobile without compromising on performance or clarity.

Connecting WebGL and the Layout for Seamless Interaction

One of the more intriguing challenges of this project was ensuring that the WebGL scene and the website layout could work together as one cohesive unit. Unlike standard web elements, a WebGL scene doesn’t natively interact with HTML. This separation required an innovative solution to synchronize the 3D environment with user interactions on the page.

To solve this, I relied on React’s Context API to create a communication bridge between the WebGL scene and the rest of the website. I built a custom context provider and consumer, enabling real-time data exchange and interaction between the two layers. This approach allowed users to control aspects of the 3D scene directly from the website layout, such changing the render quality, toggling sound effects, or interacting with some elements.

import React, { createContext, useContext, useState } from 'react';

// Create Context
const SharedStateContext = createContext();

export const SharedStateProvider = ({ children }) => {
  const [isInScene, setIsInScene] = useState(true); // Example: track if user is in the scene

  const leaveScene = () => setIsInScene(false); // Example: exit WebGL scene

  return (
    <SharedStateContext.Provider value={{ isInScene, leaveScene }}>
      {children}
    </SharedStateContext.Provider>
  );
};

// Custom Hook
export const useSharedState = () => useContext(SharedStateContext);

// App Component
export const App = () => (
  <SharedStateProvider>
    <WebGLScene />
    <WebsiteLayout />
  </SharedStateProvider>
);

// Example WebGL Component
const WebGLScene = () => {
  const { isInScene } = useSharedState();
  return isInScene ? <canvas id="webgl-canvas"></canvas> : null;
};

// Example Website Layout
const WebsiteLayout = () => {
  const { isInScene, leaveScene } = useSharedState();
  return (
    <div>
      {isInScene ? (
        <button onClick={leaveScene}>Exit Scene</button>
      ) : (
        <p>You are now out of the WebGL scene!</p>
      )}
    </div>
  );
};

The Challenges (and Some Wins)

Like any project, this one came with its fair share of hiccups:

• Optimizing for Performance: Getting the 3D models to load quickly and run smoothly was an uphill battle. I had to experiment with textures, reduce file sizes, compression, and make sure the animations didn’t hog too many resources.
• Translating Ideas into Code: The jump from designing in Blender to implementing in Three.js wasn’t as smooth as I’d hoped. Things didn’t look exactly or perform the same at first, so I did a lot of debugging, tweaking settings, and making compromises to get things just right. But these challenges were also opportunities to grow. Each roadblock pushed me to learn something new or find a better solution, and that’s what made the process rewarding.
• UI/UX Balance: Finding the right balance between creative design and functional usability was a key challenge. The 3D experience had to be immersive but also serve its purpose as a portfolio. so I had to refine the interface by simplifying animations and adding subtle cues to guide navigation without overwhelming users or distracting from the core content.

Wrapping It Up

This portfolio isn’t perfect, and it’s not supposed to be. It’s a reflection of where I am right now—what I’ve learned, what I’m still figuring out, and where I want to go.

Building it reminded me that design and development are as much about problem-solving as they are about creativity. And honestly? I had a lot of fun bringing it all together.

If you’re curious about the code, want to see more behind-the-scenes details, or just have feedback, I’d love to hear from you. This project isn’t just about showcasing my work—it’s also about connecting with others who share the same passion for creating.