Sitio Web de Portafolio Profesional
Desarrollo de portafolio bilingüe con Quarto y GitHub Actions
Descripción del Proyecto
Este proyecto documenta el desarrollo de mi sitio web de portafolio profesional, construido desde cero utilizando Quarto, un sistema de publicación científica y técnica de código abierto. El sitio es completamente bilingüe (español e inglés) y está diseñado para mostrar mis proyectos de ciencia de datos y análisis cuantitativo a equipos de contratación internacionales.
Objetivos
- Portafolio Profesional Moderno: Crear un sitio web estético y profesional que muestre efectivamente mis habilidades en ciencia de datos
- Experiencia Bilingüe: Proporcionar contenido completo en español e inglés para alcanzar audiencias más amplias
- Diseño Responsivo: Asegurar una experiencia de usuario óptima en todos los dispositivos
- Despliegue Automatizado: Implementar CI/CD con GitHub Actions para publicación automática
- Fácil Mantenimiento: Estructura de proyecto organizada para actualizaciones eficientes de contenido
Tecnologías Utilizadas
Stack Principal
- Quarto: Framework de publicación técnica basado en Pandoc
- R Markdown: Para análisis reproducibles y visualizaciones de datos
- Bootstrap/Cerulean: Framework CSS para diseño responsivo
- GitHub Pages: Hosting estático gratuito y confiable
- GitHub Actions: Pipeline CI/CD automatizado
Herramientas de Desarrollo
- RStudio: Entorno de desarrollo integrado
- Git/GitHub: Control de versiones y colaboración
- CSS Personalizado: Diseño personalizado con tema cerulean
Arquitectura del Proyecto
FrankLeyva.github.io/
├── Portafolio/
│ ├── _quarto.yml # Configuración principal
│ ├── styles.css # Estilos personalizados
│ ├── index.qmd # Inicio (Español)
│ ├── index.en.qmd # Inicio (Inglés)
│ ├── about.qmd # Acerca de (Español)
│ ├── about.en.qmd # Acerca de (Inglés)
│ ├── images/ # Recursos visuales
│ └── *.qmd # Proyectos individuales
├── .github/
│ └── workflows/
│ └── quarto-publish.yml # Workflow de CI/CD
└── docs/ # Sitio compilado (generado)Características Principales
1. Diseño Bilingüe Completo
El sitio implementa un sistema de navegación bilingüe robusto:
- Archivos de contenido separados para cada idioma (
.qmdpara español,.en.qmdpara inglés) - Alternador de idioma en la barra de navegación
- Configuración específica de idioma en los metadatos de Quarto
- Navegación consistente en ambos idiomas
2. Sistema de Diseño Moderno
Paleta de Colores Cerulean: - Color primario: #2FA4E7 (Azul cerúleo) - Color oscuro: #1E88C7 - Color de acento: #0E4C92
Componentes de Diseño: - Sección hero con gradiente y foto de perfil - Sistema de tarjetas de proyecto con efectos hover - Tipografía y espaciado profesionales - Diseño totalmente responsivo
3. Organización de Proyectos
Los proyectos están categorizados por industria:
- Análisis de Encuestas: Investigación cuantitativa y análisis de datos de encuestas
- Desarrollo Web: Proyectos de desarrollo web y despliegue
- Manufactura (Futuro): Demostraciones centradas en manufactura
4. Pipeline de Despliegue Automatizado
El sitio utiliza GitHub Actions para despliegue continuo:
# Proceso automatizado:
1. Push a rama 'main'
2. Configurar entorno R
3. Instalar dependencias de R
4. Renderizar proyecto Quarto
5. Desplegar a GitHub PagesDesafíos Técnicos y Soluciones
Desafío 1: Gestión de Contenido Bilingüe
Solución: Implementar convención de nomenclatura consistente (.en.qmd para inglés) y perfiles de idioma separados en la configuración de Quarto.
Desafío 2: Estilos CSS Personalizados con Bootstrap
Solución: Usar variables CSS y clases personalizadas que se integran con el tema Cerulean de Bootstrap, manteniendo consistencia de diseño.
Desafío 3: Renderizado de Proyectos con R
Solución: Configurar correctamente las dependencias de R en GitHub Actions para asegurar que todos los paquetes (tidyverse, ggplot2, etc.) estén disponibles.
Código de Muestra
CSS de Sección Hero
.hero-section {
background: linear-gradient(135deg,
var(--primary-color) 0%,
var(--primary-dark) 100%);
color: white;
padding: 4rem 2rem;
text-align: center;
border-radius: 0 0 20px 20px;
}Resultados y Métricas
✅ Despliegue Exitoso: Sitio en vivo en frankleyva.com ✅ Diseño Responsivo: Probado en dispositivos móviles, tabletas y escritorio ✅ Tiempo de Construcción: ~2-3 minutos con GitHub Actions ✅ Soporte Bilingüe Completo: Contenido completo en español e inglés ✅ Puntuación de Rendimiento: Tiempos de carga rápidos con sitio estático
Trabajo Futuro
Habilidades Demostradas
Este proyecto muestra competencia en:
- Desarrollo Web Moderno: HTML, CSS, diseño responsivo
- Herramientas de Ciencia de Datos: Quarto, R Markdown, análisis reproducible
- DevOps: CI/CD con GitHub Actions, control de versiones con Git
- Diseño UI/UX: Paletas de colores, tipografía, experiencia de usuario
- Documentación Técnica: Documentación clara de proyecto y código
- Gestión de Proyectos: Organización estructurada de proyectos y flujo de trabajo
Conclusión
Este proyecto de sitio web de portafolio demuestra mi capacidad para combinar habilidades técnicas de ciencia de datos con desarrollo web moderno. Al construir un sitio completamente funcional, bilingüe y desplegado automáticamente, he creado una plataforma para mostrar efectivamente mi trabajo a posibles empleadores y colaboradores a nivel mundial.
El sitio no solo muestra mis proyectos, sino que en sí mismo es una demostración de mis capacidades técnicas, atención al detalle y compromiso con la calidad del código y la experiencia del usuario.
Tecnologías: Quarto, R, GitHub Actions, Bootstrap, CSS Repositorio: github.com/FrankLeyva/FrankLeyva.github.io Sitio en Vivo: frankleyva.com