A collection of eleven React projects I built while learning the framework, each a real standalone Vite build with its own components, hooks and motion.
The landing page ties them together as an editorial portfolio: a hero, a stats strip and a grid of cards. Each card carries a poster captured from the built demo at a real 1440x900 desktop viewport, and clicking through opens the project running for real.
Each project is its own Vite app, and a postinstall wires them all up:
npm install # installs the showcase and every sub-project
npm run build:demos # build every demo into public/demos/
npm run posters # capture one poster per demo into public/posters/
npm run dev # showcase on http://localhost:5180Posters are committed rather than generated on deploy, because the deploy host
has no browser and a poster only changes when its demo does. Re-run
npm run posters after changing a demo's first screen. It drives a local Chrome
and takes the shot once the demo sets data-ready on <html>, which each demo
does when its entrance animation has finished, so captures do not depend on a
timer. Point CHROME_PATH at a browser if it cannot find one.
Each project also runs on its own, e.g. npm run dev inside projects/velocity/.
index.htmlandsrc/build the showcase shell: navbar, hero, project grid and the iframe viewer.scripts/capture-posters.mjsturns the built demos into the grid's poster images.src/data/projects.jslists every project with its accent colour and tags.projects/<name>/holds one React app each, self contained, built intopublic/demos/.
architects(Architects): a light architecture studio site over six routes, with a Leaflet studio map, a custom accessible listbox in the contact form, a category filter and SVG floor plans.aike-furniture(AIKE): a furniture storefront landing ported from hand-written HTML and CSS to React, matching the original layout to the pixel, with a category dropdown and a slide-in mobile nav.jirani(Jirani Restaurant): a multi-page dark restaurant site with React Router, a filterable menu, count-up stats, a Leaflet map and a booking form.absent-agency(Absent Agency): a design studio site with scroll-driven case study reveals and a wordmark that fills on scroll.portfolio-template(Portfolio Template): a developer portfolio driven by one content file, drawn as a control surface, with a live three.js schematic in the first screen.car-detailing(Detailing Studio): a dark brand landing for a wrapping and detailing studio, with scroll reveals, pricing and count-up stats.velocity(Velocity): a multi-page SaaS agency site with React Router, tabbed case studies and a contact form.beauty-studio(Beauty Studio): a beauty clinic landing page with GSAP ScrollSmoother and a full section layout.valorant-nft(Valorant NFT Marketplace): a dark NFT marketplace with a countdown, floating particles and GSAP animations.gabriel-contassot(Gabriel Contassot): a minimal black portfolio with scroll-driven clip-path reveals and a text-scramble hover.zajno-digital-studio(Zajno Digital Studio): an agency landing with a randomised loading counter, a custom GSAP ease and a clip-path reveal.
React 19, Vite 7, Tailwind CSS v4, GSAP 3 with ScrollTrigger, React Router v7, three.js.