Skip to content
Héctor Torres
Portfolio2026
Memoji de Héctor Torres

Héctor Torres

Design & Development

All access

Available to work/internship

Héctor Torres

I design and build websites that feel alive: fast, accessible and cared for down to the last detail. I study Computer Engineering in Segovia and I've shipped everything from event platforms to open source contributions.

See projectsGet in touchResume
Commits on GitHub
2000+
Repositories
75
Skills & tools
35

Projects

Things I have designed and built.

Web platform · Event

Plataforma web · Evento

Sportfest Segovia 2026

The full platform behind SportFest Segovia: public site, QR tickets, raffles and an admin panel for event day.

Plataforma completa del SportFest Segovia: web pública, entradas con QR, sorteos y panel de administración para el día del evento.

Student athletes
300+
Sports
18
Press outlets
8
Commits
500+
Estudiantes deportistas
300+
Disciplinas
18
Medios de prensa
8
Commits
500+

Astro · TypeScript · Tailwind CSS · GSAP

View project

Brand site · E-commerce

Web de marca · E-commerce

SugarPapi

Site for a chocolate brand that sells in drops: products, past editions and a newsletter for upcoming launches.

Web de una marca de chocolate que vende por drops: productos, ediciones pasadas y newsletter para los próximos lanzamientos.

Astro · TypeScript · Tailwind CSS · GSAP

View project

Landing · Personal project

Landing · Proyecto personal

Moulin Rouge! El Musical

Unofficial landing for the musical in Madrid, with a light bulb sign drawn on canvas letter by letter.

Landing no oficial del musical en Madrid, con un rótulo de bombillas dibujado en canvas letra a letra.

Days to build
2
Commits
34
Días de desarrollo
2
Commits
34

Astro · TypeScript · Tailwind CSS · GSAP

View project

Event site · First edition

Web de evento · Primera edición

Sportfest Segovia 2025

The first version of the SportFest website, where the project started in 2025.

La primera versión de la web del SportFest, con la que empezó el proyecto en 2025.

Student athletes
300+
Sports
18
Press outlets
8
Estudiantes deportistas
300+
Disciplinas
18
Medios de prensa
8

Astro · TypeScript · Tailwind CSS · GSAP

View project

Landing · Concept redesign

Landing · Rediseño conceptual

PeligroFest

Concept redesign of an electronic music festival focused on conversion: video, line-up, set times and technical SEO.

Rediseño conceptual de un festival de electrónica centrado en conversión: vídeo, line-up, horarios y SEO técnico.

Astro · TypeScript · Tailwind CSS · GSAP

View project

Microsite · Personal project

Microsite · Proyecto personal

Dr Pepper España

Unofficial campaign microsite for the Dr Pepper launch in Spain, with brand story and a store locator.

Microsite de campaña no oficial para el lanzamiento de Dr Pepper en España, con historia de marca y localizador de tiendas.

Astro · TypeScript · Tailwind CSS · Leaflet

View project

More projects

Open source contributions

Public projects I have contributed to.

Tools

Things I've built to save time and share for free, for anyone who needs them.

Tool 01Free

SEO Preset

Your SEO block, done in one pass.

Fill in your site details, pick a framework and download a ready-to-use SEO component, with every favicon size and the instructions to wire it up.

  • Meta tags, Open Graph and Twitter cards
  • JSON-LD structured data
  • Every favicon size, built from one icon
  • hreflang alternates for multilingual sites

Tu bloque SEO, listo de una pasada.

Rellenas los datos de tu web, eliges el framework y descargas un componente SEO listo para usar, con todos los tamaños de favicon y las instrucciones para integrarlo.

  • Meta tags, Open Graph y Twitter cards
  • Datos estructurados JSON-LD
  • Todos los tamaños de favicon a partir de un icono
  • Alternativas hreflang para webs multidioma

Works with Astro · React · Next.js · Vue · Svelte

Try it

Tool 02Free

Refactoring UI Skill

The rules of Refactoring UI, applied by Claude.

A skill for Claude Code that reviews and builds interfaces following the book's scales for spacing, type and colour, in code or in Figma. Copy one folder and it activates whenever you ask for a design.

  • Review checklist ordered by impact, with the exact change for each finding
  • Spacing, type, colour and elevation scales ready to use
  • Figma audit of frames and tokens created from your file
  • One reference file per chapter, opened only when needed

Las reglas de Refactoring UI, aplicadas por Claude.

Una skill para Claude Code que revisa y construye interfaces siguiendo las escalas del libro de espaciado, tipografía y color, en código o en Figma. Copias una carpeta y se activa sola cuando pides diseñar.

  • Checklist de revisión por orden de impacto, con el cambio exacto de cada hallazgo
  • Escalas de espaciado, tipografía, color y elevación listas para usar
  • Auditoría de frames en Figma y creación de tokens en tu archivo
  • Un archivo de referencia por capítulo, que solo se abre cuando hace falta

Works with Claude Code · Figma

Try it

Skills & tools

Everything I use to design, build and ship.

01Programming languages
  • TypeScript
  • Kotlin
  • Python
  • HTML
  • JavaScript
  • LaTeX
  • MDX
02Framework
  • Astro
  • Express JS
  • Jetpack Compose
  • React
  • Next.js
  • PHP
03Styles
  • Tailwind CSS
  • CSS
04Animation
  • GSAP
05Data
  • Firebase
  • PostgreSQL
  • SQL
  • Firebase Auth
  • Firestore
  • Supabase
06Tooling
  • Claude Code
  • Figma
  • Git
  • GitHub
  • OpenAI
07Deployment
  • Cloudflare
  • Vercel
  • Azure
  • Docker
  • GitHub Actions
  • Google Cloud
  • AWS
  • Netlify
08Spoken languages
  • Spanish
    Native
  • English
    Full professional proficiency
  • Catalan
    Full professional proficiency

How I work

From the first requirement to the live site: every phase leaves something you can check.

  1. Phase 01

    Analysis

    Understand the problem before drawing anything: who it is for, what it must do and what can go wrong.

    Outputs

    • Requirements
    • Use cases
    • User stories
    • Scope and priorities

  2. Phase 02

    Design

    Turn the analysis into something you can see and question before writing code.

    Outputs

    • Wireframes and UI in Figma
    • Design system and tokens
    • Data model
    • Architecture decisions

  3. Phase 03

    Build

    Ship in small, working steps, with quality checked as it goes.

    Outputs

    • Front end and back end
    • Animation and interaction
    • Accessibility and SEO
    • Tests

  4. Phase 04

    Ship

    Publish, measure and leave it easy to maintain.

    Outputs

    • Deployment and CI
    • Analytics
    • Documentation
    • Iteration after launch

Contact

Let's build something together

hector@portfolio: ~

$ contact --hector

email
[email protected]
github
htorresUVa ↗
cv
download résumé ↓
status
available to work/internship
reply
I reply within 24 hours