From ed12465263a9047ac79dbb5b88119b03034e8451 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Wed, 8 Apr 2026 22:13:27 +0200
Subject: [PATCH] tried some styling for projects page

---
 src/routes/projects/+page.svelte | 60 +++++++++++++++++++++++++++++---
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index e78ac40..3591834 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -64,9 +64,14 @@
 {/snippet}
 
 {#snippet projectContent(p: Project)}
-        <p>{p.title}</p>
-        <p>{p.subtitle}</p>
-        <p>{p.date}</p>
+    <div class="project-content-container">
+        <img class="project-banner" src={p.banner} alt={p.bannerAlt}>
+        <div class="project-text-container">
+            <p class="project-title">{p.title}</p>
+            <p class="project-subtitle">{p.subtitle}</p>
+            <p class="project-date">{p.date}</p>
+        </div>
+    </div>
 {/snippet}
 
 <!-- {#snippet projectSummary({
@@ -105,18 +110,65 @@
         display: grid;
         /* grid-template-columns: 1fr 1fr; */
         grid-template-columns: 1fr;
+        gap: 4px;
     }
 
     .project-wrapper {
         display: flex;
         flex-direction: column;
+        margin: 0;
+        /* border-radius: var(--border-radius); */
         /* gap: 4px; */
+        overflow: hidden;
+        text-decoration: none;
     }
 
-    .project-wrapper p {
+    .project-content-container {
+        position: relative;
+    }
+
+    .project-banner {
+        width: 100%;
+        object-fit: cover;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        filter: brightness(60%) saturate(40%) blur(4px);
+        transition: filter var(--duration-animation) var(--anim-curve);
+    }
+
+    .project-wrapper:hover .project-banner {
+        filter: brightness(60%) saturate(100%) blur(0);
+    }
+
+    .project-text-container {
+        padding: 8px 16px;
+    }
+
+    .project-text-container p {
+        text-shadow: 0 0 6px black;
         margin: 0;
     }
 
+    .project-title {
+        font-family: var(--font-mono);
+        font-size: 1.4rem;
+        font-weight: 700;
+    }
+
+    .project-subtitle {
+        
+    }
+
+    .project-date {
+        font-style: italic;
+        font-weight: 600;
+    }
+
+
     /* .project-subtitle {
         font-family: var(--font-mono);
         font-size: 1.0rem;