In this tutorial, we will learn how to build and deploy an amazing developer portfolio using Next.js and Framer Motion. We will start by creating a new Next.js project, setting up the necessary dependencies, and creating the basic structure of our portfolio. Then, we will use Framer Motion to add animations and transitions to our portfolio for a more engaging and dynamic user experience. Finally, we will deploy our portfolio using Vercel to showcase our work to the world.
Step 1: Set up a Next.js project
To start, we need to create a new Next.js project. Open your terminal and run the following command:
npx create-next-app my-portfolioThis command will create a new Next.js project in a directory named "my-portfolio". Navigate to the project directory by running:
cd my-portfolioStep 2: Install Framer Motion
Next, we need to install Framer Motion, which is a library that makes it easy to add animations and transitions to our website. Run the following command to install Framer Motion:
npm install framer-motionStep 3: Create the basic structure of your portfolio
Now that we have set up our Next.js project and installed Framer Motion, let’s create the basic structure of our portfolio. Create a new folder named "pages" in the root of your project directory. Inside the "pages" folder, create a new file named "index.js" which will serve as the homepage of our portfolio.
import Head from 'next/head'
import { motion } from 'framer-motion'
export default function Home() {
return (
<div>
<Head>
<title>My Portfolio</title>
</Head>
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
>
Welcome to My Portfolio
</motion.h1>
</div>
)
}In the code above, we have created a simple homepage for our portfolio. We have imported the necessary dependencies from Next.js and Framer Motion, and added a heading with a fade-in animation using Framer Motion.
Step 4: Add more pages to your portfolio
Next, let’s create additional pages for our portfolio. Create new files inside the "pages" folder for each page you want to include in your portfolio, such as "about.js", "projects.js", and "contact.js". You can add content and animations to each page using Framer Motion just like we did in the homepage.
Step 5: Style your portfolio
To make our portfolio look visually appealing, we can add some CSS styles. Create a new folder named "styles" in the root of your project directory, and create a new file named "globals.css" inside the "styles" folder to add global styles to our portfolio.
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
}Step 6: Deploy your portfolio using Vercel
Now that we have built our portfolio, it’s time to deploy it so that we can share it with the world. We will use Vercel, which is the official platform for deploying Next.js applications.
First, create an account on Vercel if you don’t already have one. Then, install the Vercel CLI by running the following command:
npm install -g vercelNext, run the following command in your project directory to deploy your portfolio to Vercel:
vercelFollow the prompts to log in to your Vercel account and deploy your portfolio. Once the deployment is complete, you will receive a unique URL where your portfolio is hosted. Share this URL with others to showcase your amazing developer portfolio!
In this tutorial, we have learned how to build and deploy an amazing developer portfolio using Next.js and Framer Motion. We have covered the basics of setting up a Next.js project, adding animations with Framer Motion, creating pages for our portfolio, styling our portfolio with CSS, and deploying our portfolio using Vercel. I hope this tutorial has been helpful in guiding you through the process of creating your own developer portfolio. Happy coding!
Awesome tutorial!
If someone is stuck with the ReactCurrentOwner error when making the globe, try downgrading Next.js to version 14. It might fix the issue(you will have to change the next.config.ts file as well!).
Getting this error:- TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner') when rendering model using react-three libraries
hey man why is that i cant see any changes that i make reflect in my
website
do you guys have the same errors while installing framer motion?
Loving the tutorial! Got a hydration which I could resolve with the suppressHydrationWarning attribute on the html tag within the root layout. But then I got a type error…Cannot read properties of undefined (reading 'ReactCurrentOwner'). Anyone else got the same? ** Got this resolved by down grading to Next.js 14
i am facing issue with both recent project and hero
it show error
Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used
can anyone helps me
21:00
Hey, anyone having hyderation error because of ThemeProvider ? i am having issue and i have to remove purple color logic from TextGEneration Ui and had to put suppressHydrationWarning in head tag in root layout. if anyone knows how resolve the problem kindly let me know.
20:00
15:20
1:27:00
im strugling with this error message Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')
anyone else getting this error, "Application error: a client-side exception has occurred (see the browser console for more information)." Cannot read properties of undefined (reading 'sentry')???
What shortcut is this? 49:17
Bento grid layout is not properly rendered with col span, anyone facing similar issue?
96472. CoD
content is so good, but the ads break my mindset
1:29:00
My globe is not appearing. The code compiles but the browser console shows this error THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.
Does anybody have a clue how I can fix this? I am using NEXTjs14 after Nextjs15 release because framer-motion does not work with Nextjs15.
Edit: I found a solution from reddit.
If anyone is getting the same error, I fixed by exporting the World function by default on @/components/ui/globe and adding dynamic import on the page I`m using it with in the "GridGlobe.tsx" file
import dynamic from 'next/dynamic'
const World = dynamic(() => import('@/components/ui/Globe'), {
This removes the error but the globe will not appear on large screen, inspect and make the screen smaller to see the globe.
Bro, Thank you so much for the tutorial! I didn’t realize it was so easy to upload projects to Hostinger. Does this method work with any type of app in Next.js? If I make changes to my app, would I just need to upload the Build folder again? Thanks for all your videos!