remove non-final draws

.github/workflows/continuous-deployment.yml

@@ -3,7 +3,9 @@ name: Continuous Deployment
 on:
   push:
     branches:
-      - main
+      # TODO remove
+      - feat/experience
+#      - main
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:

package.json

@@ -10,7 +10,6 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.7",
     "@angular/common": "^17.0.7",
     "@angular/compiler": "^17.0.7",
     "@angular/core": "^17.0.7",

src/app/app.component.html

@@ -60,47 +60,9 @@ <h2 id="main-subheading">Software Engineer</h2>
       </ng-template>
     </p-timeline>
 
-    <div #skills_section>
-      <heading-card [heading]="dataService.languagePack.skills" type="light"></heading-card>
-
-      <div #skills_container class="flex flex-nowrap justify-content-evenly" style="height: calc(85vh - 6rem); align-items: center; margin-bottom: 5vh; gap: 10vw; position: relative">
-        <skill-cat-card *ngFor="let skillCategory of dataService.skillCategories" [category]="skillCategory"></skill-cat-card>
-      </div>
-    </div>
-
-    <div style="margin-bottom: 500px"></div>
-
-    <div class="flex flex-wrap justify-content-evenly" style="align-items: center; gap: 3rem; position: relative; width: var(--main-content-width); margin: 0 var(--main-content-side-margin)">
-      <skill-cat-card-2 *ngFor="let skillCategory of dataService.skillCategories" [category]="skillCategory"></skill-cat-card-2>
-    </div>
-
-<!--    <div style="margin-bottom: 500px"></div>-->
-
-    <div style="margin-bottom: 500px"></div>
-
-    <div style="width: var(--main-content-width); margin: 0 var(--main-content-side-margin)">
-      <skills-grid *ngFor="let skillCategory of dataService.skillCategories" [category]="skillCategory"></skills-grid>
-    </div>
-
-    <div style="margin-bottom: 500px"></div>
-
+    <heading-card [heading]="dataService.languagePack.skills" type="light" styleClass="alarm-clock-animated"></heading-card>
     <div style="width: var(--main-content-width); margin: 0 var(--main-content-side-margin); display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1rem">
-      <skills-card *ngFor="let skillCategory of dataService.skillCategories" [category]="skillCategory"></skills-card>
-    </div>
-
-    <!-- Inspo: https://codepen.io/william-goldsworthy/pen/JzVajj found on https://freefrontend.com/css-stacked-cards/ -->
-    <div class="flex justify-content-center card-stack">
-      <skill-card2 *ngFor="let skill of dataService.skillCategories[2].skills"
-                  [name]="skill.name" [percent]="skill.rating" [description]="skill.text"
-      [style]="{'position': 'relative'}"></skill-card2>
+      <skills-card class="alarm-clock-animated" *ngFor="let skillCategory of dataService.skillCategories" [category]="skillCategory"></skills-card>
     </div>
-
-
-
-
-    <!--    <p (mouseover)="overlay.show($event)" (mouseleave)="overlay.hide()">HIER</p>-->
-<!--    <p-overlayPanel #overlay>-->
-<!--      TEST-->
-<!--    </p-overlayPanel>-->
   </div>
 </main>

src/app/app.component.ts

@@ -1,22 +1,15 @@
 import {Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {TimelineModule} from 'primeng/timeline';
-import {CardModule} from "primeng/card";
-import {ButtonModule} from "primeng/button";
 import {BadgeModule} from "primeng/badge";
 import gsap from 'gsap';
 import {ScrollTrigger} from "gsap/ScrollTrigger";
 import {DataService} from "./data/data.service";
 import {SpeedDialModule} from "primeng/speeddial";
 import {OverlayPanelModule} from "primeng/overlaypanel";
 import 'js-circle-progress';
-import {SkillCardComponent} from "./components/skill-card/skill-card.component";
-import {SkillCardComponent2} from "./components/skill-card-2/skill-card-2.component";
-import {SkillCatCardComponent} from "./components/skill-cat-card/skill-cat-card.component";
 import {TimelineCardComponent} from "./components/timeline-card/timeline-card.component";
 import {HeadingCardComponent} from "./components/heading-card/heading-card.component";
-import {SkillCatCard2Component} from "./components/skill-cat-card-2/skill-cat-card-2.component";
-import {SkillsGridComponent} from "./components/skills-grid/skills-grid.component";
 import {SkillsCardComponent} from "./components/skills-card/skills-card.component";
 
 gsap.registerPlugin(ScrollTrigger);
@@ -26,7 +19,17 @@ import "./js/lenis.js";
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, NgOptimizedImage, TimelineModule, CardModule, ButtonModule, BadgeModule, SpeedDialModule, OverlayPanelModule, SkillCardComponent, SkillCatCardComponent, SkillCardComponent2, TimelineCardComponent, HeadingCardComponent, SkillCatCard2Component, SkillsGridComponent, SkillsCardComponent],
+  imports: [
+    CommonModule,
+    NgOptimizedImage,
+    TimelineModule,
+    BadgeModule,
+    SpeedDialModule,
+    OverlayPanelModule,
+    // Custom
+    TimelineCardComponent,
+    HeadingCardComponent,
+    SkillsCardComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
@@ -36,7 +39,6 @@ export class AppComponent {
   @ViewChild("background", {read: ElementRef}) background: ElementRef;
   @ViewChild("education_card", {read: ElementRef}) educationCard: ElementRef;
   @ViewChild("lang_selector", {read: ElementRef}) langSelector: ElementRef;
-  @ViewChild("skills_section", {read: ElementRef}) skillsSection: ElementRef;
   @ViewChild("skills_container", {read: ElementRef}) skillsContainer: ElementRef;
 
   dataService: DataService;
@@ -51,7 +53,6 @@ export class AppComponent {
     for (let el of document.getElementsByClassName("alarm-clock-animated")) {
       this.addAlarmClockAnimation(el);
     }
-    this.addSkillsAnimation();
   }
 
   addLangButtonAnimation() {
@@ -118,26 +119,4 @@ export class AppComponent {
     })
   }
 
-  addSkillsAnimation(): void {
-    let containerWidth = (this.skillsContainer.nativeElement.children.length - 1) * 0.1 * document.documentElement.clientWidth;
-    for (let child of this.skillsContainer.nativeElement.children) {
-      containerWidth += child.scrollWidth;
-    }
-    const tl: gsap.core.Timeline = gsap.timeline({
-      scrollTrigger: {
-        trigger: this.skillsSection.nativeElement,
-        start: "top 5%",
-        endTrigger: this.skillsContainer.nativeElement,
-        end: "right top",
-        pin: this.skillsSection.nativeElement,
-        // markers: true, // TODO remove
-        scrub: true,
-      }
-    });
-    tl.fromTo(this.skillsContainer.nativeElement, {
-      x: containerWidth / 2 + 0.5 * document.documentElement.clientWidth
-    }, {
-      x: -1 * (containerWidth / 2) + 0.45 * document.documentElement.clientWidth
-    })
-  }
 }

src/app/app.config.ts

@@ -1,10 +1,8 @@
 import { ApplicationConfig } from '@angular/core';
 import {IMAGE_LOADER, ImageLoaderConfig} from "@angular/common";
-import {provideAnimations} from "@angular/platform-browser/animations";
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideAnimations(),
     {
       provide: IMAGE_LOADER,
       useValue: (config: ImageLoaderConfig) => {