Proyecto personal · Web · Marca · 2026 Personal project · Website · Brand · 2026

Lughion

La web y la marca de Lughion, mi proyecto personal de desarrollo. "La tecnología solo importa cuando funciona." The website and brand of Lughion, my personal development project. "Technology only matters when it works."

Ver lughion.comVisit lughion.com ↗ Web publicada, en Cloudflare Pages. Live site, on Cloudflare Pages.

RolRole

Marca, diseño y desarrolloBrand, design & development

TipoType

Web + biblioteca de proyectosWebsite + project library

Stack

HTML · CSS · JS · Node

EstadoStatus

PublicadaLive

DominioDomain

lughion.com

Qué esWhat it is 01

Lughion es el nombre de mi proyecto personal de desarrollo: gamificación, webs y aplicaciones, como la app de gimnasio. Esta es su web, y identidad, tono y sitio los diseñé y construí yo, desde el nombre hasta el despliegue. Lughion is the name of my personal development project: gamification, websites and apps, like the gym app. This is its website, and I designed and built the identity, tone and site myself, from the name to the deployment.

La web gira en torno al proceso, no a la persona: prototipos rápidos para validar una idea antes de construirla entera, entregas pequeñas y seguidas, y proyectos terminados que se pueden ver y filtrar. The site revolves around the process, not the person: quick prototypes to validate an idea before building it all, small frequent deliveries, and finished projects you can browse and filter.

La The marcabrand 02

NombreName

Viene de Lugh, la deidad celta que da nombre a León (Legio… y a Lugo). Un nombre con raíz en el territorio y un remate tecnológico. Se eligió entre varias alternativas después de un cambio de nombre completo desde la marca anterior. It comes from Lugh, the Celtic deity behind the names of León and Lugo. A name rooted in the territory with a tech-sounding ending. Picked among several alternatives after a full rename from the previous brand.

LogotipoLogo

Un glifo en forma de L dibujado a mano, que hace de inicial del nombre en minúsculas. En la portada se dibuja solo con una animación de trazo SVG. A hand-drawn L-shaped glyph that serves as the lowercase initial of the name. On the home page it draws itself with an SVG stroke animation.

Paleta y tipografíaPalette & type

Cal y petróleo, con un añil de apoyo; Space Grotesk para titulares, Instrument Sans para texto y JetBrains Mono para etiquetas. Modo claro y oscuro. Una regla de estilo: nada de negritas sueltas en medio de un párrafo. Lime-white and petrol blue, with an indigo accent; Space Grotesk for headlines, Instrument Sans for body and JetBrains Mono for labels. Light and dark modes. One style rule: no stray bold in the middle of a paragraph.

Cómo está How it's hechabuilt 03

Estático, Static, sin frameworkno framework

HTML, CSS y JavaScript sin dependencias, fuentes alojadas en local y sin peticiones a terceros. Carga rápida, sin cookies y sin nada que mantener. Dependency-free HTML, CSS and JavaScript, locally hosted fonts and no third-party requests. Fast load, no cookies, nothing to maintain.

Una sola fuente A single source de verdadof truth

Los proyectos se escriben una vez en un JSON y un script de Node genera las tarjetas de la portada, el archivo de la biblioteca y los metadatos. El vocabulario de categorías y sectores está cerrado: si te inventas uno, el script se para y avisa. Projects are written once in a JSON file and a Node script generates the home cards, the library archive and the metadata. The category and sector vocabulary is closed: invent one and the script stops and warns you.

Biblioteca Filterable filtrablelibrary

Un escaparate público de proyectos terminados, filtrable por categoría (web, gamificación, VR, tienda, videojuego) y por sector, pensado para que un cliente encuentre algo parecido a lo suyo. A public showcase of finished projects, filterable by category (web, gamification, VR, store, game) and by sector, so a client can find something close to their own case.

Despliegue Continuous continuodeployment

Repositorio en GitHub conectado a Cloudflare Pages: cada commit reconstruye y publica la web. Cabeceras de seguridad, sitemap, Open Graph, favicon e iconos PWA incluidos. GitHub repository connected to Cloudflare Pages: every commit rebuilds and publishes the site. Security headers, sitemap, Open Graph, favicon and PWA icons included.

GaleríaGallery 04

Sección 'Cómo trabajamos' de lughion.com

Biblioteca de proyectos filtrable de lughion.com