From 4ed0a812ce6d73a61632e03fb1a100dad97eb6a0 Mon Sep 17 00:00:00 2001
From: quentin <quentin.leblanc@hesge.ch>
Date: Tue, 19 Aug 2025 15:59:31 +0200
Subject: [PATCH] Began stylysing Project Cards

---
 app/app/app.css                             |  7 +++++
 app/app/experience-card/experience-card.css | 33 +++++++++++++++++++++
 app/app/experience-card/experience-card.tsx | 21 ++++++++-----
 3 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/app/app/app.css b/app/app/app.css
index 1a49758..93f3551 100644
--- a/app/app/app.css
+++ b/app/app/app.css
@@ -38,6 +38,13 @@
   background: var(--background-color);
 }
 
+body {
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
diff --git a/app/app/experience-card/experience-card.css b/app/app/experience-card/experience-card.css
index e69de29..be2778a 100644
--- a/app/app/experience-card/experience-card.css
+++ b/app/app/experience-card/experience-card.css
@@ -0,0 +1,33 @@
+.experience-card {
+    width: 300px;
+    height: 450px;
+    border: 1px solid white;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    padding: 0 10px 0 10px;
+
+}
+
+.experience-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.experience-title h2 {
+    text-align: start;
+    font-size: 1em;
+}
+
+.experience-date { }
+
+.experience-info {}
+
+.experience-longname {}
+
+.experience-location {}
+
+.experience-description {}
\ No newline at end of file
diff --git a/app/app/experience-card/experience-card.tsx b/app/app/experience-card/experience-card.tsx
index 9f0ed15..1057ddc 100644
--- a/app/app/experience-card/experience-card.tsx
+++ b/app/app/experience-card/experience-card.tsx
@@ -9,17 +9,22 @@ export default function ExperienceCard({props}: {props: Experience}) {
   return (
     <div className="experience-card">
       <div className="experience-title">
-        <h2>{props.name}</h2>
-        <div className={"experience-date"}>
-          <h3>{props.from}</h3>
-          {props.to && <h3>{props.to}</h3>}
-        </div>
-      </div>
-      <div className="experience-info">
-        {props.longName && <div className={"experience-logname"}>{props.longName}</div>}
+        <h2>Project</h2>
         <div className={"experience-location"}>{props.location}</div>
+      </div>
+      <hr/>
+      <h2>{props.name}</h2>
+      {props.longName && <div className={"experience-longname"}>{props.longName}</div>}
+      <hr/>
+      <div className="experience-info">
+
       </div>
       <div className={"experience-description"}>{props.description}</div>
+      <hr/>
+      <div className={"experience-date"}>
+        <h3>{props.from}</h3>
+        {props.to && <h3>{props.to}</h3>}
+      </div>
     </div>
   )
 }
\ No newline at end of file