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/
Support❣️: https://codebucks.gumroad.com/coffee
__________________________________
🚀 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
➡ Support❣️: https://codebucks.gumroad.com/coffee
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