Summary
Keywords
Full Transcript
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!🚀 👉Scrimba's AI Engineer Path: https://dub.sh/kKMUgJ0 (Get 20% discount) 👉Scrimba's Frontend Developer Path: https://dub.sh/J9PXN86 (Get 20% discount) __________________________________ 🟢Need Web Development or AI Solutions Services? 🚀 Let's bring your ideas to life! Contact Me From Here: https://codebucks.agency 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 📧: [email protected] 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 📧: [email protected] 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
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
