03 / 03 — Open Source · ● Live
The Frontend Projects
role Design + Development
year 2026
type Open source · Web
stack astro · gsap · react · three.js · tailwind css
01 — Overview
A living gallery of hand-built frontend experiments, from vanilla JS to React + TypeScript. Each one starts from a brief and gets its own name, visual identity and GSAP motion, all served from one bilingual Astro site.
02 — Gallery
3 images · click to enlarge03 — The process
- 01
Discovery
Tutorial copies teach syntax, not craft. Each project starts from a functional brief and becomes a small product with its own name, palette and interaction model, climbing from vanilla pieces to Frontend Mentor's Advanced and Guru challenges.
ResearchScope - 02
Design
Designed for large displays first: fluid clamp() type, explicit grid columns per breakpoint and layouts checked at 1440, 1920 and 2560 px. Every animation has a prefers-reduced-motion variant.
Responsivea11y - 03
Build
Astro 5 in English and Spanish with ClientRouter page transitions, a bento grid with Flip-animated filters and per-project accent colours computed at build time with sharp. The projects range from vanilla JS to Three.js and React + TypeScript.
AstroGSAPThree.jsReact - 04
Ship
Add a folder to workspace/ with a DATA.md and the scripts do the rest: register it, compile it, capture its screenshot with Puppeteer and publish it under /demo/<slug> with its own detail page.
Node.jsPuppeteerAutomation
04 — Repository
A living gallery of hand-built frontend experiments. Original designs, GSAP motion and real interactions, from vanilla JS to React + TypeScript, served from one Astro site.
- 9c6958f fix: keep the hero photo inside the viewport and collapse the project panel on mobile
- b4fcabf chore: deploy to cloudflare workers at thefrontendprojects.soyandres.dev
- 51e0c23 chore: deploy to cloudflare workers as a static assets site
- 4b2a59b docs: refresh README screenshots and add featured and detail views