create first version

.github/workflows/continous-deployment.yml

@@ -0,0 +1,47 @@
+name: Continous Deployment
+
+on:
+  push:
+    branches:
+      - dev # TODO: remove
+      - main
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    name: Build & Deploy
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          # Version Spec of the version to use in SemVer notation.
+          # It also emits such aliases as lts, latest, nightly and canary builds
+          # Examples: 12.x, 10.15.1, >=10.15.0, lts/Hydrogen, 16-nightly, latest, node
+          node-version: 20
+      - name: Build
+        run: |
+          npm install
+          npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./dist/cv/browser/
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

angular.json

@@ -119,5 +119,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package.json

@@ -4,20 +4,23 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --base-href='./'",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
   "private": true,
   "dependencies": {
     "@angular/animations": "^17.0.0",
+    "@angular/cdk": "^17.0.1",
     "@angular/common": "^17.0.0",
     "@angular/compiler": "^17.0.0",
     "@angular/core": "^17.0.0",
     "@angular/forms": "^17.0.0",
+    "@angular/material": "^17.0.1",
     "@angular/platform-browser": "^17.0.0",
     "@angular/platform-browser-dynamic": "^17.0.0",
     "@angular/router": "^17.0.0",
+    "gsap": "^3.12.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

src/app/app.component.ts

@@ -1,13 +1,72 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {Component, ViewChild} from '@angular/core';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+import {MatCardModule} from "@angular/material/card";
+
+import gsap from 'gsap'
+import { ScrollTrigger } from "gsap/ScrollTrigger"
+import {MatGridListModule} from "@angular/material/grid-list";
+
+gsap.registerPlugin(ScrollTrigger);
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage, MatCardModule, MatGridListModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
-  title = 'CV';
+
+  @ViewChild('avatar') avatar: any;
+  @ViewChild('main') backgroundDiv: any;
+  @ViewChild('arrow_down') arrowDown: any;
+  @ViewChild('general') general: any;
+
+  ngAfterViewInit(): void {
+    gsap.from(this.arrowDown.nativeElement, {
+      opacity: 0,
+      duration: 2,
+    })
+      .play();
+    gsap.from(this.arrowDown.nativeElement, {
+      y: -20,
+      delay: 1.5,
+      duration: 1,
+      ease: "bounce",
+    })
+      .play();
+
+    const timeline: gsap.core.Timeline = gsap.timeline({
+      scrollTrigger: {
+        start: "top top",
+        trigger: this.general.nativeElement,
+        end: "+=500",
+        // markers: true, // TODO remove
+        scrub: true,
+        pin: true
+      }
+    });
+
+    timeline
+      .from(this.avatar.nativeElement, {
+        xPercent: 50,
+        yPercent: 20,
+        scale: 1.3,
+        duration: 1,
+        ease: "power2.out"
+      })
+      .to(this.arrowDown.nativeElement, {
+        opacity: 0,
+        duration: 0.5
+      }, "<")
+    const generalChildren = this.general.nativeElement.children;
+    for (let i = 0; i < generalChildren.length; i++) {
+      const textPart = generalChildren[i];
+      timeline.from(textPart, {
+        xPercent: 120,
+        duration: 0.6
+      }, "<0.2");
+    }
+    console.log(this.general);
+  }
 }

src/app/app.config.ts

@@ -1,5 +1,6 @@
 import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
-  providers: []
+  providers: [provideAnimations()]
 };

src/index.html

@@ -2,12 +2,14 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>CV</title>
+  <title>CV - Axel Herrmann</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

src/styles.scss

@@ -1 +1,56 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$CV-primary: mat.define-palette(mat.$indigo-palette);
+$CV-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$CV-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$CV-theme: mat.define-light-theme((
+  color: (
+    primary: $CV-primary,
+    accent: $CV-accent,
+    warn: $CV-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($CV-theme);
+
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100% !important }
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+
+}
+
+// TODO remove once style theme is properly done: Anleitung dafür: https://angularindepth.com/posts/1320/custom-theme-for-angular-material-components-series-part-1-create-a-theme
+:root {
+  --color-grey-dark-1: #363C43;
+  --color-grey-dark-2: #747474;
+  --color-grey-medium-1: #CACACA;
+  --color-white-darker: #E9E8E7;
+
+  .text-color-grey-dark-1 { color: var(--color-grey-dark-1); }
+  .text-color-grey-dark-2 { color: var(--color-grey-dark-2); }
+  .text-color-grey-medium-1 { color: var(--color-grey-medium-1); }
+  .color-white-darker { color: var(--color-white-darker); }
+}