Added technology page

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

@@ -3,11 +3,13 @@
 @using Portfolio.Shared.Services
 @using Portfolio.Web.Components.Components
 
+<PageTitle>Projekte</PageTitle>
+
 <h2>Alle Projekte</h2>
 
 <div class="project-container">
-    @foreach (var project in _projects) {
-        <ProjectView Project="project" />
+    @foreach (var (index, project) in _projects.Index()) {
+        <ProjectView Project="project" Index="index" />
     }
 </div>
 

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

@@ -4,10 +4,3 @@
     gap: 100px;
     justify-content: space-evenly;
 }
-
-h2 {
-    margin-top: 3rem;
-    margin-bottom: 5rem;
-    font-size: 2rem;
-    font-weight: 600;
-}

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

@@ -0,0 +1,100 @@
+@page "/technologies"
+@rendermode InteractiveServer
+
+@using System.Collections.Immutable
+@using Portfolio.Shared.Models
+@using Portfolio.Shared.Services
+@using Portfolio.Web.Components.Components
+
+<PageTitle>Technologien</PageTitle>
+
+<section class="home-section" id="tech-projects">
+    <div class="artwork">
+        <div class="circle big-circle"></div>
+        <div class="circle small-circle"></div>
+        <div class="circle image"></div>
+    </div>
+    <h2>Technologien in Projekten</h2>
+    <div class="chart">
+        <div class="chart-container"><canvas id="chart"></canvas></div>
+    </div>
+</section>
+
+<section class="home-section" id="languages">
+    <h2>Programmiersprachen</h2>
+    <div class="technologies-wrapper">
+        @foreach (var tech in _technologies.Where(t => t.Type == TechnologyType.Language)) {
+            <TechnologyView Technology="tech" />
+        }
+    </div>
+</section>
+
+<section class="home-section" id="frameworks">
+    <h2>Frameworks</h2>
+    <div class="technologies-wrapper">
+        @foreach (var tech in _technologies.Where(t => t.Type == TechnologyType.Framework)) {
+            <TechnologyView Technology="tech" />
+        }
+    </div>
+</section>
+
+<section class="home-section" id="additional">
+    <h2>Zusätzliche Fähigkeiten</h2>
+    <div id="skills-wrapper">
+        @foreach (var skill in _technologies.Where(t => t.Type == TechnologyType.Additional)) {
+            <div class="skill">
+                <div class="dot"></div>
+                <h3>@skill.Name</h3>
+            </div>
+        }
+    </div>
+</section>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+<script>
+    function displayChart(labels, data) {
+        if (Chart === undefined) return;
+        
+        const element = document.querySelector('#chart');
+        Chart.defaults.color = "#FFFFFF";
+        new Chart(element, {
+            type: "doughnut",
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: "Projekte",
+                    data: data
+                }]
+            }
+        });
+    }
+</script>
+
+@inherits CancellableComponent
+@inject ITechnologyRepository TechnologyRepository
+@inject IProjectRepository ProjectRepository
+@inject IJSRuntime Runtime
+
+@code {
+
+    private IEnumerable<Technology> _technologies = [];
+
+    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));
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+#tech-projects {
+    margin-top: 50px;
+    position: relative;
+
+    .chart {
+        display: flex;
+        margin-top: 30px;
+
+        .chart-container {
+            width: 500px;
+            height: 500px;
+        }
+    }
+
+    .artwork {
+        top: 40px;
+    }
+}
+
+.home-section h2 {
+    margin-block: 5rem 2rem;
+}
+
+#additional {
+    #skills-wrapper {
+        display: flex;
+        justify-content: space-evenly;
+        gap: 20px;
+        margin-top: 30px;
+        flex-wrap: wrap;
+
+        .skill {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+
+            .dot {
+                width: 15px;
+                height: 15px;
+                background: var(--gradient);
+                box-shadow: 0 3px 10px 1px var(--primary-muted);
+                border-radius: 50%;
+            }
+
+            h3 {
+                font-weight: normal;
+                margin: 0;
+                font-size: 20px;
+            }
+        }
+    }
+}