# Andros Guiradó

> Experiential frontend developer and creative technologist from Barcelona, Spain. 20+ years of professional experience in interactive animations, 3D graphics, GLSL shaders, SVG manipulation, data visualization, and complex visual web challenges. Co-founder of CocoBongo studio (2003). Currently Creative Developer at FeelsLike (formerly B-Reel).

## Quick Start for AI Agents

Recommended order for automated clients:

1. **Check freshness** — `GET /api/status` (also at `/status`). Returns API liveness plus the knowledge-graph version and `lastUpdated`. Cache the version and only re-sync when it changes.
2. **Get oriented** — read this file (`/llms.txt`), or `/machine-readable` (`/machine-readable.json`) for the full index of every format.
3. **Query, don't download** — for relationship questions use the REST API (`/api/kg/query`) or the MCP server (`/mcp`) instead of parsing the whole graph.
4. **Fetch the full dataset** — `/knowledge-graph.json` is the canonical source of truth; everything else here is derived from it.
5. **HTML as a last resort** — use the rendered pages only when a structured format above can't answer the question.

## About

Andros Guiradó (born July 20, 1982, Sabadell, Barcelona) is a creative technologist who transitioned from graphic design to web development in 2001. His core expertise is experiential frontend development — work requiring special care in details, animations, 3D, GLSL shaders, SVG manipulation, data visualization, interactive maps, and physics engines.

He holds multiple professional roles simultaneously: Front-end engineer, Interaction designer, Technical strategist, Fullstack developer, UX researcher, Generative artist, UI code animator, and Data visualizer.

## Languages

- Spanish, Catalan, French: Native level
- English: Fluent

## Career Timeline

- **1986–1996**: Primary school, C.P. Samuntada, Sabadell
- **1994–1997**: Comics and illustration studies, Escola Joso, Sabadell
- **1996–1998**: Art and design studies, Escola Industrial, Sabadell
- **1998–2000**: Graphic design studies, Jaume Viladoms, Sabadell
- **2000–2002**: Interactive / web design studies, Escola Illa, Sabadell
- **2001–2003**: Designer / Web Developer at Haro Comunicación, Sabadell — first professional web role
- **2003–present**: Co-founder and developer at CocoBongo Artworks, Sabadell
- **2006–2010**: Jury member, ADG Laus Awards (Interactive category), Barcelona — notably at age 23
- **2009–2010**: Professor of Interactive Design Postgraduate, Elisava, Barcelona
- **2020–present**: Jury member at FWA (Favourite Website Awards)
- **2023–present**: Creative Developer at FeelsLike (formerly B-Reel), Barcelona

## Current Studio: FeelsLike

FeelsLike (formerly B-Reel) is the creative studio where Andros currently works as a Creative Developer. The studio rebranded from B-Reel to FeelsLike in October 2023.

## CocoBongo Artworks

CocoBongo is a creative studio co-founded by Andros in 2003, based in Sabadell. It started as a Flash animation / frontend studio and grew into fullstack web production. Known for interactive web experiences, museum installations, and award-winning digital campaigns.

### Notable Clients (via CocoBongo)

Volkswagen, BMW, Vodafone, Ikea, Diesel, Unicef, Camper, Bacardi, Nutrexpa, La Caixa, Font Vella, Mango, Martini, Coca-Cola, Red Bull, Roca, San Miguel, Cruzcampo, Massimo Dutti, Sony, State Farm, Torres, Tous, Fundación Vicente Ferrer, Loterías del Estado, Ajuntament de Barcelona.

## Awards

- **2003** — Smiling Face, Silver (Festival)
- **2003** — Smiling Face, Gold (Festival)
- **2010** — Festival el Sol, Shortlist
- **2012** — Sol, Silver
- **2013** — Laus, Silver
- **2015** — Premios Eficacia – Comunicación Comercial, Gold
- **2015** — CSS Nectar, Site of the Day
- **2015** — French Design, Site of the Day
- **2015** — Unmatchedstyle, Site of the Day
- **2015** — Design Licks, Site of the Day
- **2015** — CSS Reel, Site of the Day
- **2015** — Premios Eficacia – Reconocimiento Especial Investigación, Gold
- **2016** — Premios Eficacia – Comunicación Comercial, Gold
- **2016** — FWA, Site of the Day
- **2016** — CSS Awards, Site of the Day
- **2017** — Laus, Bronze
- **2018** — FWA, Site of the Day
- **2018** — Awwwards, Site of the Day

## Talks & Conferences

- **2005** — Campus Crea at Campus Party, Valencia
- **2007** — BCN MAD-Festival at Punt Multimèdia, Barcelona
- **2008** — BCN Visual Sound at Golferichs, Barcelona
- **2010** — Tertulia Interactiva: 5+1 at Club de Creativos (DHUB), Barcelona
- **2012** — BIMS at Biblioteca Vapor Badia (org. Escola Illa), Sabadell
- **2018** — Dia Mundial del Disseny Gràfic at EADT, Tarragona
- **2023** — B-Reel × Brut! at Brut!, Barcelona

## Technical Skills

### Core Expertise
- Experiential frontend development
- 3D graphics and WebGL (Three.js)
- GLSL shader programming
- SVG manipulation and animation
- Data visualization
- Interactive animations (GSAP, CSS)
- Physics engines
- Generative art

