leon.hoppe/Portfolio
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Resolve "Home Page" #23

Merged
leon.hoppe merged 1 commits from feature/homePage into dev 2025-01-25 15:28:47 +01:00
Conversation 4 Commits 1 Files Changed 14 +292 -45
14 changed files with 292 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Portfolio.Api/Program.cs
View File

@@ -1,5 +1,6 @@
using HopFrame.Core.Config;
using HopFrame.Web;
using Microsoft.EntityFrameworkCore;
using Portfolio.Api;
using Portfolio.Api.Services;
using Portfolio.Shared.Models;

1
src/Portfolio.Shared/Models/Technology.cs
View File

@@ -21,6 +21,7 @@ public sealed class Technology {
public TechnologyType Type { get; set; } = TechnologyType.Language;
public bool Featured { get; set; }
}
public enum TechnologyLevel {

1
src/Portfolio.Web/Components/App.razor
View File

@@ -22,7 +22,6 @@
<body>
<Routes/>
<script src="_framework/blazor.web.js"></script>
</body>
</html>

16
src/Portfolio.Web/Components/Components/TechnologyView.razor
View File

@@ -1,23 +1,22 @@
@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) {
case TechnologyLevel.Beginner:
@@ -32,9 +31,4 @@
}
}
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (!firstRender) return;
await Runtime.InvokeVoidAsync("observeElement", _element);
}
}

6
src/Portfolio.Web/Components/Components/TechnologyView.razor.css
View File

@@ -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%;
}

5
src/Portfolio.Web/Components/Components/TimestampView.razor
View File

@@ -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]

10
src/Portfolio.Web/Components/Components/TimestampView.razor.css
View File

@@ -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;

2
src/Portfolio.Web/Components/Pages/AboutPage.razor.css
View File

@@ -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);

111
src/Portfolio.Web/Components/Pages/Home.razor
View File

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

128
src/Portfolio.Web/Components/Pages/Home.razor.css Normal file
View File

@@ -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;
}
}

40
src/Portfolio.Web/Components/Pages/TechnologiesPage.razor
View File

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

6
src/Portfolio.Web/Program.cs
View File

@@ -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();

1
src/Portfolio.Web/wwwroot/app.css
View File

@@ -24,6 +24,7 @@
font-family: "Ubuntu", serif;
font-weight: 400;
font-style: normal;
scroll-behavior: smooth;
}
html, body {

5
src/Portfolio.Web/wwwroot/scroll-handler.js
View File

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