Added about page

src/Portfolio.Web/Components/Pages/AboutPage.razor

@@ -0,0 +1,61 @@
+@page "/about"
+
+@using Portfolio.Shared.Models
+@using Portfolio.Shared.Services
+@using Portfolio.Web.Components.Components
+
+<PageTitle>Über mich</PageTitle>
+
+<section class="home-section" id="about">
+    <div>
+        <h2 class="title">Über mich</h2>
+        @foreach (var paragraph in _about.AboutMe.Split("\n\n")) {
+            <p>@paragraph</p>
+        }
+    </div>
+    <div>
+        <h2 class="title">Zukünftige Projekte</h2>
+        @foreach (var paragraph in _about.Future.Split("\n\n")) {
+            <p>@paragraph</p>
+        }
+    </div>
+</section>
+
+<section class="home-section">
+    <h2 class="title">Programmiererfahrung</h2>
+    <div class="timeline">
+        @foreach (var (index, entry) in _experience.Index()) {
+            <TimestampView Entry="entry" Index="index" />
+        }
+    </div>
+</section>
+
+<section class="home-section">
+    <h2 class="title">Karriere</h2>
+    <div class="timeline">
+        @foreach (var (index, entry) in _carrier.Index()) {
+            <TimestampView Entry="entry" Index="index" />
+        }
+    </div>
+</section>
+
+@inherits CancellableComponent
+@inject IAboutRepository AboutRepository
+@inject ITimelineRepository TimelineRepository
+
+@code {
+
+    private IEnumerable<TimelineEntry> _experience = [];
+    private IEnumerable<TimelineEntry> _carrier = [];
+    private About _about = new() {
+        AboutMe = string.Empty,
+        Future = string.Empty
+    };
+
+    protected override async Task OnInitializedAsync() {
+        _about = await AboutRepository.GetAbout(TokenSource.Token);
+        _experience = await TimelineRepository.GetTimeline(TimelineEntryType.Experience, TokenSource.Token);
+        _carrier = await TimelineRepository.GetTimeline(TimelineEntryType.Carrier, TokenSource.Token);
+    }
+
+}

src/Portfolio.Web/Components/Pages/AboutPage.razor.css

@@ -0,0 +1,37 @@
+#about {
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.title {
+    margin-block: 5rem 2rem;
+}
+
+.timeline ::deep .timestamp:last-of-type {
+    --show-bar: none;
+}
+
+.timeline {
+    display: flex;
+    margin-top: 30px;
+}
+
+@media screen and (max-width: 1200px) {
+    #about {
+        grid-template-columns: unset;
+        grid-template-rows: repeat(2, max-content);
+    }
+
+    .timeline {
+        flex-direction: column-reverse;
+    }
+
+    .timeline ::deep .timestamp:last-of-type {
+        --show-bar: block;
+    }
+
+    .timeline ::deep .timestamp:first-of-type {
+        --show-bar: none;
+    }
+}