Add hidden contributions page

2 files changed, 102 insertions, 15 deletions

diff --git a/src/components/Card.astro b/src/components/Card.astro
index efcfaeb..d2d428e 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -5,20 +5,22 @@ interface Props {
   href: string;
   language: string;
   languageColor: string;
+  logoSrc?: string; 
+  logoWidth?: string;
 }
 
-const { href, title, body, language, languageColor } = Astro.props;
+const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%' } = Astro.props;
 ---
 
 <li class="link-card">
   <a href={href}>
+    {logoSrc && <div class="logo-container"><img src={logoSrc} alt="Project Logo" style={{ maxWidth: logoWidth }} /></div>}
     <div class="content-container">
       <h2>{title}</h2>
       <div class="language-container">
         <span class="dot" style={{ backgroundColor: languageColor }}></span>
         <span class="language">{language}</span>
       </div>
-      <div class="separator"></div>
       <p>{body}</p>
     </div>
   </a>
@@ -40,7 +42,6 @@ const { href, title, body, language, languageColor } = Astro.props;
     position: relative;
     overflow: hidden;
   }
-
   .link-card > a {
     width: 100%;
     text-decoration: none;
@@ -54,60 +55,51 @@ const { href, title, body, language, languageColor } = Astro.props;
     flex-direction: column;
     align-items: flex-start;
     justify-content: space-between;
-    position: relative; /* Add position property */
-    box-sizing: border-box; /* Include padding in the element's total width/height. */
-    height: 100%; /* Ensure it takes the full height of its parent. */
+    position: relative;
+    box-sizing: border-box;
+    height: 100%;
   }
-
   .content-container {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 0;
   }
-
   h2 {
     margin: 0;
     font-size: 1.25rem;
     transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
   }
-
   p {
     margin-top: 0.5rem;
     margin-bottom: 0;
   }
-
   .separator {
     height: 1px;
     width: 100%;
     background-color: rgba(255, 255, 255, 0.1);
   }
-
   .language-container {
     display: flex;
     align-items: center;
     gap: 5px;
     margin: 0;
   }
-
   .dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     display: inline-block;
   }
-
   .language {
     font-weight: bold;
     font-size: 1rem;
     color: rgba(255, 255, 255, 0.8);
   }
-
   .link-card:is(:hover, :focus-within) {
     background-position: 0;
     background-image: var(--accent-gradient);
   }
-
   .link-card:is(:hover, :focus-within) h2 {
     color: rgb(var(--accent-light));
   }
@@ -127,4 +119,17 @@ const { href, title, body, language, languageColor } = Astro.props;
       font-size: 24px;
     }
   }
+
+  .logo-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 0;
+  }
+  .logo-container img {
+    max-width: 60%;
+    height: auto;
+    border-radius: 8px;
+  }
 </style>
diff --git a/src/pages/contributions.astro b/src/pages/contributions.astro
new file mode 100644
index 0000000..f6dd454
--- /dev/null
+++ b/src/pages/contributions.astro
@@ -0,0 +1,82 @@
+---
+import Layout from "../layouts/Layout.astro";
+import SocialNavbar from "../components/SocialNavbar.astro";
+import Card from "../components/Card.astro";
+---
+
+<Layout title="Contributions">
+  <main>
+    <h1>Open Source Contributions</h1>
+    
+    <ul role="list" class="link-card-grid">
+    </ul>
+    
+    <section class="contributions-section">
+      <h2>Contributions</h2>
+      <ul role="list" class="contribution-card-grid">
+        <Card
+          href="https://github.com/pinapelz/Sapphire"
+          title="Sapphire"
+          body="Sapphire is a research implementation of the Final Fantasy XIV Online server. The purpose of Sapphire is to gain an understanding of how the retail game servers work internally."
+          language="C++"
+          languageColor="#f34b7d"
+          logoWidth="300px"
+          logoSrc="https://1852825540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWEO5F5fxBARvfBEby5l%2Fuploads%2FN0KFeaD6TNNdujlRXgrw%2Fsapphire_logo.png?alt=media&token=79fdc373-8bf7-41e0-bf66-fb3eaf67d2ca"
+        />
+        <Card
+        href="https://github.com/Patchwork-Archive"
+        title="Patchwork Archive"
+        body="Patchwork Archive aims to archive original songs and covers created by VTubers. With loss of content being a major issue in VTubing (due to termination and graduations), the goal of Patchwork Archive is to preserve a subset of VTuber content for preservation of culture."
+        language="Javascript"
+        languageColor="#f1e05a"
+        logoSrc="https://avatars.githubusercontent.com/u/145537335?s=200&v=4"
+        logoWidth="150px"
+        />
+        <Card
+        href="https://github.com/EBro912/Holodex.NET"
+        title="Holodex.NET"
+        body="A C# wrapper for the Holodex API "
+        language="C#"
+        languageColor="#178600"
+        logoSrc="https://camo.githubusercontent.com/259199b315aaf21baf8665a6613a2c0ffb404ad9fbf3f8441e8d0100a1a71937/68747470733a2f2f692e696d6775722e636f6d2f69527967754c672e706e67"
+        logoWidth="150px"
+        />
+
+      </ul>
+    </section>
+  </main>
+  
+  <SocialNavbar />
+
+  <style>
+    main {
+      margin: auto;
+      padding: 1rem;
+      max-width: 1200px;
+      color: white;
+      font-size: 20px;
+      line-height: 1.6;
+    }
+    .link-card-grid, .contribution-card-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(24ch, 1fr));
+      gap: 2rem;
+      padding: 0;
+    }
+    .contribution-card-grid {
+      grid-template-columns: 1fr;  /* Each card takes up one row */
+    }
+    .contributions-section {
+      margin-top: 2rem;
+    }
+    .contributions-section h2 {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    @media (max-width: 1020px) {
+      .link-card-grid, .contribution-card-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</Layout>