Added home page and made pages statically served

2025-01-25 15:29:24 +01:00
parent aaa828dfd3
commit 5614b594f4
14 changed files with 292 additions and 45 deletions
--- a/src/Portfolio.Web/Components/App.razor
+++ b/src/Portfolio.Web/Components/App.razor
@@ -22,7 +22,6 @@

 <body>
 <Routes/>
-<script src="_framework/blazor.web.js"></script>
 </body>

 </html>
--- a/src/Portfolio.Web/Components/Components/TechnologyView.razor
+++ b/src/Portfolio.Web/Components/Components/TechnologyView.razor
@@ -1,22 +1,21 @@
-@rendermode InteractiveServer
-@using Portfolio.Shared.Models
+@using Portfolio.Shared.Models

 <div class="technology">
    <div class="tech-header">
        <h2 class="tech-name">@Technology.Name</h2>
        <span class="tech-level">@GetTechnologyLevelName()</span>
    </div>
-    <div class="@("tech-progress level-" + (int)Technology.Level)" @ref="_element"></div>
+    <div class="@("tech-progress level-" + (int)Technology.Level)"></div>
 </div>

-@inject IJSRuntime Runtime
+<script>
+    observeElements("tech-progress");
+</script>

@code {
    
    [Parameter]
    public required Technology Technology { get; set; }
-
-    private ElementReference _element;
    
    public string GetTechnologyLevelName() {
        switch (Technology.Level) {
@@ -31,10 +30,5 @@
                return "Normal";
        }
    }
-    
-    protected override async Task OnAfterRenderAsync(bool firstRender) {
-        if (!firstRender) return;
-        await Runtime.InvokeVoidAsync("observeElement", _element);
-    }

 }
--- a/src/Portfolio.Web/Components/Components/TechnologyView.razor.css
+++ b/src/Portfolio.Web/Components/Components/TechnologyView.razor.css
@@ -26,15 +26,15 @@
        transition: width 200ms ease-out;
        width: 0;

