Portfolio React + Vite Components

Generate modern, responsive, and visually appealing portfolio components optimized for React + Vite projects.

What This Skill Does

This skill helps you create professional portfolio website components with modern React patterns and Vite build optimization. It generates clean, maintainable code for common portfolio sections following current best practices.

Instructions

When working on this React + Vite portfolio project:

1. **Component Architecture**

- Generate functional components using React hooks

- Use modern ES6+ syntax and destructuring

- Implement proper component composition and reusability

- Follow React best practices for state management and props

2. **Portfolio Sections**

- **Landing**: Create eye-catching hero sections with animations and CTAs

- **About**: Generate compelling personal introduction sections

- **Skills**: Build organized skill showcase components with visual indicators

- **Projects**: Design project cards/grids with images, descriptions, and links

- **Contact**: Implement contact forms with validation and social links

3. **Responsive Design**

- Use mobile-first approach with responsive breakpoints

- Implement flexbox and CSS Grid for modern layouts

- Ensure components adapt gracefully across all device sizes

- Test on mobile, tablet, and desktop viewports

4. **Styling Best Practices**

- Use CSS modules or styled-components for scoped styles

- Implement consistent spacing, typography, and color schemes

- Add smooth transitions and subtle animations for polish

- Ensure accessibility with proper contrast ratios and semantic HTML

5. **Vite Optimization**

- Leverage Vite's fast HMR (Hot Module Replacement)

- Use proper import statements for optimal code splitting

- Optimize assets and images for production builds

- Follow Vite's recommended project structure

6. **Code Quality**

- Write clean, readable, and well-commented code

- Use meaningful variable and function names

- Implement proper error handling and loading states

- Follow consistent code formatting and indentation

Example Usage

**User**: "Create a Skills section component"

**Expected Output**: A responsive Skills component with skill categories, progress bars or icons, and smooth animations on scroll.

**User**: "Generate a Projects showcase component"

**Expected Output**: A grid-based Projects component with project cards featuring images, titles, descriptions, tech stack tags, and links to live demos and repositories.

Notes