diff --git a/src/app/components/navigation/navigation.component.html b/src/app/components/navigation/navigation.component.html index 757f8b8..24728b4 100644 --- a/src/app/components/navigation/navigation.component.html +++ b/src/app/components/navigation/navigation.component.html @@ -8,7 +8,7 @@
- {{social.href}} + {{social.href}}
diff --git a/src/app/components/navigation/navigation.component.ts b/src/app/components/navigation/navigation.component.ts index 8018811..c031c54 100644 --- a/src/app/components/navigation/navigation.component.ts +++ b/src/app/components/navigation/navigation.component.ts @@ -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 { diff --git a/src/app/models/Technology.ts b/src/app/models/Technology.ts new file mode 100644 index 0000000..92975f0 --- /dev/null +++ b/src/app/models/Technology.ts @@ -0,0 +1,4 @@ +export interface Technology { + name: string, + level: 1 | 2 | 3 +} diff --git a/src/app/sites/home/home.component.html b/src/app/sites/home/home.component.html index bb36658..1d07ab9 100644 --- a/src/app/sites/home/home.component.html +++ b/src/app/sites/home/home.component.html @@ -15,8 +15,8 @@ Mehr erfahren -
-

Projekte

+
+

Projekte

alle ansehen
@@ -29,3 +29,40 @@
+ +
+

Technologien

+ mehr erfahren +
+
+
+

{{technology.name}}

+ {{getTechnologyLevelName(technology.level)}} +
+
+
+
+
+ +
+

Über mich

+ mehr erfahren +
+
+

{{timestamp.date}}

+ {{timestamp.description}} +
+
+
+ + diff --git a/src/app/sites/home/home.component.scss b/src/app/sites/home/home.component.scss index 236f9e2..effd28b 100644 --- a/src/app/sites/home/home.component.scss +++ b/src/app/sites/home/home.component.scss @@ -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; + } + } +} diff --git a/src/app/sites/home/home.component.ts b/src/app/sites/home/home.component.ts index 184d4f8..26b7131 100644 --- a/src/app/sites/home/home.component.ts +++ b/src/app/sites/home/home.component.ts @@ -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}`; + } }