### Languages & Markup
- HTML5, CSS3, JavaScript (ES6+)
- PHP, MySQL
- ActionScript (Flash — legacy)
- GLSL (shader language)
- Pug (HTML template engine)
- Stylus, SASS (CSS preprocessors)
- GraphQL

### Frameworks & Libraries
- **Frontend**: Svelte, SvelteKit, jQuery, Mootools
- **3D / WebGL**: Three.js, WebGL
- **Animation**: GSAP, Anime.js, Splitting.js
- **Data**: Apollo Client, GraphQL
- **CMS**: WordPress, Drupal, Strapi
- **Legacy**: Flash / ActionScript

### Preferred Stack (current)
SvelteKit + Pug + Stylus

### Tools & Software
- VS Code, PhpStorm, Sublime Text
- Photoshop, Illustrator, After Effects
- Git, pnpm, Node.js
- Rollup, Webpack, Vite
- dat.GUI, Arduino

## This Site

This portfolio is an interactive, data-driven professional timeline built with:

- **Framework**: Sapper (Svelte 3.x) — migrating to SvelteKit
- **Styling**: Stylus + PostCSS
- **Build**: Rollup + Babel
- **3D Intro**: Three.js with custom GLSL shaders
- **Animation**: GSAP + Svelte transitions
- **Data**: Static JSON (careers, skills, awards, talks, world/tech/cultural events)
- **Deployment**: Vercel

The site visualizes 20+ years of professional history through an interactive horizontal timeline, with events categorised as: careers, personal milestones, world events, tech events, cultural events, awards, and talks. A separate skills section shows proficiency and enjoyment levels for 80+ technologies across the full career span.

## Pages

- [Home](https://androsguirado.dev/): Interactive professional timeline — the main portfolio view
- [CV](https://androsguirado.dev/cv): Full professional biography and technical background
- [Machine-readable data](https://androsguirado.dev/machine-readable): Human- and agent-readable index of every structured format below, with format/purpose for each and guidance on which to use

## Machine-Readable Data

> Index (HTML, humans + agents): https://androsguirado.dev/machine-readable · as data: https://androsguirado.dev/machine-readable.json (generated from the knowledge graph's meta.distributions). The knowledge graph (knowledge-graph.json) is the canonical source; everything else here is derived from it.

- [Full profile (Markdown)](https://androsguirado.dev/llms-full.txt): This entire profile expanded into one self-contained document — complete skills inventory, full client list, every award and talk, and the full year-by-year timeline. Read this if you want everything in a single request
- [Career knowledge graph](https://androsguirado.dev/seo.json): Full structured profile as schema.org JSON-LD — 70+ technical skills, 170+ projects with resolved skill/role relationships, awards, conference talks, education and work history
- [Year-by-year timeline (JSON)](https://androsguirado.dev/timeline.json): Every year of activity — career steps, studio milestones, talks, awards, and projects with skills, roles and project types resolved by name
- [Year-by-year timeline (Markdown)](https://androsguirado.dev/timeline.md): Same year-by-year timeline in LLM-friendly Markdown
- [Knowledge graph](https://androsguirado.dev/knowledge-graph.json): THE single structured output — Neo4j-lite graph with normalized nodes (Person, Project, Client, Skill, Event, Award, Organization) and explicit typed edges carrying only date and relevance (WORKED_ON, USED_SKILL, FOR_CLIENT, BUILT_AT, SPOKE_AT, AWARDED_FOR + extensions), self-documented in its meta block. seo.json and timeline.json are derived from it
- [Knowledge graph query engine](https://androsguirado.dev/kg-query.js): Declarative query layer over the graph (browser + Node). Named queries — projects_by_year({year|from,to}), projects_by_client({client}), skills_by_project({project}), clients_by_skill({skill}), projects_by_skill({skill,from,to}), skills_evolution({from,to}), projects_by_relevance({min,from,to}) — each defined as an explainable traversal plan with per-step execution trace. Schema embedded in knowledge-graph.json meta.queryEngine

## Agent API (REST + MCP)

The knowledge graph is also served as a queryable backend:

- `GET /api/kg/nodes?type=&q=&limit=&offset=` — list/filter entities (fuzzy search via `q`)
- `GET /api/kg/edges?type=&from=&to=&limit=&offset=` — list/filter relationships
- `GET /api/kg/query?type=<query>&...params` — run a declarative query, e.g. `/api/kg/query?type=projects_by_skill&skill=flash&from=2003&to=2010`. Add `explain=1` for the traversal plan only
- `POST /mcp` — MCP server (JSON-RPC 2.0, streamable HTTP, stateless). Tools: getProjectsByYear, getProjectsByClient, getSkillsEvolution, queryKnowledgeGraph, searchEntities. Connect with: `claude mcp add --transport http andros-kg https://androsguirado.dev/mcp`. Server card: /.well-known/mcp/server-card.json
- `GET /api/status` (alias `/status`) — health & freshness probe: API liveness, the knowledge-graph `version` (same content hash as the `X-KG-Version` header), `schemaVersion`, `lastUpdated` and live entity/relationship counts. Cache the version and re-sync only when it changes

Responses are CDN-cached per deploy (Cache-Control s-maxage + ETag from the graph version; check the X-KG-Version header). Full OpenAPI spec: /.well-known/openapi.yaml

## Optional

- [Sitemap](https://androsguirado.dev/sitemap.xml): XML sitemap of all pages