Un portfolio moderno y técnicamente impresionante construido con React, TypeScript, Bootstrap 5 y tecnologías de vanguardia. Diseñado para destacar en procesos de selección tech con un enfoque en la experiencia de usuario y el rendimiento.
- Efecto Hero: Partículas interactivas con TS Particles
- Glassmorphism: Efectos modernos en secciones clave
- Gradientes Animados: Transiciones suaves y elegantes
- Cards 3D: Efectos hover con
transform-style: preserve-3d - Custom Cursor: Trail effect personalizado
- Animaciones: Transiciones fluidas con Framer Motion
- React 18 con componentes funcionales TypeScript
- Vite como bundler para desarrollo rápido
- React Router v6 para navegación SPA
- Context API para manejo de tema global
- Custom Hooks para lógica reutilizable
- Bootstrap 5 + React Bootstrap integrado
- ✅ Efecto typing animation con rotación de textos
- ✅ Botones CTA con microinteracciones
- ✅ Indicador scroll down animado
- ✅ Stats en tiempo real con contadores
- ✅ Header con glassmorphism al hacer scroll
- ✅ Toggle de tema (light/dark/auto)
- ✅ Menú responsive con animaciones
- ✅ Navegación suave entre secciones
- 🚧 Grid responsive con cards interactivas
- 🚧 Overlay con tech stack y badges animados
- 🚧 Lightbox para detalles técnicos
- 🚧 Filtrado por tecnologías
- 🚧 Radar chart interactivo (Chart.js)
- 🚧 Progress bars animadas
- 🚧 Nube de tags clickable
- 🚧 Tooltips con años de experiencia
- 🚧 Timeline vertical interactiva
- 🚧 Efectos parallax en logos
- 🚧 Modales con logros cuantificables
- 🚧 Sistema de endorsements
- 🚧 Carrusel 3D de certificados
- 🚧 Badges de verificación oficial
- 🚧 Filtrado por plataforma
- 🚧 Formulario con validación en tiempo real
- 🚧 Descarga de CV con tracking
- 🚧 Social links con hover effects
- 🚧 Integración con Mapbox
- Toggle Developer/Recruiter: Información técnica adicional
- Daily Coding: GitHub contribution graph mock
- Salary Tooltip: Rango salarial en hover
- Easter Egg: ASCII art en consola con info de contacto
- Preloader: Animación npm install metaphor
- Meta tags dinámicos optimizados
- Schema.org markup estructurado
- Lazy loading con skeleton screens
- Code splitting automático
- Preload de fuentes críticas
- Navegación por teclado completa
- Contrastes AAA verificados
- ARIA labels y roles
- Soporte para motion reducido
- Mobile-first approach
- Menú hamburguesa animado
- Breakpoints optimizados
- Touch gestures
- Node.js 18+
- npm o yarn
# Clonar el repositorio
git clone https://github.com/username/portfolio-web.git
cd portfolio-web
# Instalar dependencias
npm install
# Ejecutar en desarrollo
npm run dev
# Construir para producción
npm run build
# Preview de build
npm run previewnpm run dev # Servidor de desarrollo
npm run build # Build de producción
npm run lint # Linting con ESLint
npm run preview # Preview del buildEdita src/styles/variables.scss:
$primary: #00f3ff;
$secondary: #ff4d5a;
$accent: #a855f7;Modifica src/data/portfolio.ts:
export const personalInfo = {
name: "Tu Nombre",
title: "Tu Título",
// ... más configuraciones
}Las fuentes se cargan desde Google Fonts:
- Principal: Montserrat (300-800)
- Mono: JetBrains Mono (300-600)
Para cambiar fuentes, edita index.html y src/styles/variables.scss.
Configuraciones en src/context/ThemeContext.tsx:
const animations = {
duration: 300,
easing: 'ease-in-out'
}src/
├── components/ # Componentes React
│ ├── Layout/ # Header, Footer
│ ├── UI/ # Componentes reutilizables
│ ├── Hero/ # Sección hero
│ ├── Projects/ # Portfolio de proyectos
│ ├── Skills/ # Skills y tecnologías
│ ├── Experience/ # Experiencia laboral
│ ├── Certifications/ # Certificaciones
│ └── Contact/ # Formulario de contacto
├── context/ # Context API providers
├── hooks/ # Custom hooks
├── utils/ # Utilidades y helpers
├── types/ # Definiciones TypeScript
├── styles/ # Estilos SCSS
└── assets/ # Imágenes y recursos
- React 18 - UI Library
- TypeScript - Type Safety
- Vite - Build Tool
- React Router - SPA Routing
- Bootstrap 5 - CSS Framework
- Framer Motion - Animaciones avanzadas
- React Spring - Physics-based animations
- TS Particles - Particle background
- React Type Animation - Typing effects
- Chart.js - Gráficos interactivos
- React ChartJS 2 - React integration
- ESLint - Code linting
- Sass - CSS preprocessing
- React Bootstrap - Bootstrap components
# Instalar Vercel CLI
npm i -g vercel
# Deploy
vercel
# Configurar dominio personalizado
vercel domains add tu-dominio.com# Build
npm run build
# Subir carpeta dist/ a Netlify# Instalar gh-pages
npm install --save-dev gh-pages
# Agregar script a package.json
"homepage": "https://username.github.io/portfolio-web",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
# Deploy
npm run deployEl portfolio incluye tracking de eventos:
- Page views
- Project interactions
- Contact form submissions
- Theme changes
- CV downloads
Para activar analytics en producción, configura Google Analytics en src/utils/analytics.ts.
Si encuentras errores con partículas:
npm install @tsparticles/react @tsparticles/basic @tsparticles/engineAsegúrate de tener Sass instalado:
npm install -D sassVerifica la configuración en tsconfig.json y las rutas de alias.
- Fork el proyecto
- Crea una branch para tu feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la branch (
git push origin feature/AmazingFeature) - Abre un Pull Request
Este proyecto está bajo la Licencia MIT. Ver LICENSE para más detalles.
Sandro Gomez
- 📧 Email: [email protected]
- 🔗 LinkedIn: linkedin.com/in/sandro-gomez-21355b346
- 🐙 GitHub: github.com/sandrogomez-dev
- 🌐 Portfolio: sandrodevx-portfolio.vercel.app
⭐ Si te gusta este proyecto, ¡dale una estrella en GitHub!
Disponible para:
- Full-time (Remoto/Híbrido)
- Freelance projects
- Consulting
- Rango salarial: $40k - $80k USD