added experience page

2026-05-15 14:19:45 +02:00
parent ec2f7704e7
commit 72137466dc
4 changed files with 218 additions and 2 deletions
--- a/src/components/Experience/ExperienceBox.astro
+++ b/src/components/Experience/ExperienceBox.astro
@@ -0,0 +1,135 @@
+---
+const { experience } = Astro.props;
+
+const color: string = experience.color
+---
+
+
+
+<div class="container">
+    <div class="accent"></div>
+
+    <div class="content">
+        <div class="titleRow">
+            <div class="titleContainer">
+                <h3 class="main-title">{experience.name}</h3>
+                <p class="sub-title">{experience.role}</p>
+
+                <p class="description">
+                    {experience.description}
+                </p>
+            </div>
+
+            <div class="dateContainer">
+                <p>
+                    {experience.start.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}
+                    -
+                    {experience.end
+                        ? experience.end.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
+                        : 'Nu'}
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style define:vars={{color}}>
+    .container {
+        font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+        position: relative;
+        display: flex;
+        align-items: stretch;
+        gap: 1rem;
+        min-height: 120px;
+        padding: 1rem 1rem 1rem 0.9rem;
+        background: rgba(255,255,255,0.05);
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 14px;
+        box-shadow: 0 8px 20px rgba(0,0,0,0.18);
+        color: white;
+        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+    }
+
+    .container:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 14px 28px rgba(0,0,0,0.24);
+        border-color: rgba(255,255,255,0.14);
+    }
+
+    .accent {
+        width: 4px;
+        border-radius: 999px;
+        background: var(--color);
+        flex-shrink: 0;
+    }
+
+    .content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+    }
+
+    .titleRow {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+
+    .titleContainer {
+        min-width: 0;
+    }
+
+    .main-title {
+        font-size: 1.1rem;
+        line-height: 1.2;
+        margin: 0 0 0.3rem 0;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        font-size: 0.92rem;
+        line-height: 1.45;
+        margin: 0;
+        opacity: 0.8;
+    }
+
+    .dateContainer {
+        flex-shrink: 0;
+    }
+
+    .dateContainer p {
+        font-size: 0.8rem;
+        margin: 0;
+        white-space: nowrap;
+        opacity: 0.7;
+    }
+
+    @media (max-width: 768px) {
+        .container {
+            min-height: 100px;
+            padding: 0.85rem 0.85rem 0.85rem 0.75rem;
+            gap: 0.8rem;
+        }
+
+        .titleRow {
+            flex-direction: column;
+            gap: 0.55rem;
+        }
+
+        .main-title {
+            font-size: 1rem;
+        }
+
+        .sub-title {
+            font-size: 0.84rem;
+        }
+
+        .dateContainer p {
+            font-size: 0.74rem;
+            white-space: normal;
+        }
+    }
+</style>