Homepage SPA con diseño Liquid Glass / Spatial UI — The Odin Project, Advanced HTML & CSS.
El portfolio rompe con la estructura clásica de los portfolios de desarrolladores. En lugar del típico diseño flat con cards sólidas, implementa una estética Liquid Glass inspirada en visionOS de Apple:
- Paneles translúcidos con
backdrop-filter: blur()real - Aurora borealis animada como fondo vivo con gradientes en movimiento
- Cards con tilt 3D que responden al movimiento del mouse
- Scroll reveal escalonado en cada sección
| Tecnología | Uso |
|---|---|
| HTML5 semántico | Estructura y accesibilidad |
| CSS3 Vanilla | Sistema de diseño completo (variables, animaciones, grid) |
| JavaScript Vanilla | Todas las interacciones sin frameworks |
| Tailwind CSS v4 (CDN) | Clases utilitarias de apoyo |
| GSAP + ScrollTrigger (CDN) | Animaciones de scroll |
| Devicon (CDN) | Iconos de tecnologías |
| Google Fonts | Outfit + Space Grotesk |
- 🌌 Aurora borealis con orbs animados (optimizada para bajo consumo de GPU)
- 🫧 Glassmorphism en todos los paneles y navegación
- 🖱️ Cursor glow que sigue al mouse (throttled a 30fps)
- ✨ Cards con efecto tilt 3D + reflejo de luz en hover
- 📊 Contadores animados con easing cúbico
- 🔢 FPS Monitor: activa automáticamente un modo de bajo rendimiento si detecta lag
- 📱 Totalmente responsive (320px → 1920px)
- ♿ Accesible: roles ARIA, focus-visible,
prefers-reduced-motion - 🚀 Sin build steps, sin npm, sin dependencias locales
tomas-portfolio/
├── index.html # SPA principal
├── style.css # Sistema de diseño Liquid Glass
├── main.js # Lógica de interacciones vanilla JS
├── assets/
│ └── avatar.jpg # Foto de perfil
└── README.md
| # | Proyecto | Descripción |
|---|---|---|
| 01 | ⚓ Battleship | Batalla Naval con IA y tablero interactivo |
| 02 | ♞ Knights Travails | BFS para camino mínimo del caballo de ajedrez |
| 03 | 🔁 Recursion | Fibonacci, Merge Sort y visualización del call stack |
| 04 | 📋 ¿Qué me falta? | Gestión de tareas y tracking de objetivos |
| 05 | 🏨 Hotel Deruha | Landing page de hotel con sistema de reservas |
| 06 | ⭕ Tateti | Tic-Tac-Toe vs jugador y vs IA |
| 07 | 🔢 Calculadora | Calculadora con soporte de teclado físico |
| 08 | 📝 Formulario de Ingreso | Registro con validación en tiempo real |
| 09 | 🍸 Barhaus Menu | Menú digital con filtros para bar/restaurante |
- 🌐 Live: tomas-stutz.github.io/portfolio
- 💼 GitHub: @tomastutz
- 💼 LinkedIn: Tomas Stutz
- 📸 Instagram: @tomastutz
Construido con HTML, CSS & JS · The Odin Project 2026