import React, { useState, useEffect, useRef, useCallback } from 'react'; import { ArrowLeft, ArrowUpRight, Clock, Calendar, Wrench, X } from 'lucide-react'; interface Project { id: number; title: string; category: string; description: string; role: string; timeline: string; tools: string[]; heroImage: string; supportingImages: string[]; accent: string; } const projects: Project[] = [ { id: 1, title: 'Lumen', category: 'Brand Identity', description: 'A complete brand identity for a sustainable lighting startup. The project involved developing a visual language that balances warmth and innovation, from logo design and color theory to packaging and digital presence. The final system is modular, allowing the brand to grow across multiple product lines while maintaining a cohesive and memorable aesthetic.', role: 'Lead Product Designer', timeline: '8 weeks', tools: ['Figma', 'Illustrator', 'After Effects'], heroImage: 'bg-gradient-to-br from-amber-500/60 via-orange-600/40 to-transparent', supportingImages: ['bg-gradient-to-tr from-rose-500/55 via-amber-600/35 to-transparent', 'bg-gradient-to-bl from-yellow-500/55 via-orange-600/35 to-transparent', 'bg-gradient-to-br from-amber-600/55 via-rose-600/30 to-transparent'], accent: 'text-amber-300', }, { id: 2, title: 'Nimbus', category: 'Mobile App', description: 'An intuitive weather app that prioritizes clarity and calm. I led the UX research and visual design, creating a minimal interface with thoughtful micro-interactions. The app uses a dynamic color system that shifts with the weather, making data feel personal and immediate. User testing revealed a 40% increase in daily engagement.', role: 'Product Designer & UX Researcher', timeline: '12 weeks', tools: ['Figma', 'Protopie', 'Maze'], heroImage: 'bg-gradient-to-br from-sky-500/60 via-blue-600/40 to-transparent', supportingImages: ['bg-gradient-to-tr from-indigo-500/55 via-sky-600/35 to-transparent', 'bg-gradient-to-bl from-blue-500/55 via-cyan-600/35 to-transparent', 'bg-gradient-to-br from-sky-600/55 via-indigo-600/30 to-transparent'], accent: 'text-sky-300', }, { id: 3, title: 'Meridian', category: 'Web Design', description: 'A portfolio website for an architecture firm that celebrates precision and space. The design uses a grid-based layout with generous whitespace, allowing the firm\'s projects to take center stage. I implemented subtle scroll animations and a filtering system that makes browsing the portfolio feel effortless and elegant.', role: 'UI Designer & Front-end Collaborator', timeline: '6 weeks', tools: ['Figma', 'Webflow', 'Framer'], heroImage: 'bg-gradient-to-br from-stone-400/60 via-zinc-600/40 to-transparent', supportingImages: ['bg-gradient-to-tr from-neutral-400/55 via-stone-600/35 to-transparent', 'bg-gradient-to-bl from-zinc-400/55 via-neutral-600/35 to-transparent', 'bg-gradient-to-br from-stone-500/55 via-zinc-700/30 to-transparent'], accent: 'text-stone-300', }, { id: 4, title: 'Aura', category: 'Design System', description: 'A scalable design system for a fintech company, built to ensure consistency across multiple products. I created a comprehensive library of components, tokens, and guidelines that empower engineers and designers to ship faster. The system reduced design-to-development handoff time by 60%.', role: 'Senior Product Designer', timeline: '16 weeks', tools: ['Figma', 'Storybook', 'Tokens Studio'], heroImage: 'bg-gradient-to-br from-emerald-500/60 via-teal-600/40 to-transparent', supportingImages: ['bg-gradient-to-tr from-green-500/55 via-emerald-600/35 to-transparent', 'bg-gradient-to-bl from-teal-500/55 via-cyan-600/35 to-transparent', 'bg-gradient-to-br from-emerald-600/55 via-green-600/30 to-transparent'], accent: 'text-emerald-300', }, { id: 5, title: 'Pulse', category: 'SaaS Platform', description: 'A health analytics dashboard that turns complex data into actionable insights. I focused on designing a clear information hierarchy and a set of customizable visualizations. The interface uses a dark theme with vibrant accents to highlight key metrics, making it both beautiful and highly functional.', role: 'Product Designer', timeline: '10 weeks', tools: ['Figma', 'D3.js', 'Tableau'], heroImage: 'bg-gradient-to-br from-rose-500/60 via-pink-600/40 to-transparent', supportingImages: ['bg-gradient-to-tr from-red-500/55 via-rose-600/35 to-transparent', 'bg-gradient-to-bl from-pink-500/55 via-fuchsia-600/35 to-transparent', 'bg-gradient-to-br from-rose-600/55 via-red-600/30 to-transparent'], accent: 'text-rose-300', }, { id: 6, title: 'Atlas', category: 'E-commerce', description: 'A curated shopping experience for a travel gear brand. I designed a clean, editorial-style product page that tells a story with each item. The layout emphasizes high-quality imagery and a frictionless checkout flow. Post-launch, the conversion rate increased by 25% and average order value grew by 15%.', role: 'Lead UI/UX Designer', timeline: '9 weeks', tools: ['Figma', 'Shopify', 'Hotjar'], heroImage: 'bg-gradient-to-br from-violet-500/60 via-purple-600/40 to-transparent', supportingImages: ['bg-gradient-to-tr from-indigo-500/55 via-violet-600/35 to-transparent', 'bg-gradient-to-bl from-purple-500/55 via-fuchsia-600/35 to-transparent', 'bg-gradient-to-br from-violet-600/55 via-indigo-600/30 to-transparent'], accent: 'text-violet-300', }, ]; function App() { const [selectedProject, setSelectedProject] = useState(null); const [activeSection, setActiveSection] = useState('home'); const heroRef = useRef(null); const aboutRef = useRef(null); const workRef = useRef(null); const handleScroll = useCallback(() => { const scrollPosition = window.scrollY + 100; if (heroRef.current && scrollPosition < heroRef.current.offsetHeight) { setActiveSection('home'); } else if (aboutRef.current && scrollPosition < aboutRef.current.offsetTop + aboutRef.current.offsetHeight) { setActiveSection('about'); } else if (workRef.current && scrollPosition < workRef.current.offsetTop + workRef.current.offsetHeight) { setActiveSection('work'); } }, []); useEffect(() => { window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [handleScroll]); useEffect(() => { if (selectedProject) { window.scrollTo({ top: 0, behavior: 'smooth' }); } }, [selectedProject]); const scrollToSection = (ref: React.RefObject) => { ref.current?.scrollIntoView({ behavior: 'smooth' }); }; return (

{/* Background Glow */}

{/* Navigation */}

{selectedProject ? ( /* Detail View */

{/* Hero Image */}

{selectedProject.title.toUpperCase()}

{selectedProject.category}

{/* Title & Meta */}

{selectedProject.title}

{selectedProject.description}

Role

{selectedProject.role}

Timeline

{selectedProject.timeline}

Tools

{selectedProject.tools.map((tool) => ( {tool} ))}

{/* Supporting Images */}

{selectedProject.supportingImages.map((img, index) => (

Detail {String(index + 1).padStart(2, '0')}

))}

) : ( /* Grid View */

{/* Hero Section */}

Product Designer

Mira Chen

Crafting digital experiences that blend minimalism with warmth, where every pixel has a purpose.

{/* About Section */}

About

Design with intention.

I'm a freelance product designer with 7 years of experience helping startups and established brands turn complex problems into elegant, intuitive interfaces. Based in Portland, I work with clients worldwide to create digital products that people love to use.

My approach is simple: listen deeply, prototype quickly, and iterate with purpose. I believe great design is invisible — it just feels right.

Skills

{['UI Design', 'UX Research', 'Design Systems', 'Prototyping', 'Branding', 'User Testing', 'Interaction Design', 'Wireframing', 'Visual Design'].map((skill) => ( {skill} ))}

Tools

{['Figma', 'Adobe XD', 'Sketch', 'Framer', 'Principle', 'Maze'].map((tool) => (

{tool}

))}

{/* Work Section */}

Selected Work

Projects I'm proud of.

{/* Asymmetric Grid */}

{projects.map((project, index) => ( ))}

{/* Footer */}

)}

); } export default App;

{selectedProject.title}

Mira Chen

Design with intention.

Projects I'm proud of.

{project.title}

ミニマルなデザイナーポートフォリオ