Build and Deploy animated Portfolio Website with Next.js and Framer Motion

Learn to create a space themed portfolio website with Next.js 13. This uses typescript, framer motion, three.js and more.
Code Snippets: gist.github.com/Mif2006/ca44d...
Public folder: drive.google.com/drive/folder...
Source Code: github.com/Mif2006/Space-Port...
Timestamps:
0:00 Project Intro
0:19 Project Setup
3:52 Front page layout
4:26 Hero Section
18:03 Star Background
23:36 Navbar
32:20 Skill Section
42:25 Encryption
50:15 Projects Section
54:35 Footer
1:00:00 Deploy Website

[@nebiyoupaulos9800]

LOVE LOVE LOVE IT!!! I'll support you bro!!!

[@WebChainDev]

Thanks a lot!

[@rahulvramesh]

awesome video bro! keep the good work up!

[@eklavyachandra]

Absolutely Awesome, this is gold! I will be glad to know your sources where you get these webm animations. It will be really helpful to know

[@nicolassuarez2933]

Outstanding! Best of its kind :) I owe you a coffee

[@romaldoroldan7508]

This is awesome! Was really looking for a space themed portfolio to not only practice Next.js, but also to build and use as my beginner digital marketing portfolio, and your video was exactly what I was looking for. I Keep it up! I subscribed

[@WebChainDev]

Glad it was helpful!

[@Ramneet04]

Hey I know react and don't know typescript so can I start with this???

[@WebChainDev]

@@Ramneet04 you definitely can. There aren't any advanced typescript concepts in this video, so you should be fine

[@Ramneet04]

@@WebChainDev thx for your reply 🙏

[@MarkMelior]

Thank you for the video. I learned a lot of new things for myself)

[@xiztspike81]

Thanks so much, is beautiful! 😍

[@m123g]

Amazing stuff dude. Timestamps would be super helpful - but overall really cool and unique design. Awesome work!

[@WebChainDev]

Thanks! I did add the timestamps to the video description, for some reason they aren't displaying on the video itself

[@psybitcoin]

Try adding "-" between time and description@@WebChainDev

[@user-ck1zi8qf4i]

Thanks for listening and adding the time stamps! Helped a lot :)​@@WebChainDev

[@guillem5863]

man that's a hell of a good portfolio, keep the good work up!

[@WebChainDev]

Thanks!

[@matrixcoderdev]

Wow 😳 Awesome Bro 😍

[@aliabdalla166]

This project is very good!

[@PRASHANTSHARMA-wu4or]

loved it bro awesome...

[@AftabAlam-xt6ok]

awesome man much love

[@user-hl5hb3tj1n]

you sir have earned my like, subscription and my respect thank you !

[@WebChainDev]

Thanks a lot!

[@Peacemaker.404]

awesome website and great explanation, thanks for sharing keep going.

[@WebChainDev]

Thanks for the support!

[@hammadaslam9201]

awesome website. great work💌

[@WebChainDev]

Thank you!

[@jeninjoseph7901]

really awesome

[@HtetMyat79]

Cool Bro 😁,💯

[@iamzxenxi2260]

mantap bangg !

[@TheMahdiHazrati]

good work

[@BlackSwann349]

awesome website!

[@WebChainDev]

Glad you like it!

[@KaranVishwakarma-oe3to]

Love y bro

[@alexandremurys4450]

your work is amazing and I learned a lot about framer motion with this video. But I have a question with all this. Where do you get all these videos that are really awesome?

[@rajshekharsingh834]

the worm hole animation and infact all the video like the encryption ones get hidden in mobiles etc but not when you can the window size in desktop, tried fixing using top but didn't work even your deployed link has the same issue. Any fixes?

[@primitivefinance]

Thank you for this tutorial. This works great. When I try this on different resolution monitors I get different layouts. For example on a wider monitor, the "Skills" section gets squished vertically where the top text and some of the logos are cut off. Is there an easy way to address this? I realize it probably has something to do with the w-auto/h-auto classes, but could not figure it out.

[@Airijko]

Wait is this dude javascript mastery?

[@lokeshnegi5051]

everything is great just don't forget to zoom in your screen, it's bit difficult to see the small lines of code

[@s.joseph4838]

For page.tsx "@/components/main/Hero"; is not working, its saying cannot find module @/components/main/Hero/ What should I do please?

