diff --git a/src/app/app.component.html b/src/app/app.component.html index fd04c82..6a1d720 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ -
+
@@ -14,11 +14,7 @@

Software Engineer

Profile photo of Axel Herrmann
-
-
- -
- +
@@ -39,32 +35,98 @@

Software Engineer

-
+ -
-
-
- -

- 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 etwas 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. -

+
+
+
+ + +

+ 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 etwas 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. +

+
+ + + + Neben der allgemeinen Bildung habe ich hier meine ersten Erfahrungen in der Informatik sammeln können. + Ab der Oberstufe habe ich Informatikunterricht besucht. + + + + In Abgrenzung zum verwandten Studiengang Informatik konnte ich hier einige praktische Erfahrungen mehr sammeln. + Diese kleinen Programmierprojekte konnten mich im Studium bisher am meisten begeistern. + + + + + + Im Rahmen des Hackathon habe ich das erste Mal etwas praktischere Erfahrungen in der Softwareentwicklung gesammelt. + + + Dank meines Informatik-Lehrers habe ich als einziger Schüler die Möglichkeit bekommen, mit an der Verwaltungssoftware für das Schulprojekt „Schule als Staat“ zu entwickeln. + Dabei wurde eine Webseite in PHP realisiert. + + + Im Rahmen dieser Anstellung hatte ich das erste Mal die Gelegenheit, professionelle praktische Erfahrungen zu sammeln. + Ich habe größtenteils am Backend des Produkts jadice flow gearbeitet. + Dabei habe ich viel in Java und SpringBoot, teilweise auch in Java-/Typescript geschrieben. + Aufgrund der Microservices-Architektur des Produkts hatte ich viel Erfahrungen mit Docker gesammelt und erste Einblicke in Kubernetes bekommen. + Bei dem agilen Vorgehen in 2–3-wöchigen Sprints habe ich das erste Mal mit Scrum gearbeitet. + + + Insgesamt ein halbes Jahr habe ich bei levigo solutions meine Bachelorthesis über das Thema Refactoring von Microservices- Architekturen: Eine industrielle Fallstudie geschrieben. + Dabei habe ich weiter an der Architektur des Produkts jadice flow entwickelt. + Die Thesis wird in Zukunft öffentlich zu finden sein. + + +
-
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 1562b3c..6ac7474 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -75,18 +75,14 @@ font-size: xx-large; color: var(--color-grey-dark-1); } -.general-text { - color: var(--color-grey-dark-2); - font-size: 2.3vh; - margin-left: 20px; - margin-right: 20px; -} .dot { - height: 20px; - width: 20px; + height: 12px; + width: 12px; + margin-top: 11vh; background-color: var(--color-grey-dark-1); border-radius: 50%; display: inline-block; + z-index: -100; } #main-background { width: 100%; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9b8fb62..79b9822 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,26 +3,30 @@ import {CommonModule, NgOptimizedImage} from '@angular/common'; import gsap from 'gsap' import { ScrollTrigger } from "gsap/ScrollTrigger" -import {HeadingBoxComponent} from "./heading-box/heading-box.component"; +import {HeadingBoxComponent} from "./components/heading-box/heading-box.component"; import {MatIconModule} from "@angular/material/icon"; import Utils from "./utils/utils"; +import {LifelineEntryComponent} from "./components/lifeline-entry/lifeline-entry.component"; +import {HeadingSectionComponent} from "./components/heading-section/heading-section.component"; gsap.registerPlugin(ScrollTrigger); @Component({ selector: 'app-root', standalone: true, - imports: [CommonModule, NgOptimizedImage, HeadingBoxComponent, MatIconModule], + imports: [CommonModule, NgOptimizedImage, HeadingBoxComponent, MatIconModule, LifelineEntryComponent, HeadingSectionComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) export class AppComponent { - @ViewChild('avatar') avatar: any; - @ViewChild('main') backgroundDiv: any; - @ViewChild('arrow_down') arrowDown: any; - @ViewChild('general') general: any; - @ViewChild('personal_infos') personal: any; + @ViewChild('avatar') avatar: ElementRef; + @ViewChild('main') backgroundDiv: ElementRef; + @ViewChild('arrow_down') arrowDown: ElementRef; + @ViewChild('general', {read: HeadingSectionComponent}) general: HeadingSectionComponent; + @ViewChild('general', {read: ElementRef}) generalElement: ElementRef; + @ViewChild('right_side') rightSide: ElementRef; + @ViewChild('personal_infos', {read: HeadingSectionComponent}) personal: HeadingSectionComponent; ngAfterViewInit(): void { if (window.scrollY < 10) { @@ -39,10 +43,9 @@ export class AppComponent { end: "+=1500", markers: true, // TODO remove scrub: true, - pin: this.general.nativeElement + pin: this.rightSide.nativeElement } }); - timeline.addLabel("start", 0) timeline .from(this.avatar.nativeElement, { @@ -55,33 +58,31 @@ export class AppComponent { .to(this.arrowDown.nativeElement, { opacity: 0, duration: 50 - }, "start") + }, 0); - const generalChildren = this.general.nativeElement.children; - for (let i = 0; i < generalChildren.length; i++) { - const textPart = generalChildren[i]; - timeline.from(textPart, { + const generalParts = this.general.getParts(); + for (let i = 0; i < generalParts.length; i++) { + timeline.from(generalParts[i], { xPercent: 120, scale: 0.2, duration: 60 }, 10 + i * 30); } - const personalChildren = this.personal.nativeElement.children; - for (let i = 0; i < personalChildren.length; i++) { - const personalPart = personalChildren[i]; - timeline.from(personalPart, { + timeline.to(this.generalElement.nativeElement, { + scale: 1, + duration: 60 + }); + + const personalParts = this.personal.getParts(); + for (let i = 0; i < personalParts.length; i++) { + timeline.from(personalParts[i], { xPercent: -120, scale: 0.2, duration: 60 - }, 10 + i* 15); + }, 10 + i * 15); } - timeline.to(this.general.nativeElement, { - scale: 1, - duration: 60 - }); - // this.childrenAnimationFrom(this.general, timeline, { // xPercent: -120, // scale: 0.2, diff --git a/src/app/components/heading-box/heading-box.component.html b/src/app/components/heading-box/heading-box.component.html new file mode 100644 index 0000000..12ead72 --- /dev/null +++ b/src/app/components/heading-box/heading-box.component.html @@ -0,0 +1,11 @@ +
+
+
+
+

