~/style-guide/live

Style guide

Documentación viva del tema Carbon Compiler. Todo lo que ves aquí son los componentes reales, sus tokens reales y sus estados reales — cambia de tema con el toggle de la cabecera y la página entera responde. Referencia de reuso: THEME.md.

~/tokens/color

Paleta

Cada muestra usa var(--token) en vivo; el hex se resuelve por JS desde el valor computado, así que refleja el tema activo (los valores mostrados de fábrica son los del tema oscuro).

Grounds

Superficies: grafito con sesgo violeta, no azul-gris.

--carbon-void#0a0810

--carbon#14121b

--carbon-raised#1d1a26

--carbon-inset#17151f

--logo-carbon#16141b

Ink

Texto, de más fuerte a más tenue.

--ink#dcd8e4

--ink-strong#f4f1f8

--ink-muted#948da0

--ink-faint#867f92

Lines

Bordes y separadores.

--line#2a2636

--line-soft#201d2b

Anclas frías

Cian de señal (primario), índigo (secundario).

--teal#1ec8d0

--teal-deep#14a3ab

--teal-glowrgba(30,200,208,.14)

--cyan#6a8bff

--cyan-deep#4f6ee6

La especia

Fucsia eléctrico: el único acento cálido.

--magenta#ff3d8a

--magenta-deep#e51f6f

Semánticos

Estado (separados del acento de marca).

--sem-ok#35d0a0

--sem-warn#f2b53c

--sem-crit#ff6a6a

--sem-info#6a8bff

Syntax tokens

Resaltado de código (alias de los anteriores).

--tok-kw#ff3d8a

--tok-fn#6a8bff

--tok-str#1ec8d0

--tok-num#f2b53c

--tok-com#867f92

--tok-punc#948da0

~/tokens/type

Tipografía

Tres roles y una escala afinada a mano.

display--font-displaygrotesque (Avenir Next / Futura)títulos, cifras, la marca — pesado y ceñido

Carbon Compiler

body--font-bodyserif (Charter)prosa larga, párrafos, texto legible

Cinco años construyendo aplicaciones en producción.

utility--font-monomonospace (SF Mono / JetBrains Mono)labels, rutas, datos, código, nav

~/skills/stack.json · const x = 42;

Escala

--fs-heroclamp(3.25rem, 13vw, 9rem)

--fs-3xlclamp(2.75rem, 8vw, 5.25rem)

Graciano

--fs-2xl2.75rem

Títulos de sección

--fs-xl1.9375rem

Cifras y subtítulos

--fs-lg1.4375rem

Encabezado de tarjeta

--fs-md1.1875rem

Título de rol

--fs-base1rem

Texto de cuerpo (Charter)

--fs-sm0.875rem

Cuerpo de tarjeta, botones

--fs-xs0.75rem

Enlaces de nav, meta

--fs-2xs0.6875rem

Badges, labels de stat

~/components/gallery

Componentes

Los 11 componentes reutilizables, en vivo.

Badge

7 variantes · icono opcional del sprite

techprimaryaccentokwarnneutralcat

JavaAngularPersonalTypeScript

Button

3 variantes · flecha · disabled (hover en vivo)

.btn-primary · teal sólido

.btn-accent · fucsia

.btn-ghost · borde

StatTile

teal por defecto · accent = fucsia

años de experiencia

empresas

años programando

Card

título/slots · hover (lift + línea) · href · as

Card con título

Cuerpo por el slot por defecto. Pasa el cursor: la tarjeta se eleva y aparece la línea de acento teal→fucsia.

Slots header/footer

demo

Encabezado personalizado por slot y una acción en el footer.

Acción

hover=false

Superficie estática, sin lift ni línea de acento.

TimelineEntry

dato real · collection experience[0]

Carvajal Tecnología y Servicios

Actual

07/12/2021 — ActualMedellín, Colombia

Ingeniero de Desarrollo Master

Actual01/03/2022 — Actual

