Vigyata.AI
Is this your channel?

Build and Deploy a MacOS style Portfolio with React, GSAP & Tailwind

163.7K views· 4,354 likes· 187:11· Nov 21, 2025

🛍️ Products Mentioned (23)

🚀 Tool that I use: Get 10% off with code JSMASTERY Openclaw VPS Setup: https://jsm.dev/openclaw-hostinger Learn how to use OpenClaw with me: https://jsm.dev/openclaw-course In this video, you’ll build a macOS-style portfolio from scratch using React, GSAP, and Tailwind CSS. Step by step, you’ll recreate the interactive Apple Dock, draggable and resizable application windows, and more; all while learning how to use Higher-Order Components and manage global state with Zustand. All of it is packed with smooth GSAP animations and clean, reusable React architecture. Hostinger: https://jsm.dev/macos-hostinger + Use code JAVASCRIPTMASTERY CodeRabbit: https://jsm.dev/macos-coderabbit Junie AI: https://jsm.dev/macos-junie WebStorm: https://jsm.dev/macos-webstorm ⭐ Join JS Mastery Pro: https://jsm.dev/macos-jsm 💎 Become a Top 1% Next.js Developer: https://jsm.dev/macos-nextjs 🥇 Master Next.js Testing: https://jsm.dev/macos-testing Explore our Pro Courses: 📗 GSAP Pro Course (includes GTAVI Website): https://jsm.dev/macos-gsap 📕 Three.js 3D Pro Course: https://jsm.dev/macos-threejs 📙 JavaScript Pro Course: https://jsm.dev/macos-cpjsm 🚀 Launch Your SaaS Pro Course: https://jsm.dev/macos-saas 🔥 MacOS Portfolio Code + DCA Course Bundle: https://jsm.dev/macos-bundle 📁 Video Kit (Figma, Assets, Etc.): https://jsm.dev/macos-kit 🚀 Deployment: https://jsmfolio.netlify.app If the links aren’t working for you, please try using a VPN (e.g., in Nigeria) 👉 AI Development Pro Course Waitlist: https://jsm.dev/macos-aipro 👉 Backend Pro Course Waitlist: https://jsm.dev/macos-backpro 👉 Tailwind Pro Course Waitlist: https://jsm.dev/macos-tailwindpro 👉 React.js Pro Course Waitlist: https://jsm.dev/macos-reactpro 👉 React Native Pro Course Waitlist: https://jsm.dev/macos-nativepro Rate us on TrustPilot: https://jsm.dev/trustpilot https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery Business Inquiries: contact@jsmastery.pro Time Stamps: 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

About This Video

Stop building boring portfolios. In this video, I build a macOS-style portfolio that doesn’t just look like a website—it behaves like an actual OS. We recreate the Apple Dock with that magnifying “real physics” feel, build draggable and resizable app windows, and layer in GSAP-powered motion so everything feels premium and alive. You’ll end up with a desktop experience: Finder-style navigation, a Safari window for your blog, Photos, Contact, Terminal for your tech stack, and even a resume viewer with a download button. But this isn’t “flash for the sake of flash.” I’m using this project to teach you the exact patterns that separate juniors from seniors: clean React architecture, reusable components, Higher-Order Components, and global state management with Zustand (plus Immer). I also walk you through a proper setup—Vite + React, Tailwind config, assets + Figma kit workflow, absolute imports, and even pushing to GitHub with feature branches so you build like a real developer. Then we talk deployment and credibility: hosting on a real domain, shipping your work, and turning this portfolio into an actual career asset.

Frequently Asked Questions

🎬 More from JavaScript Mastery