Interactive CV Website

A modern, interactive CV website built with React and Vite, featuring dark mode design, smooth animations, and deployable to GitHub Pages.

Features

• 🎨 Dark Mode Design - Sleek, professional dark theme
• ✨ Smooth Animations - Scroll-reveal animations and transitions
• 📱 Responsive - Mobile-first, works on all devices
• 🔄 Interactive Timeline - Expandable work experience and education
• 🏷️ Filterable Projects - Filter projects by technology
• 🎯 Expandable Sections - Collapsible content sections
• 🤖 AI Attribution - Very subtle AI credit indicator

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Git

Installation

1. Clone the repository:

git clone <your-repo-url>
cd cv

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:5173 in your browser

Adding Your CV Data

1. Open src/data/cvData.js
2. Fill in your information:
   • About: Name, title, summary, contact info
   • Experience: Work history with achievements
   • Education: Educational background
   • Skills: Categorized skills (languages, frameworks, tools, other)
   • Projects: Portfolio projects with technologies
   • Certifications: Professional certifications (optional)

Example Data Structure

export const cvData = {
  about: {
    name: "Your Name",
    title: "Software Engineer",
    summary: "Your professional summary...",
    location: "City, Country",
    email: "your.email@example.com",
    linkedin: "https://linkedin.com/in/yourprofile",
    github: "https://github.com/yourusername",
  },
  experience: [
    {
      id: 1,
      company: "Company Name",
      position: "Job Title",
      location: "City, Country",
      startDate: "2020-01",
      endDate: "2023-12", // or "Present"
      description: "Job description",
      achievements: [
        "Achievement 1",
        "Achievement 2",
      ],
      technologies: ["React", "Node.js", "TypeScript"],
    }
  ],
  // ... more sections
};

LinkedIn Data Import

You can use the LinkedIn parser utility to import your LinkedIn export:

1. Export your LinkedIn data from LinkedIn settings
2. Use src/utils/linkedinParser.js to parse the data
3. Update cvData.js with the parsed data

Building for Production

npm run build

The built files will be in the dist/ directory.

Preview the production build:

npm run preview

Deployment to GitHub Pages

Initial Setup

1. Create GitHub Repository

   • Create a new repository on GitHub
   • Push your code to the main branch

2. Configure GitHub Pages

   • Go to repository Settings → Pages
   • Source: Select "GitHub Actions"
   • The workflow will automatically deploy on push to main

3. Update Base Path (if needed)

   • If your repository name is not cv, update base in vite.config.js:

   base: '/your-repo-name/',

4. Custom Domain Setup (Optional)

   • Create public/CNAME file with your subdomain:

   cv.yourdomain.com
   

   • In Squarespace DNS settings, add:
     • Type: CNAME
     • Host: cv (or your subdomain)
     • Points to: username.github.io
   • Or use A records pointing to GitHub Pages IPs:
     • 185.199.108.153
     • 185.199.109.153
     • 185.199.110.153
     • 185.199.111.153

Automatic Deployment

Once set up, every push to the main branch will automatically:

1. Build the site
2. Deploy to GitHub Pages
3. Update your live site in 1-2 minutes

Project Structure

cv/
├── public/              # Static assets
├── src/
│   ├── components/      # React components
│   │   ├── Header.jsx
│   │   ├── About.jsx
│   │   ├── Experience.jsx
│   │   ├── Education.jsx
│   │   ├── Skills.jsx
│   │   ├── Projects.jsx
│   │   ├── Contact.jsx
│   │   ├── Timeline.jsx
│   │   ├── ExpandableSection.jsx
│   │   ├── FilterableGrid.jsx
│   │   └── AICredit.jsx
│   ├── styles/          # CSS files
│   │   ├── theme.css
│   │   ├── animations.css
│   │   └── global.css
│   ├── utils/           # Utility functions
│   │   ├── animations.js
│   │   └── linkedinParser.js
│   ├── data/            # CV data
│   │   └── cvData.js
│   ├── App.jsx
│   └── main.jsx
├── .github/
│   └── workflows/
│       └── deploy.yml    # GitHub Actions workflow
├── vite.config.js
└── package.json

Customization

Colors

Edit src/styles/theme.css to customize the color scheme:

:root {
  --bg-primary: #0a0a0a;
  --accent-primary: #6366f1;
  /* ... more variables */
}

Animations

Modify animation timings in src/styles/animations.css or adjust transition speeds in theme.css.

Layout

Components are modular - edit individual component files in src/components/ to customize layout and behavior.

Technologies Used

• React - UI library
• Vite - Build tool
• CSS3 - Styling with custom properties
• GitHub Actions - CI/CD
• GitHub Pages - Hosting

License

This project is open source and available for personal use.

Acknowledgments

Built with AI assistance - see the subtle indicator in the bottom-right corner.