Abierto a colaborar / Laboratorio front-end · Desde 2025 / 33 proyectos

The Front-End Projects

¡Ey!, Soy Andres Hernandez Lozano 👋

Apasionado por el desarrollo frontend creo interfaces limpias y accesibles. Compartiendo proyectos y tutoriales prácticos de HTML, CSS y JavaScript para que aprendas de forma rápida y divertida.

Ubicado en Melbourne, VIC.

33 proyectos y contando

Andres smiling under a blossom tree

Andres sitting at the Sydney Opera House

Andres with open arms in the snow at sunset

Andres in an autumn garden

Andres next to a silver sculpture

Andres standing in front of the Sydney Opera House

Andres in front of the Harbour Bridge at night

Andres on a ski slope on a sunny day

Andres jumping in a garden

HTML CSS JavaScript animation GSAP forms localStorage validation canvas 3d vite dashboard search autocomplete clipboard accessibility API hover cards ThreeJs ScrollTrigger landing page webgl scroll animation HTML CSS JavaScript animation GSAP forms localStorage validation canvas 3d vite dashboard search autocomplete clipboard accessibility API hover cards ThreeJs ScrollTrigger landing page webgl scroll animation

Desliza para explorar

Último proyecto / #33 / Avanzado

Stash

Una app de finanzas personales de cinco páginas hecha con React, TypeScript y Vite, planteada como un dashboard oscuro ultra ancho que crece de una a cuatro columnas en vez de quedarse en un ancho medio. El saldo principal cuenta hacia arriba junto a un área animada de recharts con selector de rango de 7/14/30 días, la dona de gastos se dibuja girando, las barras de progreso crecen desde cero y avisan cuando un presupuesto se pasa, y las rutas hacen crossfade con la View Transitions API mientras la píldora de navegación activa se desliza entre secciones. Debajo: transacciones con búsqueda, orden, filtro por categoría y paginación, CRUD completo de presupuestos y huchas, traspasos que mueven el saldo principal, y facturas recurrentes con estado del mes. Todo alcanzable por teclado, con diálogos que atrapan el foco, validación de formularios y variante de movimiento reducido. Construida a partir del reto de nivel Guru de app de finanzas personales en Frontend Mentor.

recharts
View Transitions
localStorage
accessibility

(33)

Todos los proyectos

Filtra por dificultad, busca por nombre o tecnología y abre cualquier demo.

33 / 33 resultados

Tecnología

Wavelength

Página de contacto presentada como una consola de radio vintage: un panel de transmisión con datos de contacto tipo frecuencia de radio a un lado, y un formulario de "transmisión" con envío simulado y estado de carga tipo pulso de señal al otro. Inspirado en html-css-js-projects #18.

forms
layout
animation

Pinboard

Tablero Kanban con estilo de corcho: notas adhesivas ancladas que arrastras entre tres columnas (o reordenas dentro de una) con un motor de arrastre propio basado en eventos de puntero, pensado para funcionar también en pantallas táctiles, no la API nativa de HTML5. Persiste en localStorage. Inspirado en html-css-js-projects #03, con el alcance ampliado para acercarse al reto "Kanban board" de nivel Advanced de Frontend Mentor.

drag-and-drop
localStorage
animation

#07 Principiante

Masthead

Página de equipo estilo editorial impreso — tonos crema, tipografía serif y fotografía a duotono, inspirada en html-css-js-projects #20.

team
editorial
grid
typography

#12 Principiante

Tally

Tarjetas KPI de colores saturados con números que cuentan hacia arriba, mini gráficos y revelado al hacer scroll. Inspirado en html-css-js-projects #35.

dashboard
stats
count-up
intersection observer

Stash

Una app de finanzas personales de cinco páginas hecha con React, TypeScript y Vite, planteada como un dashboard oscuro ultra ancho que crece de una a cuatro columnas en vez de quedarse en un ancho medio. El saldo principal cuenta hacia arriba junto a un área animada de recharts con selector de rango de 7/14/30 días, la dona de gastos se dibuja girando, las barras de progreso crecen desde cero y avisan cuando un presupuesto se pasa, y las rutas hacen crossfade con la View Transitions API mientras la píldora de navegación activa se desliza entre secciones. Debajo: transacciones con búsqueda, orden, filtro por categoría y paginación, CRUD completo de presupuestos y huchas, traspasos que mueven el saldo principal, y facturas recurrentes con estado del mes. Todo alcanzable por teclado, con diálogos que atrapan el foco, validación de formularios y variante de movimiento reducido. Construida a partir del reto de nivel Guru de app de finanzas personales en Frontend Mentor.

