Nextjs Tutorial: Build a Mobile Responsive Portfolio with Tailwind CSS and Framer-motion
Looking to create a professional portfolio website to showcase your projects and skills? This Next.js portfolio website tutorial is perfect for you! With Next.js, Tailwind CSS, and Framer Motion, you can build a dynamic and responsive website that will impress your potential clients and employers. It has almost perfect lighthouse score.
The tutorial starts with an introduction and a demo of the final product. We’ll then move on to setting up the environment and installing the necessary tools. You’ll learn how to use Tailwind CSS for styling and Framer Motion for animations. We’ll cover how to optimize images using NextJS, use Google fonts in NextJS, and implement dark mode in your portfolio. In this portfolio there are 4 pages home, about, projects and articles. Before starting this video you can checkout the following demo link👇
Link🔗: NextJs Portfolio Website
What You’ll Learn
By watching this video tutorial, you will learn the following:
nextjsto build static pages
- Adding style using
- How to create Page Transition effects using
- How to use
Midjourneyto create awesome profile image.
- How to use google fonts in next js
- NextJS images optimization
- How to implement dark mode in your next js portfolio
- And many awesome animations using
Key Features of This Portfolio Website
- Smooth Page Transition effects
- Cool Animations
- Minimal design
- Multiple Pages
- Mobile Responsive
- Unique approach to showcase your articles
- Fonts and Image optimization using Next.js Image component
- On Scroll animations
For this project, you will use the following libraries:
- Tailwind CSS
You can find the starter code for this project at: Starter code for nextjs portfolio (Give ⭐ to this repo if you like it) And, for the final code, checkout the following link:
Final Code Link (Gumroad): Next.js portfolio website
Final Code Link (For Indian users only, please use this link only if above link don’t work): Next.js portfolio website
You can find all the resources used to make this portfolio from the following:
- Svg Icons from Iconify.
- Fonts from Google Fonts.
- LightBulb Svg from lukaszadam.
- Home page Image created by using Midjourney .
- Profile image in the about page by Albert Dera on Unsplash.
The video tutorial has the following time stamps for you to follow along:
- Intro + Demo @00:00:00
- Setup and Installation @00:06:20
- Tailwind CSS Setup @00:08:10
- Adding Fonts @00:11:55
- Navbar Component @00:18:35
- Logo Component @00:22:25
- Creating Home Page @00:45:18
- Creating Animated Text Component @00:54:50
- Footer Component @01:12:40
- About Page @01:30:50
- Creating Skills Component @01:54:12
- Creating Experience & Education Component @02:06:40
- Projects page @02:33:10
- Articles page @02:59:55
- Adding Darkmode in portfolio @03:32:05
- Optimizing NextJs Image Component @04:14:22
- Make it Responsive @04:19:50
- Page Transition Effect @05:38:22
- Some Tips and Notes @05:48:25