Open to collaborate / Front-end lab · Est. 2025 / 34 projects

The Front-End Projects

Hey, I'm Andres Hernandez Lozano 👋

Passionate about frontend development, I build clean and accessible interfaces. Sharing projects and practical tutorials on HTML, CSS and JavaScript so you can learn fast and have fun.

Located in Melbourne, VIC.

34 projects and counting

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 vite validation canvas ThreeJs 3d dashboard search autocomplete clipboard accessibility API hover cards ScrollTrigger landing page webgl scroll animation HTML CSS JavaScript animation GSAP forms localStorage vite validation canvas ThreeJs 3d dashboard search autocomplete clipboard accessibility API hover cards ScrollTrigger landing page webgl scroll animation

Scroll to explore

Latest / #34 / Advanced

Cielo Negro — Rap Album Site

A five-page site for Cielo Negro, the dark trap album of the fictional rapper Santo Vøid, in Spanish and English with a language switch that persists and can be forced by URL. A grid preloader flickers into a procedural night-city skyline shader under a black sky; a radial joystick menu opens over a matrix shader with sound effects; the tracklist bends its artwork with a WebGL distortion driven by scroll velocity; each of the eight tracks gets its own page with story, credits, tempo and key; the studio page scatters the Ø logo into mouse-reactive particles, then a scroll-scrubbed pie wipe leads into stats and credits; and contact loops forever while icons swap at the center. Cover, track art, photo shoot, logo and icons were generated with Gemini. Built on the Deadspace motion template by Codegrid, redesigned from scratch.

WebGL
Lenis
i18n

(34)

All projects

Filter by difficulty, search by name or tech, and open any demo.

34 / 34 results

Tech

#23 Intermediate

Wavelength

A contact page reframed as a vintage radio console: a broadcast panel with frequency-style contact readouts on one side, and a "transmit" form with a simulated send and signal-ping loading state on the other. Reimagined from html-css-js-projects #18.

forms
layout
animation

Pinboard

A corkboard-styled Kanban task board: pinned sticky notes you drag between three columns (or reorder within one) with a custom pointer-based drag engine built for touch, not the native HTML5 drag API. Persists to localStorage. Reimagined from html-css-js-projects #03, scoped up to match Frontend Mentor's Advanced-tier "Kanban board" challenge.

drag-and-drop
localStorage
animation

Masthead

A print-editorial team page — cream paper tones, serif display type and duotone photography, reimagined from html-css-js-projects #20.

team
editorial
grid
typography

Tally

Colorful KPI cards with count-up numbers, inline sparklines and a scroll-triggered reveal. Reimagined from html-css-js-projects #35.

dashboard
stats
count-up
intersection observer

Stash

A five-page personal finance app built with React, TypeScript and Vite, laid out as a dark ultra-wide dashboard that grows from one to four columns instead of stopping at a mid-size width. A hero balance counts up beside an animated recharts area chart with a 7/14/30 day range switch, the spending donut sweeps in, progress bars grow from zero and flag overspent budgets, and routes crossfade through the View Transitions API while the active nav pill slides between items. Underneath: transactions with search, sort, category filter and pagination, full CRUD for budgets and savings pots, transfers that move the main balance, and recurring bills with per-month status. Keyboard reachable throughout, with focus-trapped dialogs, form validation and a reduced-motion variant. Built from the Guru-tier personal finance app challenge on Frontend Mentor.

recharts
View Transitions
localStorage
accessibility

Overtake

A live broadcast-style leaderboard where the standings actually move: scores tick up on a simulated feed and rows physically slide past each other using the FLIP technique with GSAP, flashing a rank-change delta as they overtake. Play/pause the feed or force a shake-up round. Reimagined from html-css-js-projects #52, which shipped as a static list with no script at all.

FLIP
animation

#14 Intermediate

Ticker

A simulated live crypto dashboard — flashing price updates, per-coin sparklines and a scrolling ticker tape, all client-side (no flaky third-party API). Reimagined from html-css-js-projects #50.

dashboard
crypto
sparkline
simulation

Crumb

A cookie consent banner with a warm bakery theme and a granular preferences panel (necessary/analytics/marketing toggles). Reimagined from html-css-js-projects #25.

cookies
consent
localStorage

#20 Intermediate

Boothstrip

A photo-booth themed avatar generator: type a name, pull the lever, and eight DiceBear avatar styles print out as a classic film strip you can download as a real PNG. Reimagined from html-css-js-projects #30.

avatar
canvas
animation

Umbra

A box-shadow generator reframed as a stage-lighting console: vertical faders for light position, diffusion and spread, plus colored gel swatches for the shadow tint, all live-previewed on a spotlit stage. Reimagined from html-css-js-projects #40.

css-generator
range-input
clipboard

CyberNoodles — 3D Restaurant Landing

Cyberpunk noodle kiosk landing with a scroll-driven Three.js camera, GSAP ScrollTrigger sections and a pinned menu gallery.

ScrollTrigger
landing page
3d
webgl

#06 Intermediate

Strongbox

A full "set your password" terminal flow: a segmented live strength meter, animated requirement checklist, a confirm-password field with live match feedback, independent show/hide toggles per field, and a secure random password generator. Reimagined from html-css-js-projects #32, folding in #24 (password toggle) as well.

password
forms
validation

#26 Intermediate

Bureau

A currency converter styled like a premium bureau de change counter: navy and gold, an instant live conversion as you type, and a spring-loaded swap button. Runs on a curated fixed-rate table instead of a live exchange-rate API. Reimagined from html-css-js-projects #13.

