How to build a Bento portfolio using ReactJs + Typescript

Build a high-performance Bento-style portfolio website designed to showcase your developer skills and tech stack to recruiters.

This tutorial focuses on constructing clean, performant components from scratch. You will learn how to implement interactive elements like custom buttons and dialogs, ensuring your personal site is not just visually appealing but technically impressive. This approach is tailored for developers who want a professional, modern layout that effectively highlights their project experience.

By following this guide, you will gain the code snippets and structural knowledge needed to deploy a Bento-style portfolio that stands out. We prioritize a developer-centric workflow, ensuring your site remains lightweight and fast. This build is ideal for anyone looking to refine their frontend skills while creating a polished digital resume.

To level up your frontend skills join scrimba's course and get 20% OFF: https://scrimba.com/t/t0dj6pq6f1?via=codewithsadee

Tech Stack & Tools:

• React & TypeScript
• Tailwind CSS
• Radix UI Primitives, CVA, tailwind-merge, clsx
• Framer Motion (Animations)
• EmailJS (Serverless Mailing)
• Vercel Analytics & Speed Insights

What You Will Learn:

1. Setting up a production-ready React + TS environment
2. Designing a flexible, scalable UI component system
3. Hooking up a secure mailing system without a backend
4. Optimising your site architecture to nail a 100 Lighthouse score
5. Smooth animation orchestration with Motion
6. Continuous deployment on Vercel

✅ Prerequisite

• Basic React knowledge is enough to follow along.

🔗 Essential links:

• Assets: https://drive.google.com/file/d/16QKXYTabtokrH6L9T8UdUcUfIPzO5eXW/view?usp=sharing
• Source code 1: https://www.patreon.com/codewithsadee/posts/bento-portfolio-162959061?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
• Source code 2: https://buymeacoffee.com/codewithsadee/e/554291

🕐 Timestamp
0:00 - Intro
1:25 - Project initial
11:37 - Header
16:35 - Setup and apply framer motion
18:54 - Button component with radix UI
31:17 - Contact dialog
45:17 - Form submission
1:09:27 - Outro

Subscribe for weekly frontend development tutorials, and comment below with which portfolio feature you want to build next.