How Can I Create a Stunning Portfolio Website Like This?

0
4
Asked By CreativePixie42 On

I'm a beginner and I'm really interested in creating a website similar to this one: https://beanlette.net/. I find it fascinating how such websites are made, and I'm looking for guidance on what programs or techniques I should use to get started. Any tips on how to begin would be greatly appreciated!

5 Answers

Answered By PixelWiz123 On

For the technical side, it looks like they used TypeScript, CSS, and GLSL, with Vite to build it all. If you want those interactive visuals, learning about WebGL and GLSL would be super helpful. Libraries like Three.js and PixiJS can really simplify the process!

Answered By 3DCreatorX On

I’ve worked on similar projects using a 3D JavaScript library called Three.js. If you’re unsure about the tools they used, you can check out Builtwith.com. It may not always show everything, but it’s a good starting point to understand the tech behind it.

Answered By TechieBloke87 On

It’s definitely possible! What you’re seeing is a digital artist’s portfolio, and it looks like they may have built everything from scratch. If you want to create something like this, I suggest you take it apart piece by piece and search for tutorials on how to achieve specific features using CSS and JavaScript.

Answered By VisualSeeker99 On

That site is impressive! It seems like they used a depth map along with a standard photo to create a depth effect as the mouse moves. You might want to look into how depth maps work for a similar effect.

Answered By CodeExplorer22 On

Viewing it on my phone, I noticed it seems like there's an overlay effect with interactive clickable items. The underlying image moves at a slower rate to give a staggered illusion, which is quite cool! You could achieve this with JavaScript, perhaps using GSAP for animations. It definitely has a unique pixelated effect, too.

Related Questions

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.