add: leetcode badges

src/components/CodingProfiles.astro

@@ -0,0 +1,109 @@
+---
+const badgesData = await fetch(
+  "https://alfa-leetcode-api.onrender.com/naik-ji/badges"
+).then((response) => response.json());
+const badges = badgesData.badges;
+---
+
+<section class="box contents">
+  <h2>Leetcode Badges</h2>
+  <div
+    class="w-full px-10 md:px-20 py-8 rounded-md flex flex-row center flex-wrap gap-2"
+  >
+    {
+      badges.map(
+        (badge: { icon: string; name: string; displayName: string }) => (
+          <div class="content">
+            <a
+              href="https://leetcode.com/naik-ji"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img src={badge.icon} alt={badge.name} width="100" height="100" />
+              <p>{badge.displayName}</p>
+            </a>
+          </div>
+        )
+      )
+    }
+  </div>
+</section>
+
+<style>
+  .box {
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    background-color: var(--gray-999_40);
+  }
+
+  .content {
+    width: 200px;
+    text-align: center;
+  }
+
+  .contents {
+    display: flex;
+    flex-direction: row;
+    gap: 3rem;
+  }
+
+  .contents h2 {
+    font-size: var(--text-lg);
+  }
+
+  .contents p {
+    color: var(--gray-400);
+  }
+
+  @media (min-width: 50em) {
+    .box {
+      border-radius: 1.5rem;
+      padding: 2.5rem;
+    }
+
+    .contents {
+      display: grid;
+      grid-template-columns: 1fr 60% 1fr;
+      gap: 1rem;
+    }
+
+    .contents h2 {
+      font-size: var(--text-2xl);
+      align-self: center;
+    }
+    .md\:px-20 {
+      padding-left: 5rem;
+      padding-right: 5rem;
+    }
+
+    .py-8 {
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+    }
+    .px-10 {
+      padding-left: 2.5rem;
+      padding-right: 2.5rem;
+    }
+    .rounded-md {
+      border-radius: 0.375rem;
+    }
+    .gap-2 {
+      gap: 0.5rem;
+    }
+    .justify-center {
+      justify-content: center;
+    }
+    .flex-wrap {
+      flex-wrap: wrap;
+    }
+    .flex-row {
+      flex-direction: row;
+    }
+    .w-full {
+      width: 100%;
+    }
+    .flex {
+      display: flex;
+    }
+  }
+</style>

src/pages/index.astro

@@ -16,6 +16,7 @@ import PortfolioPreview from "../components/PortfolioPreview.astro";
 import ContactCTA from "../components/ContactCTA.astro";
 import Skills from "../components/Skills.astro";
 import Projects from "../components/Projects.astro";
+import CodingProfiles from "../components/CodingProfiles.astro";
 
 // Content Fetching: List four most recent work projects
 const projects = (await getCollection("work"))
@@ -75,6 +76,7 @@ const projects = (await getCollection("work"))
 
       <Skills />
       <Projects />
+      <CodingProfiles />
     </div>
 
     <!--