Nextjs Tutorial: Build a Mobile Responsive Portfolio with Tailwind CSS and Framer-motion

Overview

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:

• Using nextjs to build static pages
• Adding style using tailwind-css.
• How to create Page Transition effects using framer-motion.
• How to use Midjourney to 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 framer-motion.

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

Libraries Used

For this project, you will use the following libraries:

• Next.js
• Framer-motion
• Tailwind CSS

Code Links

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

Resources

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.

Time Stamps

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