-        &.level-1 {
+        &.level-0 {
            --width: 33%;
        }

-        &.level-2 {
+        &.level-1 {
            --width: 66%;
        }

-        &.level-3 {
+        &.level-2 {
            --width: 100%;
        }

--- a/src/Portfolio.Web/Components/Components/TimestampView.razor
+++ b/src/Portfolio.Web/Components/Components/TimestampView.razor
@@ -1,9 +1,14 @@
@using Portfolio.Shared.Models
+
 <div class="timestamp" style="@("--index: " + Index)">
    <h2>@Entry.Date.Year</h2>
    <span>@Entry.Description</span>
 </div>

+<script defer>
+    observeElements("timestamp");
+</script>
+
@code {

    [Parameter]
--- a/src/Portfolio.Web/Components/Components/TimestampView.razor.css
+++ b/src/Portfolio.Web/Components/Components/TimestampView.razor.css
@@ -5,7 +5,6 @@
    gap: 50px;
    position: relative;
    opacity: 0;
-    animation: fade-in 200ms forwards calc(var(--index) * 200ms) ease-out;

    h2 {
        font-size: 20px;
@@ -40,11 +39,18 @@
        top: 51px;
        position: absolute;
        display: var(--show-bar, block);
+    }
+}
+
+.timestamp.in-view {
+    animation: fade-in 200ms forwards calc(var(--index) * 200ms) ease-out;
+    
+    &:before {
        animation: timestamp-in 500ms forwards calc((var(--index) + 1) * 200ms) ease-in-out;
    }
 }

-@media screen and (max-width: 1200px) {
+@media screen and (max-width: var(--mobile-width)) {
    .timestamp {
        gap: 15px;
        padding-left: 30px;
--- a/src/Portfolio.Web/Components/Pages/AboutPage.razor.css
+++ b/src/Portfolio.Web/Components/Pages/AboutPage.razor.css
@@ -17,7 +17,7 @@
    margin-top: 30px;
 }

-@media screen and (max-width: 1200px) {
+@media screen and (max-width: var(--mobile-width)) {
    #about {
        grid-template-columns: unset;
        grid-template-rows: repeat(2, max-content);
--- a/src/Portfolio.Web/Components/Pages/Home.razor
+++ b/src/Portfolio.Web/Components/Pages/Home.razor
@@ -1,5 +1,112 @@
@page "/"
+@using Portfolio.Shared.Models
+@using Portfolio.Shared.Services
+@using Portfolio.Web.Components.Components

-<PageTitle>Portfolio von Leon Hoppe</PageTitle>
+<section id="hero">
+    <div class="artwork">
+        <div class="circle big-circle"></div>
+        <div class="circle small-circle"></div>
+        <div class="circle image"></div>
+    </div>
+    <h2>
+        <span id="welcome">Hallo, ich bin Leon Hoppe,</span><br>
+        <span id="jobs"></span>
+    </h2>
+    <p>
+        Auf dieser Seite erfahren Sie, an welchen Projekten ich bereits gearbeitet habe,<br>
+        was meine Programmierkenntnisse sind und welche Pläne ich für die Zukunft habe.
+    </p>
+    <a href="#projects" id="main-action">Mehr erfahren</a>
+</section>

-<h1>Hello, world!</h1>
+<section id="projects">
+    <h2 class="title">Projekte</h2>
+    <a href="/projects">alle ansehen</a>
+    <div id="projects-wrapper">
+        @foreach (var (index, project) in _projects.Index()) {
+            <ProjectView Project="project" Index="index" />
+        }
+    </div>
+</section>
+
+<section id="technologies">
+    <h2 class="title">Technologien</h2>
+    <a href="/technologies">mehr erfahren</a>
+    <div class="technologies-wrapper">
+        @foreach (var technology in _technologies) {
+            <TechnologyView Technology="technology" />
+        }
+    </div>
+</section>
+
+<section id="about">
+    <h2 class="title">Über mich</h2>
+    <a href="/about">mehr erfahren</a>
+    <div class="timeline">
+        @foreach (var (index, timestamp) in _timeline.Index()) {
+            <TimestampView Entry="timestamp" Index="index" />
+        }
+    </div>
+</section>
+
+<script>
+    const displayElement = document.querySelector('#jobs');
+    const jobs = {
+        current: 0,
+        all: ["Full stack developer", "C# developer", "Java developer"],
+        state: 0,
+        display: ""
+    };
+
+    setInterval(() => {
+        if (jobs.state === 0) {
+            const len = jobs.display.length;
+            jobs.display = jobs.all[jobs.current].slice(0, len + 1);
+
+            if (jobs.display.length >= jobs.all[jobs.current].length) jobs.state = 1;
+        } else if (jobs.state === 50) {
+            const len = jobs.display.length;
+            jobs.display = jobs.display.slice(0, len - 1);
+
+            if (jobs.display.length <= 1) {
+                jobs.state = 0;
+                jobs.current = (jobs.current + 1) % jobs.all.length;
+            }
+        } else {
+            jobs.state++;
+        }
+        
+        displayElement.innerText = jobs.display;
+    }, 50)
+
+</script>
+
+@inherits CancellableComponent
+
+@inject IProjectRepository ProjectRepository
+@inject ITechnologyRepository TechnologyRepository
+@inject ITimelineRepository TimelineRepository
+
+@code {
+
+    private IEnumerable<Project> _projects = [];
+    private IEnumerable<Technology> _technologies = [];
+    private IEnumerable<TimelineEntry> _timeline = [];
+
+    protected override async Task OnInitializedAsync() {
+        var projects = await ProjectRepository.GetProjects(TokenSource.Token);
+        _projects = projects.Where(p => p.Featured);
+
+        var technologies = await TechnologyRepository.GetTechnologies(TokenSource.Token);
+        _technologies = technologies.Where(t => t.Featured);
+
+        var carrierTimeline = await TimelineRepository.GetTimeline(TimelineEntryType.Carrier, TokenSource.Token);
+        var experienceTimeline = await TimelineRepository.GetTimeline(TimelineEntryType.Experience, TokenSource.Token);
+        _timeline = experienceTimeline
+            .Aggregate(carrierTimeline, (current, entry) => current.Append(entry))
+            .Where(t => t.Featured)
+            .OrderBy(t => t.Date);
+    }
+
+}
--- a/src/Portfolio.Web/Components/Pages/Home.razor.css
+++ b/src/Portfolio.Web/Components/Pages/Home.razor.css
@@ -0,0 +1,128 @@
+#hero {
+    height: 100vh;
+    box-sizing: border-box;
+
+    h2 {
+        margin-top: 20vh;
+        font-size: 45px;
+        line-height:70px;
+        position: relative;
+
+        #welcome {
+            background: var(--gradient);
+            background-clip: text;
+            color: transparent;
+        }
+
+        #jobs {
+            position: relative;
+
+            &:after {
+                content: '';
+                position: absolute;
+                left: calc(100% + 5px);
+                top: 0;
+                width: 20px;
+                height: 100%;
+                background-color: var(--text);
+                animation: blink 800ms infinite;
+            }
+        }
+    }
+
+    p {
+        font-size: 18px;
+        color: var(--desc-color);
+        position: relative;
+    }
+
+    a {
+        display: block;
+        margin-top: 40px;
+        height: 60px;
+        width: 150px;
+        background: var(--gradient);
+        border-radius: 30px;
+        font-size: 15px;
+        text-align: center;
+        line-height: 60px;
+        text-decoration: none;
+
+        box-shadow: 0 0 40px -5px var(--primary);
+    }
+}
+
+.title {
+    font-size: 35px;
+    display: inline;
+    margin-right: 10px;
+}
+
+#projects {
+    #projects-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 70px;
+        justify-content: space-evenly;
+        gap: 70px;
+    }
+}
+
+#technologies {
+    margin-top: 300px;
+    
+    .technologies-wrapper {
+        margin-top: 30px;
+    }
+}
+
+#about {
+    margin-top: 150px;
+}
+
+.timeline ::deep .timestamp:last-of-type {
+    --show-bar: none;
+}
+
+.timeline {
+    display: flex;
+    margin-top: 30px;
+}
+
+a:not(#main-action) {
+    text-decoration: none;
+    position: relative;
+
+    &:before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        background-color: var(--text);
+        visibility: hidden;
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: all 0.3s ease-in-out;
+    }
+}
+
+a:not(#main-action):hover::before {
+    visibility: visible;
+    transform: scaleX(1);
+}
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
--- a/src/Portfolio.Web/Components/Pages/TechnologiesPage.razor
+++ b/src/Portfolio.Web/Components/Pages/TechnologiesPage.razor
@@ -1,7 +1,5 @@
@page "/technologies"
-@rendermode InteractiveServer

