New retro design for most of the site

2 files changed, 43 insertions, 16 deletions

diff --git a/src/components/PortfolioProject.astro b/src/components/PortfolioProject.astro
index b3483e9..c583325 100644
--- a/src/components/PortfolioProject.astro
+++ b/src/components/PortfolioProject.astro
@@ -58,20 +58,46 @@ const { title, summary, tags, detailsLink, githubLink, onlineLink } =
         justify-content: start;
         gap: 0.75rem;
 
-        padding: 1.5rem 1rem;
-        border-radius: 0.5rem;
+        padding: 1.5rem;
+        border-radius: 10px;
 
-        background-color: white;
-        border: 1px solid $accent;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        background-color: #fcfcfc;
+        border: 1px solid #ccd6e0;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff;
+
+        h3 {
+            color: $accent;
+            text-shadow: 1px 1px 0 #fff;
+            margin-bottom: 0.25rem;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 0.25rem;
+        }
     }
 
     a {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
-        color: var(--text);
+        color: white;
         text-decoration: none;
+        background: $accent;
+        padding: 0.4rem 0.8rem;
+        border-radius: 6px;
+        font-size: 0.9rem;
+        font-weight: bold;
+        border: 1px solid $accentDark;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
+
+        &:hover {
+            filter: brightness(1.1);
+            transform: translateY(-1px);
+        }
+
+        &:active {
+            box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
+            transform: translateY(0);
+        }
     }
 
     div *:not(:last-child) {
diff --git a/src/components/TechnologyBadge.astro b/src/components/TechnologyBadge.astro
index 204bef6..ad32c6e 100644
--- a/src/components/TechnologyBadge.astro
+++ b/src/components/TechnologyBadge.astro
@@ -112,20 +112,24 @@ const tech = technologies[code] as Technology;
 
 <style define:vars={{ colour: tech.colour }}>
   span {
-    /*display: inline-block;*/
     background-color: var(--colour);
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.15) 100%);
     font-weight: bold;
     text-transform: uppercase;
-    border-radius: 0.5em;
+    border-radius: 20px;
     padding: 0.5em 1em;
+    border: 1px solid rgba(0,0,0,0.2);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2);
 
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
+    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
   }
 
   .text-dark {
     color: #000;
+    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
   }
 
   .text-light {
@@ -133,16 +137,13 @@ const tech = technologies[code] as Technology;
   }
 
   .pill-small {
-    padding: 0.35em 0.5em;
-    border-radius: 0.25em;
-
-    font-size: 0.75em;
+    padding: 2px 8px;
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
   }
 
   .pill-large {
-    padding: 0.35 0.75em;
-    border-radius: 0.5em;
-
-    font-size: 0.75em;
+    padding: 4px 12px;
+    font-size: 0.85rem;
   }
 </style>