112 lines
3.4 KiB
Plaintext
112 lines
3.4 KiB
Plaintext
@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>
|
|
|
|
<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++;
|
|
}
|
|
|
|
if (displayElement.innerText !== jobs.display)
|
|
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 projectsTask = ProjectRepository.GetFeaturedProjects(TokenSource.Token);
|
|
var technologiesTask = TechnologyRepository.GetFeaturedTechnologies(TokenSource.Token);
|
|
var timelineTask = TimelineRepository.GetFeaturedTimeline(TokenSource.Token);
|
|
|
|
await Task.WhenAll(projectsTask, technologiesTask, timelineTask);
|
|
|
|
_projects = projectsTask.Result;
|
|
_technologies = technologiesTask.Result;
|
|
_timeline = timelineTask.Result;
|
|
}
|
|
|
|
}
|