recharts
View Transitions
localStorage
accessibility

Overtake

Un leaderboard estilo transmisión en vivo donde las posiciones realmente se mueven: los puntajes suben con un feed simulado y las filas se adelantan físicamente entre ellas usando la técnica FLIP con GSAP, mostrando el cambio de posición al rebasar. Puedes pausar el feed o forzar una ronda de cambios. Inspirado en html-css-js-projects #52, que venía como una lista estática sin script alguno.

FLIP
animation

Ticker

Dashboard cripto simulado en vivo — precios que destellan al actualizar, sparklines por moneda y una cinta de ticker, todo del lado del cliente. Inspirado en html-css-js-projects #50.

dashboard
crypto
sparkline
simulation

#17 Principiante

Crumb

Banner de cookies con tema cálido de pastelería y un panel de preferencias granular (necesarias/analytics/marketing). Inspirado en html-css-js-projects #25.

cookies
consent
localStorage

Boothstrip

Generador de avatares con temática de fotomatón: escribe un nombre, tira de la palanca y ocho estilos de avatar de DiceBear se "imprimen" como una tira de fotos clásica que puedes descargar como PNG real. Inspirado en html-css-js-projects #30.

avatar
canvas
animation

#21 Principiante

Umbra

Generador de box-shadow presentado como una consola de iluminación de teatro: faders verticales para posición de luz, difusión y expansión, además de geles de color para teñir la sombra, todo con vista previa en vivo sobre un escenario iluminado. Inspirado en html-css-js-projects #40.

css-generator
range-input
clipboard

CyberNoodles — Landing 3D de restaurante

Landing de un kiosco de fideos cyberpunk con cámara Three.js controlada por scroll, secciones GSAP ScrollTrigger y galería de menú fijada.

ScrollTrigger
landing page
3d
webgl

Strongbox

Flujo completo de "crear contraseña" con estilo de terminal: medidor de fortaleza segmentado en vivo, checklist animado de requisitos, campo de confirmación con feedback de coincidencia en vivo, mostrar/ocultar independiente por campo y generador de contraseña segura. Inspirado en html-css-js-projects #32, integrando también el #24 (password toggle).

password
forms
validation

Bureau

Conversor de divisas con estilo de mostrador de cambio de divisas premium: azul marino y dorado, conversión instantánea mientras escribes, y un botón de intercambio con animación tipo resorte. Funciona con una tabla de tasas fija y curada en vez de una API de cambio en vivo. Inspirado en html-css-js-projects #13.

currency
conversion
animation

Mise

Buscador de recetas conectado en vivo a la API de TheMealDB, con filtros por categoría, una receta aleatoria, favoritos en localStorage y una transición GSAP Flip que convierte la tarjeta en la que haces clic directamente en su vista de receta completa. Inspirado en html-css-js-projects #12, con el alcance ampliado para acercarse al nivel Advanced en Frontend Mentor.

API
localStorage

Popper

Un formulario que celebra con una explosión de confeti hecha a mano en canvas — gravedad, rotación y fricción reales, sin librería. Inspirado en html-css-js-projects #22.

canvas
confetti
particles

#11 Principiante

Presence

Stack de avatares estilo producto con tooltips al hover, pulso de estado en vivo y un roster completo expandible — inspirado en html-css-js-projects #43.

avatars
tooltip
presence

Cardface

Formulario de pago con una tarjeta 3D en vivo que se completa mientras escribes y se voltea para mostrar el CVV. Inspirado en html-css-js-projects #41.

forms
validation
3d
payment

#04 Principiante

Pulse Quiz

Quiz interactivo con transiciones GSAP, glassmorphism y feedback animado, inspirado en html-css-js-projects #01.

quiz
animation

Ledger

