finished landing page

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()}">
-  <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>