Added home page and made pages statically served

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