# 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 (
); } ``` ## ๐ŸŽจ 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 ``` ### 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.