info@soyandres.dev

Seguime

EN
← Volver

03 / 03 — Open Source · ● Online

The Frontend Projects

$ project --info
rol Diseño + Desarrollo
año 2026
tipo Open source · Web
stack astro · gsap · react · three.js · tailwind css
Ver demo Código fuente
The Frontend Projects

01 — Resumen

Una galería viva de experimentos frontend hechos a mano, de JavaScript vanilla a React + TypeScript. Cada uno parte de un brief y tiene su propio nombre, identidad visual y animaciones con GSAP, todo servido desde un solo sitio Astro bilingüe.

03 — El proceso

  1. 01

    Descubrimiento

    Copiar tutoriales enseña sintaxis, no oficio. Cada proyecto parte de un brief funcional y se vuelve un pequeño producto con nombre, paleta e interacción propios, subiendo desde piezas vanilla hasta los retos Advanced y Guru de Frontend Mentor.

    InvestigaciónAlcance
  2. 02

    Diseño

    Diseñado primero para pantallas grandes: tipografía fluida con clamp(), columnas explícitas por breakpoint y layouts revisados a 1440, 1920 y 2560 px. Cada animación tiene su variante para prefers-reduced-motion.

    Responsivea11y
  3. 03

    Construcción

    Astro 5 en inglés y español, con transiciones de página del ClientRouter, una grilla bento con filtros animados con Flip y un color de acento por proyecto calculado en build con sharp. Los proyectos van de JavaScript vanilla a Three.js y React + TypeScript.

    AstroGSAPThree.jsReact
  4. 04

    Lanzamiento

    Basta con sumar una carpeta en workspace/ con su DATA.md y los scripts hacen el resto: la registran, la compilan, sacan la captura con Puppeteer y la publican en /demo/<slug> con su propia página de detalle.

    Node.jsPuppeteerAutomatización

04 — Repositorio

soyandresdev/the-frontend-projects Ver en GitHub ↗

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.

Stars 0
Forks 0
Watchers 0
Issues abiertos 0
Lenguajes JavaScript 36% CSS 32% HTML 17% TypeScript 10%
Licencia: Ninguna Último push: 20 sept 2026
Últimos commits
  • 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