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

[@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!

[@lightyagami4667]

Will definitely try to do this. Thanks for making such cool content

[@dereks469]

What font are you using in vsc? how did you get the methods and classes to stand out like that ?

[@TrostCodes]

@@dereks469 I use Oh Lucy and have a link to it here - trost.codes/uses/ I'm pretty sure the theme handles the way the methods and classes look, but if yours look different let me know!

[@mohdnoman7924]

can you please tell me how i can make it scrollable?

[@abdelrahmanzaitoun4402]

WOW!! amazing. So detailed and informative..but I have a question.. it has been two days and i can't implement a contact form. The link in navbar works flawlessly in dev mode, but in deployment the page doesn't exist. I don't know why. I tried to make a new ""contact" route in my app directory but same problem, dev mode amazing, in production shitty

[@Alireza-hh5dj]

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.

[@tech_apostle]

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

[@berkipekoglu]

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

[@adrianpothuaud]

WHAT A TUTORIAL!!!!!!!!!!! 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!

[@markthostesen7121]

This was absolutely amazing. Thank you so much for the meticulous attention to detail in the explanations and the how Prismic works with NextJS and the GSAP animations. I would love to see about switching the portfolio picture up to a scrollable set of images, almost like a rolodex. I am going to do some research but once I have it working I will post the final. Amazing work on this tutorial! Anyone thinking about taking this just make sure you set aside some serious time, you will not be done in 5 hours if you want to actually understand all of the little details, lol! Chapeau Prismic team, chapeau!

[@scorpion32]

This looks great, can't wait to customize it.

[@TrostCodes]

I can't wait to see what you come up with, Scorpion!

[@guyritchie6737]

Loved this! Was able to reproduce, and slightly modify the project and get it up and running very quickly. Explanations were really good! Thanks a bunch. 💖

[@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.

[@TrostCodes]

You're very welcome, I can't wait to see how you customize it! Its ease of use is one of the reasons I've always loved Prismic.

[@KevinMcClainBigMac]

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

[@w.p.c.7113]

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

[@johndowland4623]

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)

[@HaggardWebDev]

Every application I have applied to has asked for a portfolio.

[@pharrellarts3315]

Finally i have a 3D portfolio thanks alot

[@deekshatiwari9364]

Hey can you help

[@pharrellarts3315]

yes@@deekshatiwari9364

[@roshannayak5982]

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

[@ernst367]

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

[@TrostCodes]

That's exciting! I'd love to hear what you think about Prismic and the course. Thanks for the comment!

[@jijojosein]

Perfect. I know what I am doing after the holidays.

[@TrostCodes]

Hope you had wonderful holidays - I'm excited to see how your site comes out!

[@cannalibrium4025]

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.

[@TrostCodes]

Thanks for the feedback! Do you mean the create-next-app? Or when we initialize Prismic? Both just give us a little bit of bootstrapping so that we're not copy/pasting lots of boilerplate code. If you want to see what the Slice Machine init does, commiting your files before will highlight all the changes it makes. I'd love to hear more about how I could make this better in the next course!

[@MegaAnkitmittal]

Thank you so much Andy, it was awesome. I learned a lot.

[@VassiliHuang12]

Awesome video! Great work! Thanks for sharing!

[@TrostCodes]

My pleasure, thanks for the kind comment!

[@bluepach]

Hi ! Thanks for this amazing tuto ! I don't manage to do the glowing effect at 2:40:00, how did you do it please ? :/

[@void-mv3vy]

amazing video! thank you for this portfolio it really helped me!

[@Prismic]

Glad it helped!

[@TrostCodes]

I'm thrilled to hear that, Void! Thanks for the comment!

[@sthefanocarvalho2823]

Awesome work. Thank you for sharing this :) You've just got a new sub!

[@yuki1121ify]

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

[@TrostCodes]

Hey Yuki! I've got some info about the fonts and themes I use here - trost.codes/uses/

[@mehedihassan6904]

want to see more cool project videos from you guys

[@oxytechlimiteddengolivetss5736]

Thx for the amazing tutorial. Discovered something new - Prismic. An interesting combination of repository and framework 2 in 1.

[@cheeky1699]

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!

[@TrostCodes]

Whoa, you're right! That's SO handy. Thanks for pointing that out! For anyone else reading - it just saves us from a bit of boilerplate, but the video's code is just as performant, we just do a little bit of extra typing ;)

