IAmJafeth · Vinyl & Tech
Una estética que mezcla la precisión digital del terminal con el alma análoga del vinilo. Lo importante no es el terminal en sí — es lo que el terminal representa: foco, sustancia, herramienta sobre decoración. Esa sensibilidad se traslada a cualquier formato — sitios web, artículos, posts, video — manteniendo el mismo carácter.
El terminal funciona bien para piezas pequeñas y enfocadas (404, coming-soon, snippets, posts). Para sitios completos, artículos largos y video, el terminal aparece como acento o componente — no como marco de todo el contenido. La grilla de la página respira; el terminal puntúa.
monoespaciado · análogo · deliberado
Si una decisión de diseño no encaja en esos tres adjetivos, no pertenece al sistema.
| formato | el terminal es... | ejemplos |
|---|---|---|
| piezas pequeñas | contenedor central | 404, coming-soon, snippets |
| sitios completos | componente / acento | landing, portfolio, blog |
| artículos largos | code blocks, callouts | tutoriales, ensayos, docs |
| posts sociales | protagonista de cards | quote cards, code cards |
| video | frames intro/outro, lower thirds | tutoriales, vlogs, reels |
Un disco de vinilo con brackets de código < >
reemplazando dos surcos, y la J
como etiqueta central. La marca completa puede usarse con o sin texto,
según el contexto y el tamaño disponible.
Reservá al menos el equivalente al radio del centro del disco como espacio libre alrededor del logo. Nunca apretarlo contra bordes ni texto.
Tamaño mínimo: 32px primario · 96px extendido.
Paleta dominada por negros profundos con el verde fósforo como acento principal. Los acentos cálidos (ámbar, rojo) se reservan para advertencias y errores. Pensada para modo oscuro nativo; cualquier uso en claro requiere ajustes específicos.
En cualquier composición, mantener aproximadamente: 70% negros · 20% grises · 8% verde · 2% ámbar/rojo. Los colores cálidos son rareza, no decoración.
Dos fuentes monoespaciadas, una para display y otra para cuerpo. El sistema completo es monoespaciado — no se usan fuentes proporcionales en ningún caso. Todo el texto se compone en minúsculas o sentence case salvo el wordmark.
Geometría reducida: círculos perfectos (vinilo, dots de estado), rectángulos con esquinas redondeadas suaves (paneles, botones), y líneas finas que actúan como surcos o brackets. Sin shadows pronunciados ni gradientes elaborados.
| nombre | radio | uso |
|---|---|---|
| none | 0 | tablas, divisores |
| sm | 3–4px | botones, pills, inputs |
| md | 8px | paneles, cards, terminales |
| full | 50% | círculos, dots, vinilos |
Las proporciones del sistema. Una escala de espaciado basada en múltiplos de 4, anchos máximos por tipo de contenido, y breakpoints claros. Estos números son la diferencia entre algo que se ve descuidado y algo deliberado.
| ancho | uso | ejemplos |
|---|---|---|
680px | terminal / texto largo | 404, blog post, lectura focalizada |
900px | contenido editorial | artículo con imágenes, ensayo |
1100px | contenedor estándar | landing, portfolio, página de proyecto |
1280px | grilla amplia | galerías, dashboards |
1440px | máximo absoluto | full-bleed con padding lateral |
Gutter de 24px en desktop, 16px en mobile.
Combinaciones comunes: 6+6 (dos col), 4+4+4 (tres col), 3+3+3+3 (cuatro col), 8+4 (contenido + sidebar).
| nombre | min-width | uso |
|---|---|---|
| mobile | 0px | 1 columna, padding 16–20px |
| tablet | 700px | 2 columnas, padding 24px |
| desktop | 1024px | 3+ columnas, sidebar visible |
| wide | 1280px | contenedor ampliado |
| ultra | 1440px | tope de contenido |
Entre secciones mayores: 96px ·
entre subsecciones: 48px ·
entre bloques relacionados: 32px ·
entre elementos del mismo bloque: 16px.
El espacio en blanco no es vacío, es respiración.
Bloques visuales reutilizables. El terminal es el contenedor más característico pero uno entre muchos. Cards, botones, badges, inputs y callouts comparten el mismo lenguaje visual sin necesidad de estar siempre dentro de un terminal.
Descripción breve del proyecto en una o dos líneas.
Descripción breve del proyecto en una o dos líneas.
Descripción breve del proyecto en una o dos líneas.
"El código se escribe una vez pero se lee mil veces."— guido van rossum
Composiciones recurrentes para armar páginas. Cada patrón está pensado como un bloque que puede combinarse con otros — hero + feature grid + CTA + footer, por ejemplo — respetando el ritmo vertical y la grilla establecidos.
Software por día, surcos por noche. Soy un ingeniero que colecciona vinilos y le gusta tratar el código como una pieza de arte.
Backend, infra, herramientas. Lo que hace que las cosas funcionen sin sorpresas.
Colección, descubrimiento, historia del formato. El sonido análogo importa.
Ensayos sobre desarrollo, cultura, y la intersección de ambos.
Si estás buscando alguien que tome el código en serio y respete el detalle, hablemos.
./contactar| patrón | columnas | uso |
|---|---|---|
| Hero split | 6+6 | landing principal, intro con demo |
| Hero centered | full | portfolio minimalista, presentación |
| Feature grid | 4+4+4 | servicios, capacidades, valores |
| Stats row | 3+3+3+3 | números clave, métricas |
| Article + sidebar | 8+4 | blog post, documentación |
| Project showcase | 6+6 alterna | casos de estudio, galería |
| CTA card | full bordeado | cierre de página, conversión |
| Quote pull | full centrado | testimonios, citas |
Capas atmosféricas que dan profundidad y referencia análoga al sistema digital. Aplicarlas con sutileza — son ambiente, no decoración protagonista.
Líneas horizontales repetidas de 2px con opacidad muy baja (.06–.08). Aplicado a body::before, fijo, sin pointer-events.
repeating-linear-gradient(
0deg, transparent, transparent 2px,
rgba(0,0,0,.06) 2px, rgba(0,0,0,.06) 4px
)
Oscurecimiento progresivo desde el centro hacia los bordes. Refuerza la sensación de monitor CRT.
radial-gradient(
ellipse at center,
transparent 60%,
rgba(0,0,0,.5) 100%
)
Ruido SVG inline como data-URI, opacidad .03. Imita imperfección análoga sin afectar performance.
feTurbulence type="fractalNoise"
baseFrequency=".85" numOctaves="4"
Drop-shadow verde muy suave alrededor del logo y botones primarios en hover. Evoca fósforo encendido.
drop-shadow(0 0 24px
rgba(57,255,133,.08))
El movimiento refuerza la narrativa: cosas tipeándose, vinilo girando, cursor parpadeando. Easing lineal o ease estándar — sin curvas elásticas ni bounces.
| animación | duración | easing | uso |
|---|---|---|---|
| type-in | .3s |
ease |
aparición de líneas en terminal, staggered en cascada |
| spin (vinilo) | 3–8s |
linear |
rotación constante, infinita |
| blink (cursor) | 1s |
step-end |
parpadeo binario, no gradual |
| fade-in | .4–.6s |
ease |
aparición de elementos secundarios |
| drift | 18–25s |
linear |
glyphs flotando en el fondo |
| hover | .25s |
ease |
transiciones de botones y cards |
Las líneas del terminal aparecen secuencialmente con delays de
.4–.5s entre cada una, simulando un sistema que
ejecuta comandos en tiempo real. Total de la cascada: 4–6 segundos.
Después, la interfaz queda estática salvo por el vinilo girando y el cursor parpadeando.
No se usan packs de íconos comerciales. Los símbolos vienen del propio mundo del terminal y del vinilo — ASCII, glifos Unicode, y SVGs custom cuando hace falta forma.
Toda la copy se escribe en bajo nivel — directa, técnica, con humor seco. El sistema mezcla terminología de programación con metáforas de vinilo: "la aguja saltó", "compilando el lado B", "silencio a 33⅓ rpm".
#Plantillas de página que combinan los layouts y patrones para formar experiencias completas. El terminal aparece como acento, no como contenedor — la página respira con grilla y espacio.
# estructura: nav · hero split · feature grid · stats · CTA · footer
| bloque | altura | contiene |
|---|---|---|
| Nav superior | 64–80px | logo + links + CTA secundario |
| Hero | 60–80vh | headline + dek + 1-2 CTAs + demo opcional |
| Secciones | variable | 96px de padding vertical, ritmo constante |
| CTA final | auto | card bordeada con acento verde |
| Footer | auto | sitemap + socials + meta + signature |
Patrones para artículos, ensayos, documentación y blog. La lectura larga necesita más respiración que un terminal puede dar — el sistema se relaja, mantiene la tipografía monoespaciada y los acentos verdes, pero abre el espacio.
Un argumento sobre fricción, ritual, y la relación entre música y atención.
Párrafo de cuerpo. Use line-height generoso (1.8) para
lectura larga. El primer párrafo de un artículo puede llevar drop cap si el contexto lo amerita.
El streaming nos prometió toda la música del mundo a un toque. Y cumplió. Pero algo se perdió en la traducción — la fricción de elegir un disco, sacarlo del sleeve, dejar caer la aguja. El ritual desapareció, y con él, cierta forma de escuchar.
El vinilo no es nostalgia, es resistencia activa contra una forma de consumo que premia la cantidad sobre la calidad.
"Listening to vinyl is an act of presence, not an act of background."— alguien que sabe
Esa presencia es lo que sostiene este argumento. Y por eso, en una era donde todo se reproduce automáticamente, vale la pena hacer el esfuerzo de elegir.
| elemento | tratamiento |
|---|---|
| Drop cap | Space Mono 3.2rem verde, solo en primer párrafo de artículos largos |
| Pull quote | border-left verde 3px, fondo superficie-2, padding generoso |
| Code block | Header con nombre de archivo + botón copy, line numbers en muted |
| Image caption | Texto en muted, italic, 12px, debajo de la imagen |
| Footnote | Número superscript verde, link a aside al final |
| Related links | Lista al final con prompt + título + tiempo de lectura |
| Ancho de lectura | 680–720px máximo para confort |
| Line-height | 1.8–1.85 para cuerpo largo |
El sistema en movimiento. Los frames de video heredan el lenguaje del terminal — texto tipeándose, vinilo girando, transiciones limpias. Sin efectos de glitch agresivos: el carácter viene de la quietud, no del ruido.
1920×108030fps o 60fpsLlevar el sistema al mundo físico. En print, los negros se vuelven más densos, el verde pierde luminosidad, y las texturas digitales (scanlines, glow) desaparecen — el papel ya tiene su propia textura.
business card · 85×55mm
sticker circular · 75mm
poster · A3
t-shirt · chest print
| aspecto | spec |
|---|---|
| Modo de color | CMYK para print, Pantone si requiere spot color verde |
| Verde equivalente | aprox. Pantone 802 C · ajustar a soporte |
| Resolución mínima | 300 dpi para alta calidad |
| Bleed | 3mm en todos los lados |
| Papel sugerido | mate o uncoated para business cards · vinyl matte para stickers |
| Tipo de print | offset o digital para volumen · serigrafía para merch (1-2 tintas) |
Lo no negociable. Estas reglas mantienen la coherencia del sistema a través de cualquier medio o aplicación futura.
Redes sociales
Plantillas por formato. En social, el terminal vuelve a ser protagonista — los posts son pequeños, enfocados, y deben leerse en un scroll. Aspect ratios y safe areas definidos para cada plataforma principal.
1080×10801080×13501080×19201200×6751500×5001200×630Templates 1:1 (Instagram feed)
quote card
code card
stat card
Template 9:16 (Stories / Reels)
33⅓ rpm
now playing
thread intro
announcement
Template 16:9 (OG / Twitter card)
Carousel / multi-slide
5%del lado más corto@iamjafeth) o el logo