Build and Deploy animated Portfolio Website with Next.js and Framer Motion
In this tutorial, we will explore how to build and deploy an animated portfolio website using Next.js and Framer Motion. Next.js is a popular React framework that allows for server-side rendering and efficient client-side routing, while Framer Motion is a powerful animation library for React.
Step 1: Set up your development environment
First, make sure you have Node.js installed on your computer. You can download and install it from the official Node.js website. Once Node.js is installed, you can use npm (Node Package Manager) to install Next.js by running the following command in your terminal:
npm install next react react-dom
Once Next.js is installed, create a new project by running the following command:
npx create-next-app@latest my-portfolio
Change into the newly created directory by typing:
cd my-portfolio
Step 2: Create your portfolio website
Now that your development environment is set up, you can start building your portfolio website. Next.js makes it easy to create and organize pages using the pages directory. Create a new file named index.js in the pages directory and add the following code:
import { motion } from 'framer-motion';
export default function Home () {
return (
Welcome to my portfolio
Hi, I'm a web developer with a passion for creating beautiful and functional websites. Take a look at my projects and get in touch!
)
}
This is a simple example of how you can use Framer Motion to add animations to your website. You can explore the Framer Motion documentation to learn about more advanced animations and effects.
Step 3: Deploy your website
Once your website is ready, you can deploy it to the web using Vercel, the official hosting platform for Next.js. Vercel makes it easy to deploy and manage your Next.js applications, and it offers features such as automatic SSL, custom domains, and serverless functions.
To deploy your website to Vercel, run the following command in your terminal:
npm install -g vercel
After installing the Vercel CLI, you can deploy your website by running the following command:
vercel
Follow the instructions to log in to Vercel and deploy your website. Once the deployment is complete, you will receive a URL where your website is live on the internet.
Conclusion
By following this tutorial, you have learned how to build and deploy an animated portfolio website using Next.js and Framer Motion. You can now use this knowledge to create your own portfolio website and showcase your skills and projects to potential clients and employers.
I have a problem. This happen when I use npx comand …. pm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:UsersevertAppDataRoamingnpm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:UsersevertAppDataRoamingnpm'
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:UsersevertAppDataLocalnpm-cache_logs2023-11-13T04_45_29_509Z-debug-0.log
PS C:UsersevertOneDriveÁrea de Trabalhospaceportfolio>
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. .
awesome video bro! keep the good work up!
loved it bro awesome…
Thank you for the video. I learned a lot of new things for myself)
bro my space vedio is not redeering (blackhole one)in localhost else everthiong is working image also rendering why
LATER ON USED STACK OVERFLOW I FOUND OUT I HAVE TO USE THIS
const video = useRef<HTMLVideoElement>();
FOR TYPESCRIPT
Can you give me some websites to download some free webms?
Wow 😳 Awesome Bro 😍
Love y bro
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?
Cool Bro 😁,💯
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?
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
Amazing stuff dude. Timestamps would be super helpful – but overall really cool and unique design. Awesome work!
LOVE LOVE LOVE IT!!! I'll support you bro!!!
awesome website. great work💌
man that's a hell of a good portfolio, keep the good work up!
awesome website!
awesome website and great explanation, thanks for sharing keep going.