Create a Stunning 3D Animated Portfolio Website with Next.js 14, Three.js, GSAP, and Prismic

By the end of this course, you'll have a stunning portfolio site that looks amazing with all the cool effects and styles and showcases your projects and skills in an engaging way. Get ready to impress everyone with your new, eye-catching online presence!

---

As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.

--

📍 Chapters
00:00 Intro
04:16 Getting Started - Project setup
27:29 Creating the Hero
32:12 Hero letters animation
01:00:00 Helper Component
01:40:01 Adding sound effects
01:45:08 Nav Bar
02:03:03 About Page
02:40:27 Tech List (Marquee Title)
03:03:05 Hover and Scroll Animations
04:47:15 Job Experience Slice
04:51:37 Deployment on Vercel

[TrostCodes]

I'm really excited to see how people customize this site and make it their own. There are a ton of opportunities throughout the course to make slightly different decisions and get a fun and unique result.
Please share your final site with me, I'd love to see what you make!

[johndowland]

In 6 years on linkedin, received way more then a hundred interview requests (not counting thos I sent) and there was not a single one giving a f**k about my portfolio, and a couple were those that even looked at it. First was made in wordpress with full height pages sliding when it wasnt even a thing, then nextjs the nextjs with 3d stuff via three.js. the two gigs I got were because was me sending the job application over hundreds. Luckly i have clients by word of mouth (who also never checked or understood my design skills until I designed their website)

[Alireza-hhdj]

Such a perfect tutorial, Besides the Prismic, I learnt a lot about Tailwind, React.js and Next.js

definitely need more tutorials like this

[Sarcastic-Insann]

To be honest, I don't like doing web dev much but with Prismic it looked so fun and easy. It is just amazing...

[JonesFranklyn]

The thing is, you look at the final source code for all this new stuff, and it's so much extra goes into it for such a basic site. 2000+ lines of CSS code, loads of class names per page element and tonnes of injected script tags. Using technology for the sake of it sometimes I feel.

[adrianpothuaud]

WHAT A I am really enjoying it I am near to the middle of the video and I am already really really happy with what I learned and I can't wait to migrate my portfolio with my own customized version of this app! Thank you SO MUCH!

[aksheygupta]

atleast try to explain a little bit, if we understood each and everyline we'd never look at your video

[cheeky]

Thanks for the video! It's worth noting it seems theres a new useGSAP hook for react now so you can use that instead of dealing with useEffect, etc.. and it works in Nextjs!

[roshannayak]

Thanks for making this, hope this type portfolio help me to get hire

[berkipekoglu]

Awesome tutorial! Thank you! Please more videos like this :)

[cannalibrium]

This seems awesome, I just wish it didn't go through the proprietary site at the beginning. It would be nice to know how to do it from the ground up in VS code. I can't say I had a tool do 1/3 of the setup process. Great work overall though.

[tech_apostle]

Thanks so much for this. 🙏
I can't wait to create my portfolio, have been waiting like forever for this.

[w.p.c.]

Thank you very much, I just have finished watching, it is great tutorial

[donnellyzaraki]

Awesome tutorial! Just in case somebody runs into the typescript issue that I ran into

Type '(el: HTMLLIElement | null) => HTMLLIElement | null' is not assignable to type 'LegacyRef<HTMLLIElement> | undefined'. Line: 147: ref={(el) => (itemsRef.current[index] = el)}
A solution could be to filter out null values from assignment to the array.

ref={(el) => (itemsRef.current[index] = el)}

should(or could be)

{(el) => {
if (el) {
itemsRef.current[index] = el;
}
}}

[MrTimDE]

Thank you making this video. I been looking a cms for my portfolio that is easy to use. can't wait to customize it.

[KevinMcClainBigMac]

I love the ease of use when utilizing slices and gsap. Thank you so much!

[yasir-nawaz]

When i try to navigate to `projects/[project-name]`, in console `compiling /[uid]` is displayed and after some time `compiling /not-found` is displayed and 404 page is diplayed, blogs are opening fine but projects aren't displying. Please help me as I'm new with prismic, what can be the possible reason for this error. I tried to go through code but found nothing. Got help from your GitHub repo too but found nothing.

[yukiify]

does the vb code terminal use any style theme ? it looks good

[ernst]

Thanks for the video1 First time hearing about Prismic, will give it a try!

[kroszborg]

Loved this tutorial, while there are some code which after 7 months need updating if you can push yourself through solving those errors, you will have amazing learning experience.