Looking to create a stunning and visually appealing portfolio website? In this tutorial, we'll guide you through building a dynamic React JS portfolio using the powerful Tailwind CSS utility framework and GSAP for smooth animations.

Key Highlights:

• Tailwind CSS: Learn how to quickly and efficiently style your React components using Tailwind's class-based approach.
• GSAP (GreenSock Animation Platform): Discover the art of creating captivating animations with GSAP. We'll demonstrate how to use GSAP's scroll trigger feature to reveal elements on scroll.
• Lenis: Enhance user experience with a smooth scrolling library, Lenis.
• Best Practices: Follow along as we implement best practices for React development, ensuring your portfolio is both functional and visually appealing.

Watch this video to learn:

• How to set up a React project with Tailwind CSS
• Creating custom components and layouts
• Utilizing GSAP for scroll-triggered animations
• Implementing smooth scrolling with Lenis

Whether you're a beginner or an experienced React developer, this tutorial will equip you with the skills to build a standout portfolio website. Subscribe to our channel for more in-depth tutorials and web development tips!

📁 Resources:

• Starter file: Henry Clark - Portfolio Images.zip
• GitHub gist: Henry Clark - Portfolio Gist
• Source code (Patreon): Henry Clark - Portfolio source code

• Source code (Buymeacoffee): Henry Clark - Portfolio source code

• ReactJS: https://react.dev/

• Tailwind CSS: https://tailwindcss.com/

• GSAP: https://gsap.com/

• Lenis: https://lenis.darkroom.engineering/

🔗 Chapters:

0:00 - Intro
1:09 - Project overview
4:09 - Project initial
17:12 - Style default scrollbar with tailwind-scrollbar
19:04 - Header
52:56 - Hero
1:16:02 - About
1:25:33 - Skill
1:36:54 - Work
1:51:26 - Review
2:03:55 - Contact
2:22:47 - Footer
2:32:16 - Smooth scroll animation
2:35:31 - GSAP for scroll reveal animation
2:50:47 - Final overview of the project