Personal Portfolio Site

Hello all,
It is still a work in progress but for my first threejs project I am very proud. I am open to criticism or feedback for any problems you encounter.

The site consist of several modular panels that each contain an interactive scene upon scrolling in. Currently there is only a desktop variation.

my Site

Edit:
an arrow has been added on main page to hint at scrolling down
clouds have been changed to white

5 Likes

Wow, what a creative website design!

1 Like

thank ya :slight_smile:

Maybe it looks great, but somehow I think I cannot view it on my machine – I see no panels, just one sentence of text and a rotating globe. Mouse motion moves slightly the globe. And that’s all. Clicking does nothing. There is a Three.js error message in the console.

From what I see, the globe has two strange things:

  • due to the wide camera angle, the globe is distorted and looks like an ellipsoid
  • continents and clouds are the same color and it is slightly like an optical illusion, sometimes my brain assumes the clouds are below the continents

have you attempted scrolling down?
I will add an arrow to make that more obvious if that is the problem
although the flatness of the globe’s colors was a stylistic choice I see what you mean and ill look into differentiating it
thank you for your feedback!

1 Like

I see, thanks. Scrolling is only available with repetitive use of the wheel. Usually I do long scrolls by clicking the wheel and then just mouse move.

Now I can see the rest of the site.

I liked the retro style (the duotone and the cartoonish appearance) and the concept of scrolling into panels. Here are a few suggestions:

  • make scrolling less physically intensive (people with pain in finger joints will thank you for this), or add alternative ways of scrolling (e.g. with keyboard, with scrollbar, with single mouse click)
  • the texts need antialiasing
  • the actual shape of the red car is hard to see, shaded surfaces will solve this, but they might contradict your style. What about a few black (or white) edges along the main features of the car?
  • when going in the maze, I can see a hint to use the arrow keys, but nothing happens when I press them
  • sometimes hovering over the panels makes the camera jump. I’m not sure whether this is intended or not (see at mark 0:10-:011 – the panel jumps away from the cursor when it enters it):

this is really great feedback!

I think several of the problems can be solved with a little bit of scroll hijacking to snap to the furthest zoomed out and the furthest zoomed in.

I also agree it needs alternative ways to maneuver. ill make it responsive to different intuitive keys and maybe also add some kind of button. this may also help in getting the mobile version up and running.

my assumption is that for the platformer level it may not have been fully scrolled in because the controls arent enabled until it is all the way in. which again will be solved with it easing in when it is close to fully zoomed in.

the jumping happens when it isnt all the way scrolled out so that can either be solved with scroll hijacking or I can smooth the changing of centerpoints, ill do some experimenting.

I love the idea of stylizing the car. that was on the todo list at one point but mustve been lost along the way haha.

and antialiasing the text should be a pretty quick fix!
thanks again!

1 Like

Definitely one of the best portfolios I’ve ever seen

the site is great, but i do notice some pretty heavy frame skip, and my laptop is a maxed out m1. i think it won’t be viewable on most machines tbh.

the culprit is setSize’ing the canvas, and most likely also using multiple canvas.


ideally you have one single canvas, it is always fullscreen, but multiple views are skissor cut which has no overhead and allows you to zoom and stretch as you like, you can also share geometries and materials that way.

here’s an example

and there’s one in three-examples as well three.js examples

Welcome fellow Jayhawk to three.js!