[@jp_flicks]

Can you please tell me which theme and font you are using, its looking awesome.

[@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.

[@bsick6856]

How did you solve your previous problem about mapping the repeatable section?

[@muqadaslatif172]

marvelous i really appreciate your hardwork

[@cosgravehill2740]

Huge fan one hour in. Just picking up animation now for first time, and real programming languages starting 6 months ago. All my initial animation research told me GSAP is too difficult and just start with framer motion or something like aceternity. Just started this video on a whim because I was unimpressed with aceternity. You made it so easy, but even if you didn't, GSAP clearly provides superior results and control. Is it really ignored just because it's a little more complicated and you have to think of the animations yourself? I just don't understand aceternity's explosive popularity at all now.

[@yvindgjersum832]

@TrostCodes Hey, great job on the tutorial! Just wondering, is there any way to sort the contentList list of blogposts/projects based on the date set in prismic? Right now it seems to appear in a random order.

[@sidakvats693]

Bro plz make a E-Commerce website using cms

[@moncere]

Amazing video tutorial 🔥

[@atharv1114]

Hey great tutorial! I have question, I was midway creating the website and unfortunately I had to switch my Macbook Pro. How do I setup my prismic VS Code project on my new laptop and resume completing the website. Please help me out!!

[@arturgouveia5078]

Hello Alex, I have just finnished the tutorial and that is absolutetly beautifull. I am definetely going to use it as my portfolio. I am having a couple of issues, tough, I can not see the teckList or the floating images in mobile view. I don't know if that is the idea. thank you for this tutorial, it is inspirational. what's next?

[@dezobq]

Stunning portfolio. Should we redeploy every time we add a new post/project?

[@ununbrian]

Hi, can u make more tutorials on using gsap like tech list and hover and scroll animations on nextjs? These illustrations are amazing.

[@gauravmali6250]

Make more content like this with CMS Prismic.

[@donnellyzaraki4518]

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 | 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; } }}

[@SeiferHXC]

THX !!!

[@aryanpatel23]

i am still having issue over there. can you please share that part of code

[@aryanpatel23]

thanks i finally figured it out

[@indiealucard]

