Created skill cards

src/main.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <style>
-    .card {
+    .main-card {
         background-color: var(--bg-grad);
         border-radius: 1em;
         padding: .2em 2em 2em 2em;
@@ -52,6 +52,56 @@
         margin-bottom: 1em;
     }
 
+    .card-header .logo {
+        color: var(--fg);
+        font-size: 3em;
+    }
+
+
+    /* Skills Cards CSS */
+    .skills-container {
+        max-width: 90%;
+        padding: 0em 2em;
+        margin: 0em auto;
+    }
+
+    .cards {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        gap: 3em 3em;
+        justify-content: center;
+        padding: 3em 1em 2em 0em;
+        list-style: none;
+        transition: all 0.2s;
+    }
+
+    .card {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        flex: 0 0 20%;
+        padding: .5em 2.5em 2em 2.5em;
+        background: var(--bg-grad);
+        border-radius: .5em;
+        scroll-snap-align: start;
+        transition: all 0.2s;
+    }
+    .card:hover {
+        box-shadow: .5em .5em .5em var(--cyan);
+    }
+
+    .card .card-content {
+        margin: 1em 0;
+        max-width: 85%;
+    }
+
+    .card .card-footer {
+        display: flex;
+        justify-content: space-between;
+        margin-top: auto;
+    }
+
 </style>
 
 {#await getJson('/json/me.json')}
@@ -61,7 +111,7 @@
         </div>
     </div>
 {:then info}
-    <div class="card">
+    <div class="main-card">
         <div class="card-header">
             <h1>{info.name}</h1>
             <h3 class="not-required">{info.job_title}</h3>
@@ -72,6 +122,27 @@
             <p class="about">{@html info.about}</p>
         </div>
     </div>
+
+    <div class="skills-container">
+        <ul class="cards">
+            {#each info.skills as skill}
+                <li class="card">
+                    <div>
+                        <div class="card-header">
+                            <h2>{skill.skill}</h2>
+                            <i class="{skill.logo} logo"></i>
+                        </div>
+                        <div class="card-content">
+                            <p class="not-required">{skill.about}</p>
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <a href="/repos">Repos</a>
+                    </div>
+                </li>
+            {/each}
+        </ul>
+    </div>
 {:catch}
     <div class="card">
         <div class="card-header">