Began stylysing Project Cards

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;

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 {}

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>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>
-      <div className="experience-info">
-        {props.longName && <div className={"experience-logname"}>{props.longName}</div>}
-        <div className={"experience-location"}>{props.location}</div>
-      </div>
-      <div className={"experience-description"}>{props.description}</div>
-    </div>
   )
 }