-
-
-
- Hello, {{ title }}
-Congratulations! Your app is running. 🎉
-
-
- @for (item of [
- { title: 'Explore the Docs', link: 'https://angular.dev' },
- { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
- { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
- { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
- { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
- ]; track item.title) {
-
- {{ item.title }}
-
-
- }
-
-
+
+
-
-
-
-
-
-
-
-
-
-
+
+
Axel Herrmann
+Software Engineer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..c4f09e9 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,36 @@
+#main-background {
+
+}
+#main-heading {
+ font-size: 13vh;
+ color: #ffffff;
+ letter-spacing: 3vh;
+ font-weight: 10;
+ font-family: Copperplate, serif;
+ margin-bottom: 3vh;
+}
+#main-subheading {
+ @extend #main-heading;
+ font-size: 3vh;
+ letter-spacing: 1vh;
+ font-style: italic;
+ transform: translateX(-20vw);
+}
+
+.dot {
+ height: 25px;
+ width: 25px;
+ background-color: #ffffff;
+ border-radius: 50%;
+ border: 3px solid #a1a1a1;
+ display: inline-block;
+}
+
+:host ::ng-deep {
+ .p-card.p-component {
+ //background: black;
+ }
+ .p-card-content {
+ padding: 0;
+ }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d708535..b6a04e2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,13 +1,35 @@
import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+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";
+
+
+interface EducationItem {
+ heading: string;
+ subheading: string;
+ date: string;
+ content: string;
+ bulletPoints?: string[];
+}
@Component({
selector: 'app-root',
standalone: true,
- imports: [CommonModule],
+ imports: [CommonModule, NgOptimizedImage, TimelineModule, CardModule, ButtonModule, BadgeModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
- title = 'CV';
+
+ education: EducationItem[];
+
+ constructor() {
+ this.education = [
+ { heading: 'Grundschule', subheading: 'Berkenschule Holzgerlingen', date: '09/2008-07/2012', content: "In der Grundschule hatte ich zwar noch keine Berührungen mit Informatik oder technischen Themen, doch Mathe hat sich schenll als mein Lieblingsfach herausgestellt." },
+ { heading: 'Allgemeine Hochschulreife', subheading: 'Schönbuch-Gymnasium Holzgerlingen', date: '09/2012-07/2020', bulletPoints: ["Abschlussnote: 1,4"], content: "Neben der allgemeinen Bildung habe ich hier meine ersten Erfahrungen in der Informatik sammeln können. Ab der Oberstufe habe ich Informatikunterricht besucht." },
+ { heading: 'Software Engineering B.Sc.', subheading: 'Universität Stuttgart', date: '10/2020-04/2023', bulletPoints: ["Voraussichtliche Abschlussnote: 2.0"], content: "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." },
+ ];
+ }
}
diff --git a/src/assets/avatar.png b/src/assets/avatar.png
new file mode 100644
index 0000000..fdb35e8
Binary files /dev/null and b/src/assets/avatar.png differ
diff --git a/src/styles.scss b/src/styles.scss
index 3b091de..6da9971 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,36 +1,39 @@
+@import "primeng/resources/themes/lara-light-blue/theme.css";
+@import "primeng/resources/primeng.css";
+@import "primeicons/primeicons.css";
-// 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.
+/* You can add global styles to this file, and also import other style files */
-// 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();
+html, body { height: 100% !important }
+body {
+ margin: 0;
+ font-family: Roboto, "Helvetica Neue", sans-serif;
+ overflow-x: hidden;
+}
-// 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);
+// 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;
-// The warn palette is optional (defaults to red).
-$CV-warn: mat.define-palette(mat.$red-palette);
+ --text-font-size: 2.1vh;
+ --text-color: var(--color-grey-dark-2);
+ --heading-color: var(--color-grey-dark-1);
-// 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,
- )
-));
+ .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); }
-// 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);
+ --vhw: calc(vh * vw);
+}
-/* You can add global styles to this file, and also import other style files */
+.text {
+ color: var(--color-grey-dark-2);
+ font-size: var(--text-font-size);
+ font-weight: 50;
+ text-align: justify;
+ line-height: 3.2vh;
+}
Bildungsweg
++ {{ educationItem.content }} +
+
+
+