My New Personal Portfolio Website ✨

Showcase
, , ,
1

Hi everyone,

I’ve always wanted to create cool and immersive 3D websites, and I’ve been learning threejs the past few years. Check out my portfolio and tell me what you guys think!

image
image1920×934 70.6 KB

5 Likes
2

Really good job! Love how the loading screen smoothly turns into the 3d blob.

This seems like a cross of a individual portfolio site and an agency portfolio site, which is a bit confusing imo. So e.g. for a personal website I’d expect to find out your name somewhere on the site, but I couldn’t find it (just says “Arkon Digital” everywhere, but all the text is written from a first person perspective).

Some small thing I’d also love is some small interaction on the main page apart from the slight camera movement, like being able to rotate the blob using the mouse (yes, completely “unnecessary” but would be fun :smiley:).

2 Likes
3

That’s really nicely executed.

1 Like
4

Thanks for the detailed reply! I didn’t know it would be confusing but now I get it, thanks for the reminder.

For rotating the blob thing, it’s actually undesirable for my case as it only looks best on the front…it’s a shader I really like but I cannot get it to look good on all sides lol.

5

I really like it.
Is there any chance you can share the source code. I would love to explore as i am still learning.
Thanks

6

Thanks man! @Haseeb_Iqbal Sorry though I couldn’t share the source code as I consider that private and copyrighted, but I can share my development process, which I’ve written on Medium. Have a read if you’re interested! Building my Personal Three.js Portfolio | by Franky Hung | Oct, 2024 | Medium

7

Assuming you’re using a SphereGeometry and your shader uses the UVs from the sphere, you could switch to using the position attribute as UV instead - that approach should get rid of any seams.

Something like this:

vertex shader


varying vec2 posUV;
...
void main(){
...
  posUV = position.xy;
...
}

fragment shader


varying vec2 posUV;
...
void main(){
...
// use posUV instead of uv for your calculations
...
}
8

Yes, that’s a sensible way to do and in fact I’m employing a similar idea. It’s not the issue about seams, it’s the issue of seeing a mirrored pattern on the SphereGeometry as the user turn the sphere around.

One way out is to make a pattern that takes a 3D vector as input(thus no mirrored pattern), however I didn’t have the time to devise a way for that while keeping the same output pattern on the sphere surface.