-
-
- 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 @@
+
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 @@
-
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"