⚡ Mario Tomé Core — Portfolio

Experiencia inmersiva, diseño responsivo y código limpio.
Un portafolio diseñado para demostrar capacidad técnica en Frontend moderno, optimización de rendimiento y UX.

🚀 Ver Demo en Vivo · Reportar Bug · Contactar

---

🎨 Sobre el Proyecto

Este proyecto no es solo una tarjeta de presentación; es una demostración de ingeniería de software aplicada al frontend. He construido este sitio para reflejar mi perfil como Full Stack Developer, combinando estética visual con un rendimiento técnico sólido.

Características Principales

• Experiencia 3D Interactiva: Implementación de Three.js y @react-three/fiber para un fondo de partículas interactivo y reactivo al movimiento.
• Mobile-First & Performance: Optimización agresiva para dispositivos móviles, incluyendo limitación dinámica del DPR (Device Pixel Ratio) y reducción de geometría basada en el viewport para asegurar 60FPS en smartphones.
• UI/UX Moderna: Diseño Glassmorphism (efecto cristal), animaciones fluidas con Framer Motion y tipografía cuidada.
• Integración GitHub: Visualización en tiempo real de estadísticas, trofeos y gráfico de contribuciones (Snake Game) mediante APIs y GitHub Actions.
• CI/CD Automatizado: Pipeline de despliegue continuo con GitHub Actions que construye y despliega automáticamente a GitHub Pages en cada push.

---

🛠️ Stack Tecnológico

El proyecto utiliza un stack moderno enfocado en la velocidad de desarrollo y el rendimiento en producción:

Categoría	Tecnologías
Core
Estilos & UI
3D & Gráficos
Infraestructura

---

🚀 Instalación y Uso Local

Sigue estos pasos para ejecutar el proyecto en tu máquina local:

1. Clonar el repositorio:

   git clone https://github.com/mariotc1/mariotc1.github.io.git
   cd mariotc1.github.io

2. Instalar dependencias:

   npm install

3. Ejecutar servidor de desarrollo:

   npm run dev

4. Construir para producción:

   npm run build

---

📂 Estructura del Proyecto

/
├── public/
│   └── assets/          # Imágenes estáticas y recursos (optimizados para Vite)
├── src/
│   ├── components/      # Componentes reutilizables (Hero3D, ProjectCard, etc.)
│   ├── App.tsx          # Componente raíz y layout principal
│   ├── constants.ts     # Datos estáticos (Proyectos, Textos, Links)
│   ├── types.ts         # Definiciones de TypeScript
│   └── index.css        # Estilos globales y Tailwind imports
├── .github/
│   └── workflows/       # Pipelines de CI/CD (Deploy y Snake Game)
└── vite.config.ts       # Configuración de empaquetado

---

⚡ Optimizaciones Técnicas

Gestión de Assets

Se ha migrado la carpeta de recursos a public/assets para garantizar que Vite sirva las imágenes correctamente tanto en el entorno de desarrollo como en la build de producción, solucionando problemas de rutas relativas comunes en SPAs.

Renderizado 3D Condicional

Para evitar el sobrecalentamiento en dispositivos móviles, el componente Hero3D detecta el user-agent y el tamaño de ventana:

• Desktop: Renderiza ~3000 partículas con alta fidelidad.
• Móvil: Reduce la geometría a 800 partículas y limita el DPR a 2x máximo para mantener 60FPS constantes sin sacrificar la calidad visual.

---

📬 Contacto

Mario Tomé Core - Desarrollador Full Stack

---

Desarrollado con ❤️ y mucho ☕ por Mario Tomé Core