+ Axel Herrmann - wer ist das?
+ Momentan bin ich ein 21-jähriger Student an der Universität Stuttgart im Studiengang Software Engineering B.Sc., der seine Bachelorthesis schreibt.
+ Doch meine Geschichte mit Informatik beginnt viel früher, denn ich konnte mich schon früh für Informatik begeistern.
+ Bereits in der 7. Klasse hat mein Vater mir einen Online-Blog über Java gezeigt, durch den ich meine ersten Zeilen Java Code geschrieben habe.
+ Als ich dann in der 10. Klasse das erste Mal die Chance hatte, Informatikunterricht zu besuchen, wusste ich sofort, was ich in Zukunft machen will.
+ Immer auf der Suche nach echten Aufgaben, bei denen ich programmieren kann, habe ich 2018 mit Freunden am #IoT Hackthon meiner Schule teilgenommen.
+ Da mein Informatik-Lehrer sah, wie viel Spaß mir das machte, gab er mir als einzigem Schüler die Möglichkeit, an der Verwaltungssoftware für das Schulprojekt Schule als Staat (SaS) mit ihm zu entwickeln.
+ Als erstes etwaws größeres Projekt, an dem ich gearbeitet habe, hat das meine Entscheidung gefestigt, Informatik studieren zu wollen.
+ So habe ich nach der Schule direkt damit angefangen.
+ Besonders viel Spaß haben mir dabei immer die Module gemacht, bei denen ich programmieren konnte.
+
+
+ Um mehr Bezug zur Praxis zu haben und Erfahrung zu sammeln, suchte ich mir bereits im 3. Semester meines Studiums eine Werkstudentenstelle.
+ So bin ich bei levigo solutions gelandet, wo ich ab Beginn 2022 1,5 Jahre am Produkt jadice flow mitentwickelt habe.
+ Hier konnte ich erste Erfahrungen mit renomierten Technologien wie Docker und Kubernetes sammeln und hatte viel Spaß bei der Arbeit.
+
+
+
+
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d708535..d54d956 100644
--- a/src/app/app.component.ts
+++ b/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);
+ }
}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index c4a32cc..374811f 100644
--- a/src/app/app.config.ts
+++ b/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()]
};
diff --git a/src/assets/arrow-down.drawio.svg b/src/assets/arrow-down.drawio.svg
new file mode 100644
index 0000000..f96f230
--- /dev/null
+++ b/src/assets/arrow-down.drawio.svg
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/pic1.jpeg b/src/assets/pic1.jpeg
new file mode 100644
index 0000000..52d85b6
Binary files /dev/null and b/src/assets/pic1.jpeg differ
diff --git a/src/assets/profile-pic.jpeg b/src/assets/profile-pic.jpeg
new file mode 100644
index 0000000..c09e345
Binary files /dev/null and b/src/assets/profile-pic.jpeg differ
diff --git a/src/index.html b/src/index.html
index 7b33ab1..73ad579 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,12 +2,14 @@
- CV
+ CV - Axel Herrmann
+
+
-
+
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..fbfd5b1 100644
--- a/src/styles.scss
+++ b/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); }
+}