🚀 Cavin's Portfolio - Calatech

A modern, VS Code-inspired portfolio showcasing web development expertise with a clean, professional design that adapts beautifully between light and dark themes.

✨ Features

🎨 VS Code-Inspired Design

• Professional Aesthetic: Matches VS Code's trusted, familiar interface
• Dual Theme Support: Seamless light/dark mode switching
• Modern Color Palette: Carefully selected colors for optimal readability
• Smooth Animations: Subtle transitions and hover effects

🛠️ Technical Excellence

• React 18: Latest React features with modern hooks
• Vite: Lightning-fast development and build processes
• SCSS Architecture: Modular, maintainable styling system
• Responsive Design: Perfect on desktop, tablet, and mobile
• SEO Optimized: Meta tags, structured data, and performance

📱 User Experience

• Accessibility First: WCAG compliant with excellent contrast ratios
• Performance Optimized: Fast loading and smooth interactions
• Cross-Browser Compatible: Works across all modern browsers
• Progressive Enhancement: Graceful degradation for older browsers

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn or pnpm or bun

Installation

# Clone the repository
git clone https://github.com/Killercavin/cavin.git

# Navigate to project directory
cd cavin

# Install dependencies
npm install

# Start development server
npm run dev

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

🎨 Theme Customization

The portfolio features a VS Code-inspired theme system with easy customization:

Light Theme Colors

• Primary: #007ACC (VS Code Blue)
• Background: #FFFFFF (Pure White)
• Text: #1E1E1E (Dark Gray)
• Accent: #F6F6F6 (Light Gray)

Dark Theme Colors

• Primary: #4FC3F7 (Light Blue)
• Background: #1E1E1E (VS Code Dark)
• Text: #CCCCCC (Light Gray)
• Accent: #252526 (VS Code Panel)

Customization Files

• src/styles/themes/_variables-theme-light.scss - Light theme colors
• src/styles/themes/_variables-theme-dark.scss - Dark theme colors
• src/styles/customization/_vscode-enhancements.scss - VS Code styling

📁 Project Structure

src/
├── components/           # React components
│   ├── articles/        # Article-specific components
│   ├── buttons/         # Button components
│   ├── forms/           # Form components
│   ├── layout/          # Layout components
│   ├── modals/          # Modal components
│   └── sections/        # Page sections
├── hooks/               # Custom React hooks
│   ├── api.js          # API utilities
│   ├── utils/          # Utility hooks
│   └── models/         # Data models
├── providers/           # React context providers
├── styles/             # SCSS styling
│   ├── themes/         # Theme variables
│   ├── layout/         # Layout styles
│   └── customization/  # Custom styling
└── main.jsx            # Application entry point

🌟 Key Sections

• About: Personal introduction and professional summary
• Experience: Work history and achievements
• Skills: Technical skills and competencies
• Portfolio: Featured projects and work samples
• Education: Academic background and certifications
• Contact: Professional contact information

🚀 Deployment

Netlify (Recommended)

npm run build:netlify    # Build for Netlify
npm run deploy:netlify   # Deploy to Netlify

Manual Deployment

npm run build           # Build for production
# Upload dist/ folder to your hosting provider

🛠️ Technologies Used

• Frontend: React 18, JavaScript ES6+
• Styling: SCSS, Bootstrap 5
• Build Tool: Vite
• Icons: FontAwesome, PrimeIcons
• Forms: EmailJS for contact forms
• Animations: Custom CSS transitions

📱 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

👨‍💻 About the Developer

Cavin - Full Stack Developer passionate about creating modern, accessible web experiences.

• 🌐 Portfolio: website
• 💼 LinkedIn: @killercavin
• 🐙 GitHub: @Killercavin
• 📧 Email: Email

🙏 Acknowledgments

• Ryan Balieiro - Original template architecture, inspiration, and guidance. Help me thank him for his amazing work via Ryan's Portfolio and don't forget to star his original repository Ryan's portfolio template.
• VS Code Team - Design inspiration
• React Community - Excellent documentation and support

---

⭐ Star this repository if you found it helpful!