How to Build and Deploy a Portfolio with Next.js that Will Land You Jobs
Hamed’s YouTube Channel: https://www.youtube.com/@hamedbahram
Building a portfolio is one of the best things you can do as a developer looking for a job, but it is important you make your portfolio visually appealing and functional which is where this video comes in. In this video Hamed will show you how to create a stunning Next.js portfolio that will help increase your chances of landing your next job.
? Materials/References:
GitHub Code: https://www.hamedbahram.io/notes/next-mdx-portfolio
Hamed’s YouTube Channel: https://www.youtube.com/@hamedbahram
How To Setup ShadCN In Next.js Video: https://youtu.be/l93uukpAoxE
Search In Server Components Video: https://youtu.be/e7bUYg7_hCI
React Hook Form Video: https://youtu.be/R_Pj593TH_Q
How To Send Email With Resend/React Email Video: https://youtu.be/a8b3EN0R-M4
Send Newsletter Emails With Resend Video: https://youtu.be/YhIk-mfl1SM
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00:00 - Introduction
0:00:30 - Project demo
0:04:00 - Project setup
0:09:15 - Add shadcn/ui
0:14:30 - Add dark theme
0:25:00 - Application shell
0:35:00 - Add Intro section
0:39:00 - Add MDX
0:48:00 - Dynamic post page
1:03:00 - Styling mdx content
1:08:30 - Adding custom components
1:16:00 - Add all posts page
1:23:10 - Add search to posts
1:28:30 - Generate static pages
1:31:30 - Recent posts component
1:33:20 - Add projects page
1:38:00 - Custom 404 page
1:40:45 - Add contact page
1:53:30 - Add server action to contact form
2:00:00 - Resend package
2:09:40 - Add Newsletter form
2:17:20 - Deploy to Vercel
2:19:05 - Recap
#NextJS #WDS #WebDevPortfolio
Building a portfolio is one of the best things you can do as a developer looking for a job, but it is important you make your portfolio visually appealing and functional which is where this video comes in. In this video Hamed will show you how to create a stunning Next.js portfolio that will help increase your chances of landing your next job.
? Materials/References:
GitHub Code: https://www.hamedbahram.io/notes/next-mdx-portfolio
Hamed’s YouTube Channel: https://www.youtube.com/@hamedbahram
How To Setup ShadCN In Next.js Video: https://youtu.be/l93uukpAoxE
Search In Server Components Video: https://youtu.be/e7bUYg7_hCI
React Hook Form Video: https://youtu.be/R_Pj593TH_Q
How To Send Email With Resend/React Email Video: https://youtu.be/a8b3EN0R-M4
Send Newsletter Emails With Resend Video: https://youtu.be/YhIk-mfl1SM
? Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00:00 - Introduction
0:00:30 - Project demo
0:04:00 - Project setup
0:09:15 - Add shadcn/ui
0:14:30 - Add dark theme
0:25:00 - Application shell
0:35:00 - Add Intro section
0:39:00 - Add MDX
0:48:00 - Dynamic post page
1:03:00 - Styling mdx content
1:08:30 - Adding custom components
1:16:00 - Add all posts page
1:23:10 - Add search to posts
1:28:30 - Generate static pages
1:31:30 - Recent posts component
1:33:20 - Add projects page
1:38:00 - Custom 404 page
1:40:45 - Add contact page
1:53:30 - Add server action to contact form
2:00:00 - Resend package
2:09:40 - Add Newsletter form
2:17:20 - Deploy to Vercel
2:19:05 - Recap
#NextJS #WDS #WebDevPortfolio
Web Dev Simplified
Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular tech...