CareerOS Cinematic Frontend

CareerOS is a high-end React portfolio website for an AI-powered career operating system. It is designed to present a UI/UX case study with cinematic motion, deep product strategy, premium dark-blue visual design, and responsive product screens.

Live Demo

• Website: https://ai-powered-career-operating-system.vercel.app
• Case study: https://ai-powered-career-operating-system.vercel.app/case-study.html

Stack

• React 19
• Vite
• Tailwind CSS
• Framer Motion
• GSAP + ScrollTrigger
• Lucide React icons

Experience

• Cinematic hero section with animated product dashboard
• 22-scroll-slide presentation narrative
• Deep product module simulator
• UX research and persona sections
• Design system with dark-blue color tokens and no yellow palette
• Responsive mobile product screens
• Prototype flow and case-study structure
• Sticky progress indicator, motion cards, pinned scroll, animated charts, and mobile navigation

Run Locally

npm install
npm run dev

Open the URL Vite prints, usually:

http://localhost:5174/

Production Build

npm run build

The optimized site is generated in dist/.

Files

• src/main.jsx — React application and UI components
• src/styles.css — Tailwind entry and global motion/accessibility styles
• tailwind.config.js — design tokens and Tailwind configuration
• CareerOS_UX_Case_Study.md — written UX strategy and case study