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

finished landing page

Browse Source
This commit is contained in:
Leon Hoppe
2023-02-17 20:03:21 +01:00
parent 69d6686995
commit 0583b2256a
6 changed files with 279 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/navigation/navigation.component.html
View File

@@ -8,7 +8,7 @@
<div id="social-media" [ngStyle]="{'margin-left': deviceService.isMobile() ? 'auto' : ''}">
<a class="header-social" target="_blank" *ngFor="let social of socialLinks" href="{{social.href}}">
<img src="{{social.image}}" alt="{{social.href}}">
<img src="{{social.image}}" alt="{{social.href}}" draggable="false">
</a>
</div>
</nav>

2
src/app/components/navigation/navigation.component.ts
View File

@@ -23,7 +23,7 @@ export class NavigationComponent {
{href: 'https://www.instagram.com/leonh.23/', image: 'https://instagram.com/favicon.ico'},
{href: 'https://git.leon-hoppe.de/leon.hoppe', image: 'https://git.leon-hoppe.de/favicon.ico'},
{href: 'mailto://leon@ladenbau-hoppe.de', image: 'https://webmail.strato.de/favicon.ico'}
]
];
public cleanUrl(url: string): string {
try {

4
src/app/models/Technology.ts Normal file
View File

@@ -0,0 +1,4 @@
export interface Technology {
name: string,
level: 1 | 2 | 3
}

41
src/app/sites/home/home.component.html
View File

@@ -15,8 +15,8 @@
<a href="#projects">Mehr erfahren</a>
</section>
<section id="projects" [ngClass]="{'mobile': deviceService.isMobile()}">
<h1>Projekte</h1>
<section id="projects" class="home-section" [ngClass]="{'mobile': deviceService.isMobile()}">
<h1 class="title">Projekte</h1>
<a routerLink="/projects">alle ansehen</a>
<div id="project-wrapper">
<div class="project" *ngFor="let project of projects | featuredProjects">
@@ -29,3 +29,40 @@
</div>
</div>
</section>
<section id="technologies" class="home-section" [ngClass]="{'mobile': deviceService.isMobile()}">
<h1 class="title">Technologien</h1>
<a href="/technologies">mehr erfahren</a>
<div id="technology-wrapper">
<div class="technology" *ngFor="let technology of technologies">
<div class="tech-header">
<h2 class="tech-name">{{technology.name}}</h2>
<span class="tech-level">{{getTechnologyLevelName(technology.level)}}</span>
</div>
<div [class]="createTechProgressClasses(technology.level)"></div>
</div>
</div>
</section>
<section id="about" class="home-section" [ngClass]="{'mobile': deviceService.isMobile()}">
<h1 class="title">Über mich</h1>
<a href="/about">mehr erfahren</a>
<div id="timeline">
<div class="timestamp" *ngFor="let timestamp of timeline">
<h2>{{timestamp.date}}</h2>
<span>{{timestamp.description}}</span>
</div>
</div>
</section>
<section id="footer" class="home-section" [ngClass]="{'mobile': deviceService.isMobile()}">
<span class="footer-title">Portfolio von Leon Hoppe</span>
<a href="mailto://leon@ladenbau-hoppe.de">leon@ladenbau-hoppe.de</a>
<span>+49 1575 8839776</span>
<div id="social-media">
<a class="header-social" target="_blank" *ngFor="let social of socialLinks" href="{{social.href}}">
<img src="{{social.image}}" alt="{{social.href}}" draggable="false">
</a>
</div>
</section>

208
src/app/sites/home/home.component.scss
View File

@@ -11,6 +11,26 @@ $padding-small: 5vw;
$desc-color: #7c8393;
.title {
font-size: 35px;
display: inline;
margin-right: 10px;
}
.home-section {
padding-inline: $padding;
user-select: none;
margin-bottom: 100px;
&.mobile {
padding-inline: $padding-small;
.title {
font-size: 25px;
}
}
}
#hero {
height: 100vh;
padding-left: $padding;
@@ -122,16 +142,6 @@ $desc-color: #7c8393;
}
#projects {
padding-inline: $padding;
user-select: none;
margin-bottom: 100px;
h1 {
font-size: 35px;
display: inline;
margin-right: 10px;
}
#project-wrapper {
display: flex;
flex-wrap: wrap;
@@ -208,12 +218,6 @@ $desc-color: #7c8393;
}
&.mobile {
padding-inline: $padding-small;
h1 {
font-size: 25px;
}
#project-wrapper {
margin-top: 30px;
gap: 30px;
@@ -231,3 +235,175 @@ $desc-color: #7c8393;
}
}
}
#technologies {
margin-top: 300px;
#technology-wrapper {
display: flex;
flex-direction: column;
gap: 40px;
margin-top: 40px;
.technology {
.tech-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
.tech-name {
margin: 0;
font-size: 20px;
}
.tech-level {
align-self: flex-end;
color: $desc-color;
}
}
.tech-progress {
height: 10px;
width: 100%;
border-radius: 5px;
background: $gradient;
box-shadow: 0 3px 10px 0.5px rgba(theme.$primary, 0.4);
&.level-1 {
width: 33%;
}
&.level-2 {
width: 66%;
}
}
}
}
}
#about {
margin-top: 150px;
#timeline {
display: flex;
margin-top: 30px;
.timestamp {
flex-grow: 1;
flex-basis: 0;
display: flex;
flex-direction: column;
gap: 50px;
position: relative;
h2 {
font-size: 20px;
margin: 0;
}
span {
color: $desc-color;
font-size: 14px;
}
&:after {
content: '';
width: 15px;
height: 15px;
background: $gradient-angled;
border-radius: 50%;
box-shadow: 0 3px 10px 0.5px rgba(theme.$primary, 0.4);
position: absolute;
top: 45px;
}
&:before {
content: '';
width: 100%;
height: 3px;
background-color: #FFF;
top: 51px;
position: absolute;
}
&:last-of-type:before {
display: none;
}
}
}
&.mobile {
#timeline {
flex-direction: column-reverse;
.timestamp {
gap: 15px;
padding-left: 30px;
box-sizing: border-box;
span {
margin-bottom: 50px;
}
&:after {
top: 5px;
left: -5px;
}
&:before {
top: 5px;
left: 1px;
width: 3px;
height: 100%;
}
&:last-of-type:before {
display: block;
}
&:first-of-type:before {
display: none;
}
}
}
}
}
#footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
margin-top: 120px;
user-select: unset;
.footer-title {
background: $gradient;
background-clip: text;
color: transparent;
font-weight: bold;
user-select: none;
}
a {
text-decoration: none;
}
#social-media {
display: flex;
gap: 5px;
user-select: none;
.header-social > img {
width: 25px;
height: 25px;
}
}
&.mobile {
*:not(.footer-title) {
display: none;
}
}
}

