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

> Learn how to build a professional portfolio website using React JS, Framer-motion, and Styled-components. Follow this stLearn how to create a visually stunning, mobile-responsive portfolio using Next.js, Tailwind CSS, and Framer Motion in this tutorial. Follow step-by-step instructions, from setting up the environment to building the site.

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/videos/nextjs-tutorial-build-portfolio-tailwind-css-framer-motion
- **Author:** CodeBucks
- **Published:** 2023-03-26
- **Topics:** Framer Motion, Tailwind CSS, Next Js

---

**[▶ Watch on YouTube](https://www.youtube.com/watch?v=Yw7yWHigGKI)**

### Overview

Looking to create a [professional portfolio website](https://devdreaming.com/videos/build-stunning-portfolio-website-react-js-framer-motion) to showcase your projects and skills? This Next.js
portfolio website tutorial is perfect for you! With Next.js, [Tailwind CSS](https://devdreaming.com/videos/category/tailwind-css), and [Framer Motion](https://devdreaming.com/videos/category/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](https://minimal-nextjs-portfolio-website.vercel.app/)

### 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](https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code) (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](https://codebucks.gumroad.com/l/cdccc)

### Resources

You can find all the resources used to make this portfolio from the following:

- Svg Icons from [Iconify](https://iconify.design/).
- Fonts from [Google Fonts](https://fonts.google.com/).
- LightBulb Svg from [lukaszadam](https://lukaszadam.com/illustrations).
- Home page Image created by using [Midjourney](https://www.midjourney.com/) .
- Profile image in the about page by [Albert Dera](https://unsplash.com/@albertdera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/ILip77SbmOE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).

### Time Stamps

The video tutorial has the following time stamps for you to follow along:

- Intro + Demo [@00:00:00](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=0s)
- Setup and Installation [@00:06:20](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=380s)
- Tailwind CSS Setup [@00:08:10](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=430s)
- Adding Fonts [@00:11:55](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=715s)
- Navbar Component [@00:18:35](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=1115s)
- Logo Component [@00:22:25](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=1345s)
- Creating Home Page [@00:45:18](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=2718s)
- Creating Animated Text Component [@00:54:50](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=3290s)
- Footer Component [@01:12:40](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=4360s)
- About Page [@01:30:50](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=5450s)
- Creating Skills Component [@01:54:12](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=6852s)
- Creating Experience & Education Component [@02:06:40](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=7600s)
- Projects page [@02:33:10](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=9190s)
- Articles page [@02:59:55](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=10795s)
- Adding Darkmode in portfolio [@03:32:05](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=12725s)
- Optimizing NextJs Image Component [@04:14:22](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=15262s)
- Make it Responsive [@04:19:50](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=15590s)
- Page Transition Effect [@05:38:22](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=20302s)
- Some Tips and Notes [@05:48:25](https://www.youtube.com/watch?v=Yw7yWHigGKI&t=20905s)

---

## Related on DevDreaming

- [All Video Tutorials](https://devdreaming.com/videos)
- [Blog & Tutorials](https://devdreaming.com/blogs)
- [Free Developer Tools](https://devdreaming.com/tools)

---

_This is the Markdown twin of a page on **DevDreaming** -- free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._