🚀 Modern CV Portfolio

A cutting-edge, digital CV built with React, featuring stunning animations, dark mode, and responsive design.

✨ Overview

This is a fully customizable, open-source digital CV/portfolio designed to showcase professional experience, skills, and projects with a modern, elegant aesthetic. Built with performance and user experience in mind, it features smooth scroll animations, 3D card effects, and a cohesive cyberpunk-minimalist design language.

✅ Open Source • Fork this repository and adapt it to your own professional profile!

---

🏗️ Architecture

Core Stack

• React 18 - Component-based UI with hooks architecture
• Vite - Lightning-fast build tool and dev server
• Tailwind CSS - Utility-first styling with custom theme
• Framer Motion - Advanced animations and scroll effects
• React Router - Client-side routing for seamless navigation

Component Structure

src/
├── components/          # Reusable UI components
│   ├── Header.jsx      # Navigation with scroll detection
│   ├── About.jsx       # Personal introduction
│   ├── Skills.jsx      # Tech stack with 3D card animations
│   ├── Experience.jsx  # Timeline-based work history
│   ├── Projects.jsx    # Portfolio showcase
│   ├── Education.jsx   # Academic background
│   └── Contact.jsx     # Contact form with EmailJS
├── pages/              # Route-based pages
├── context/            # Global state (Theme, etc.)
├── styles/             # Custom CSS and animations
└── assets/             # Static resources

Key Features

• 🎨 Dark/Light Mode with smooth transitions
• 🎭 Scroll-based Animations using Framer Motion
• 📱 Fully Responsive design (mobile-first approach)
• 🎯 Performance Optimized with lazy loading and code splitting
• 🌐 Internationalization Ready (English/Spanish support)
• 📧 Contact Form with EmailJS integration
• 🎬 3D Card Effects with perspective transforms
• ✨ Cyberpunk Aesthetic with neon accents and grid patterns

---

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn/pnpm

Installation

# Clone the repository
git clone https://github.com/Jefffer/CV-Jefffer.git

# Navigate to project directory
cd CV-Jefffer

# Install dependencies
npm install

# Start development server
npm run dev

Build for Production

npm run build
npm run preview  # Preview production build locally

---

🎨 Customization Guide

This template is designed to be easily customizable. Here's how to make it your own:

1. Personal Information

Update the following components with your data:

• src/components/About.jsx - Name, title, bio
• src/components/Experience.jsx - Work history
• src/components/Skills.jsx - Your tech stack
• src/components/Projects.jsx - Portfolio projects
• src/components/Education.jsx - Academic credentials

2. Theme & Colors

Modify tailwind.config.js to adjust:

• Color palette (cyan, indigo, purple accents)
• Typography scale
• Spacing and breakpoints

3. Animations

Fine-tune animations in individual components:

• Scroll triggers and thresholds
• Motion variants and transitions
• 3D transforms and perspective

4. Contact Integration 🔐

Public Configuration

All public API keys are stored in src/config/public.config.js:

const publicConfig = {
  emailjs: {
    serviceId: "YOUR_SERVICE_ID",
    templateId: "YOUR_TEMPLATE_ID", 
    publicKey: "YOUR_PUBLIC_KEY"
  },
  recaptcha: {
    siteKey: "YOUR_RECAPTCHA_SITE_KEY"
  }
};

Getting Your Keys

1. EmailJS:

   • Create account at EmailJS
   • Get Service ID, Template ID, and Public Key
   • Important: Configure domain restrictions in dashboard

2. reCAPTCHA v3:

   • Register site at Google reCAPTCHA
   • Choose reCAPTCHA v3
   • Get Site Key
   • Important: Add your domains to whitelist

Security 🛡️

• ✅ These keys are safe to commit to version control
• ✅ Designed for public exposure in frontend code
• ⚠️ MUST configure domain restrictions in respective dashboards
• 📖 See SECURITY.md for detailed security guide

---

🛠️ Tech Highlights

Technology	Purpose
React Router	SPA routing with lazy loading
Framer Motion	Scroll animations, 3D transforms, gestures
Tailwind CSS	Responsive design, dark mode, custom utilities
React Icons	Comprehensive icon library (FontAwesome, Simple Icons)
EmailJS	Serverless contact form handling
reCAPTCHA v3	Invisible spam protection for contact form
Vite	Fast HMR, optimized production builds

---

📄 License

This project is open source and available under the MIT License.

Feel free to fork, customize, and use this template for your own portfolio!

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.

---

💡 Credits

Designed and developed by Jefffer with a focus on modern web standards and exceptional user experience.

⭐ If you find this project useful, consider giving it a star!