[@i-am-artur]

Does anyone get this error: Computed radius is NaN. The "position" attribute is likely to have NaN values ? I could not solve it

[@Houseofstartup]

All the things is fine but how you get these video assets

[@jacobodi]

Great job, congratulations... Where can I get more of those videos for the websites? thank you

[@taimaster200]

wow... your code looks so... stealable

[@LostMyPiece]

Hey man great video, thank you. Some of the icons aren't loading properly or blank, like mainIconsdar.svg, how do I go around fixing this?

[@lammi_editz]

Failed to load SWC binary for win32/ia32 can anyone help 🙏

[@vikasrajput2253]

hi how can i modify the menuIconDarh.svg ? my techstack are different.

[@soumyamandal3390]

when i am trying to add a tags in my Project card its not working

[@samjain2001]

how to find this amazing bg videos and image svgs for the website any suggestion or website

[@shawnwxweb]

Did u take that background effect on the hero section from other website (i forgot the name istg)

[@nicolaime1907]

Hello, help me make the navigation bar responsive in this application, it ends up breaking please.

[@user-xb9xd3ty1l]

I am getting the listing directory when I host the server

[@melikedemir8126]

Your next js modern portfolio video that you made with JS is not visible. Where is it? Can you upload it again, please?

[@vinitchuri9729]

At the start of the video 1:48 why are we installing dependencies like framer-motion as dev dependencies? npm install --save-dev framer-motion?

[@WebChainDev]

Without doing this typescript throws some errors for a few of the dependencies when importing them into a file.

[@abdelrahmanzaitoun4402]

Wow

[@ShivamSharma-zq2xn]

I loved the project.. but I was confused about lot of things like . can you make a explanation video how things are working and the dependencies we installed, were any of them your public available dependencies.

[@Code_loading]

Is this good project and easy? I want to start making it will it be valuable

[@user-nc5fp1fp8q]

ахуеть 100к почти ты че ваще машина? красавец

[@bigbossgaming1778]

border color is not working 9:43 timeline Please help me. Hexadecimal is not working. So please help me

[@noone1000_xyz]

why the cursor is not getting channged to pointer in any of the links in footer

[@hangargevitthal3976]

when i deploy on vercel everything gets messed up stars gets in one side of the window framer motion does not work it looks like mess and when I run on local host it works fine I also tried it on netlify but it has same result can you guide me

[@nicolaime1907]

I haven't deployed it yet. are you still having the same problem?

[@codeozz]

25:10 here is how the video took up all the space after deleting the height.

[@JT-Software-Engineer]

"Thanks for the great video! 😄 I have just one problem-when I try to link the socials in the Footer, they're not clickable, and the cursor doesn't change when I hover, even when I set it to cursor-pointer."

[@rishabh1S]

Maybe you need to adjust the z-index or something

[@kevinngugi6120]

@WebChain Dev the opacity of the svg is not giving its too dull i have tried to change it manually but it has no effect i want it white for the whole thing to be visible even the fill attribute has no effect

[@KaaiRL]

Idk if you're going to read this, but using css filters might help

[@nicholasamirante825]

Are we allowed to use this for our own websites? Great work

[@WebChainDev]

Yeah, you definitely can

[@molilolier]

Hello. First of all, thank you very much for the content. If I wanted to add pages called Skills, About Me, Projects, and I want it to redirect to the relevant page when I click on these elements in the Navbar. How can I do that?

[@WebChainDev]

Hello. Thanks! For this you would need to create folders inside of the app folder called Skills, Projects, etc, and create components called Page inside of them. This is done in some of my other videos(for example the video I posted after this one), so you can check those out.

[@molilolier]

@@WebChainDev Thank you very much for your quick response and interest. I will be following all your videos. :)

[@Niferu]

Hi @WebChain Dev have you maybe faced error "SyntaxError: Cannot use import statement outside a module" "import '../../dist/objectSpread2-284232a6.esm.js';" ? I cannot find solution for this one but it seems to deal with node.js and es6. It is coming from star background

[@amanchoudhary7414]

Run npm Install or delete the whole folder and reinstall it

[@Niferu]

@@amanchoudhary7414 the point is it was working when I initially implemented it, but now every time I refresh page I'm getting this error. If I remove from my app and server will start then I add it again to app and save now everything is working again... Couldnt find any similar issues with it on google