43
src/app/sites/home/home.component.ts
View File

@@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import {DeviceDetectorService} from "ngx-device-detector";
import {Project} from "../../models/project";
import {Technology} from "../../models/Technology";
@Component({
selector: 'app-home',
@@ -48,6 +49,46 @@ export class HomeComponent {
cover: "https://cdn.leon-hoppe.de/portfolio/projects/manager.jpeg",
featured: true
},
]
];
public technologies: Technology[] = [
{name: "C#", level: 3},
{name: "Java", level: 3},
{name: "HTML, CSS / SCSS", level: 2},
{name: "JavaScript, TypeScript", level: 3},
{name: "Lua", level: 2},
{name: "Python", level: 1},
];
public timeline: {date: number, description: string}[] = [
{date: 2010, description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur excepturi facere, fuga maxime nulla qui voluptas voluptates? Adipisci asperiores dolor error iste sunt tempore. Blanditiis illum mollitia nostrum quae vero?"},
{date: 2015, description: "Lorem ipsum dolor sit amet"},
{date: 2017, description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur excepturi facere, fuga maxime nulla qui voluptas voluptates? Adipisci asperiores dolor error iste sunt tempore. Blanditiis illum mollitia nostrum quae vero?"},
{date: 2022, description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur excepturi facere, fuga maxime nulla qui voluptas voluptates? Adipisci asperiores dolor error iste sunt tempore. Blanditiis illum mollitia nostrum quae vero?"},
];
public socialLinks: {href: string, image: string}[] = [
{href: 'https://www.instagram.com/leonh.23/', image: 'https://instagram.com/favicon.ico'},
{href: 'https://git.leon-hoppe.de/leon.hoppe', image: 'https://git.leon-hoppe.de/favicon.ico'},
{href: 'mailto://leon@ladenbau-hoppe.de', image: 'https://webmail.strato.de/favicon.ico'}
];
public getTechnologyLevelName(level: number): string {
switch (level) {
case 1:
return "Anfänger";
case 2:
return "Erweitert";
case 3:
return "Fortgeschritten";
default:
return "Normal";
}
}
public createTechProgressClasses(level: number): string {
return `tech-progress level-${level}`;
}
}