Open to collaborate / Front-end lab · Est. 2025 / 33 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.

33 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 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
Scroll to explore

Latest / #33 / Advanced

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.

  • React
  • TypeScript
  • Vite
  • recharts
  • View Transitions
  • localStorage
  • accessibility
Demo Code

(33)

All projects

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

33 / 33 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.

  • HTML5
  • CSS
  • JavaScript
  • forms
  • layout
  • animation
Demo Code
#27 Advanced

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.

  • HTML5
  • CSS
  • JavaScript
  • drag-and-drop
  • localStorage
  • animation
Demo Code
#07 Beginner

Masthead

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

  • HTML5
  • CSS
  • team
  • editorial
  • grid
  • typography
Demo Code
#12 Beginner

Tally

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

  • HTML5
  • CSS
  • JavaScript
  • dashboard
  • stats
  • count-up
  • intersection observer
Demo Code
#33 Advanced

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.

  • React
  • TypeScript
  • Vite
  • recharts
  • View Transitions
  • localStorage
  • accessibility
Demo Code
#32 Advanced

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.

  • HTML5
  • CSS
  • JavaScript
  • GSAP
  • FLIP
  • animation
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • dashboard
  • crypto
  • sparkline
  • simulation
Demo Code
#17 Beginner

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.

  • HTML5
  • CSS
  • JavaScript
  • cookies
  • consent
  • localStorage
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • avatar
  • canvas
  • animation
Demo Code
#21 Beginner

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.

  • HTML5
  • CSS
  • JavaScript
  • css-generator
  • range-input
  • clipboard
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • password
  • forms
  • validation
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • currency
  • conversion
  • animation
Demo Code
#30 Advanced

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.

  • HTML5
  • CSS
  • JavaScript
  • GSAP
  • API
  • localStorage
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • canvas
  • confetti
  • particles
Demo Code
#11 Beginner

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.

  • HTML5
  • CSS
  • JavaScript
  • avatars
  • tooltip
  • presence
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • forms
  • validation
  • 3d
  • payment
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • localStorage
  • forms
  • animation
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • cart
  • state
  • animation
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • dark mode
  • view transitions
  • theming
Demo Code
#29 Advanced

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.

  • HTML5
  • CSS
  • JavaScript
  • color-theory
  • accessibility
  • clipboard
Demo Code
#31 Advanced

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.

  • HTML5
  • CSS
  • JavaScript
  • GSAP
  • API
  • 3d-transforms
Demo Code
#05 Beginner

Inkline

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

  • HTML5
  • CSS
  • JavaScript
  • scroll
  • progress
  • animation-timeline
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • countdown
  • split-flap
  • Web Animations API
Demo Code
#28 Advanced

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.

  • HTML5
  • CSS
  • JavaScript
  • canvas
  • QR code
  • export
Demo Code
#10 Beginner

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.

  • HTML5
  • CSS
  • JavaScript
  • game
  • tic-tac-toe
  • neubrutalism
Demo Code
#22 Beginner

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.

  • HTML5
  • CSS
  • JavaScript
  • forms
  • validation
  • animation
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • 404
  • drag
  • spring physics
  • pointer events
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • search
  • autocomplete
  • countries
  • animation
Demo Code
#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.

  • HTML5
  • CSS
  • JavaScript
  • search
  • autocomplete
  • animation
Demo Code