Build Full Stack Portfolio & CMS | Next.js portfolio | shadcn ui | full stack website | 2024
🌐 Introduction:
Welcome to Simple Dev Code! In this comprehensive tutorial, we'll guide you through the process of creating your own full stack portfolio website from scratch. Whether you're a beginner or an experienced developer, this step-by-step guide will help you showcase your skills and projects in style.
🔧 What You'll Learn:
🤙 Mobile first responsive portfolio website design
📲 Styling portfolio using Shadcn UI and Tailwind CSS
🏁 API Routing in Next.js 14
📢 Dynamic Routing in Next.js 14
🧑💻 Component Driven Website Development
🧑💻 Implement Carousel Section shadcn UI
📝 Form validation using React hook form
📩 Send Email using node mailer
🌆 Getting and listing data/images from database
🗒️ On scroll page smooth animation
🌐 On page Click to redirect the respective section
🚀 Deploying portfolio website
📒 Chapters
0:05 Project Intro & Demo
5:14 Mobile Header Section
12:36 Mobile Banner Section
21:54 Mobile Count Section
25:14 Mobile Skills Section
34:34 Mobile Project Section
46:13 Mobile Blog Section
52:14 Mobile Contact Form Section
56:09 Mobile Contact Info Section
1:01:49 Mobile Footer Section
1:06:31 Mobile Project Section API Integration
1:16:45 Mobile Blogs Section API Integration
1:21:11 Creation of MainLayout and using Website
1:24:19 Creating Separate Project & Blog Showcase Section
1:26:14 Creating Separate Project & Blog Detail Section
1:47:18 Mobile On Page Scroll Using CSS smooth Animation
1:50:14 On Page Scroll Sticky Menu Section
1:55:33 Project details Section
2:02:19 Working for Table and Desktop version Responsive
2:13:08 Adding form Validation for Website Contact Form
2:24:06 Configure and Working Send Email using NodeMailer
2:38:10 On Page Scroll Animation Adding
2:43:49 Adding CMS Form Validation
2:54:15 Final Demo and Review
⚙️ Tools and Technologies Used:
✔️ Next.js 14
✔️ React.js
✔️ Tailwind CSS
✔️ TypeScript
✔️ Shadcn ui
✔️ Supabase/PostgreSQL
👨💻 Who Should Watch:
Aspiring Full Stack Developers
Web/Frontend Developers looking to enhance their skills
Students and Beginners in programming
🔗 Links:
Git Link: https://topmate.io/simpledevcode/1127513
Demo URL: https://full-stack-portfolio-sable.ve...
Login credentials:
Username: [email protected]
Password: demo@123
👍 Connect with Simple Dev Code:
Subscribe for more tutorials: / @simpledevcode
Follow on Instagram: / simpledevcode
Follow on LinkedIn: / simpledevcode
🙏 Thanks for watching! Don't forget to like, share, and subscribe for more tutorials.
👨💻 Happy coding!
Design inspiration: https://www.figma.com/community/file/...
Search related keywords:
responsive portfolio website using react js full stack portfolio website personal portfolio website using react js tailwind css portfolio simple web developer portfolio complete portfolio website simple animation html css javascript projects for portfolio simple responsive website using html and css how to create portfolio website using html and css react full stack project personal website html css javascript make website using tailwind css tailwind tutorial for beginners tailwind css tutorial how to make responsive
#FullStack #PortfolioWebsite #WebDevelopmentTutorial #CodingTutorial #FullStackDevelopment #nextjstutorial #nextjsprojects #reactjsprojects #reacttutorial #tailwindcss #tailwind #shadcnui #supabase #fullstackwebdevelopment #fullstacksoftwareengineering #students #studentsvideo #csstudent #csstudents #typescriptdevelopment #typescripttutorial #typescript #shadcnui
Смотрите видео Build Full Stack Portfolio & CMS | Next.js portfolio | shadcn ui | full stack website | 2024 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Simple Dev Code 27 Январь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 14,965 раз и оно понравилось 651 людям.