Added about page

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

src/Portfolio.Api/Program.cs

@@ -58,6 +58,22 @@ builder.Services.AddHopFrame(options => {
             table.Property(p => p.SourceCode)
                 .List(false);
         });
+
+        context.Table<About>(table => {
+            table.Property(a => a.AboutMe)
+                .List(false)
+                .IsTextArea(true);
+
+            table.Property(a => a.Future)
+                .List(false)
+                .IsTextArea(true);
+        });
+
+        context.Table<TimelineEntry>(table => {
+            table.Property(t => t.Description)
+                .IsTextArea(true)
+                .List(false);
+        });
     });
 });
 builder.Services.AddRazorComponents()

src/Portfolio.Shared/Models/TimelineEntry.cs

@@ -8,7 +8,7 @@ public sealed class TimelineEntry {
     [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
     public int Id { get; init; }
 
-    public DateOnly Date { get; init; }
+    public DateOnly Date { get; init; } = DateOnly.FromDateTime(DateTime.Now);
 
     [MaxLength(1000)]
     public required string Description { get; set; }

src/Portfolio.Web/Components/Components/TimestampView.razor

@@ -0,0 +1,15 @@
+@using Portfolio.Shared.Models
+<div class="timestamp" style="@("--index: " + Index)">
+    <h2>@Entry.Date.Year</h2>
+    <span>@Entry.Description</span>
+</div>
+
+@code {
+
+    [Parameter]
+    public required TimelineEntry Entry { get; set; }
+
+    [Parameter]
+    public required int Index { get; set; }
+    
+}

src/Portfolio.Web/Components/Components/TimestampView.razor.css

@@ -0,0 +1,92 @@
+.timestamp {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+    position: relative;
+    opacity: 0;
+    animation: fade-in 200ms forwards calc(var(--index) * 200ms) ease-out;
+
+    h2 {
+        font-size: 20px;
+        margin: 0;
+        font-weight: normal;
+    }
+
+    span {
+        box-sizing: border-box;
+        color: var(--desc-color);
+        font-size: 14px;
+        padding-right: 10px;
+    }
+
+    &:after {
+        content: '';
+        width: 15px;
+        height: 15px;
+        background: var(--gradient-angled);
+        border-radius: 50%;
+        box-shadow: 0 3px 10px 1px var(--primary-muted);
+
+        position: absolute;
+        top: 45px;
+    }
+
+    &:before {
+        content: '';
+        width: 0;
+        height: 3px;
+        background-color: #FFF;
+        top: 51px;
+        position: absolute;
+        display: var(--show-bar, block);
+        animation: timestamp-in 500ms forwards calc((var(--index) + 1) * 200ms) ease-in-out;
+    }
+}
+
+@media screen and (max-width: 1200px) {
+    .timestamp {
+        gap: 15px;
+        padding-left: 30px;
+        box-sizing: border-box;
+        animation: none !important;
+        opacity: 1;
+
+        span {
+            margin-bottom: 50px;
+        }
+
+        &:after {
+            top: 5px;
+            left: -5px;
+        }
+
+        &:before {
+            top: 5px;
+            left: 1px;
+            width: 3px;
+            height: 100%;
+            animation: none !important;
+        }
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes timestamp-in {
+    from {
+        width: 0;
+    }
+
+    to {
+        width: 100%;
+    }
+}

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;
+    }
+}