SIGNAL ROOM — Portfolio de Alberto Ramírez

Vite React TypeScript Tailwind NestJS MQTT ISO/IEC 27001

Portfolio personal con estética de centro de control de telemetría IoT: radar, osciloscopio, mapa de señal de proyectos y terminal de contacto. Personal portfolio with an IoT telemetry control room aesthetic.

Live site: mario-ramirez.dev · Perfil: github.com/rmMarioAlberto

Captura del hero

Soy Alberto Ramírez, Backend Developer e IoT Engineer de Querétaro, México. Este sitio es mi SIGNAL ROOM: cada sección es un instrumento de un centro de control.

• Hero / radar — identidad y estado (OPEN TO WORK)
• Telemetría — métricas reales: 50+ dispositivos IoT, >80% coverage, 243+ tests, ISO 27001, GPA 9.54
• Stack — panel de instrumentos con 7 categorías
• Mapa de señal — 10 proyectos reales como nodos de red (IMOX Cloud flagship)
• Trayectoria — línea de tiempo ECG: Fitness Gym, Yex Acoustics (Imox Cloud), Atlas Copco
• Logros — Fraunhofer IIS (MIOTY), NASA Space Apps, Fin 4 All, IEEE UTEQ
• Contacto — terminal con typing animation

Switch de idioma: el header alterna ES/EN; se persiste en localStorage y actualiza lang, title y meta description/OG dinámicos.

I'm Alberto Ramírez, a Backend Developer and IoT Engineer from Querétaro, Mexico. This site is my SIGNAL ROOM: every section is an instrument in a control center.

• Hero / radar — identity and status (OPEN TO WORK)
• Telemetry — real metrics: 50+ IoT devices, >80% coverage, 243+ tests, ISO 27001, GPA 9.54
• Stack — 7-category instrument panel
• Signal map — 10 real projects as network nodes (IMOX Cloud flagship)
• Track record — ECG timeline: Fitness Gym, Yex Acoustics (Imox Cloud), Atlas Copco
• Achievements — Fraunhofer IIS (MIOTY), NASA Space Apps, Fin 4 All, IEEE UTEQ
• Contact — terminal with typing animation

Language switch: the header toggles ES/EN; persisted in localStorage and updates lang, title and dynamic meta description/OG.

mise install # node 22 + pnpm (mise)
pnpm install
pnpm dev # http://localhost:8443
pnpm build # typecheck + build de producción
pnpm preview # sirve dist/
pnpm format # oxfmt (solo src/, vite.config.ts, index.html)

src/
├── i18n.ts # Traducciones ES/EN (type-checked) — toda la data del portfolio
├── App.tsx # 8 secciones: Hero, Telemetría, Stack, Proyectos, Experiencia, Logros, Educación, Contacto
├── index.css # Tokens SIGNAL ROOM + animaciones + reduced-motion
└── main.tsx # Entrypoint React
public/
├── favicon.svg/.png, apple-touch-icon.png, og-image.png
├── robots.txt
└── sitemap.xml
plans/signal-room.md # Concepto de diseño original

• Meta completo: title/description, canonical, robots, theme-color
• Open Graph + Twitter Cards con og-image.png (×ばつ630)
• JSON-LD Person (sameAs → GitHub/LinkedIn, almaMater UTEQ, knowsAbout)
• robots.txt + sitemap.xml
• Semantic HTML (×ばつh1, h2 por sección, lang dinámico)
• Accesibilidad: prefers-reduced-motion, skip-link, foco visible

Vercel + dominio mario-ramirez.dev con Cloudflare por delante. vercel.json aplica security headers y caché immutable para /assets/.