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.

✨ 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

# 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:

npm install react react-dom

🎯 Quick Start

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:

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:

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

Dynamic Favicons

Automatically update favicons based on the selected theme:

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:

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

For detailed TypeScript interfaces, see the type definitions.

🎯 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:

# Run tests
npm test

# Run tests with UI
npm run test:ui

# Run tests with coverage
npm run test:coverage

🛠️ Development

# 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 for detailed release history.

---

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