Bento Style Portfolio Website with Next.js 13 and Tailwind

Let's build a Bento style portfolio website with Next.js 13 and Tailwind from scratch. We will start a blank project and build a design to deploy on Vercel.
You will learn:
1) App Directory
2) Dark / Light Mode Support
3) Animations with Framer Motion
4) Tailwind Grid System
5) Responsive Design with Tailwind Container Queries
6) Custom Fonts with Next.js and Tailwind
7) Style Variants with Tailwind
Learn More: makr.dev
Source Code: github.com/batuhanbilginn/nex...
Discord Channel: / discord
- timestamps -
00:00 - Intro & Project Overview
01:36 - Project Setup
04:22 - Dark Mode Setup
11:42 - Applying Pre-defined Styles and Custom Font
17:58 - Creating Layout
26:22 - Building Left Part
41:26 - Building Grid Design
50:28 - Preparing Data Structure and Types
56:29 - Creating Style Variants
01:12:18 - Building Social Box
01:30:19 - Building Mentorship Box
01:38:03 - Building Project Box
01:42:47 - Building Equipments Box
01:52:50 - Responsive Design
02:17:58 - Animations & Deployment
#nextjs #tailwind #framermotion #portfolio

[@getecobyte]

I've been looking for a tutorial for bento style pages, thank you! Followed - this is so great.

[@wasmftw]

Great Tutorial !! Am going to use this as a starter template for future work

[@hirealgore]

Really informative. Good job man. Keep the videos coming!

[@Daniel-wx9wz]

Loving your projects, very unique and informative. Keep going, you deserve much more subscribers!

[@makrdev]

Thank you so much 😀

[@faisal_dev951]

hands down the best - m saving this for weekend 🚀

[@makrdev]

Thanks Faisal! Let me know what do you think when you watched 🤞

[@ggsingla]

Please zoom in on the code as well as the output browser window, not everybody is having a large monitor

[@brayanyevenes5954]

Would you like the idea of making the portfolio but with shadcn ui, to show us how it would look like?

[@pk5388]

what expansion in VScode that rearrange import type for you

[@luisromerovivas308]

hello friend, one question, what extensions do you have installed in visual studio code?

[@makrdev]

I don't use fancy things actually. Most important one is Copilot I guess :)

[@doob50]

1:30:29

[@patrickmanfra9205]

Source code link is broken =)

[@codewiththilaks]

exactly

[@wrongline]

delete /settings at the end of the link.

[@makrdev]

Thank you guys fixed it 👍