From c3f19db172c7bd503b97492ba83cb55aaeac8ad2 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Tue, 23 Jan 2024 13:52:24 +0000
Subject: Added styling to projects (cards)

---
 src/components/projects.json | 10 ++++++++++
 src/layouts/Page.astro       |  1 +
 src/pages/projects.astro     | 30 +++++++++++++++++++++++++++++-
 3 files changed, 40 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/projects.json b/src/components/projects.json
index 95ddaab..1639297 100644
--- a/src/components/projects.json
+++ b/src/components/projects.json
@@ -18,5 +18,15 @@
         "url": "https://github.com/Alee14/DLAP"
       }
     ]
+  },
+  {
+    "name": "Snug Cup",
+    "description": "Snug Cup was a school project that I made with my classmates back in 2021.",
+    "links": [
+      {
+        "name": "Website",
+        "url": "https://snug-cup.alee14.me"
+      }
+    ]
   }
 ]
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index b506628..91ef798 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -19,6 +19,7 @@ const { title, description } = Astro.props;
         margin: 0;
         padding: 0;
         text-align: center;
+        padding-bottom: 1em;
     }
 
     .header-text {
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index b381bf3..b6da87a 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -6,7 +6,7 @@ import projects from "../components/projects.json";
     {
         projects.map((project) => {
         return (
-                <div class="projects">
+                <div class="cards">
                     <h1>{project.name}</h1>
                     <p>{project.description}</p>
                     {project.links.map((link) => {
@@ -19,3 +19,31 @@ import projects from "../components/projects.json";
     })
     }
 </Page>
+<style>
+    .cards {
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+        background-color: #3B513B;
+        padding: 1.2em;
+        border-radius: 20px;
+        margin: 1em;
+    }
+
+    .cards h1 {
+        padding: 0;
+        margin: 0;
+    }
+
+    .cards p {
+        padding: 0;
+        margin: 0;
+    }
+
+    .cards a {
+        text-align: right;
+        display: inline-block;
+
+    }
+
+</style>
\ No newline at end of file
-- 
cgit v1.2.3