How to Build and Deploy a Portfolio with Next.js that Will Land You Jobs

Опубликовано: 01 Март 2025
на канале: Web Dev Simplified

43,053

1.2k

Hamed’s YouTube Channel:    / @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...
Hamed’s YouTube Channel:    / @hamedbahram
How To Setup ShadCN In Next.js Video:    • How to Setup Shadcn UI + Themes in Ne...
Search In Server Components Video:    • Adding Search Feature in Server Compo...
React Hook Form Video:    • Using React Hook Form, Zod Validation...
How To Send Email With Resend/React Email Video:    • Send Emails Using React Email, Resend...
Send Newsletter Emails With Resend Video:    • Send Newsletter Emails Using Resend B...

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon:   / webdevsimplified
Twitter:   / devsimplified
Discord:   / discord
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