From 5b16cda8ea92ca149cc42ae4fc16038e4c5f3e51 Mon Sep 17 00:00:00 2001 From: Leon Hoppe Date: Tue, 21 Jan 2025 14:39:30 +0100 Subject: [PATCH 1/3] Added client side repos --- src/Portfolio.Api/Program.cs | 1 - .../Components/CancellableComponent.cs | 11 ++++++++++ src/Portfolio.Web/Program.cs | 12 ++++++++++- src/Portfolio.Web/Services/AboutRepository.cs | 20 +++++++++++++++++++ .../Services/ProjectRepository.cs | 15 ++++++++++++++ .../Services/TechnologyRepository.cs | 15 ++++++++++++++ .../Services/TimelineRepository.cs | 15 ++++++++++++++ 7 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 src/Portfolio.Web/Components/CancellableComponent.cs create mode 100644 src/Portfolio.Web/Services/AboutRepository.cs create mode 100644 src/Portfolio.Web/Services/ProjectRepository.cs create mode 100644 src/Portfolio.Web/Services/TechnologyRepository.cs create mode 100644 src/Portfolio.Web/Services/TimelineRepository.cs diff --git a/src/Portfolio.Api/Program.cs b/src/Portfolio.Api/Program.cs index e093629..cdef3e7 100644 --- a/src/Portfolio.Api/Program.cs +++ b/src/Portfolio.Api/Program.cs @@ -75,7 +75,6 @@ await using (var scope = app.Services.CreateAsyncScope()) { await db.Database.EnsureCreatedAsync(); } -app.UseHttpsRedirection(); app.MapDefaultEndpoints(); app.MapControllers(); diff --git a/src/Portfolio.Web/Components/CancellableComponent.cs b/src/Portfolio.Web/Components/CancellableComponent.cs new file mode 100644 index 0000000..a2aab92 --- /dev/null +++ b/src/Portfolio.Web/Components/CancellableComponent.cs @@ -0,0 +1,11 @@ +using Microsoft.AspNetCore.Components; + +namespace Portfolio.Web.Components; + +public class CancellableComponent : ComponentBase, IDisposable { + protected CancellationTokenSource TokenSource { get; } = new(); + + public void Dispose() { + TokenSource.Dispose(); + } +} \ No newline at end of file diff --git a/src/Portfolio.Web/Program.cs b/src/Portfolio.Web/Program.cs index d82cbbf..6ab644c 100644 --- a/src/Portfolio.Web/Program.cs +++ b/src/Portfolio.Web/Program.cs @@ -1,4 +1,6 @@ +using Portfolio.Shared.Services; using Portfolio.Web.Components; +using Portfolio.Web.Services; var builder = WebApplication.CreateBuilder(args); @@ -8,6 +10,15 @@ builder.Services.AddRazorComponents() builder.AddServiceDefaults(); +builder.Services.AddScoped(); +builder.Services.AddScoped(); +builder.Services.AddScoped(); +builder.Services.AddScoped(); + +builder.Services.AddHttpClient("api", client => { + client.BaseAddress = new Uri("http://api"); +}); + var app = builder.Build(); // Configure the HTTP request pipeline. @@ -17,7 +28,6 @@ if (!app.Environment.IsDevelopment()) { app.UseHsts(); } -app.UseHttpsRedirection(); app.MapDefaultEndpoints(); app.UseAntiforgery(); diff --git a/src/Portfolio.Web/Services/AboutRepository.cs b/src/Portfolio.Web/Services/AboutRepository.cs new file mode 100644 index 0000000..e666782 --- /dev/null +++ b/src/Portfolio.Web/Services/AboutRepository.cs @@ -0,0 +1,20 @@ +using Portfolio.Shared.Models; +using Portfolio.Shared.Services; + +namespace Portfolio.Web.Services; + +internal sealed class AboutRepository(IHttpClientFactory factory) : IAboutRepository { + private About DefaultValue => new() { + AboutMe = string.Empty, + Future = string.Empty + }; + + public async Task GetAbout(CancellationToken ct) { + var client = factory.CreateClient("api"); + var response = await client.GetAsync("api/about", ct); + if (!response.IsSuccessStatusCode) return DefaultValue; + + var data = await response.Content.ReadFromJsonAsync(ct); + return data ?? DefaultValue; + } +} \ No newline at end of file diff --git a/src/Portfolio.Web/Services/ProjectRepository.cs b/src/Portfolio.Web/Services/ProjectRepository.cs new file mode 100644 index 0000000..eccefc4 --- /dev/null +++ b/src/Portfolio.Web/Services/ProjectRepository.cs @@ -0,0 +1,15 @@ +using Portfolio.Shared.Models; +using Portfolio.Shared.Services; + +namespace Portfolio.Web.Services; + +internal sealed class ProjectRepository(IHttpClientFactory factory) : IProjectRepository { + public async Task> GetProjects(CancellationToken ct) { + var client = factory.CreateClient("api"); + var response = await client.GetAsync("api/projects", ct); + if (!response.IsSuccessStatusCode) return []; + + var data = await response.Content.ReadFromJsonAsync>(ct); + return data ?? []; + } +} \ No newline at end of file diff --git a/src/Portfolio.Web/Services/TechnologyRepository.cs b/src/Portfolio.Web/Services/TechnologyRepository.cs new file mode 100644 index 0000000..d723a6d --- /dev/null +++ b/src/Portfolio.Web/Services/TechnologyRepository.cs @@ -0,0 +1,15 @@ +using Portfolio.Shared.Models; +using Portfolio.Shared.Services; + +namespace Portfolio.Web.Services; + +internal sealed class TechnologyRepository(IHttpClientFactory factory) : ITechnologyRepository { + public async Task> GetTechnologies(CancellationToken ct) { + var client = factory.CreateClient("api"); + var response = await client.GetAsync("api/technologies", ct); + if (!response.IsSuccessStatusCode) return []; + + var data = await response.Content.ReadFromJsonAsync>(ct); + return data ?? []; + } +} \ No newline at end of file diff --git a/src/Portfolio.Web/Services/TimelineRepository.cs b/src/Portfolio.Web/Services/TimelineRepository.cs new file mode 100644 index 0000000..0057e61 --- /dev/null +++ b/src/Portfolio.Web/Services/TimelineRepository.cs @@ -0,0 +1,15 @@ +using Portfolio.Shared.Models; +using Portfolio.Shared.Services; + +namespace Portfolio.Web.Services; + +internal sealed class TimelineRepository(IHttpClientFactory factory) : ITimelineRepository { + public async Task> GetTimeline(TimelineEntryType type, CancellationToken ct) { + var client = factory.CreateClient("api"); + var result = await client.GetAsync($"api/timeline/{type}", ct); + if (!result.IsSuccessStatusCode) return []; + + var data = await result.Content.ReadFromJsonAsync>(ct); + return data ?? []; + } +} \ No newline at end of file -- 2.49.1 From a2cab3c84c82e595d56ee40e1b59bbc3a873a9fa Mon Sep 17 00:00:00 2001 From: Leon Hoppe Date: Tue, 21 Jan 2025 15:43:49 +0100 Subject: [PATCH 2/3] Added navigation and base layout --- src/Portfolio.Web/Components/App.razor | 7 +- .../Components/Layout/MainLayout.razor | 28 ++-- .../Components/Layout/MainLayout.razor.css | 97 +------------ .../Components/Layout/NavMenu.razor | 50 +++---- .../Components/Layout/NavMenu.razor.css | 131 ++++++------------ .../Components/Pages/Counter.razor | 19 --- src/Portfolio.Web/Components/Pages/Home.razor | 2 +- .../Components/Pages/Weather.razor | 61 -------- src/Portfolio.Web/Components/Routes.razor | 1 - src/Portfolio.Web/wwwroot/app.css | 32 +++++ src/Portfolio.Web/wwwroot/favicon.ico | Bin 0 -> 10143 bytes src/Portfolio.Web/wwwroot/favicon.png | 3 - src/Portfolio.Web/wwwroot/socials/gitlab.png | 3 + .../wwwroot/socials/instagram.png | 3 + src/Portfolio.Web/wwwroot/socials/mail.png | 3 + 15 files changed, 121 insertions(+), 319 deletions(-) delete mode 100644 src/Portfolio.Web/Components/Pages/Counter.razor delete mode 100644 src/Portfolio.Web/Components/Pages/Weather.razor create mode 100644 src/Portfolio.Web/wwwroot/favicon.ico delete mode 100644 src/Portfolio.Web/wwwroot/favicon.png create mode 100644 src/Portfolio.Web/wwwroot/socials/gitlab.png create mode 100644 src/Portfolio.Web/wwwroot/socials/instagram.png create mode 100644 src/Portfolio.Web/wwwroot/socials/mail.png diff --git a/src/Portfolio.Web/Components/App.razor b/src/Portfolio.Web/Components/App.razor index 939e292..d0c615a 100644 --- a/src/Portfolio.Web/Components/App.razor +++ b/src/Portfolio.Web/Components/App.razor @@ -5,12 +5,15 @@ - - + + + + + diff --git a/src/Portfolio.Web/Components/Layout/MainLayout.razor b/src/Portfolio.Web/Components/Layout/MainLayout.razor index e3b2918..fb2f4a0 100644 --- a/src/Portfolio.Web/Components/Layout/MainLayout.razor +++ b/src/Portfolio.Web/Components/Layout/MainLayout.razor @@ -1,23 +1,11 @@ @inherits LayoutComponentBase -
-
- -
+
+ -
-
- About -
- -
- @Body -
-
-
- -
- An unhandled error has occurred. - Reload - 🗙 -
\ No newline at end of file +
+ @Body +
+ \ No newline at end of file diff --git a/src/Portfolio.Web/Components/Layout/MainLayout.razor.css b/src/Portfolio.Web/Components/Layout/MainLayout.razor.css index 38d1f25..84243ae 100644 --- 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; + position: sticky; } - - #blazor-error-ui .dismiss { - cursor: pointer; - position: absolute; - right: 0.75rem; - top: 0.5rem; - } diff --git a/src/Portfolio.Web/Components/Layout/NavMenu.razor b/src/Portfolio.Web/Components/Layout/NavMenu.razor index 0b37b9d..f739cd2 100644 --- a/src/Portfolio.Web/Components/Layout/NavMenu.razor +++ b/src/Portfolio.Web/Components/Layout/NavMenu.razor @@ -1,29 +1,25 @@ -
-
- Portfolio.Web +
+ Leon Hoppe + +
+ Home + Projekte + Technologien + Über mich + Kontakt +
+ +
+ + Instagram + + + + GitLab + + + + Mail +
- - - -
- -
\ No newline at end of file diff --git a/src/Portfolio.Web/Components/Layout/NavMenu.razor.css b/src/Portfolio.Web/Components/Layout/NavMenu.razor.css index a2aeace..038a940 100644 --- 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); +.navigation { + display: flex; + height: 50px; + justify-content: space-between; + align-items: center; + background-color: var(--background); + border-bottom: 1px solid var(--border-color); + padding-inline: 0.5rem; } -.navbar-toggler:checked { - background-color: rgba(255, 255, 255, 0.5); +.links, .socials { + display: flex; + gap: 1rem; } -.top-row { - min-height: 3.5rem; - background-color: rgba(0,0,0,0.4); +.navigation > a { + text-decoration: none; + font-size: 1.25rem; } -.navbar-brand { - font-size: 1.1rem; +.socials a { + height: 32px; } -.bi { - display: inline-block; +.links ::deep a { + text-decoration: none; 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; - display: flex; - align-items: center; - line-height: 3rem; + &:before { + content: ""; + position: absolute; width: 100%; - } - -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.37); - color: white; -} - -.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; + 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; } } + +.links ::deep a.active::before { + visibility: visible; + transform: scaleX(1); +} + +.links ::deep a:hover::before { + visibility: visible; + transform: scaleX(1); +} diff --git a/src/Portfolio.Web/Components/Pages/Counter.razor b/src/Portfolio.Web/Components/Pages/Counter.razor deleted file mode 100644 index 15c11c3..0000000 --- a/src/Portfolio.Web/Components/Pages/Counter.razor +++ /dev/null @@ -1,19 +0,0 @@ -@page "/counter" -@rendermode InteractiveServer - -Counter - -

Counter

- -

Current count: @currentCount

- - - -@code { - private int currentCount = 0; - - private void IncrementCount() { - currentCount++; - } - -} \ No newline at end of file diff --git a/src/Portfolio.Web/Components/Pages/Home.razor b/src/Portfolio.Web/Components/Pages/Home.razor index dfcdf75..8902f34 100644 --- a/src/Portfolio.Web/Components/Pages/Home.razor +++ b/src/Portfolio.Web/Components/Pages/Home.razor @@ -1,6 +1,6 @@ @page "/" -Home +Portfolio von Leon Hoppe

Hello, world!

diff --git a/src/Portfolio.Web/Components/Pages/Weather.razor b/src/Portfolio.Web/Components/Pages/Weather.razor deleted file mode 100644 index f8204c6..0000000 --- a/src/Portfolio.Web/Components/Pages/Weather.razor +++ /dev/null @@ -1,61 +0,0 @@ -@page "/weather" -@attribute [StreamRendering] - -Weather - -

Weather

- -

This component demonstrates showing data.

- -@if (forecasts == null) { -

- Loading... -

-} -else { - - - - - - - - - - - @foreach (var forecast in forecasts) { - - - - - - - } - -
DateTemp. (C)Temp. (F)Summary
@forecast.Date.ToShortDateString()@forecast.TemperatureC@forecast.TemperatureF@forecast.Summary
-} - -@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); - } - -} \ No newline at end of file diff --git a/src/Portfolio.Web/Components/Routes.razor b/src/Portfolio.Web/Components/Routes.razor index ae94e9e..090a0f6 100644 --- a/src/Portfolio.Web/Components/Routes.razor +++ b/src/Portfolio.Web/Components/Routes.razor @@ -1,6 +1,5 @@  - \ No newline at end of file diff --git a/src/Portfolio.Web/wwwroot/app.css b/src/Portfolio.Web/wwwroot/app.css index e69de29..e9aa8a2 100644 --- 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%; +} diff --git a/src/Portfolio.Web/wwwroot/favicon.ico b/src/Portfolio.Web/wwwroot/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..0073cd57078b28f0d2a60176fd492cc44b65c23f GIT binary patch literal 10143 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 WVXya-Q$Eku0c0hWBx=P>LjMOP)0Tk% literal 0 HcmV?d00001 diff --git a/src/Portfolio.Web/wwwroot/favicon.png b/src/Portfolio.Web/wwwroot/favicon.png deleted file mode 100644 index a1dc44a..0000000 --- a/src/Portfolio.Web/wwwroot/favicon.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e265ac0f2dda1e5dfa65b1adf330722bb3ef7789115283604d8cd19f098f1f08 -size 1148 diff --git a/src/Portfolio.Web/wwwroot/socials/gitlab.png b/src/Portfolio.Web/wwwroot/socials/gitlab.png new file mode 100644 index 0000000..a294eb8 --- /dev/null +++ b/src/Portfolio.Web/wwwroot/socials/gitlab.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:72a2cad5025aa931d6ea56c3201d1f18e68a8cd39788c7c80d5b2b82aa5143ef +size 591 diff --git a/src/Portfolio.Web/wwwroot/socials/instagram.png b/src/Portfolio.Web/wwwroot/socials/instagram.png new file mode 100644 index 0000000..473e499 --- /dev/null +++ b/src/Portfolio.Web/wwwroot/socials/instagram.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fdc2ac0085453fedb24be138132b4858add40ec998259ae94fafb9decd459e69 +size 1772 diff --git a/src/Portfolio.Web/wwwroot/socials/mail.png b/src/Portfolio.Web/wwwroot/socials/mail.png new file mode 100644 index 0000000..f0cb6ba --- /dev/null +++ b/src/Portfolio.Web/wwwroot/socials/mail.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:407b558182f98f948d045cd6b4ea62bec3b8a8322cada63b2b07a7ea12393ffe +size 1459 -- 2.49.1 From 442a398d2ea890c9ac2bf7cfbb4c47f9e7070542 Mon Sep 17 00:00:00 2001 From: Leon Hoppe Date: Tue, 21 Jan 2025 16:04:25 +0100 Subject: [PATCH 3/3] Added footer section --- .../Components/Layout/FooterLinks.razor | 19 ++++++++++++ .../Components/Layout/FooterLinks.razor.css | 30 +++++++++++++++++++ .../Components/Layout/MainLayout.razor | 4 ++- .../Components/Layout/MainLayout.razor.css | 8 +++++ .../{NavMenu.razor => Navigation.razor} | 0 ...NavMenu.razor.css => Navigation.razor.css} | 10 +++++-- 6 files changed, 68 insertions(+), 3 deletions(-) create mode 100644 src/Portfolio.Web/Components/Layout/FooterLinks.razor create mode 100644 src/Portfolio.Web/Components/Layout/FooterLinks.razor.css rename src/Portfolio.Web/Components/Layout/{NavMenu.razor => Navigation.razor} (100%) rename src/Portfolio.Web/Components/Layout/{NavMenu.razor.css => Navigation.razor.css} (90%) diff --git a/src/Portfolio.Web/Components/Layout/FooterLinks.razor b/src/Portfolio.Web/Components/Layout/FooterLinks.razor new file mode 100644 index 0000000..03ffba1 --- /dev/null +++ b/src/Portfolio.Web/Components/Layout/FooterLinks.razor @@ -0,0 +1,19 @@ + diff --git a/src/Portfolio.Web/Components/Layout/FooterLinks.razor.css b/src/Portfolio.Web/Components/Layout/FooterLinks.razor.css new file mode 100644 index 0000000..dff7425 --- /dev/null +++ b/src/Portfolio.Web/Components/Layout/FooterLinks.razor.css @@ -0,0 +1,30 @@ +footer { + display: flex; + margin-top: auto; + margin-bottom: 2rem; + padding-top: 5rem; + justify-content: space-between; + margin-inline: 12.5vw; +} + +.title { + background: var(--gradient); + background-clip: text; + color: transparent; + user-select: none; + font-weight: 500; +} + +a { + text-decoration: none; +} + +.socials { + display: flex; + gap: 0.75rem; +} + +.socials a { + height: 25px; + display: flex; +} diff --git a/src/Portfolio.Web/Components/Layout/MainLayout.razor b/src/Portfolio.Web/Components/Layout/MainLayout.razor index fb2f4a0..1b11967 100644 --- a/src/Portfolio.Web/Components/Layout/MainLayout.razor +++ b/src/Portfolio.Web/Components/Layout/MainLayout.razor @@ -2,10 +2,12 @@
@Body
+ +
\ No newline at end of file diff --git a/src/Portfolio.Web/Components/Layout/MainLayout.razor.css b/src/Portfolio.Web/Components/Layout/MainLayout.razor.css index 84243ae..9e6e6ae 100644 --- a/src/Portfolio.Web/Components/Layout/MainLayout.razor.css +++ b/src/Portfolio.Web/Components/Layout/MainLayout.razor.css @@ -1,9 +1,17 @@ main { background-color: var(--background); min-height: 100%; + display: flex; + flex-direction: column; } .nav-box { width: 100%; position: sticky; + top: 0; +} + +.content { + flex-grow: 1; + margin-inline: 12.5vw; } diff --git a/src/Portfolio.Web/Components/Layout/NavMenu.razor b/src/Portfolio.Web/Components/Layout/Navigation.razor similarity index 100% rename from src/Portfolio.Web/Components/Layout/NavMenu.razor rename to src/Portfolio.Web/Components/Layout/Navigation.razor diff --git a/src/Portfolio.Web/Components/Layout/NavMenu.razor.css b/src/Portfolio.Web/Components/Layout/Navigation.razor.css similarity index 90% rename from src/Portfolio.Web/Components/Layout/NavMenu.razor.css rename to src/Portfolio.Web/Components/Layout/Navigation.razor.css index 038a940..407a864 100644 --- a/src/Portfolio.Web/Components/Layout/NavMenu.razor.css +++ b/src/Portfolio.Web/Components/Layout/Navigation.razor.css @@ -8,7 +8,7 @@ padding-inline: 0.5rem; } -.links, .socials { +.links { display: flex; gap: 1rem; } @@ -18,8 +18,14 @@ font-size: 1.25rem; } +.socials { + display: flex; + gap: 0.75rem; +} + .socials a { - height: 32px; + height: 25px; + display: flex; } .links ::deep a { -- 2.49.1