React Resume Kit - Documentación

Características

🌐

Soporte multiidioma

Fácil configuración para múltiples idiomas

📄

Descarga PDF

Funcionalidad integrada de descarga en PDF

🎨

Temas personalizables

Variables CSS para personalización completa

🎯

Soporte de iconos

Compatible con cualquier librería de iconos React

⚡

Fácil integración

Configuración simple y rápida

📱

Diseño responsivo

Se adapta a cualquier dispositivo

Instalación

npm install react-resume-kit

Inicio Rápido

import {ResumeLayout, ResumeHeader} from 'react-resume-kit'
import {content} from './tu-archivo-de-contenido'

function App() {
  return (
    <ResumeLayout resumeContent={content}>
      <ResumeHeader />
    </ResumeLayout>
  )
}

Configuración

Paso 1: Componentes disponibles

Agrega el componente ResumeLayout envolviendo uno o más de los siguientes componentes:

<ResumeHeader/>
<ResumeAbout/>
<ResumeWorks/>
<ResumeCourses/>
<ResumeTechnologies/>
<ResumeSoftSkills/>
<ResumeProjects/>
<ResumeContact/>

Paso 2: Props del ResumeLayout

Prop	Tipo	Descripción
`initialLanguage`	string	Idioma inicial (ej: "es", "en")
`resumeContent`	ResumeContent	Objeto con todo el contenido del currículum
`enableLanguageSwitch`	boolean	Habilita el selector de idioma
`enablePdfDownload`	boolean	Habilita la descarga en PDF

Estructura del Contenido

El contenido debe seguir esta estructura TypeScript:

import {ReactElement} from 'react'

type ResumeContent = {
  // Uno para cada idioma
  en: {
    // Nombres de secciones
    about_title: string
    works_title: string
    courses_title: string
    techs_title: string
    soft_skills_title: string
    soft_skills_subtitle: string
    projects_title: string
    projects_subtitle: string
    connect_title: string

    // Texto del botón de descarga
    download_pdf: string

    // Selector de idioma
    switcher_text: string
    language_labels: Array<{label: string; value: string}>

    // Header
    name: string
    title: string
    email: string
    phone: string
    location: string
    picture?: string

    // Acerca de
    about_text: string

    // Experiencia
    works: Array<{
      title: string
      company: string
      date: string
      location: string
      points: string[]
    }>

    // Cursos
    courses: Array<{
      degree: string
      school: string
      date: string
    }>

    // Tecnologías
    technologies: Array<{
      name: string
      icon: ReactElement
    }>

    // Habilidades Blandas
    soft_skills: Array<{
      title: string
      description: string
      icon: ReactElement
    }>

    // Proyectos
    projects: Array<{
      title: string
      description: string
      features: string
      technologies: string[]
      link?: string
    }>

    // Footer
    author: string
    socialLinks: Array<{
      name: string
      icon: ReactElement
      url: string
    }>
  }
}

Iconos

El componente soporta cualquier elemento React como icono. Puedes usar iconos de cualquier librería:

Ejemplo con Simple Icons

import {SiReact, SiTypescript} from '@icons-pack/react-simple-icons'

const content = {
  en: {
    // ...
    technologies: [
      {name: 'React', icon: <SiReact />},
      {name: 'TypeScript', icon: <SiTypescript />},
      // ...
    ],
    // ...
  },
}

💡 Tip: Eres responsable de importar y renderizar el icono que quieras. El componente automáticamente inyectará la clase CSS necesaria para un estilo consistente.

Soporte de Idiomas

El componente soporta múltiples idiomas. Proporciona el contenido para cada idioma:

const content = {
  en: {
    /* Contenido en inglés */
  },
  es: {
    /* Contenido en español */
  },
}

Personalización

Sistema de Estilos

Todos los componentes usan clases que comienzan con .rrk- para fácil identificación y personalización.

Personalización Rápida

:root {
  --rrk-primary: #3b82f6; /* Tu color principal */
  --rrk-surface-100: #ffffff; /* Color de fondo */
  --rrk-content: #1f2937; /* Color de texto */
  --rrk-radius-medium: 0.75rem; /* Radio de borde */
}

Personalización Avanzada

Variables CSS: Sobrescribe cualquier variable CSS para cambiar colores, sombras, bordes, etc.
Clases de Componentes: Dirige componentes específicos usando sus clases .rrk-
Herramientas de Desarrollador: Inspecciona elementos para ver todas las clases disponibles
Repositorio: Revisa los archivos CSS de los componentes para referencia completa

Toolbar Personalizado

Crea tu propio toolbar usando el hook useToolbar:

import {useToolbar} from 'react-resume-kit'

function MyCustomToolbar() {
  const {handlePrint, languageLabels, handleLanguageSelect} = useToolbar()

  return (
    <div className="my-toolbar">
      <button onClick={handlePrint}>📄 Descargar</button>
      <select onChange={(e) => handleLanguageSelect(e.target.value)}>
        {languageLabels.map((lang) => (
          <option key={lang.value} value={lang.value}>
            {lang.label}
          </option>
        ))}
      </select>
    </div>
  )
}

Enlaces Útiles

🌐 Demo en Vivo

Explora todas las características en acción

📦 NPM Package

Descarga e instala desde NPM

💻 Repositorio

Código fuente y contribuciones