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๐Ÿ–ค: https://minimal-nextjs-portfolio-website.vercel.app/

Blog๐Ÿ“–: https://devdreaming.com

Noteโ›”:
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 ๐Ÿ’š: https://github.com/codebucks27/Next.js-Developer-Portfolio-Starter-Code

Final CODE:
โžก Link 1๐Ÿ’š: https://codebucks.lemonsqueezy.com
โžก Link 2๐Ÿ’š: https://codebucks.gumroad.com/l/cdccc
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.

TimestampโŒ›:
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๐Ÿค : https://twitter.com/code_bucks
LinkedIn ๐Ÿ”—: https://www.linkedin.com/in/codebucks/
Instagram ๐Ÿ“ซ: https://www.instagram.com/code.bucks
Email ๐Ÿ“ง: codebucks27@gmail.com

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
https://youtu.be/JPlVb3t6kx8

๐Ÿ”ฅBuild awesome 3D landing page for Apple iPhone using ReactJS + ThreeJS + GSAP
https://youtu.be/cT160dOzpGY

๐Ÿ”ฅBuild a Stunning Fashion Studio Website with React JS [ Locomotive Scroll + GSAP + Framer Motion ]
https://youtu.be/Ra1Fsa9YJCk

๐Ÿ”ฅCreate an NFT Collection Website Landing page with React JS [Mobile Responsive]
https://youtu.be/edr2o59Twrs

๐Ÿ”ฅBuild a Stunning Portfolio Website with React JS [ Framer-motion + Styled-components ]
https://youtu.be/jcohAIaSy2M

Build Devto Clone in React:
https://youtube.com/playlist?list=PLjxZxD6BDkebDKxYH4El8P4Obb5VzcGlX

Build Awesome stuff with ReactJs (Playlist) :
https://youtube.com/playlist?list=PLjxZxD6BDkebOPXoqccGpiinfdY9zybXm

React Advanced Topic (Playlist) :
https://www.youtube.com/playlist?list=PLjxZxD6BDkeZoRU6v7gMyQ7BirGD6u0Lt

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๐Ÿค : https://twitter.com/code_bucks
LinkedIn ๐Ÿ”—: https://www.linkedin.com/in/codebucks/
Instagram ๐Ÿ“ซ: https://www.instagram.com/code.bucks
Email ๐Ÿ“ง: codebucks27@gmail.com

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

#nextjs
#tailwindcss
#portfolio