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/
__________________________________
๐Ÿš€ Become an AI Engineer with JavaScript!๐Ÿš€
Level up your skills by learning AI with Scrimba’s AI Engineer Path. Unlike other platforms, Scrimbaโ€™s unique scrim format allows you to learn by doing. Youโ€™ll also explore courses created by domain experts including Hugging Face, LangChain, and Mistral, offering expert-backed content. Scrimba is also partnered with Mozilla MDN to ensure top-tier learning experiences.

๐Ÿ‘‰ Join here (Get 20% discount๐Ÿคฉ): https://v2.scrimba.com/the-ai-engineer-path-c02v?via=codebucks
__________________________________

๐ŸŸขNeed Web Development or AI Solutions Services? ๐Ÿš€
Let’s bring your ideas to life!
Contact Me From Here: https://tally.so/r/wdlj0N

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,

โญ https://youtu.be/T5t46vuW8fo
โญ https://youtu.be/QNh0MH-G3OM
โญ https://youtu.be/1QGLHOaRLwM
โญ https://youtu.be/Yw7yWHigGKI
โญ https://youtu.be/JPlVb3t6kx8
โญ https://youtu.be/Ra1Fsa9YJCk
โญ https://youtu.be/edr2o59Twrs
โญ https://youtu.be/jcohAIaSy2M
โญ https://www.youtube.com/playlist?list=PLjxZxD6BDkeY5OvIpH_WVjsEVXOW8pBrl
โญ https://www.youtube.com/playlist?list=PLjxZxD6BDkeZLbkPNgGxZklwPdhIAuYqV

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. There may be affiliate links in the description, meaning I may earn a small commission at no extra cost to you if you make a purchase.

#nextjs
#tailwindcss
#portfolio