+ +

+
+
+
+
diff --git a/src/app/heading-box/heading-box.component.scss b/src/app/components/heading-box/heading-box.component.scss similarity index 96% rename from src/app/heading-box/heading-box.component.scss rename to src/app/components/heading-box/heading-box.component.scss index 69c9f95..257fec8 100644 --- a/src/app/heading-box/heading-box.component.scss +++ b/src/app/components/heading-box/heading-box.component.scss @@ -2,6 +2,7 @@ } .heading-box-wrapper { + display: inline-block; transform: inherit; width: inherit; margin: 2vh 0; diff --git a/src/app/heading-box/heading-box.component.ts b/src/app/components/heading-box/heading-box.component.ts similarity index 86% rename from src/app/heading-box/heading-box.component.ts rename to src/app/components/heading-box/heading-box.component.ts index e690ebb..1125c7f 100644 --- a/src/app/heading-box/heading-box.component.ts +++ b/src/app/components/heading-box/heading-box.component.ts @@ -10,6 +10,6 @@ import { CommonModule } from '@angular/common'; }) export class HeadingBoxComponent { - @Input({required: true}) text!: string; + @Input({required: false}) width: any = "100%"; } diff --git a/src/app/components/heading-section/heading-section.component.html b/src/app/components/heading-section/heading-section.component.html new file mode 100644 index 0000000..da377db --- /dev/null +++ b/src/app/components/heading-section/heading-section.component.html @@ -0,0 +1,10 @@ +
+
+ {{ heading }} +
+
+
+ +
+
+
diff --git a/src/app/components/heading-section/heading-section.component.scss b/src/app/components/heading-section/heading-section.component.scss new file mode 100644 index 0000000..20305d4 --- /dev/null +++ b/src/app/components/heading-section/heading-section.component.scss @@ -0,0 +1,3 @@ +.heading-section-wrapper { + transform: inherit; +} diff --git a/src/app/components/heading-section/heading-section.component.ts b/src/app/components/heading-section/heading-section.component.ts new file mode 100644 index 0000000..23aacf5 --- /dev/null +++ b/src/app/components/heading-section/heading-section.component.ts @@ -0,0 +1,38 @@ +import { + Component, + ElementRef, + Input, + ViewChild +} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {HeadingBoxComponent} from "../heading-box/heading-box.component"; + +@Component({ + selector: 'heading-section', + standalone: true, + imports: [CommonModule, HeadingBoxComponent], + templateUrl: './heading-section.component.html', + styleUrl: './heading-section.component.scss' +}) +export class HeadingSectionComponent { + + @Input({required: true}) heading!: string; + @Input({required: false}) width: any = "100%"; + + @ViewChild('heading_box') headingRef: ElementRef; + @ViewChild('contentWrapper') contentWrapper: ElementRef | undefined; + + getParts(): HTMLElement[] { + if (this.headingRef && this.contentWrapper) { + const parts = [this.headingRef.nativeElement]; + const children = this.contentWrapper.nativeElement.children; + for (let i = 0; i < children.length; i++) { + const part = children[i]; + parts.push(part); + } + return parts; + } else { + return []; + } + } +} diff --git a/src/app/components/lifeline-entry/lifeline-entry.component.html b/src/app/components/lifeline-entry/lifeline-entry.component.html new file mode 100644 index 0000000..1250d0e --- /dev/null +++ b/src/app/components/lifeline-entry/lifeline-entry.component.html @@ -0,0 +1,14 @@ +
+