currency
conversion
animation

Mise

A recipe finder backed by the live TheMealDB API, with category filters, a random-recipe shuffle, localStorage favorites, and a GSAP Flip transition that morphs a clicked card straight into its full recipe view. Reimagined from html-css-js-projects #12, scoped up to match the Advanced tier on Frontend Mentor.

API
localStorage

#15 Intermediate

Popper

A signup form that celebrates with a hand-built canvas confetti burst — real gravity, rotation and drag, no confetti library. Reimagined from html-css-js-projects #22.

canvas
confetti
particles

Presence

A product-style avatar stack with hover tooltips, a live status pulse and an expandable full roster — reimagined from html-css-js-projects #43.

avatars
tooltip
presence

Cielo Negro — Rap Album Site

A five-page site for Cielo Negro, the dark trap album of the fictional rapper Santo Vøid, in Spanish and English with a language switch that persists and can be forced by URL. A grid preloader flickers into a procedural night-city skyline shader under a black sky; a radial joystick menu opens over a matrix shader with sound effects; the tracklist bends its artwork with a WebGL distortion driven by scroll velocity; each of the eight tracks gets its own page with story, credits, tempo and key; the studio page scatters the Ø logo into mouse-reactive particles, then a scroll-scrubbed pie wipe leads into stats and credits; and contact loops forever while icons swap at the center. Cover, track art, photo shoot, logo and icons were generated with Gemini. Built on the Deadspace motion template by Codegrid, redesigned from scratch.

WebGL
Lenis
i18n

Pulse Quiz

Interactive quiz with GSAP transitions, glassmorphism and animated feedback, reimagined from html-css-js-projects #01.

quiz
animation

#16 Intermediate

Cardface

A payment form with a live 3D card preview that fills in as you type and flips to show the CVV. Reimagined from html-css-js-projects #41.

forms
validation
3d
payment

#24 Intermediate

Ledger

An expense tracker styled like a classic green columnar accounting pad — ruled rows, a stamped balance total, and an income/expense toggle instead of typing negative numbers. Persists to localStorage. Reimagined from html-css-js-projects #04.

localStorage
forms
animation

#25 Intermediate

Beltline

A shopping cart reframed as a checkout-lane conveyor belt: hazard-stripe accents, a red scanner beam that sweeps across an item whenever its quantity changes, and a printed-receipt order summary. Reimagined from html-css-js-projects #36.

cart
state
animation

#13 Intermediate

Eclipse

A dark mode toggle with a circular wipe transition that expands from the switch, using the View Transitions API. Reimagined from html-css-js-projects #27.

dark mode
view transitions
theming

Swatchbook

A color palette generator built on real color theory (complementary, analogous, triadic, split-complementary, monochromatic schemes) instead of pure random RGB noise, styled as a set of physical paint chips. Lock a chip, press space to reshuffle the rest, check WCAG contrast at a glance, and copy as CSS variables. Reimagined from html-css-js-projects #02, scoped up to match the Advanced tier on Frontend Mentor.

color-theory
accessibility
clipboard

Dex Unit 01

Not a plain search box: a clamshell handheld that flips open on a GSAP timeline, runs a CRT boot sequence with blinking LEDs, then scans live PokeAPI entries onto its screen — animated stat bars, type badges, shiny toggle and entry-to-entry navigation. Reimagined from html-css-js-projects #46, scoped up to match the Advanced tier on Frontend Mentor.

API
3d-transforms

Inkline

A reading-progress indicator with a scroll-driven CSS timeline and a glass badge, reimagined from html-css-js-projects #49.

scroll
progress
animation-timeline

#03 Intermediate

Scroll-Animated Landing Page

Futuristic electric car landing page with scroll-controlled animation and GSAP effects.

scroll animation

#09 Intermediate

Flapboard

A countdown timer styled as an airport split-flap departure board, with real mechanical flip animation per digit. Reimagined from html-css-js-projects #29.

countdown
split-flap
Web Animations API

CSS Cards Hover Effects

A collection of cards with modern hover effects using CSS and blend modes.

hover
cards

Noughts

Tic-tac-toe with a bold neo-brutalist look — flat color, thick borders, hard offset shadows and a hand-drawn winning line. Reimagined from html-css-js-projects #44.

game
tic-tac-toe
neubrutalism

Sealed

A newsletter signup styled like fine stationery: an envelope with a folded flap that gets pressed shut with an animated wax seal the moment you subscribe. Reimagined from html-css-js-projects #16.

forms
validation
animation

Scanline

A real QR code generator (URL, text, Wi-Fi network, or contact card), with adjustable colors, error-correction level, an optional center logo, and PNG/SVG export. Encoding runs through an actual QR algorithm, not a hotlinked image API, and every combination is verified to actually decode. Reimagined from html-css-js-projects #33, scoped up to match Frontend Mentor's Advanced tier.

canvas
QR code
export

#08 Intermediate

Stray

A 404 page where the digits are draggable magnets with real spring physics — flick them and they settle back with momentum. Reimagined from html-css-js-projects #15.

404
drag
spring physics
pointer events

#18 Intermediate

Stopover

A passport-control themed country lookup — search a destination and watch its details arrive as an ink-stamped visa page, backed by a curated offline dataset. Reimagined from html-css-js-projects #47.

search
autocomplete
countries
animation

#19 Intermediate

Nametag

A peel-and-stick "HELLO my name is" badge that writes your name in marker as you type, then reveals how it has historically leaned across public name registries — framed as a fun curiosity, not an identity predictor. Reimagined from html-css-js-projects #37.

search
autocomplete
animation