start new design

angular.json

@@ -58,7 +58,9 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css"
             ],
             "scripts": []
           },
@@ -118,7 +120,9 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css"
             ],
             "scripts": []
           }

package.json

@@ -11,16 +11,16 @@
   "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",
+    "primeicons": "^6.0.1",
+    "primeng": "^17.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

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;
+  }
+}

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." },
+    ];
+  }
 }

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;
+}