React Portfolio Development Guide
You are helping develop a modern React TypeScript portfolio website built with Vite. This skill provides guidelines for creating professional portfolio sites with advanced interactive features and contemporary design patterns.
Project Architecture
This is a React TypeScript portfolio website featuring:
Modern React with TypeScript and hooksDark/light theme toggle system with localStorage persistenceParticle background animation systemScroll progress indicatorBack to top button with smooth scrollingAnimated timeline for experience sectionResponsive design for all devicesProfessional portfolio sections (About, Skills, Education, Experience, Projects, Contact)Development Standards
Component Structure
**Always use functional components** with React hooksImplement TypeScript for full type safety across all componentsBreak down complex UIs into reusable, composable componentsUse proper prop typing with TypeScript interfacesCode Quality
Follow React best practices for performance optimizationUse modern ES6+ features (destructuring, arrow functions, async/await)Implement proper error boundaries where needed to catch runtime errorsMaintain clean, readable code with consistent naming conventionsTypeScript Guidelines
Define interfaces for all props and stateUse type inference where appropriateAvoid `any` type; use proper typing or `unknown`Leverage utility types (Partial, Pick, Omit) for cleaner codePerformance Considerations
Optimize re-renders with `React.memo`, `useMemo`, and `useCallback`Lazy load components and routes where beneficialEnsure particle animations don't impact performanceMonitor bundle size and code-split when necessaryStyling Approach
Design System
**Glassmorphism design** with backdrop filters for modern aestheticsUse CSS custom properties (CSS variables) for theme managementImplement smooth animations and transitions throughoutProfessional gradient color schemes for visual appealResponsive Design
**Mobile-first approach** for all layoutsEnsure responsive design across all breakpoints (mobile, tablet, desktop)Test on various screen sizes and devicesUse flexible units (rem, em, %, vh/vw) over fixed pixelsStyling Implementation
Use CSS modules or styled-components for component-scoped stylingMaintain consistent spacing and typography scalesEnsure high contrast ratios for accessibilitySupport both dark and light themes seamlesslyKey Features Implementation
Theme System
Implement localStorage persistence for theme preferenceProvide smooth transitions between themesUse CSS custom properties for dynamic theme switchingSupport system preference detectionInteractive Elements
Particle background animations that respond to user interactionScroll progress indicator showing page positionBack to top button with smooth scrolling behaviorAnimated timeline components for experience/education sectionsPortfolio Sections
Structure your portfolio with these core sections:
1. **About** - Introduction and personal branding
2. **Skills** - Technical competencies and tools
3. **Education** - Academic background
4. **Experience** - Professional timeline
5. **Projects** - Portfolio showcase with descriptions
6. **Contact** - Contact form and social links
Accessibility Standards
Maintain WCAG 2.1 AA compliance minimumEnsure keyboard navigation works throughoutProvide appropriate ARIA labels and rolesTest with screen readersEnsure sufficient color contrast in both themesMake all interactive elements focusable and visible when focusedTesting Recommendations
Test theme toggle functionalityVerify responsive breakpoints on real devicesCheck animation performance on lower-end devicesValidate form inputs and error statesTest accessibility with automated tools and manual reviewBuild and Deployment
Optimize assets and images for webConfigure Vite for production buildsImplement proper meta tags for SEOSet up continuous deployment pipelineEnable compression and caching strategies