{{ title }}

+

+ {{ subTitle }} + {{ date }} +

+ +

+ +

+ +
diff --git a/src/app/components/lifeline-entry/lifeline-entry.component.scss b/src/app/components/lifeline-entry/lifeline-entry.component.scss new file mode 100644 index 0000000..23a99be --- /dev/null +++ b/src/app/components/lifeline-entry/lifeline-entry.component.scss @@ -0,0 +1,9 @@ +.lifeline-entry-title { + letter-spacing: 2px; +} + +.lifeline-entry-subtitle { + display: flex; + justify-content: space-between; + font-style: italic; +} diff --git a/src/app/components/lifeline-entry/lifeline-entry.component.ts b/src/app/components/lifeline-entry/lifeline-entry.component.ts new file mode 100644 index 0000000..1eb51f4 --- /dev/null +++ b/src/app/components/lifeline-entry/lifeline-entry.component.ts @@ -0,0 +1,18 @@ +import {Component, Input} from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'lifeline-entry', + standalone: true, + imports: [CommonModule], + templateUrl: './lifeline-entry.component.html', + styleUrl: './lifeline-entry.component.scss' +}) +export class LifelineEntryComponent { + + @Input({required: true}) title!: string; + @Input({required: true}) subTitle!: string; + @Input({required: true}) date!: string; + @Input({required: true}) bulletPoints!: string[]; + +} diff --git a/src/app/heading-box/heading-box.component.html b/src/app/heading-box/heading-box.component.html deleted file mode 100644 index 407dcb3..0000000 --- a/src/app/heading-box/heading-box.component.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
-
-

- {{ text }} -

-
-
-
diff --git a/src/styles.scss b/src/styles.scss index fbfd5b1..bde0e2b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -49,8 +49,18 @@ body { --color-grey-medium-1: #CACACA; --color-white-darker: #E9E8E7; + --text-font-size: 2.3vh; + --text-color: var(--color-grey-dark-2); + --heading-color: var(--color-grey-dark-1); + .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); } } + +.text { + color: var(--color-grey-dark-2); + font-size: var(--text-font-size); + font-weight: 50; +} diff --git a/tsconfig.json b/tsconfig.json index 678336b..775e06d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,6 +18,7 @@ "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, + "strictPropertyInitialization": false, "lib": [ "ES2022", "dom"