Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Build and Deploy a MacOS Style Portfolio with React, GSAP and Tailwind

JavaScript Mastery via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to build a stunning macOS-style portfolio website from scratch using React, GSAP, and Tailwind CSS in this comprehensive 3-hour tutorial. Master the creation of an interactive Apple Dock with smooth animations, implement draggable and resizable application windows that mimic the macOS interface, and develop a complete portfolio showcasing your skills. Discover advanced React patterns including Higher-Order Components for code reusability and global state management using Zustand for seamless data flow across components. Build essential portfolio sections including a navigation bar, welcome screen, resume display, contact form, and file finder system with text and image file windows. Implement smooth GSAP animations throughout the interface to create professional-grade user interactions and transitions. Follow a clean, modular React architecture that promotes code maintainability and scalability while learning deployment strategies to showcase your finished portfolio online.

Syllabus

00:00:00 — Introduction
00:03:53 — Hostinger
00:07:30 — Project Setup
00:20:15 — Navbar
00:30:56 — Welcome
00:59:32 — Dock
01:15:38 — Window Store
01:31:15 — High Order Component
01:58:11 — Safari
02:08:34 — Resume
02:16:25 — Location Store
02:22:07 — Finder
02:37:29 — Text & Image File Window
02:45:09 — Contact
02:52:56 — Home & Challenge
03:01:36 — Deployment
03:05:11 — Outro

Taught by

JavaScript Mastery

Reviews

Start your review of Build and Deploy a MacOS Style Portfolio with React, GSAP and Tailwind

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.