# Standard CV

A professional, customizable, and responsive CV/Resume component library for React with full TypeScript support. Create beautiful, modern curriculum vitae with ease using this comprehensive component system.

![Version](https://img.shields.io/badge/version-2.0.0-blue.svg)
![License](https://img.shields.io/badge/license-Proprietary-red.svg)
![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)
![React](https://img.shields.io/badge/React-18+-green.svg)

## ✨ Features

- 🎨 **10 Beautiful Themes** - Choose from carefully crafted color schemes
- 🎯 **TypeScript First** - Full type safety and excellent developer experience
- 📱 **Fully Responsive** - Looks great on all devices and screen sizes
- 🎨 **Modern CSS** - CSS custom properties for easy theming
- 🚀 **Performance Optimized** - Built with modern tooling (Vite + ESBuild)
- 🧪 **Well Tested** - Comprehensive test coverage with Vitest
- 📖 **Accessible** - Built with accessibility best practices
- 🖨️ **Print Ready** - Optimized styles for printing
- 🔧 **Highly Customizable** - Flexible data structure and styling options
- ⚡ **Tree Shakeable** - Import only what you need

## 🚀 Installation

```bash
# Using npm
npm install @react-bricks/standard-cv --registry https://lab.code-rove.com/public-node-registry

# Using yarn
yarn add @react-bricks/standard-cv --registry https://lab.code-rove.com/public-node-registry

# Using pnpm
pnpm add @react-bricks/standard-cv --registry https://lab.code-rove.com/public-node-registry
```

## 📦 Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install react react-dom
```

## 🎯 Quick Start

```tsx
import React from "react";
import { StandardCV } from "@react-bricks/standard-cv";
import "@react-bricks/standard-cv/dist/style.css";

const cvData = {
  configuration: {
    theme: "turquoise",
    favicon: {
      use: true,
      id: "favicon-svg",
      placeholder: "{#theme}",
      href: "/icons/{#theme}-favicon.svg",
    },
    options: {
      urlTheme: true,
    },
  },
  header: {
    profile: {
      name: "Tudor Stanciu",
      position: "Senior Software Engineer",
      picture: {
        src: "/images/profile.jpg",
        alt: "John Doe's profile picture",
      },
      download: {
        label: "Download CV",
        src: "/files/cv.pdf",
      },
    },
    about: {
      content:
        "Passionate software engineer with expertise in modern web technologies...",
    },
    networks: [
      {
        id: 1,
        icon: "fas fa-envelope",
        url: "mailto:john@example.com",
        label: "john@example.com",
        sameTab: true,
      },
    ],
  },
  article: {
    education: {
      visible: true,
      icon: "fa-graduation-cap",
      label: "Education",
      elements: [
        {
          id: 1,
          name: "University of Technology",
          time: "2018-2022",
          title: "Bachelor of Computer Science",
        },
      ],
    },
    work: {
      visible: true,
      icon: "fa-briefcase",
      label: "Work Experience",
      elements: [
        {
          name: "Tech Company",
          time: "2022-Present",
          position: "Software Engineer",
          content: [
            {
              id: 1,
              text: "Developed modern web applications using React and TypeScript.",
            },
          ],
        },
      ],
    },
    projects: {
      visible: true,
      icon: "fa-pen",
      label: "Projects",
      elements: [],
    },
    skills: { visible: true, icon: "fa-wrench", label: "Skills", elements: [] },
    honors: { visible: false, icon: "fa-medal", label: "Honors", elements: [] },
    conferences: {
      visible: true,
      icon: "fa-users",
      label: "Conferences",
      elements: [],
    },
  },
  footer: {
    visible: true,
    owner: {
      message: "Created by",
      name: "Tudor Stanciu",
      url: "https://johndoe.dev",
    },
  },
};

function App() {
  return (
    <div className="App">
      <StandardCV data={cvData} />
    </div>
  );
}
```

## 🎨 Available Themes

Choose from 10 beautiful, professionally designed themes:

- `turquoise` (default) - Fresh and professional
- `blue` - Classic and trustworthy
- `green` - Natural and calming
- `brown` - Warm and earthy
- `orange` - Energetic and creative
- `purple` - Modern and sophisticated
- `pink` - Friendly and approachable
- `coral` - Vibrant and distinctive
- `nude` - Minimal and elegant
- `rainbow` - Creative and colorful (gradient effects)

## 🔧 Advanced Features

### URL Theme Switching

Enable dynamic theme switching via URL parameters:

```tsx
const cvData = {
  configuration: {
    theme: "turquoise",
    options: {
      urlTheme: true, // Enable URL theme switching
    },
  },
  // ... rest of config
};

// Now users can change themes via: ?theme=blue
```

### Custom CSS Classes

Add custom styling with className prop:

```tsx
<StandardCV data={cvData} className="my-custom-cv" />
```

### Dynamic Favicons

Automatically update favicons based on the selected theme:

```tsx
const cvData = {
  configuration: {
    favicon: {
      use: true,
      id: "favicon-svg",
      placeholder: "{#theme}",
      href: "/icons/{#theme}-favicon.svg", // Will replace {#theme} with actual theme name
    },
  },
};
```

## 📊 Data Structure

The component expects a comprehensive data object with the following structure:

```typescript
interface StandardCVData {
  configuration: Configuration;
  header: Header;
  article: Article;
  footer: Footer;
}
```

For detailed TypeScript interfaces, see the [type definitions](./src/types/index.ts).

## 🎯 Component Architecture

The library follows a modular architecture:

```
StandardCV (Main Component)
├── ThemeProvider (Theme Management)
├── Layout (Main Layout)
│   ├── HeaderLayout (Left Sidebar)
│   │   ├── Profile
│   │   ├── About
│   │   └── SocialNetworks
│   └── Sections (Right Content)
│       ├── Education
│       ├── Work
│       ├── Projects
│       ├── Skills
│       ├── Honors
│       └── Conferences
└── Footer
```

## 🧪 Testing

The library includes comprehensive test coverage using Vitest and React Testing Library:

```bash
# Run tests
npm test

# Run tests with UI
npm run test:ui

# Run tests with coverage
npm run test:coverage
```

## 🛠️ Development

```bash
# Install dependencies
npm install

# Start development mode
npm run dev

# Build the library
npm run build

# Type checking
npm run typecheck

# Linting
npm run lint
npm run lint:fix
```

## 📄 License

This software is proprietary and requires a license for use.

- ✅ **Personal use**: Free for personal, non-commercial CV creation
- ❌ **Commercial use**: Requires separate commercial license
- ❌ **Redistribution**: Not permitted without explicit approval

For commercial licensing inquiries, please contact: tudor.stanciu94@gmail.com

## 🤝 Support

For support, questions, or licensing inquiries:

- 📧 Email: tudor.stanciu94@gmail.com
- 🌐 Portfolio: https://lab.code-rove.com/tsp
- 📝 Blog: https://lab.code-rove.com/lab-stories

## 📝 Changelog

See [CHANGELOG.md](./CHANGELOG.md) for detailed release history.

---

**⚠️ Important**: This is proprietary software. Please ensure you comply with the license terms. Commercial use requires a separate license agreement.