add dynamic profile logo's in

yuhonas · May 13, 2024 · cbb03b3 · cbb03b3
1 parent dfc54fd
commit cbb03b3
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -3,6 +3,16 @@
 const { title, description } = Astro.props['content'];
 
 import resume from '../../resume/resume.clintp.json';
+
+import { Image } from 'astro:assets';
+
+import logoGithub from '../images/logo-social-github.svg'
+import logoLinkedIn from '../images/logo-social-linkedin.svg'
+
+const logos = {
+  github: logoGithub,
+  linkedin: logoLinkedIn
+}
 ---
 
 <!doctype html>
@@ -23,9 +33,14 @@ import resume from '../../resume/resume.clintp.json';
             <img src="/favicon.svg" class="inline-block w-8 object-cover rounded mr-2"/>
             <h1 class="text-lg font-bold">$ ./clintp.xyz</h1>
           </a>
-          <nav class="flex gap-4">
+          <nav class="flex gap-2">
           { resume.basics.profiles.map(profile => (
-            <a href={ profile.url } class="hover:underline" rel="noopener" target="_blank">{ profile.network }</a>
+            <a href={ profile.url } class="hover:animate-spin" rel="noopener" target="_blank">
+              <Image src={ logos[profile.network.toLowerCase()] }
+                alt={ profile.network }
+                class="w-7 h-7 invert"
+              />
+            </a>
             ))
           }
         </div>