finished landing page

src/app/components/navigation/navigation.component.html

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

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 {

src/app/models/Technology.ts

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

src/app/sites/home/home.component.html

@@ -15,8 +15,8 @@
   <a href="#projects">Mehr erfahren</a>
 </section>
 
-<section id="projects" [ngClass]="{'mobile': deviceService.isMobile()}">
+<section id="projects" class="home-section" [ngClass]="{'mobile': deviceService.isMobile()}">
-  <h1>Projekte</h1>
+  <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>

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

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}`;
+  }
 
 }