Added navigation and base layout

2025-01-21 15:43:49 +01:00
parent 5b16cda8ea
commit a2cab3c84c
15 changed files with 121 additions and 319 deletions
--- a/src/Portfolio.Web/Components/App.razor
+++ b/src/Portfolio.Web/Components/App.razor
@@ -5,12 +5,15 @@
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="/"/>
-    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]"/>
    <link rel="stylesheet" href="@Assets["app.css"]"/>
    <link rel="stylesheet" href="@Assets["Portfolio.Web.styles.css"]"/>
    <ImportMap/>
-    <link rel="icon" type="image/png" href="favicon.png"/>
+    <link rel="icon" href="favicon.ico"/>
    <HeadOutlet/>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
 </head>

 <body>
--- a/src/Portfolio.Web/Components/Layout/MainLayout.razor
+++ b/src/Portfolio.Web/Components/Layout/MainLayout.razor
@@ -1,23 +1,11 @@
@inherits LayoutComponentBase

-<div class="page">
-    <div class="sidebar">
-        <NavMenu/>
-    </div>
-
 <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
+    <nav class="nav-box">
+        <NavMenu />
+    </nav>

-        <article class="content px-4">
+    <article class="content">
        @Body
    </article>
 </main>
-</div>
-
-<div id="blazor-error-ui" data-nosnippet>
-    An unhandled error has occurred.
-    <a href="." class="reload">Reload</a>
-    <span class="dismiss">🗙</span>
-</div>
--- a/src/Portfolio.Web/Components/Layout/MainLayout.razor.css
+++ b/src/Portfolio.Web/Components/Layout/MainLayout.razor.css
@@ -1,98 +1,9 @@
-.page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
 main {
-    flex: 1;
+    background-color: var(--background);
+    min-height: 100%;
 }

-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
-    }
-}
-
-#blazor-error-ui {
-    color-scheme: light only;
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
+.nav-box {
    width: 100%;
-    z-index: 1000;
-}
-
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
+    position: sticky;
 }
--- a/src/Portfolio.Web/Components/Layout/NavMenu.razor
+++ b/src/Portfolio.Web/Components/Layout/NavMenu.razor
@@ -1,29 +1,25 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">Portfolio.Web</a>
-    </div>
+<div class="navigation">
+    <a href="">Leon Hoppe</a>
+    
+    <div class="links">
+        <NavLink class="nav-link" Match="NavLinkMatch.All" href="">Home</NavLink>
+        <NavLink class="nav-link" Match="NavLinkMatch.All" href="projects">Projekte</NavLink>
+        <NavLink class="nav-link" Match="NavLinkMatch.All" href="technologies">Technologien</NavLink>
+        <NavLink class="nav-link" Match="NavLinkMatch.All" href="about">Über mich</NavLink>
+        <NavLink class="nav-link" Match="NavLinkMatch.All" href="contact">Kontakt</NavLink>
    </div>
    
-<input type="checkbox" title="Navigation menu" class="navbar-toggler"/>
+    <div class="socials">
+        <a href="https://www.instagram.com/leonh.23/">
+            <img src="/socials/instagram.png" alt="Instagram">
+        </a>
        
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="nav flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
+        <a href="https://git.leon-hoppe.de/leon.hoppe/">
+            <img src="/socials/gitlab.png" alt="GitLab">
+        </a>
        
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
+        <a href="mailto://leon@ladenbau-hoppe.de">
+            <img src="/socials/mail.png" alt="Mail">
+        </a>
    </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
-            </NavLink>
-        </div>
-    </nav>
 </div>
--- a/src/Portfolio.Web/Components/Layout/NavMenu.razor.css
+++ b/src/Portfolio.Web/Components/Layout/NavMenu.razor.css
@@ -1,105 +1,52 @@
-.navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
-}
-
-.top-row {
-    min-height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep .nav-link {
-        color: #d7d7d7;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        height: 3rem;
+.navigation {
    display: flex;
+    height: 50px;
+    justify-content: space-between;
    align-items: center;
-        line-height: 3rem;
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border-color);
+    padding-inline: 0.5rem;
+}
+
+.links, .socials {
+    display: flex;
+    gap: 1rem;
+}
+
+.navigation > a {
+    text-decoration: none;
+    font-size: 1.25rem;
+}
+
+.socials a {
+    height: 32px;
+}
+
+.links ::deep a {
+    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;
+    }
 }

-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
+.links ::deep a.active::before {
+    visibility: visible;
+    transform: scaleX(1);
 }

-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-.nav-scrollable {
-    display: none;
-}
-
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
+.links ::deep a:hover::before {
+    visibility: visible;
+    transform: scaleX(1);
 }
