feat: add article about architecture evolution from static to front-back separation

- cover image from hello-world
2026-07-23 21:35:37 +08:00
parent 20180085cc
commit 5efcaaae9f
3 changed files with 205 additions and 0 deletions
@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630" style="background-color:#ffffff">
+  <defs>
+    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#e94560"/>
+      <stop offset="100%" stop-color="#059669"/>
+    </linearGradient>
+  </defs>
+
+  <!-- 白底 -->
+  <rect width="1200" height="630" fill="#ffffff"/>
+
+  <!-- 极简装饰：一条渐变线 -->
+  <rect x="0" y="80" width="1200" height="2" fill="url(#accent)" opacity="0.3"/>
+
+  <!-- 左侧垂直线 -->
+  <rect x="80" y="0" width="2" height="630" fill="#e94560" opacity="0.08"/>
+
+  <!-- 标题 -->
+  <text x="120" y="200" font-family="system-ui,-apple-system,sans-serif" font-size="48" font-weight="700" fill="#0f172a" letter-spacing="2">
+    尼克的小窝
+  </text>
+  <text x="120" y="260" font-family="system-ui,-apple-system,sans-serif" font-size="48" font-weight="700" fill="#0f172a" letter-spacing="2">
+    架构变迁
+  </text>
+
+  <!-- 副标题 -->
+  <text x="120" y="320" font-family="system-ui,-apple-system,sans-serif" font-size="18" fill="#94a3b8" letter-spacing="6">
+    从纯静态到前后端分离
+  </text>
+
+  <!-- 小标签 -->
+  <rect x="120" y="365" width="180" height="32" rx="16" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
+  <text x="210" y="386" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" fill="#64748b">Nuxt → React + Go</text>
+
+  <!-- 右侧极简装饰：两个小方块 -->
+  <rect x="980" y="180" width="140" height="140" rx="8" fill="#fef2f2" stroke="#fca5a5" stroke-width="1"/>
+  <text x="1050" y="238" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" font-weight="600" fill="#e94560">静态</text>
+  <text x="1050" y="260" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#94a3b8">Monolith</text>
+
+  <rect x="980" y="340" width="140" height="140" rx="8" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1"/>
+  <text x="1050" y="398" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" font-weight="600" fill="#059669">分离</text>
+  <text x="1050" y="420" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#94a3b8">Front-end + Back-end</text>
+
+  <!-- 两个方块之间的箭头 -->
+  <text x="1050" y="325" text-anchor="middle" font-family="system-ui,sans-serif" font-size="16" fill="#cbd5e1">↓</text>
+</svg>