[@LucasSousaRosa]

Unfortunately, when applying the effect as a background, it ends up being on top of the other content, which visibly looks very nice, but ends up blocking all the other content below it, preventing you from clicking on links, images and even some effects that don't work properly. .

[@WebChainDev]

To fix this you can simply change the z index of the effect by saying z-[-1]. This should place it behind the other elements

[@LucasSousaRosa]

@@WebChainDev right, but it ends up being behind the light and dark theme of my page, which leaves it only working in the page navbar and in the footer, whereas I want it to work on all pages

[@SlhBld-oh6ng]

Just put pointer-events:none

[@criedfizcken6200]

@@LucasSousaRosa set the z-index of the footer higher than the starbackground, it should work this way, ive tried

[@ShourovRoy-pk5zm]

Where you are getting this assets can you please share with us?

[@AnishM-bm4tm]

how to download videos like these @anyone

[@sdaaz792]

where did u get the video?

[@srothsinha9606]

how do you link the socials in this portfolio? I have my Instagram linkden which i want to link when user clicks on the logo.

[@AdamMahdad]

where do you find those webm?

[@LordGhapa]

in starbackground have bug in my code to fix change new Float32Array(5001) must be divisible by 3 and some misspelled

[@WebChainDev]

I suggest checking the source and compare where the error is

[@user-gi8wj4on2b]

Hey, im having an issue with the downloaded public files. the videos with extension .webm wont show in vs code ? they play elsewhere i cant seem to simply sort the issue? do you have any solution's . 1 solution possible was marked as resource intensive so im pausing before looking further with that api?

[@WebChainDev]

You can change the extention if webm isnt working for you. Just go to a converter online. Tbh never saw anyone with this issue so it's the only solution I can give for now

[@WebChainDev]

Also if they simply aren't playing in vs code that's fine. They should still play in the website

[@user-gi8wj4on2b]

@@WebChainDev true true , i will check out should be fine , thanks for responding tho!

[@WaultBank]

Where can we find the encryption video like?

[@raffibzdigian3104]

Amazing video, very good content!! however there was an error in the console from Three.js saying: THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. I was able to solve this by adding an additional filter and got rid of the error: const filterInvalidValues = (data: any) => { const filteredData = []; for (let i = 0; i < data.length; i += 3) { if ( Number.isFinite(data[i]) && Number.isFinite(data[i + 1]) && Number.isFinite(data[i + 2]) ) { filteredData.push(data[i], data[i + 1], data[i + 2]); } } return new Float32Array(filteredData); }; const [sphere] = useState(() => { const generatedSphere = random.inSphere(new Float32Array(5000 ), { radius: 1.2, }); return filterInvalidValues(generatedSphere); }); But overall excellent work!

[@WebChainDev]

Thanks, didn't realize there was an error there

[@codewithkeys]

Try changing the length of FloatArray32 from 5000 to 6000 or a number divisible by 3 in your stars canvas.

[@rahulguggilam5120]

mate this website is pretty amazing but unable to add social media links to it

[@lolfeizz]

It's awesome but half of the things I don't know, or the process of thought behind the animations, design and stuff. In your opinion, what's the best way to learn this by myself? cuz it's awesome

[@WebChainDev]

Well I'd say the most effective way to learn this would be to watch more of these kinds of tutorials, a great channel for this is Javascript Mastery, and asking AI(ChatGpt, Claude, etc.) to explain the parts you don't understand. Also you should experiment as much as you can while creating these projects to actually use your knowledge. That's pretty much how I learnt it, but at the time AI wasn't as advanced.

[@lolfeizz]

@@WebChainDev What's the source of the media like the blackhole? I really like it but I'm not able to found sites that provide videos like that

[@MindSparksNow]

Hello folk i really loved your UI design can i use your design to build my portfolio?

[@WebChainDev]

Sure

[@codeozz]

The site is very nice, but it does not work in Firefox, I think it has something to do with Three.js.

[@best4u701]

It is responsive or not?

[@MohitSharma-rz1uq]

Looks dope...but there are some bugs

[@abhishekshankar6305]

do i need to know next js to start?

[@WebChainDev]

No, you only need to have a decent understanding of react

[@S_U_M_E_R]

