Replace emojis with actual SVG logos on homepage platform section

Copilot · waldekmastykarz · Copilot · commit 8c1cb403e80e · 2026-02-11T08:31:27.000Z
Co-authored-by: waldekmastykarz &lt;11164679+waldekmastykarz@users.noreply.github.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/logos/angular.svg b/public/logos/angular.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <path d="M32 6 6 15.5l4 33.3L32 60l22-11.2 4-33.3Z" fill="#DD0031"/>
+  <path d="M32 6v54l22-11.2 4-33.3Z" fill="#C3002F"/>
+  <path d="M32 12.4 16.2 47h5.9l3.2-7.9h13.4L42 47h5.9Zm4.6 22H27.4L32 23.3Z" fill="#fff"/>
+</svg>
diff --git a/public/logos/browser.svg b/public/logos/browser.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <circle cx="32" cy="32" r="26" stroke="#6366F1" stroke-width="3"/>
+  <ellipse cx="32" cy="32" rx="12" ry="26" stroke="#6366F1" stroke-width="3"/>
+  <path d="M8 22h48M8 42h48" stroke="#6366F1" stroke-width="3"/>
+  <path d="M32 6v52" stroke="#6366F1" stroke-width="3"/>
+</svg>
diff --git a/public/logos/dotnet.svg b/public/logos/dotnet.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <circle cx="32" cy="32" r="28" fill="#512BD4"/>
+  <circle cx="18" cy="44" r="2.5" fill="#fff"/>
+  <path d="M29.4 44h-3l-5.4-7.5-.5-.8h-.1V44h-2.8V30h3.4l5.2 7.3.5.8h.1V30h2.8v14Z" fill="#fff"/>
+  <path d="M37 44h-6.2V30h6.1v2.5h-3.3v3h3.1v2.4h-3.1v3.5H37V44Z" fill="#fff"/>
+  <path d="M45.5 32.5h-3.1V44h-2.8V32.5h-3.1V30h9v2.5Z" fill="#fff"/>
+</svg>
diff --git a/public/logos/java.svg b/public/logos/java.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <path d="M24.6 36.2s-2 1.2 1.4 1.6c4.1.5 6.2.4 10.7-.4 0 0 1.2.7 2.8 1.4-10 4.3-22.7-.2-14.9-2.6Zm-1.2-5.8s-2.2 1.7 1.2 2c4.4.4 7.8.5 13.8-.6 0 0 .8.8 2.1 1.3-12.1 3.5-25.6.3-17.1-2.7Z" fill="#5382A1"/>
+  <path d="M34.4 23.3c2.5 2.8-.7 5.4-.7 5.4s6.2-3.2 3.3-7.2c-2.6-3.7-4.6-5.6 6.3-12 0 0-17.1 4.3-8.9 13.8Z" fill="#E76F00"/>
+  <path d="M46 39.5s1.5 1.2-1.6 2.2c-5.9 1.8-24.5 2.3-29.7.1-1.9-.8 1.6-1.9 2.7-2.2 1.2-.3 1.8-.2 1.8-.2-2.1-1.5-13.5 2.9-5.8 4.1 21 3.4 38.3-1.5 32.6-3.9Zm-21-15s-9.6 2.3-3.4 3.1c2.6.3 7.8.3 12.7-.1 4-.4 8-1.2 8-1.2s-1.4.6-2.4 1.3c-9.8 2.6-28.7 1.4-23.2-1.3 4.6-2.2 8.3-1.8 8.3-1.8Zm17.3 9.7c10-5.2 5.4-10.2 2.1-9.5-.8.2-1.1.3-1.1.3s.3-.5.9-.7c6.4-2.2 11.3 6.6-2.1 10.1 0 0 .1-.1.2-.2Z" fill="#5382A1"/>
+  <path d="M36.5 4s5.5 5.5-5.2 14c-8.6 6.8-2 10.7 0 15.1-5-4.5-8.7-8.5-6.2-12.2C28.7 15.5 38.8 12.4 36.5 4Z" fill="#E76F00"/>
+  <path d="M25.5 57.3c9.6.6 24.3-.3 24.7-4.8 0 0-.7 1.7-8 3.1-8.2 1.5-18.4 1.3-24.4.4 0 0 1.2 1 7.7 1.3Z" fill="#5382A1"/>
+</svg>
diff --git a/public/logos/nodejs.svg b/public/logos/nodejs.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <path d="M32 4.5a4 4 0 0 1 2 .54l20.78 12a4 4 0 0 1 2 3.46v24a4 4 0 0 1-2 3.46L34 60a4 4 0 0 1-4 0L9.22 47.96a4 4 0 0 1-2-3.46v-24a4 4 0 0 1 2-3.46L30 5.04a4 4 0 0 1 2-.54Z" fill="#339933"/>
+  <text x="32" y="40" text-anchor="middle" fill="#fff" font-family="Arial,sans-serif" font-weight="bold" font-size="22">JS</text>
+</svg>
diff --git a/public/logos/python.svg b/public/logos/python.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="a" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#387EB8"/>
+      <stop offset="1" stop-color="#366994"/>
+    </linearGradient>
+    <linearGradient id="b" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#FFC836"/>
+      <stop offset="1" stop-color="#FFD43B"/>
+    </linearGradient>
+  </defs>
+  <path d="M31.5 6C20.2 6 21 10.9 21 10.9v5.1h11v2H15.3S8 17 8 28.5 14.3 39.5 14.3 39.5H18v-5.3s-.2-6.3 6.2-6.3h10.6s6-.1 6-5.8V12s.9-6-9.3-6Zm-5.9 3.5a1.9 1.9 0 1 1 0 3.8 1.9 1.9 0 0 1 0-3.8Z" fill="url(#a)"/>
+  <path d="M32.5 58c11.3 0 10.5-4.9 10.5-4.9v-5.1h-11v-2h16.7S56 47 56 35.5 49.7 24.5 49.7 24.5H46v5.3s.2 6.3-6.2 6.3H29.2s-6 .1-6 5.8V52s-.9 6 9.3 6Zm5.9-3.5a1.9 1.9 0 1 1 0-3.8 1.9 1.9 0 0 1 0 3.8Z" fill="url(#b)"/>
+</svg>
diff --git a/public/logos/react.svg b/public/logos/react.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <circle cx="32" cy="32" r="4.4" fill="#61DAFB"/>
+  <g fill="none" stroke="#61DAFB" stroke-width="2.5">
+    <ellipse cx="32" cy="32" rx="24" ry="9.5"/>
+    <ellipse cx="32" cy="32" rx="24" ry="9.5" transform="rotate(60 32 32)"/>
+    <ellipse cx="32" cy="32" rx="24" ry="9.5" transform="rotate(120 32 32)"/>
+  </g>
+</svg>
diff --git a/public/logos/rest-api.svg b/public/logos/rest-api.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <path d="M24 26a8 8 0 1 1-4 6.9" stroke="#8B5CF6" stroke-width="3.5" stroke-linecap="round"/>
+  <path d="M40 38a8 8 0 1 1 4-6.9" stroke="#8B5CF6" stroke-width="3.5" stroke-linecap="round"/>
+  <path d="M26 34h12" stroke="#8B5CF6" stroke-width="3.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -227,17 +227,17 @@ import Layout from '../layouts/Layout.astro';
       </p>
       <div class="section-reveal grid grid-cols-2 md:grid-cols-4 gap-6">
         {[
-          { name: '.NET', icon: '⚙️' },
-          { name: 'Node.js', icon: '🟢' },
-          { name: 'Python', icon: '🐍' },
-          { name: 'Java', icon: '☕' },
-          { name: 'React', icon: '⚛️' },
-          { name: 'Angular', icon: '🅰️' },
-          { name: 'Browser', icon: '🌐' },
-          { name: 'Any REST API', icon: '🔗' },
+          { name: '.NET', icon: `${import.meta.env.BASE_URL}logos/dotnet.svg` },
+          { name: 'Node.js', icon: `${import.meta.env.BASE_URL}logos/nodejs.svg` },
+          { name: 'Python', icon: `${import.meta.env.BASE_URL}logos/python.svg` },
+          { name: 'Java', icon: `${import.meta.env.BASE_URL}logos/java.svg` },
+          { name: 'React', icon: `${import.meta.env.BASE_URL}logos/react.svg` },
+          { name: 'Angular', icon: `${import.meta.env.BASE_URL}logos/angular.svg` },
+          { name: 'Browser', icon: `${import.meta.env.BASE_URL}logos/browser.svg` },
+          { name: 'Any REST API', icon: `${import.meta.env.BASE_URL}logos/rest-api.svg` },
         ].map((tech) => (
           <div class="rounded-xl border p-5 text-center transition-all duration-300 hover:border-purple-500/50" style="background: var(--bg-secondary); border-color: var(--border-primary);">
-            <div class="text-2xl mb-2" aria-hidden="true">{tech.icon}</div>
+            <div class="mb-2 flex justify-center" aria-hidden="true"><img src={tech.icon} alt={tech.name} class="h-8 w-8" /></div>
             <p class="text-sm font-medium" style="color: var(--text-muted);">{tech.name}</p>
           </div>
         ))}
