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

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

[romaldoroldan]

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

[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

[mg]

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

[vineetsingh]

To the guys facing issue with adding links that is happening because of starcanvas so in order to make that working just change the z index inside the star canvas to some lower value than the z index of footer basically now the footer would be over the starcanvas so the links will be visible hope this helps

[nebiyoupaulos]

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

[nicolassuarez]

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

[alex-murys]

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?

[Peacemaker.]

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

[guillem]

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

[s.joseph]

For page.tsx "@/components/main/Hero"; is not working, its saying cannot find module @/components/main/Hero/

What should I do please?

[MarkMelior]

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

[hlhbtjn]

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

[nicholasamirante]

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

[Houseofstartup]

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

[lokeshnegi]

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

[rahulvramesh]

awesome video bro! keep the good work up!

[raffibzdigian]

Amazing video, very good content!!
however there was an error in the console from Three.js saying:
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
});

But overall excellent work!

[jacobodi]

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

[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

[akshatagrawal]

Great project!
but when use Link on ProjectCard the href link is not working and also classes like cursor-pointer is not working
also in Footer links are not working
please help