Build a Portfolio Website with Next JS , TailwindCSS and Framer Motion

Опубликовано: 13 Март 2026
на канале: Albert Mends

8,439

363

Learn how to build and deploy a modern developer portfolio with animations using Next.js. Perfect for showcasing your web development skills!

⭐ Shadcn: https://ui.shadcn.com/
⭐ Neon: https://console.neon.tech/
⭐ TailwindCSS: https://tailwindcss.com/
⭐ Lucid-Icons: https://lucide.dev/icons/network

📚 Materials/References:
GitHub Repo (give it a star ⭐): https://github.com/mendsalbert/portfo...
Starter File: https://github.com/mendsalbert/portfo...
README (assets & code): https://github.com/mendsalbert/portfo...

👋 Social Media:
  / mendsalbert
  / mendsalbert_
  / mends-albert
https://t.me/albertmends

Subscribe or I turn your vs code into light mode
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝

Timestamps
00:00:00 - intro
00:00:52 - cloning starter file
00:04:14 - layout ( resume data + icon component)
00:10:29 - layout ( metadata )
00:16:59 - layout ( theme provider )
00:20:23 - layout ( tooltip provider )
00:25:51 - navbar
01:04:20 - main component ( putting it all together )
02:00:38 - outro

💼 Business inquiries: [email protected]

👨🏽‍💻 Tools and Tech Stack
React JS, NextJs, TailwindCSS,Typescript, Shadcn, magic ui, lucid react icons, Javascript.