Sitio web personal y portfolio profesional con generación automática de CV en PDF optimizado para sistemas ATS (Applicant Tracking Systems).
🔗 Live Demo: https://daielchom.github.io
- 🎨 Diseño Moderno - Interfaz oscura elegante con animaciones suaves
- 🌍 Bilingüe - Español e Inglés con cambio dinámico
- 📄 Generación de PDF - CVs optimizados para ATS automáticamente
- 📱 Responsive - Adaptado a todos los dispositivos
- ⚡ Ultra Rápido - Construido con Vite para máximo rendimiento
- 🔄 Deploy Automático - GitHub Actions despliega en cada push
| Tecnología | Uso |
|---|---|
| React 18 | UI Framework |
| TypeScript | Type Safety |
| Vite | Build Tool |
| Tailwind CSS | Estilos |
| @react-pdf/renderer | Generación PDF |
| GitHub Actions | CI/CD |
daielchom.github.io/
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Actions para deploy
├── public/
│ ├── certificates/ # PDFs de certificados
│ ├── cv/ # PDFs generados del CV
│ ├── images/ # Imágenes (foto de perfil, etc.)
│ └── favicon.svg
├── scripts/
│ └── generate-pdf.ts # Script de generación de PDF
├── src/
│ ├── components/ # Componentes React
│ ├── context/ # Context API (idioma)
│ ├── data/
│ │ ├── resume.yaml # ⭐ Datos del CV
│ │ └── labels.yaml # Textos de la UI
│ ├── hooks/ # Custom hooks
│ ├── types/ # Tipos TypeScript
│ ├── App.tsx
│ ├── index.css
│ └── main.tsx
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
- Node.js >= 18.x
- npm >= 9.x
# Clonar el repositorio
git clone https://github.com/DaielChom/daielchom.github.io.git
cd daielchom.github.io
# Instalar dependencias
npm install# Iniciar servidor de desarrollo
npm run dev
# El sitio estará disponible en http://localhost:5173# Generar CV en español
npm run pdf:es
# Generar CV en inglés
npm run pdf:en
# Generar ambos
npm run pdf:allLos PDFs se generan en public/cv/:
CV_Daniel_Carvajal_ES.pdfCV_Daniel_Carvajal_EN.pdf
# Crear build optimizado
npm run build
# Preview del build
npm run previewTodos los datos del CV están centralizados en un solo archivo YAML. Edita este archivo para actualizar tu información:
# Información personal
personal:
name: "Tu Nombre"
email: "tu@email.com"
phone: "+57 XXX XXX XXXX"
# ...
# Experiencia laboral
experience:
- company: "Empresa"
title:
es: "Cargo en Español"
en: "Job Title in English"
startDate: "2022-01"
endDate: null # null = Presente
highlights:
es:
- "Logro 1 en español"
- "Logro 2 en español"
en:
- "Achievement 1 in English"
- "Achievement 2 in English"
showInPdf: true # false para ocultar en el PDF
# ... más secciones| Propiedad | Descripción |
|---|---|
showInPdf: false |
Oculta el item en el PDF (solo aparece en web) |
endDate: null |
Indica posición actual ("Presente") |
highlights.es/en |
Versión corta para PDF (bullets) |
description.es/en |
Versión larga para web |
navigation:
home:
es: "Inicio"
en: "Home"
# ...- Ve a Settings > Pages en tu repositorio
- Source: GitHub Actions
- ¡Listo! El workflow se encarga del resto
Cada push a main activa el workflow que:
- ✅ Instala dependencias
- ✅ Genera los PDFs del CV
- ✅ Construye el sitio
- ✅ Despliega a GitHub Pages
También puedes disparar el deploy manualmente:
- Ve a Actions en GitHub
- Selecciona Deploy to GitHub Pages
- Click en Run workflow
Los PDFs generados están optimizados para sistemas ATS:
- Formato simple - Sin tablas complejas ni columnas anidadas
- Texto seleccionable - No son imágenes
- Fuentes estándar - Helvetica (universalmente compatible)
- Secciones claras - Encabezados estándar reconocibles
- Keywords visibles - Skills técnicos prominentes
- 1 página - Contenido conciso y relevante
- Sin gráficos decorativos - Los ATS no los interpretan
┌────────────────────────────────────────┐
│ NOMBRE COMPLETO │
│ Título Profesional │
│ email | teléfono | ubicación | links │
├────────────────────────────────────────┤
│ RESUMEN PROFESIONAL │
│ Descripción breve (2-3 líneas) │
├────────────────────────────────────────┤
│ EXPERIENCIA PROFESIONAL │
│ • Empresa - Cargo (Fecha) │
│ - Logro 1 │
│ - Logro 2 │
├────────────────────────────────────────┤
│ EDUCACIÓN │
├────────────────────────────────────────┤
│ HABILIDADES │ IDIOMAS │
│ Python, SQL... │ Español - Nativo │
│ │ Inglés - C1 │
└────────────────────────────────────────┘
Edita tailwind.config.js:
theme: {
extend: {
colors: {
primary: {
500: '#14b8a6', // Teal - color principal
// ...
},
accent: {
500: '#d946ef', // Magenta - color de acento
// ...
},
},
},
}Edita index.html para cambiar las Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=TuFuente:wght@400;700&display=swap" rel="stylesheet" />Y tailwind.config.js:
fontFamily: {
sans: ['TuFuente', 'system-ui', 'sans-serif'],
}| Comando | Descripción |
|---|---|
npm run dev |
Servidor de desarrollo |
npm run build |
Build de producción |
npm run preview |
Preview del build |
npm run lint |
Ejecutar ESLint |
npm run pdf:es |
Generar CV en español |
npm run pdf:en |
Generar CV en inglés |
npm run pdf:all |
Generar ambos CVs |
# Asegúrate de tener todas las dependencias
npm install
# Verifica que el YAML sea válido
npm run pdf:all# Regenerar tipos
npm run build- Verifica que el push llegó a
main - Revisa el estado del workflow en Actions
- Espera 1-2 minutos para la propagación de caché
Este proyecto está bajo la licencia MIT. Siéntete libre de usarlo como base para tu propio portfolio.
- Diseño inspirado en tendencias modernas de UI/UX
- react-pdf por la generación de PDF
- Tailwind CSS por el sistema de estilos
- Lucide Icons por los iconos
⭐ Si te gusta este proyecto, dale una estrella!
Made with ❤️ by Daniel Carvajal Patiño