How to Create a Stunning Portfolio Website with Nextjs, Tailwind CSS and Framer-motion๐ŸŒŸ

Tutorial๐Ÿ˜‡ to build a beautiful mobile responsive portfolio using Nextjs, Tailwind css and Framer-motion that has good lighthouse score.

Demo Link๐Ÿ–ค:


In the useThemeSwitcher.js file in the following line,
— const preferDarkQuery = “(prefers-color-scheme: dark)”;
use “prefers-color-scheme” with s and not “prefer-color-scheme”

Starter CODE:
โžก Link ๐Ÿ’š:

Final CODE:
โžก Link 1๐Ÿ’š:
โžก Link 2๐Ÿ’š:
This link contains all the code which is used in the Video

The prompt used to create the image โžก
“A developer wearing glasses, digital art, profile picture, white background”

Hey there ๐Ÿ‘‹,

If you want to stand out in the crowded job market, you need a visually stunning portfolio. In this video, I’ll show you how to create one using NextJS, Tailwind CSS and Framer Motion. With the power of these three tools, you can transform your portfolio from outdated to outstanding. I’ll take you through the process step by step, from setting up the environment to building your site. By the end of this video, you’ll have all the knowledge you need to build a professional-grade portfolio.

For this project, we’re going to use,
โ–ถ๏ธ Next Js
โ–ถ๏ธ Tailwind CSS for styling
โ–ถ๏ธ Framer-motion for animations

Don’t forget to watch the whole video, we’re going to learn a lot of stuff like,
โ–ถ๏ธ How to use Tailwind css in a NextJs
โ–ถ๏ธ How to use framer-motion to create awesome animations
โ–ถ๏ธ How optimize images using next js
โ–ถ๏ธ How to use google fonts in next js
โ–ถ๏ธ How to implement dark mode in your next js portfolio

Watch the full video to understand, so that you can easily build and customize your own website.

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
Hire Me Circular Text @01:19:20
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
Dark Mode on refresh – @4:10:09
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

๐—™๐—ผ๐—น๐—น๐—ผ๐˜„ ๐—บ๐—ฒ ๐—ผ๐—ป ๐Ÿ‘‡ ๐˜„๐—ต๐—ฒ๐—ฟ๐—ฒ ๐—œ’๐—บ ๐˜€๐—ต๐—ฎ๐—ฟ๐—ถ๐—ป๐—ด ๐—น๐—ผ๐˜’๐˜€ ๐—ผ๐—ณ ๐˜‚๐˜€๐—ฒ๐—ณ๐˜‚๐—น ๐—ฟ๐—ฒ๐˜€๐—ผ๐˜‚๐—ฟ๐—ฐ๐—ฒ๐˜€!
Twitter๐Ÿค :
LinkedIn ๐Ÿ”—:
Instagram ๐Ÿ“ซ:
Email ๐Ÿ“ง:

In upcoming videos, I’m going to create lots of cool stuff with JavaScript and React so make sure to subscribe.

Like, Sub๐Ÿฅ‚ & Share! โ™ฅ

Learn More About,

๐Ÿ”ฅโญBuild Feature Rich Crypto Screener App with Tailwind CSS

๐Ÿ”ฅBuild awesome 3D landing page for Apple iPhone using ReactJS + ThreeJS + GSAP

๐Ÿ”ฅBuild a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]

๐Ÿ”ฅCreate an NFT Collection Website Landing page with React JS [Mobile Responsive]

๐Ÿ”ฅBuild a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ]

Build Devto Clone in React:

Build Awesome stuff with ReactJs (Playlist) :

React Advanced Topic (Playlist) :

If you have any suggestions regarding any topics in Web Development feel free to reach out or just comment below.

Thank You for watching! ๐Ÿ˜‰

Where else you can find me:
Twitter๐Ÿค :
LinkedIn ๐Ÿ”—:
Instagram ๐Ÿ“ซ:
Email ๐Ÿ“ง:

All videos are for educational purposes only, please use them wisely.