Un rastreador de gastos con estilo de libreta contable verde clásica — filas rayadas, un total sellado y un interruptor de ingreso/gasto en vez de escribir números negativos. Persiste en localStorage. Inspirado en html-css-js-projects #04.

localStorage
forms
animation

Beltline

Un carrito de compras presentado como una banda transportadora de caja registradora: acentos con rayas de advertencia, un haz de escáner rojo que recorre un producto al cambiar su cantidad, y un resumen de pedido tipo recibo impreso. Inspirado en html-css-js-projects #36.

cart
state
animation

Eclipse

Toggle de modo oscuro con una transición circular que se expande desde el switch, usando la View Transitions API. Inspirado en html-css-js-projects #27.

dark mode
view transitions
theming

Swatchbook

Generador de paletas de color basado en teoría del color real (esquemas complementario, análogo, triádico, complementario dividido y monocromático) en vez de ruido RGB puramente aleatorio, presentado como un set de muestras físicas de pintura. Bloquea una muestra, presiona espacio para mezclar el resto, revisa el contraste WCAG de un vistazo y copia como variables CSS. Inspirado en html-css-js-projects #02, con el alcance ampliado para acercarse al nivel Advanced en Frontend Mentor.

color-theory
accessibility
clipboard

Dex Unit 01

No es una caja de búsqueda plana: un dispositivo tipo concha que se abre con una timeline de GSAP, corre una secuencia de arranque tipo CRT con LEDs parpadeando, y luego escanea entradas en vivo de PokeAPI sobre su pantalla — barras de stats animadas, insignias de tipo, modo shiny y navegación entre entradas. Inspirado en html-css-js-projects #46, con el alcance ampliado para acercarse al nivel Advanced en Frontend Mentor.

API
3d-transforms

#05 Principiante

Inkline

Indicador de progreso de lectura con una línea de tiempo CSS ligada al scroll y una badge de cristal, inspirado en html-css-js-projects #49.

scroll
progress
animation-timeline

Landing Page con Scroll Animado

Landing page futurista de un auto eléctrico con animación controlada por scroll y efectos GSAP.

scroll animation

Flapboard

Cronómetro de cuenta regresiva estilo tablero de salidas de aeropuerto, con animación mecánica de flip por dígito. Inspirado en html-css-js-projects #29.

countdown
split-flap
Web Animations API

Scanline

Un generador de códigos QR de verdad (URL, texto, red Wi-Fi o tarjeta de contacto), con colores ajustables, nivel de corrección de errores, logo opcional en el centro y exportación a PNG/SVG. La codificación corre sobre un algoritmo QR real, no una API de imágenes, y cada combinación se verificó para asegurar que realmente se puede escanear. Inspirado en html-css-js-projects #33, con el alcance ampliado para acercarse al nivel Advanced de Frontend Mentor.

canvas
QR code
export

#01 Principiante

CSS Cards Hover Effects

Colección de tarjetas con efectos de hover usando CSS y blending.

hover
cards

#10 Principiante

Noughts

Tres en línea con estética neobrutalista — color plano, bordes gruesos, sombras duras y una línea ganadora "dibujada a mano". Inspirado en html-css-js-projects #44.

game
tic-tac-toe
neubrutalism

#22 Principiante

Sealed

Formulario de suscripción con estilo de papelería fina: un sobre con solapa doblada que se sella con un lacre animado en el momento de suscribirte. Inspirado en html-css-js-projects #16.

forms
validation
animation

Stray

Página 404 donde los dígitos son imanes arrastrables con física de resorte real — suéltalos y vuelven con inercia. Inspirada en html-css-js-projects #15.

404
drag
spring physics
pointer events

Stopover

Buscador de países con temática de control de pasaportes — busca un destino y observa sus datos aparecer como una página de visa sellada, con datos locales sin depender de una API externa. Inspirado en html-css-js-projects #47.

search
autocomplete
countries
animation

Nametag

Un gafete tipo "HOLA me llamo" al que le escribes tu nombre con marcador en tiempo real, y que revela cómo se ha inclinado históricamente en registros públicos de nombres — presentado como una curiosidad divertida, no como un predictor de identidad. Inspirado en html-css-js-projects #37.

search
autocomplete
animation