Lideré y supervisé a un equipo de desarrolladores en un proyecto que estaba en fase de mejora continua y planificación estratégica. A pesar de haber reducido mi tiempo de codificación, mi enfoque principal estaba en asegurar la calidad del código y la implementación efectiva de metodologías ágiles. En mi rol actual he retomado mis funciones como desarrollador, contribuyendo activamente a diferentes proyectos de la compañía.

Supervisar y liderar un equipo de desarrollo, asegurando la correcta distribución de tareas y un alto nivel de rendimiento.
Diseñar y dirigir la implementación de arquitecturas y soluciones técnicas complejas en el proyecto.
Planificar y coordinar los esfuerzos de desarrollo en el equipo, asegurando que las tareas se realizaran en tiempo y forma.
Revisar el código y asegurar que el diseño de la aplicación cumpliera con los estándares establecidos.
Desplegar versiones de las aplicaciones en diferentes ambientes (Calidad, Piloto y Producción).
Mantener al equipo actualizado en las últimas tecnologías y metodologías ágiles, y capacitar a los compañeros nuevos.
Colaborar con otros líderes técnicos y la alta dirección para asegurar el éxito del proyecto y su alineación con los objetivos del negocio.
Liderar el diseño y desarrollo de módulos críticos aprovechando conocimientos avanzados en Java y prácticas de codificación eficientes.
Implementar herramientas de monitoreo y seguimiento para la identificación y solución eficiente de problemas.

Ingeniero de Desarrollo

07/12/2021 — 28/02/2022

Estabilicé y mantuve un proyecto crítico en producción, trabajando con diversas tecnologías y servicios en la nube bajo metodologías ágiles. Me enfoqué en garantizar la estabilidad, escalabilidad y mejora del rendimiento del proyecto, colaborando estrechamente con el equipo de soporte técnico. Implementé prácticas de codificación consistentes que mejoraron la calidad del código e introduje herramientas de monitoreo eficientes para una resolución más rápida de problemas.

Analizar los requerimientos del equipo de Producto.
Diseñar ventanas de funcionalidades de acuerdo a los requerimientos.
Escribir el código necesario para el funcionamiento de acuerdo a los requerimientos.
Diseñar y ejecutar pruebas a las funcionalidades de las aplicaciones.
Colaborar con el equipo de soporte técnico para resolver problemas y garantizar el funcionamiento adecuado de las aplicaciones.

tecnologías utilizadas

Spring BootAngularJavaTypeScriptMongoDBPostgreSQLActiveMQApache CamelAWS · EC2/S3/RDS/EKS/LambdaGrafanaPrometheusSonarQubeAzure DevOps

ThemeToggle

alterna data-theme · persiste en localStorage

Instancia extra; sincroniza con el de la cabecera.

IconSprite

21 símbolos monoline · una instancia por documento

i-java

i-spring

i-angular

i-node

i-db

i-mongo

i-aws

i-do

i-git

i-ionic

i-html

i-css

i-tile-js

i-tile-ts

i-tile-php

i-tile-b

i-ec2

i-s3

i-rds

i-eks

i-lambda

SkipLink

visible sólo al foco de teclado

Pulsa Tab aquí: el enlace baja desde arriba. El real vive como primer foco de esta página.

Hero

bento 12-col · Badge + Button + StatTile · entrada escalonada

disponible para proyectos · Medellín, Colombia

LuisGraciano

Desarrollador Web Full Stack

años de experiencia

stack diario

AngularSpring BootJavaAWS

Ver proyectos Contáctame

Header · Footer · BaseLayout

estructurales · ya visibles en el chrome de esta página

BaseLayout envuelve esta página: importa los tokens, monta el script anti-FOUC y el scroll-reveal, y componeSkipLink → Header → slot → Footer → IconSprite. El Header sticky (marca + nav + ThemeToggle) está arriba con el enlace style marcado como activo; elFooter cierra el documento abajo. No se re-instancian aquí: renderizarlos dos veces rompería los landmarks.