For anyone trying to copy this project as of dec/26/2023, (not sure if its just me) but ive been encountering issues with localhost:3000 not working after awhile, not sure why but I believe the issue starts during this installation - 10:31 - where we install heroicons, after this installation my localhost stops working, ive tried redoing this project THREE times, so im 99% sure, if anyone could reply with a solution that would rly cool, but ill try to solve it myself as well. (for more context, its def not my computer nor my local host nor my network, ive reset my localhost and network multiple times, and performed various troubleshoots on everything that could be related to the issue, just before running this npm installation, i made sure to check if my local host was working (it was) then after i made the installation, i wrote a few codes checked localhost and it isnt working.(i should've checked localhost immediately) so if its not the installation then it has to be smthing we wrote after the installation, wherever the issue is i know for a FACT its around the installation of heroicons)

[@S_U_M_E_R]

I've found a better solution, thats why i deleted my previous comment, open a terminal in VSCode and run this command (you can search up what they do if you're afraid): | npm install -g serve | This will install serve globally, serve is a simple, command-line tool that allows you to quickly serve static files, making them accessible through a local web server. It's commonly used for serving static builds of web applications or websites during development. Next: | npm run build | This command generates a build folder containing the production-ready build of your React application. Finally: | npm start | Now you should be able to use, whichever localhost the terminal gave you!

[@adairbernal5502]

Experience

[@user-ue8jt3kr3p]

12:54

[@HasanTheCoder]

Bro please increase your vs code letter size while to recording for us , ctrl + , its very small to see this . thank you

[@WebChainDev]

Will do

[@Nobodyy1-1]

Can you give me some websites to download some free webms?

[@WebChainDev]

Tbh I usually get these videos from youtube so I don't use any specific websites

[@gabriel-accetta]

why am i having to "use client" on hero component?

[@WebChainDev]

You have to use it in HeroContent because it uses framer motion. Any component that uses react hooks in Next.js needs to be a client component, and framer motion uses hooks behind the hood.

[@gabriel-accetta]

@@WebChainDev Thank you! and congratulations on creating that great tutorial!

[@MadhavRathod-one]

Can I use some components for my website?

[@WebChainDev]

@@MadhavRathod-one yep

[@junhyeongpark1767]

Hi there, thank you for great tutorial. Btw while following the tutorial, I got the issue after making NavBar. const ref: any = useRef() TypeError: Cannot read properties of null (reading 'useRef') which is in the StarBackground.tsx. I don't see why, since it worked well just before writing down the NavBar.tsx code. I also tried to install latest version of react-router-dom, but still same issue. Do you have any solutions?

[@WebChainDev]

Thanks! As this is a typescript error, the easiest solution you can try is adding // @ts-ignore above the line causing the error. Also make sure that you have "use client" in your StarBackground, maybe you accidentally removed it. If you are using Next.js react-router-dom won't affect it as Next uses it's own routing system. Let me know if this helped, if not I'll try to find another solution)

[@junhyeongpark1767]

@@WebChainDev Thanks for the reply. However I get same issue.

[@junhyeongpark1767]

@@WebChainDev If I remove the StarsBackground on the layout.tsx, the site works well.

[@yaredarega827]

The terrible part of this is you dont explain the reasoning behind each of ur steps it would make the video a bit longer but at least the developer gets a sense of learning rather than copying down ur entire codebase other than that awesome portfolio.

[@WebChainDev]

Yeah I am trying to improve in that regard

[@thencode8403]

This website is not adaptive

[@evertondepaulamagalhaes3700]

I have a problem. This happen when I use npx comand .... pm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\evert\AppData\Roaming pm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\evert\AppData\Roaming pm' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: C:\Users\evert\AppData\Local pm-cache\_logs\2023-11-13T04_45_29_509Z-debug-0.log PS C:\Users\evert\OneDrive\Área de Trabalho\spaceportfolio>

[@AftabAlam-xt6ok]

do npm install first?

[@garimakumar5207]

You don't have npm or u did not install npm properly. If u check the file location in the error, you won't find npm there. All you have to do is properly install npm. You can also install nvm which manages node versions as well. If you want, i can share you the link.

[@user-ue8jt3kr3p]

12:54

[@WebChainDev]

What about that timestamp?

[@user-ue8jt3kr3p]

sorry it was for my remembering. By the way yr video is awesome @@WebChainDev