Build Stunning NextJs Portfolio⭐ Website using Tailwind-CSS and Framer-motion
Tags: nextjs, react, beginners, tutorial
Published: 2023-03-27 17:09:24

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.

## Overview

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/)

Here is the tutorial on how I have created this portfolio!👇
{% youtube Yw7yWHigGKI %}

## 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) 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 <a href="https://iconify.design/" target="_blank" rel="nofollow noopener">Iconify</a>.
- Fonts from <a href="https://fonts.google.com/" target="_blank" rel="nofollow noopener">Google Fonts</a>.
- LightBulb Svg from <a href="https://lukaszadam.com/illustrations" target="_blank" rel="nofollow noopener">lukaszadam</a>.
- Home page Image created by using <a href="https://www.midjourney.com/" target="_blank" rel="nofollow noopener">Midjourney</a> .
- Profile image in the about page by <a target="_blank" rel="nofollow noopener" href="https://unsplash.com/@albertdera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Albert Dera</a> on <a target="_blank" rel="nofollow noopener" href="https://unsplash.com/photos/ILip77SbmOE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.

Feel free to try different designs and animations with it and you can also tag me or share your link in the comments.

Any suggestions are welcomed!
**Don't forget to Share your feedback in the comments.**

## You might also like these website templates:

- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD)
- NFT collection landing page in ReactJS => [here](- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD))

## Thanks For Reading😄

Checkout my other article: 

[Build a custom pagination component in ReactJS from scratch]
(https://devdreaming.com/blogs/create-pagination-component-reactjs)

[Form validation in ReactJS: build a reusable custom hook for inputs and error handling]
(https://devdreaming.com/blogs/react-form-validation-custom-hook)

Feel free to visit my youtube channel: 
[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

Checkout my new website:
[DevDreaming](https://devdreaming.com)

Follow me on Twitter where I share lots of useful resources!
[@code_bucks](https://twitter.com/code_bucks) 😉