Personal 3D Portfolio

Hi! I’ve just launched a new version of my portfolio. Feel free to check it out at sector32.net

Made with the brilliant ThreeJS library, obviously. Also: React, 3RF, Drei and the GSAP library.

I started using ThreeJS professionally about two years ago. I’m doing WebGL projects full time now. Most fun I ever had in my career. Hope I can do it for many years coming.

21 Likes

It looks like there are a lot of visual effects (and technical skills) packed in this portfolio.

1 Like

wow @Piet ! its really nice work done here, I like the main element (skull) and laser beams :slight_smile:
and the decorations on the corners - amazing details !!

By the way, how did you achieve the text change effect that is applied to the buttons, I’m curious ???

1 Like

Hi! Thank you. The text effect is done with some JavaScript. I can send you the code if you want.

1 Like

Yes ! please , send it over :slight_smile:

wo, it’s so cool , amazing

1 Like

The aesthetic is cool and shows off your skills well. One thing I really think you need to work on, though, is the scroll action. It feels sluggish, and it takes too long to scroll between sections. In my opinion, the scroll action should have inertia for a site like this. In other words, it should decelerate, not stop immediately, when you stop scrolling.

1 Like

Oh man, incredible portfolio.

As the previous poster mentioned, and as a constructive criticism, the only thing I have a problem with is the scroll.

Maybe it’s not your case, but I use Windows in desktop with a physical mouse (want to point this out because maybe you use MacOS with a touchpad mouse), and I have to REALLY roll and roll my mouse wheel a lot to make the scroll advance just a little bit.

For me if you manage to fix that issue the portfolio is perfect for what I think you wanted to pull out, maybe just detect the OS or input device and parametrize how the scroll works to make it slower/faster.

As I said, apart from what I mentioned, I find the website AMAZING

1 Like

There are many ways to achieve the effect. This is by no means perfect code, but it gets the job done:

const changeText = (upperCase) => {
    clearInterval(intervalId.current);

    let keys = [...Array(label.length).keys()];
    keys = keys.sort(() => Math.random() - 0.5);

    let intervalIndex = 0;
    const loops = 2;
    intervalId.current = setInterval(() => {
      if (intervalIndex < keys.length * loops) {
        const loop = Math.ceil((intervalIndex + 1) / keys.length);
        const key = keys[intervalIndex % keys.length];

        if (loop != loops) {
          const char = Math.random().toString(36).substring(4, 5).toUpperCase();
          labelArray.current[key] = char;
        } else if (upperCase) {
          labelArray.current[key] = label.charAt(key).toUpperCase();
        } else {
          labelArray.current[key] = label.charAt(key);
        }

        element.current.innerHTML = labelArray.current.join('');

        intervalIndex++;
      } else {
        clearInterval(intervalId.current);
      }
    }, 35);
  };

You can find a lot of similer effects on CodePen.

2 Likes

Hi! Thank you for the comments. That is a great point, I actually never tested the site with a physical mouse. I will look into that. Thanks again!

2 Likes

Wonderful portfolio I have ever seen. I want to work with you.
I am now facing very simple problem. I think you can fix this in an hour.
Do you have some experience in rendering 3d model in React Native Expo?
It is the trouble I have now. Just rendering 3D model and Implementing functinos like OrbitControl is what I want.
I will pay for your work. If you are interested in my project, please let me know.
This is my skype id. “live:.cid.b64830812c410bb4”
This is my Gmail. “softdrink1991@gmail.com

this is CRAZY. desperately needs smooth scrolling tho

2 Likes

I love that cyberpunk vibe

1 Like

You should send a message in private instead of posting your personal data here I think.

When you press on his profile picture, you can see a button saying “Message”.

1 Like

Thanks for the feedback. I’ve tweaked the scroll settings a bit. You don’t need to scroll as much anymore.

Hi. Sorry, I didn’t see your message before. Do you still need help?You can send me a PM.

PS: No, I don’t have experience with React native Expo.

This is excellent!

if you are still having trouble with it I can help you.