Full NextJS Project Tutorial: Portfolio Website
Kodaps Academy Kodaps Academy
15.1K subscribers
2,552 views
56

 Published On Dec 8, 2023

Master NextJS 14: Create a Dynamic Portfolio Website!

In this detailed tutorial, we build a dynamic and visually appealing project portfolio page using NextJS 14. Perfect for both beginners and seasoned developers, this video guides you through the entire process of setting up a captivating portfolio page.

🔍 What You'll Learn:

Setting up a new NextJS project with TypeScript, Tailwind CSS, and the App Router.
Integrating ContentLayer for efficient content management and importing content from a Notion database.
Building a grid layout for your portfolio using Tailwind CSS and creating detailed individual project pages.
Implementing a ContentLayer Schema to effectively manage your portfolio content.
Using @kodaps/notion-parse to seamlessly fetch content from Notion.
Techniques for managing content and creating responsive portfolio cards and detailed view pages.

📌 Key Features:
Learn to set up and configure NextJS 14 for your portfolio project.
Discover how to use ContentLayer for managing Markdown content.
Understand how to integrate Notion as a content source.
Explore the creation of visually engaging layouts with Tailwind CSS.
Get insights into handling dynamic content and routing in NextJS.

👨‍💻 For Developers:
Whether you're looking to showcase your work, enhance your web development skills, or explore NextJS capabilities, this video is an invaluable resource. We cover everything from initial setup to advanced features, ensuring you have a comprehensive understanding of building a portfolio site with NextJS.

🔗 Useful Links:
Full article: https://kodaps.dev/en/blog/nextjs-pro...
GitHub repository: https://github.com/Kodaps/portfolio-e...

💬 Stay Connected:
Please sign up for my newsletter if you're interested in staying up to date with latest trends and news : https://kodaps.dev/en/newsletter

👀 Related videos:
* Why I use ContentLayer with Markdown:    • NextJS:  ContentLayer Makes Markdown ...  
* How I use Notion with ContentLayer:    • How I Use Notion as a CMS (with Next JS)  

#NextJS #WebDevelopment #PortfolioWebsite #ContentLayer #NotionAPI #TailwindCSS #CodingTutorial"
----
Want to go into further depth? Head to https://kodaps.dev/

show more

Share/Embed