-@using System.Collections.Immutable
@using Portfolio.Shared.Models
@using Portfolio.Shared.Services
@using Portfolio.Web.Components.Components
@@ -50,6 +48,15 @@
    </div>
 </section>

+<div style="display: none">
+    @foreach (var (label, count) in _projectTechnologies) {
+        <div>
+            <span class="chart-label-data">@label</span>
+            <span class="chart-data-all">@count</span>
+        </div>
+    }
+</div>
+
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
 <script>
    function displayChart(labels, data) {
@@ -68,33 +75,32 @@
            }
        });
    }
+
+    const labelElements = document.querySelectorAll('.chart-label-data');
+    const dataElements = document.querySelectorAll('.chart-data-all');
+    const labelEntries = [];
+    const dataEntries = [];
+    labelElements.forEach(l => labelEntries.push(l.innerHTML));
+    dataElements.forEach(d => dataEntries.push(Number(d.innerHTML)));
+    
+    displayChart(labelEntries, dataEntries);
 </script>

@inherits CancellableComponent
@inject ITechnologyRepository TechnologyRepository
@inject IProjectRepository ProjectRepository
-@inject IJSRuntime Runtime

@code {

    private IEnumerable<Technology> _technologies = [];
+    private IEnumerable<KeyValuePair<string, int>> _projectTechnologies = [];

    protected override async Task OnInitializedAsync() {
        _technologies = await TechnologyRepository.GetTechnologies(TokenSource.Token);
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender) {
-        if (firstRender) {
-            var projects = await ProjectRepository.GetProjects(TokenSource.Token);
-
-            var data = projects
-                .SelectMany(p => p.Languages)
-                .CountBy(l => l.Name)
-                .ToList();
-            
-            await Runtime.InvokeVoidAsync("displayChart",
-                data.Select(c => c.Key),
-                data.Select(c => c.Value));
-        }
+        
+        var projects = await ProjectRepository.GetProjects(TokenSource.Token);
+        _projectTechnologies = projects
+            .SelectMany(p => p.Languages)
+            .CountBy(l => l.Name);
    }
 }
--- a/src/Portfolio.Web/Program.cs
+++ b/src/Portfolio.Web/Program.cs
@@ -5,8 +5,7 @@ using Portfolio.Web.Services;
 var builder = WebApplication.CreateBuilder(args);

 // Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
+builder.Services.AddRazorComponents();

 builder.AddServiceDefaults();

@@ -33,7 +32,6 @@ app.MapDefaultEndpoints();
 app.UseAntiforgery();

 app.MapStaticAssets();
-app.MapRazorComponents<App>()
-    .AddInteractiveServerRenderMode();
+app.MapRazorComponents<App>();

 app.Run();
--- a/src/Portfolio.Web/wwwroot/app.css
+++ b/src/Portfolio.Web/wwwroot/app.css
@@ -24,6 +24,7 @@
    font-family: "Ubuntu", serif;
    font-weight: 400;
    font-style: normal;
+    scroll-behavior: smooth;
 }

 html, body {
--- a/src/Portfolio.Web/wwwroot/scroll-handler.js
+++ b/src/Portfolio.Web/wwwroot/scroll-handler.js
@@ -5,6 +5,7 @@
    });
 });

-function observeElement(element) {
-    observer?.observe(element);
+function observeElements(className) {
+    const elements = document.querySelectorAll(`.${className}`);
+    elements.forEach(e => observer.observe(e));
 }