@@aryanpatel23 ref={(el) => { itemsRef.current[index] = el; // No return here }}

[@captainrishabh3390]

Thanks brother 💖💖

[@PrashantKuSahis]

the video is great but i am stuck @2:00:21 when the type of page and path was being set, i followed exactly but when i am hovering over the "about" it is showing localhost:3000 instead of localhost:3000/about, i am unable to set the path. is there anyway to resolve or check the issue?

[@kirby8319]

I figured it out if you're still having problems. You need to make sure you do - import { createClient } from "@/prismicio" not from "@prismicio/client"

[@TejasC]

same

[@HaggardWebDev]

@@kirby8319 it errors out if you import it like that.

[@MathieuBekkaye]

I've been trying for weeks but just can't finish the project. I always get lost with that Prismic thing :( Maybe it's just me. I'll try again later.

[@sumamakhan-dv9cl]

fanally i build it my porfolio ❤❤

[@abdelrahmanzaitoun4402]

WOW!! amazing. So detailed and informative..but I have a question.. it has been two days and i can't implement a contact form. The link in navbar works flawlessly in dev mode, but in deployment the page doesn't exist. I don't know why. I tried to make a new ""contact" route in my app directory but same problem, dev mode amazing, in production shitty

[@abdelrahmanzaitoun4402]

Ok no worries. I just forget getstaticprops 👀

[@aksheygupta6237]

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

[@jijojosein]

What happened at 2:40:00 ? How did you fix the hover issue?

[@starogre]

with the div with classname="highlight" remove the "hidden" class from it that he put on earlier in general it looks like a good way to find things that aren't showing up is to remove classes that might be hiding/showing the element until you figure out what works

[@FelipeBasilio-s3o]

Thank you so much!

[@abidmohsinzaidi7254]

Im getting an error after using snippet code it gives an "Unhandled runtime error :No document were returned " I had try several ways to resolve it but I'm not able to resolve it till now. Can you help me to resolve this issue?

[@vininopoun]

Thanks You So Much! ❤

[@dreytechdotco]

Thanks so much.

[@tech_apostle]

How did you add the dimensions list, showing the list of phone previews.

[@AyushSingh-tj3hq]

Sir there's problem in the code in ContentList it's throwing error during build not during development something to do with ref in first li element.

[@genenu2785]

i get an error that i can't seem to fix after calling Shapes inside the Hero div.

[@gloryofcode]

Unhandled Runtime Error Error: R3F: Hooks can only be used within the Canvas component! While adding Footer

[@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.

[@Emilie-ey4li]

Hello i have a question. how can i change the NameLogo field which is a Text field to an Image field .i wanna remplace the text displayed to display my logo image instead ; I'm a beginner function NameLogo({ name }: { name: KeyTextField }) { return ( {name} ); } thank you

[@angelikawisniewska2414]

can I put in there video too?

[@dezobq]

I loved the project and learned a lot from it. I'm trying to implement some additional features, such as a button to direct to the live project and another for the GitHub repository, but I'm facing some difficulties. Any tips?

[@indiealucard]

{label} {showIcon && } Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes & IconBaseProps'. Property 'className' does not exist on type 'IntrinsicAttributes & IconBaseProps' please help me

[@prathameshladkat7352]

I have completed whole video and created portfolio but i want to add buttons at project page and blog page. i tried multiple ways by shadcn, by using prismic, but nothing is working anyone can please help me Want to add same button like resume

[@anandiljar1593]

On smaller screens, as in on mobile devices, the home page takes a little more width than the screen. The problem is persistent on the live site as well. What could be the reason behind this? Can anyone help me debug this?

[@TrostCodes]

Is your name longer than the example name? You might need to change the size values for that Hero text to fit better with your name. There's not gonna be a perfect number for everyone's name. "Anderson Westbrook" and "Wes Bos" are going to need very different sizes. Let me know if that fixes it!

[@anandiljar1593]

Thanks for the suggestion. Although I have a longer name, I tried with a very short name and it did not solve the issue. And as I said, the issue is also present on Andy's live site as well. Please let me know if you have any other suggestions.

[@vincentsoriano8264]

Can I edit the my first name on the frismic and just save changes? Im having also problem with the size of my name@@TrostCodes

[@bluepach]

@@anandiljar1593 Indeed, have the same problem and when I inspect it on computer to see what's taking the place to the right, I see nothing ... quite strange

[@bluepach]

@@anandiljar1593 ok, when I check it on computer, lower the width (without toggling device thing), I see that a horizontal scrollbar appears until the title bellow the last name pops out, will check this.

[@MrTimDE]

How would handle the contact page and the resume button with prismic?

[@bersuarez2741]

Upload your CV to Google Drive and lik it to the button

[@JaskaranSingh-le4tm]

gives error for 3D models. I've tried all the methods, from updating drei to storing files locally but couldn't resolve the error.

[@Prismic]

Hey, Jaskaran, did you compare your code to the final example code? There might be some difference you pick up when comparing the two, or replacing your code in that component with that file just to check if it works.

[@JaskaranSingh-le4tm]

@@Prismic Forked your whole project, still the error remains. Also, except the Starting Material, colors won't render, Getting black shapes.

[@kroszborg]

@@Prismic hey man im having trouble with 2:42:57 since prismic has updated i cannot make the repeatable groups and add techlist to my resume like react to my website

[@bsick6856]

@@kroszborg Hey Kros, me too man. Did you find a solution?

[@kroszborg]

@@bsick6856 i made individual groups

[@asgyubbh]

I'm getting problem in making navigation bar like that pls somebody help me

[@xayotmamajonov3336]

How to make terminal like your ?

[@HaggardWebDev]

Everything crashes when you start adding the links around 2:00:20 . It would be nice to be updated on how to handle this.

[@tejaspatel6965]

what did u do to fix the about page not linking?

[@starogre]

is there no Yarn way to install slicemachine?

[@Prismic]

Hey there! Sorry, Yarn is not officially supported. If Yarn is necessary, bootstrap new projects with npx, then migrate it to Yarn.

[@starogre]

​@@Prismic yep i saw that you can still use npx in a yarn environment

[@SaatvikGarg-uf8le]

i am getting error in shapes.tsx where while destructuring props in geometry function it says "position implicitly has any type" and for that reason i am also not able to deploy my project on vercel. can anyone tell me how to resolve

[@jameshonour7661]

you should use jsx not tsx because he did so!!

[@l88ser]

Error: listen EADDRINUSE: address already in use :::9999, sir, how to resolve this error.

[@Molsoi-1]

i cannot install all the slicemachine dependency, now i m stuck here. can you help me out?

[@Prismic]

Hey user, could you say what the error is? Posting on the Prismic community forums might be your best bet as it’s tough to diagnose and solve bugs in KZbin comments. We’d be happy to help you there! Just mention you’re doing this video tutorial

[@starogre]

make sure you run npm init first before trying to use the slice machine init functionality as part of npx

[@bersuarez2741]

@@starogre Antivirus o el navegador que te esta bloqueando la terminal !! puede ser ?

[@umernasir4217]

What's the font he is using in VSCode?

[@TrostCodes]

Hey @umernasir4217 I've put some info about the fonts and themes I use here - trost.codes/uses/ The font is Dank Mono

[@VishaljangidJngid]

Theme name pls

[@panchi1506]

Can anyone please help me out u know at 1:51:21 it's not showing me the create new button ... I dunno what's the reason. Literally, it's a dead end for me.

[@slmnder5]

it's now changed to a green pen button at the same place

[@amalkallarakkal9487]

you look like Harry kane mister

[@rahulsharmaah]

Rich Text Fields Not working

[@YeungTyler]

1:00:08 Any tutorial for install clsx? I tried npm i clsx but vs code show "Cannot find module 'clsx'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?ts(2792)" Thank you!

[@piyush6631]

04:00:00

[@adityaraj-md8pb]

hi I am getting the below error for the code at 19:05 min Unhandled Runtime Error Error: No documents were returned Source src\app\page.tsx (16:16) @ async Module.generateMetadata 14 | export async function generateMetadata(): Promise { 15 | const client = createClient(); > 16 | const page = await client.getSingle("homepage"); | ^ 17 | 18 | return { 19 | title: page.data.meta_title, any help regarding the same will be highly appreciated

[@omdwivedi4982]

did you get it fixed by any chance?

[@xxw379k]

ohh..... complicated....

[@aksheygupta6237]

I did everything, its running on localhost but vercel is failing to deploy, feels like all my time and effort were wasted

[@aryanpatel23]

It’s same error for me ,Did you figure it out?

[@aksheygupta6237]

@@aryanpatel23 I did but vercel isn't able to load some of the css classes

[@lathief3886]

Bro did you solve the error

[@AnthonyFieldings-rg1vs]

I've been trying for days to have my pages link for this project. I'm stuck at the 2:01:40 mark. I've followed as best as I can (the UI for slice machine has changed slightly) and I'm not getting anywhere. My about page label does not link to the actual page. Has anyone else ran into this issue? In tradtional HTML I would have just added a link to a page but this is a little different here. Please help

[@Prismic]

Hey! You can post your issue along with your actual code on the Prismic community forum: community.prismic.io/ See you there!

[@sarz3547]

I had the same problem, had to include custom routing for the page instead to get it to work e.g., in prismicio.ts { type: "page", uid: "about", path: "/about", }, and used custom createClient instead of the API endpoint in the header component.

[@aksheygupta6237]

1:51:21 I can't seem to do it, when I click create it isn't the same

[@viraajsinghgill1644]

can any body help me in this when i am opening blog post it is working well but whenever i am opening project post its showing i have created both project.tsx,blog.tsx 404 This page could not be found. i am ready for google meet so that i can show if any body can help kindly do comment

[@deekshatiwari9364]

You may not connected it to layout page

[@aryanpatel23]

i had same issue , just fix this line const urlPrefix = contentType === "Blog" ? "/blog" : "/projects";

[@SaadullahSarwar]

{renderLetters(slice.primary.first_name, "first")} {renderLetters(slice.primary.last_name, "last")} {slice.primary.tag_line} not rendering last nam

[@jojokman]

typo its not renderletters but renderletter

[@noname_160]

[@bsick6856]

I'm stuck on 2:45:18, my repeatable items are not mapping to the website and my items are null in my console log. It seems mapping over repeatable items has changed, has anyone found a solution to this?

[@bsick6856]

Found my error, prismic had an update and I used his json file from the github repository in my own jsons. That did the trick.