--- a/src/Portfolio.Web/Components/Pages/Counter.razor
+++ b/src/Portfolio.Web/Components/Pages/Counter.razor
@@ -1,19 +0,0 @@
-@page "/counter"
-@rendermode InteractiveServer
-
-<PageTitle>Counter</PageTitle>
-
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount() {
-        currentCount++;
-    }
-
-}
--- a/src/Portfolio.Web/Components/Pages/Home.razor
+++ b/src/Portfolio.Web/Components/Pages/Home.razor
@@ -1,6 +1,6 @@
@page "/"

-<PageTitle>Home</PageTitle>
+<PageTitle>Portfolio von Leon Hoppe</PageTitle>

 <h1>Hello, world!</h1>

--- a/src/Portfolio.Web/Components/Pages/Weather.razor
+++ b/src/Portfolio.Web/Components/Pages/Weather.razor
@@ -1,61 +0,0 @@
-@page "/weather"
-@attribute [StreamRendering]
-
-<PageTitle>Weather</PageTitle>
-
-<h1>Weather</h1>
-
-<p>This component demonstrates showing data.</p>
-
-@if (forecasts == null) {
-    <p>
-        <em>Loading...</em>
-    </p>
-}
-else {
-    <table class="table">
-        <thead>
-        <tr>
-            <th>Date</th>
-            <th aria-label="Temperature in Celsius">Temp. (C)</th>
-            <th aria-label="Temperature in Farenheit">Temp. (F)</th>
-            <th>Summary</th>
-        </tr>
-        </thead>
-        <tbody>
-        @foreach (var forecast in forecasts) {
-            <tr>
-                <td>@forecast.Date.ToShortDateString()</td>
-                <td>@forecast.TemperatureC</td>
-                <td>@forecast.TemperatureF</td>
-                <td>@forecast.Summary</td>
-            </tr>
-        }
-        </tbody>
-    </table>
-}
-
-@code {
-    private WeatherForecast[]? forecasts;
-
-    protected override async Task OnInitializedAsync() {
-        // Simulate asynchronous loading to demonstrate streaming rendering
-        await Task.Delay(500);
-
-        var startDate = DateOnly.FromDateTime(DateTime.Now);
-        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
-        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast {
-            Date = startDate.AddDays(index),
-            TemperatureC = Random.Shared.Next(-20, 55),
-            Summary = summaries[Random.Shared.Next(summaries.Length)]
-        }).ToArray();
-    }
-
-    private class WeatherForecast {
-        public DateOnly Date { get; set; }
-        public int TemperatureC { get; set; }
-        public string? Summary { get; set; }
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
-    }
-
-}
--- a/src/Portfolio.Web/Components/Routes.razor
+++ b/src/Portfolio.Web/Components/Routes.razor
@@ -1,6 +1,5 @@
 <Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)"/>
-        <FocusOnNavigate RouteData="routeData" Selector="h1"/>
    </Found>
 </Router>
--- a/src/Portfolio.Web/wwwroot/app.css
+++ b/src/Portfolio.Web/wwwroot/app.css
@@ -0,0 +1,32 @@
+:root {
+    --primary: #8e5bd2;
+    --secondary: #11a8bd;
+
+    --gradient: linear-gradient(90deg, var(--primary), var(--secondary));
+    --gradient-angled: linear-gradient(135deg, var(--primary), var(--secondary));
+    --gradient-straight: linear-gradient(var(--primary), var(--secondary));
+
+    --padding: 12.5vw;
+    --padding-small: 5vw;
+    --mobile-width: 750px;
+
+    --desc-color: #7c8393;
+    --border-color: #2d2d2d;
+
+    --text: #ffffff;
+    --background: #0f1724;
+}
+
+* {
+    box-sizing: border-box;
+    color: var(--text);
+    font-family: "Ubuntu", serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
--- a/src/Portfolio.Web/wwwroot/favicon.ico
+++ b/src/Portfolio.Web/wwwroot/favicon.ico
--- a/src/Portfolio.Web/wwwroot/favicon.png
+++ b/src/Portfolio.Web/wwwroot/favicon.png
--- a/src/Portfolio.Web/wwwroot/socials/gitlab.png
+++ b/src/Portfolio.Web/wwwroot/socials/gitlab.png
--- a/src/Portfolio.Web/wwwroot/socials/instagram.png
+++ b/src/Portfolio.Web/wwwroot/socials/instagram.png
--- a/src/Portfolio.Web/wwwroot/socials/mail.png
+++ b/src/Portfolio.Web/wwwroot/socials/mail.png