Almost finished the contacts page

2 files changed, 20 insertions, 10 deletions

diff --git a/src/components/contacts.json b/src/components/contacts.json
index 334808e..8b9e562 100644
--- a/src/components/contacts.json
+++ b/src/components/contacts.json
@@ -19,38 +19,38 @@
     },
     {
         "platform": "Discord",
-        "icon": "",
+        "icon": "discord",
         "username": "alee",
         "url": "https://discord.alee14.me"
     },
     {
         "platform": "YouTube",
-        "icon": "",
+        "icon": "youtube",
         "username": "AndrewLeeCAN",
         "url": "https://youtube.alee14.me"
     },
     {
         "platform": "Mastodon",
-        "icon": "",
+        "icon": "mastodon",
         "username": "@alee@mstdn.ca",
         "url": "https://mstdn.ca/@alee"
     },
     {
         "platform": "X",
         "comment": "yuck.",
-        "icon": "",
+        "icon": "x-twitter",
         "username": "alee",
         "url": "https://twitter.alee14.me"
     },
     {
         "platform": "Instagram",
-        "icon": "",
+        "icon": "instagram",
         "username": "alee14498",
         "url": "https://instagram.alee14.me"
     },
     {
         "platform": "Reddit",
-        "icon": "",
+        "icon": "reddit",
         "username": "alee1449",
         "url": "https://reddit.alee14.me"
     }
diff --git a/src/pages/contacts.astro b/src/pages/contacts.astro
index e917a4d..6847d19 100644
--- a/src/pages/contacts.astro
+++ b/src/pages/contacts.astro
@@ -2,17 +2,27 @@
 import Page from '../layouts/Page.astro'
 import { Icon } from 'astro-icon/components';
 import contacts from "../components/contacts.json";
-
-//let icon = "fa6-brands:" + contacts[0].icon;
 ---
 <Page title="Contacts" description="Follow me on other platforms">
     {contacts.map((contact)=> {
+        let icon = "fa6-brands:" + contact.icon;
         return (
             <div class="contacts-card"><a href={contact.url}>
-               {/*<Icon name={icon} />*/}
+               <Icon name={icon} />
                 {contact.platform} ({contact.username})
                 </a>
             </div>
         )
     })}
-</Page>
\ No newline at end of file
+</Page>
+<style>
+    .contacts-card {
+        display: flex;
+        align-items: center;
+        font-size: 1.2em;
+        padding: 1em;
+        margin: 1em;
+        border-radius: 10px;
+        background-color: #3B513B;
+    }
+</style>
\ No newline at end of file