Portafolio Personal 🚀

🌐 Sitio en Vivo

📑 Descripción

Portafolio personal y CV interactivo desarrollado con Astro. Presenta mi experiencia profesional, proyectos, habilidades y educación con un diseño moderno, optimizado para SEO y totalmente responsive. Incluye funcionalidades como búsqueda de contenido, gestión de blog con MDX, y modo de impresión profesional para CV.

✨ Características

• ⚡ Rendimiento excepcional - Construido con Astro para carga ultra-rápida
• 🎨 Diseño moderno - UI elegante con Tailwind CSS y efectos interactivos
• 📱 Totalmente responsive - Optimizado para todos los dispositivos
• 🔍 Búsqueda integrada - Búsqueda de contenido con Pagefind
• 📝 Blog con MDX - Soporte para contenido enriquecido con componentes React
• 🖨️ Modo impresión - CV optimizado para impresión profesional
• ⌨️ Paleta de comandos - Navegación rápida con atajos de teclado (Ctrl+K)
• 🎯 SEO optimizado - Meta tags, sitemap y RSS feed
• 🎭 Temas personalizables - Sistema de colores basado en CSS variables
• 📊 CMS integrado - Gestión de contenido con TinaCMS
• 🚀 Deploy automático - Configurado para Vercel

🛠️ Tecnologías

Core

Estilos

CMS y Contenido

Herramientas

📁 Estructura del Proyecto

/
├── public/
│   ├── img/                # Imágenes estáticas
│   ├── sitemap.xml         # Sitemap generado
│   └── admin/              # Panel de TinaCMS
├── src/
│   ├── assets/             # Assets optimizados
│   │   ├── blog/           # Imágenes del blog
│   │   └── img/            # Imágenes del portafolio
│   ├── components/         # Componentes de Astro/React
│   │   ├── sections/       # Secciones principales (Hero, Experience, etc.)
│   │   ├── ui/             # Componentes UI reutilizables
│   │   └── mdx/            # Componentes para MDX
│   ├── content/            # Contenido del sitio
│   │   ├── config.ts       # Configuración de colecciones
│   │   └── blog/           # Posts del blog
│   ├── layouts/            # Layouts de página
│   ├── pages/              # Páginas del sitio
│   │   ├── index.astro     # Página principal
│   │   ├── about.astro     # CV/About
│   │   └── blog/           # Blog
│   ├── styles/             # Estilos globales
│   │   ├── global.css      # Estilos principales
│   │   └── globalprint.css # Estilos de impresión
│   └── utils/              # Utilidades y helpers
├── tina/                   # Configuración de TinaCMS
├── cv.json                 # Datos del CV (JSON Schema)
├── astro.config.mjs        # Configuración de Astro
├── tailwind.config.mjs     # Configuración de Tailwind
└── package.json

🚀 Instalación y Configuración

Prerrequisitos

• Node.js 18.0 o superior
• pnpm (recomendado) o npm

Pasos de instalación

1. Clonar el repositorio

git clone https://github.com/SteveMoya/Portafolio-Web.git
cd Portafolio-Web

2. Instalar dependencias

pnpm install
# o
npm install

3. Configurar variables de entorno

El sitio está configurado en astro.config.mjs. Actualiza la URL:

site: 'https://tu-dominio.com'

4. Personalizar tu CV

Edita el archivo cv.json con tu información:

{
  "basics": {
    "name": "Tu Nombre",
    "label": "Tu Profesión",
    "email": "tu@email.com",
    ...
  },
  "work": [...],
  "education": [...],
  "skills": [...],
  "projects": [...]
}

5. Personalizar colores

Edita src/styles/global.css para cambiar los colores del tema:

:root {
  --primary: #c70039;        /* Color principal */
  --secondary: #b11141;      /* Color secundario */
  --dark: #101010;           /* Fondo oscuro */
  --color: 199, 0, 57;       /* Color de acento (RGB) */
}

🖥️ Comandos Disponibles

Comando	Acción
pnpm dev	Inicia servidor de desarrollo con TinaCMS
pnpm start	Inicia servidor de desarrollo sin TinaCMS
pnpm build	Construye el sitio para producción
pnpm preview	Previsualiza la build de producción
pnpm check	Verifica errores de TypeScript

📝 Gestión de Contenido

Blog

1. Crea archivos .mdx en src/content/blog/
2. Usa el frontmatter:

---
title: "Título del post"
description: "Descripción"
pubDate: 2024-03-10
heroImage: "/img/post.jpg"
tags: ["tag1", "tag2"]
---

TinaCMS

Accede al CMS en desarrollo: http://localhost:4321/admin

🌐 Deploy

El proyecto está configurado para Vercel:

1. Conecta tu repositorio a Vercel
2. Configura el comando de build: pnpm build
3. Directorio de salida: dist
4. ✅ ¡Deploy automático en cada push!

⌨️ Atajos de Teclado

• Ctrl + K (o Cmd + K) - Abre la paleta de comandos
• Ctrl + P - Imprimir CV
• Ctrl + [G/L/X] - Enlaces a redes sociales

🎨 Personalización del Diseño

Tailwind CSS

El proyecto usa un sistema de diseño personalizado con Tailwind. Las clases principales:

• text-skin-hue - Color de acento
• bg-skin-fill - Color de fondo
• text-skin-muted - Texto secundario
• border-skin-hue - Bordes con color de acento

Componentes

Los componentes están organizados por tipo:

• Sections: Secciones completas de página
• UI: Componentes reutilizables
• MDX: Componentes para contenido enriquecido

📄 Licencia

Este proyecto es de código abierto para uso personal y educativo.

---

✒️ Autor

Steve Moya Cepeda

Pionero en la tendencia del Marketing 5.0 en República Dominicana

🎁 Apoyo

Si te gusta este proyecto y quieres apoyar mi trabajo:

---

Hecho con ❤️ por Steve Moya