From 46ea1b03a40c86135a5abc35fb55c5e03e6d3622 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesu=CC=81s=20Pe=CC=81rez?= <jpl@jesusperez.com>
Date: Sun, 9 Nov 2025 12:28:20 +0000
Subject: [PATCH] chore: add image

---
 imgs/vapora.svg | 200 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 imgs/vapora.svg

diff --git a/imgs/vapora.svg b/imgs/vapora.svg
new file mode 100644
index 0000000..cdcdff4
--- /dev/null
+++ b/imgs/vapora.svg
@@ -0,0 +1,200 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="170 40 590 300" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+  <defs>
+    <!-- Google Fonts import -->
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&amp;display=swap');
+    </style>
+
+    <!-- Gradiente principal -->
+    <linearGradient id="techGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#22d3ee;stop-opacity:1"/>
+      <stop offset="50%" style="stop-color:#a855f7;stop-opacity:1"/>
+      <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1"/>
+    </linearGradient>
+    
+    <!-- Gradiente vertical -->
+    <linearGradient id="vertGrad" x1="0%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" style="stop-color:#22d3ee;stop-opacity:1"/>
+      <stop offset="50%" style="stop-color:#a855f7;stop-opacity:0.8"/>
+      <stop offset="100%" style="stop-color:#ec4899;stop-opacity:0.4"/>
+    </linearGradient>
+    
+    <!-- Filtro glow tech -->
+    <filter id="techGlow">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    
+    <!-- Filtro glow fuerte -->
+    <filter id="strongGlow">
+      <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    
+    <!-- Filtro glass -->
+    <filter id="glass">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="0.5" result="blur"/>
+      <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo"/>
+      <feBlend in="SourceGraphic" in2="goo"/>
+    </filter>
+  </defs>
+  
+  <!-- Fondo -->
+  <rect width="800" height="400" fill="#000000"/>
+
+  <!-- Grid de fondo técnico sutil -->
+  <g opacity="0.08" stroke="#22d3ee" stroke-width="1">
+    <line x1="0" y1="133" x2="800" y2="133"/>
+    <line x1="0" y1="200" x2="800" y2="200"/>
+    <line x1="0" y1="267" x2="800" y2="267"/>
+    <line x1="133" y1="0" x2="133" y2="400"/>
+    <line x1="267" y1="0" x2="267" y2="400"/>
+    <line x1="400" y1="0" x2="400" y2="400"/>
+    <line x1="533" y1="0" x2="533" y2="400"/>
+    <line x1="667" y1="0" x2="667" y2="400"/>
+  </g>
+  
+  <!-- Símbolo técnico: flujo de datos ascendente -->
+  <g transform="translate(267, 280)">
+    <!-- Base: plataforma -->
+    <rect x="-25" y="0" width="50" height="6.67" fill="url(#techGrad)" opacity="0.8" rx="3.33"/>
+    
+    <!-- Stream principal - línea central tipo señal -->
+    <path d="M 0 0 L 0 -50 L 8.33 -58 L -8.33 -75 L 8.33 -92 L -8.33 -108 L 8.33 -125 L 0 -133 L 0 -200" stroke="url(#vertGrad)" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#techGlow)">
+      <animate attributeName="stroke-dasharray" values="0,500;500,0;0,500" dur="4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
+    </path>
+
+    <!-- Stream izquierdo 1 -->
+    <path d="M -33 0 L -33 -42 L -30 -58 L -37 -75 L -30 -92 L -37 -108 L -33 -125 L -33 -167" stroke="#22d3ee" stroke-width="3.33" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlow)">
+      <animate attributeName="stroke-dasharray" values="0,417;417,0;0,417" dur="4.5s" repeatCount="indefinite"/>
+    </path>
+
+    <!-- Stream izquierdo 2 -->
+    <path d="M -58 0 L -58 -33 L -53 -50 L -63 -67 L -53 -83 L -63 -100 L -58 -117 L -58 -142" stroke="#a855f7" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5">
+      <animate attributeName="stroke-dasharray" values="0,333;333,0;0,333" dur="5s" repeatCount="indefinite"/>
+    </path>
+
+    <!-- Stream derecho 1 -->
+    <path d="M 33 0 L 33 -42 L 30 -58 L 37 -75 L 30 -92 L 37 -108 L 33 -125 L 33 -167" stroke="#ec4899" stroke-width="3.33" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlow)">
+      <animate attributeName="stroke-dasharray" values="0,417;417,0;0,417" dur="4.2s" repeatCount="indefinite"/>
+    </path>
+
+    <!-- Stream derecho 2 -->
+    <path d="M 58 0 L 58 -33 L 53 -50 L 63 -67 L 53 -83 L 63 -100 L 58 -117 L 58 -142" stroke="#22d3ee" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5">
+      <animate attributeName="stroke-dasharray" values="0,333;333,0;0,333" dur="5.5s" repeatCount="indefinite"/>
+    </path>
+    
+    <!-- Nodos de datos en el flujo principal -->
+    <circle cx="0" cy="-67" r="5" fill="#22d3ee" filter="url(#strongGlow)">
+      <animate attributeName="cy" values="-67;-183;-67" dur="3s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite"/>
+    </circle>
+
+    <circle cx="0" cy="-100" r="4.17" fill="#a855f7" filter="url(#strongGlow)">
+      <animate attributeName="cy" values="-100;-217;-100" dur="3.5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;1;0" dur="3.5s" repeatCount="indefinite"/>
+    </circle>
+
+    <circle cx="0" cy="-133" r="3.33" fill="#ec4899" filter="url(#strongGlow)">
+      <animate attributeName="cy" values="-133;-233;-133" dur="4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite"/>
+    </circle>
+
+    <!-- Partículas laterales -->
+    <circle cx="-33" cy="-83" r="3.33" fill="#22d3ee" opacity="0.7">
+      <animate attributeName="cy" values="-83;-175;-83" dur="3.8s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;0.7;0" dur="3.8s" repeatCount="indefinite"/>
+    </circle>
+
+    <circle cx="33" cy="-92" r="3.33" fill="#ec4899" opacity="0.7">
+      <animate attributeName="cy" values="-92;-175;-92" dur="4.2s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;0.7;0" dur="4.2s" repeatCount="indefinite"/>
+    </circle>
+
+    <circle cx="-58" cy="-58" r="2.5" fill="#a855f7" opacity="0.5">
+      <animate attributeName="cy" values="-58;-142;-58" dur="4.5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;0.5;0" dur="4.5s" repeatCount="indefinite"/>
+    </circle>
+
+    <circle cx="58" cy="-67" r="2.5" fill="#22d3ee" opacity="0.5">
+      <animate attributeName="cy" values="-67;-142;-67" dur="5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;0.5;0" dur="5s" repeatCount="indefinite"/>
+    </circle>
+    
+    <!-- Hexágonos técnicos flotantes -->
+    <polygon points="0,-158 5,-162 5,-167 0,-170 -5,-167 -5,-162" stroke="#22d3ee" fill="none" stroke-width="1.67" opacity="0.6">
+      <animate attributeName="transform" values="translate(0,0);translate(0,-50);translate(0,0)" dur="4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;0.6;0" dur="4s" repeatCount="indefinite"/>
+    </polygon>
+
+    <polygon points="-42,-117 -37,-120 -37,-125 -42,-128 -47,-125 -47,-120" stroke="#a855f7" fill="none" stroke-width="1.67" opacity="0.5">
+      <animate attributeName="transform" values="translate(0,0);translate(0,-42);translate(0,0)" dur="4.5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;0.5;0" dur="4.5s" repeatCount="indefinite"/>
+    </polygon>
+
+    <polygon points="42,-125 47,-128 47,-133 42,-137 37,-133 37,-128" stroke="#ec4899" fill="none" stroke-width="1.67" opacity="0.5">
+      <animate attributeName="transform" values="translate(0,0);translate(0,-33);translate(0,0)" dur="5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0;0.5;0" dur="5s" repeatCount="indefinite"/>
+    </polygon>
+
+    <!-- Líneas de conexión horizontales animadas -->
+    <line x1="-33" y1="-100" x2="-8" y2="-100" stroke="#22d3ee" stroke-width="0.83" opacity="0.4">
+      <animate attributeName="opacity" values="0;0.4;0" dur="2s" repeatCount="indefinite"/>
+    </line>
+
+    <line x1="8" y1="-117" x2="33" y2="-117" stroke="#ec4899" stroke-width="0.83" opacity="0.4">
+      <animate attributeName="opacity" values="0;0.4;0" dur="2.5s" repeatCount="indefinite"/>
+    </line>
+
+    <line x1="-58" y1="-83" x2="-37" y2="-83" stroke="#a855f7" stroke-width="0.83" opacity="0.3">
+      <animate attributeName="opacity" values="0;0.3;0" dur="3s" repeatCount="indefinite"/>
+    </line>
+
+    <line x1="37" y1="-92" x2="58" y2="-92" stroke="#22d3ee" stroke-width="0.83" opacity="0.3">
+      <animate attributeName="opacity" values="0;0.3;0" dur="3.5s" repeatCount="indefinite"/>
+    </line>
+  </g>
+  
+  <!-- Texto VAPORA -->
+  <g filter="url(#glass)">
+    <text x="550" y="207" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="90" font-weight="800" fill="url(#techGrad)" letter-spacing="5" text-anchor="middle">
+      VAPORA
+    </text>
+
+    <text x="550" y="207" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="90" font-weight="800" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.83" letter-spacing="5" text-anchor="middle">
+      VAPORA
+    </text>
+  </g>
+
+  <!-- Glow en texto -->
+  <text x="550" y="207" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="90" font-weight="800" fill="url(#techGrad)" letter-spacing="5" filter="url(#techGlow)" opacity="0.3" text-anchor="middle">
+    VAPORA
+  </text>
+
+  <!-- Tagline -->
+  <text x="550" y="240" font-family="'Inter', sans-serif" font-size="20" fill="#a855f7" opacity="0.8" letter-spacing="0.25em" text-anchor="middle">
+    Evaporate complexity
+  </text>
+  
+  <!-- Indicador técnico decorativo -->
+  <g transform="translate(550, 280)">
+    <rect x="0" y="0" width="2" height="13.33" fill="#22d3ee" opacity="0.6">
+      <animate attributeName="height" values="13.33;20;13.33" dur="1.5s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="6.67" y="0" width="2" height="16.67" fill="#a855f7" opacity="0.6">
+      <animate attributeName="height" values="16.67;23.33;16.67" dur="1.8s" repeatCount="indefinite"/>
+    </rect>
+    <rect x="13.33" y="0" width="2" height="10" fill="#ec4899" opacity="0.6">
+      <animate attributeName="height" values="10;16.67;10" dur="1.3s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+</svg>