From 17585bfacae330e047721886a3fc859cd4416ab2 Mon Sep 17 00:00:00 2001 From: Lobo Date: Sat, 13 Dec 2025 13:57:49 +0100 Subject: [PATCH 1/2] Added project accordion next will be more content --- src/app/pages/about/about.component.html | 10 ++-- .../pages/projects/projects.component.html | 20 +++++--- .../pages/projects/projects.component.scss | 29 ++--------- src/app/pages/projects/projects.component.ts | 37 +++++++++++++- src/assets/i18n/de.json | 14 ++++++ src/assets/i18n/en.json | 14 ++++++ src/styles.scss | 50 +++++++++++++++++++ 7 files changed, 136 insertions(+), 38 deletions(-) diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html index 8c816ba..32848b8 100644 --- a/src/app/pages/about/about.component.html +++ b/src/app/pages/about/about.component.html @@ -47,7 +47,7 @@

{{ 'ABOUT.SECTION.PRIMARY' | translate }}

- @for (s of primarySkills; track primarySkills) { + @for (s of primarySkills; track s) { {{ s | translate }} } @@ -56,7 +56,7 @@

{{ 'ABOUT.SECTION.TOOLSET' | translate }}

- @for (t of toolset; track toolset) { + @for (t of toolset; track t) { {{ t | translate }} } @@ -67,7 +67,7 @@

{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}

- @for (entry of xpKeys; track entry) { + @for (entry of xpKeys; track entry.key) {
@@ -108,7 +108,7 @@

{{ 'ABOUT.SECTION.PROJECTS' | translate }}

- @for (entry of projectKeys; track entry) { + @for (entry of projectKeys; track entry.key) {
{{ (entry.key + '.TITLE') | translate }} @@ -155,7 +155,7 @@
- @for (entry of educationKeys; track entry) { + @for (entry of educationKeys; track entry.key) {
{{ (entry.key + '.WHERE') | translate }} {{ (entry.key + '.WHEN') | translate }} diff --git a/src/app/pages/projects/projects.component.html b/src/app/pages/projects/projects.component.html index ddcf4ce..ce4d77d 100644 --- a/src/app/pages/projects/projects.component.html +++ b/src/app/pages/projects/projects.component.html @@ -1,6 +1,14 @@ -
-
- -
-

Work in progress…

-
+ + @for (project of allProjects; track project.title) { + + + {{ project.title | translate }} + + {{ project.shortDescription | translate}} + {{ project.icon }} + + + + + } + diff --git a/src/app/pages/projects/projects.component.scss b/src/app/pages/projects/projects.component.scss index 56ce4f9..9e6a577 100644 --- a/src/app/pages/projects/projects.component.scss +++ b/src/app/pages/projects/projects.component.scss @@ -1,29 +1,8 @@ -.wip { - display: flex; - flex-direction: column; +.project-headers-align .mat-expansion-panel-header-description { + justify-content: space-between; align-items: center; - gap: .75rem; - padding: 2rem; - opacity: .9; } -.dots { - display: flex; - gap: .5rem; -} - -.dots span { - width: 10px; - height: 10px; - background: var(--app-fg); - border-radius: 50%; - animation: pulse 1.4s infinite ease-in-out; -} - -.dots span:nth-child(2) { animation-delay: .2s; } -.dots span:nth-child(3) { animation-delay: .4s; } - -@keyframes pulse { - 0%, 80%, 100% { opacity: .3; transform: scale(1); } - 40% { opacity: 1; transform: scale(1.4); } +.project-headers-align .mat-mdc-form-field + .mat-mdc-form-field { + margin-left: 8px; } diff --git a/src/app/pages/projects/projects.component.ts b/src/app/pages/projects/projects.component.ts index 2b83d2e..bc1b068 100644 --- a/src/app/pages/projects/projects.component.ts +++ b/src/app/pages/projects/projects.component.ts @@ -1,11 +1,44 @@ import { Component } from '@angular/core'; +import {MatAccordion, MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelHeader, MatExpansionPanelTitle} from '@angular/material/expansion'; +import {MatIcon} from '@angular/material/icon'; +import {TranslatePipe} from '@ngx-translate/core'; + +export interface Projects { + title: string, + shortDescription: string, + icon: string, +} @Component({ selector: 'app-projects', - imports: [], + imports: [ + MatAccordion, + MatExpansionPanel, + MatExpansionPanelHeader, + MatExpansionPanelTitle, + MatExpansionPanelDescription, + MatIcon, + TranslatePipe + ], templateUrl: './projects.component.html', styleUrl: './projects.component.scss', }) export class ProjectsComponent { - + allProjects: Projects[] = [ + { + title: 'PROJECTS.PLAYGROUND.TITLE', + shortDescription: 'PROJECTS.PLAYGROUND.SHORT_DESCRIPTION', + icon: 'web' + }, + { + title: 'PROJECTS.EL_MUCHO.TITLE', + shortDescription: 'PROJECTS.EL_MUCHO.SHORT_DESCRIPTION', + icon: 'sports_esports' + }, + { + title: 'PROJECTS.GAME_JAMS.TITLE', + shortDescription: 'PROJECTS.GAME_JAMS.SHORT_DESCRIPTION', + icon: 'videogame_asset' + } + ] } diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 9028331..7d5e7f8 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -215,5 +215,19 @@ "WHAT": "Kein Abschluss. Wechsel zur Hauptschule" } } + }, + "PROJECTS": { + "PLAYGROUND": { + "TITLE": "Playground Website", + "SHORT_DESCRIPTION": "Hier geht es um diese Webseite." + }, + "EL_MUCHO": { + "TITLE": "El Mucho", + "SHORT_DESCRIPTION": "Hier geht es um mein ersten Spiel auf Steam." + }, + "GAME_JAMS": { + "TITLE": "Game Jams", + "SHORT_DESCRIPTION": "Hier geht es meine Teilnahme an mehreren Game Jams." + } } } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index c26cc5c..7a2061a 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -205,5 +205,19 @@ "WHAT": "No degree (transferred to lower secondary school)" } } + }, + "PROJECTS": { + "PLAYGROUND": { + "TITLE": "Playground Website", + "SHORT_DESCRIPTION": "This is about this website." + }, + "EL_MUCHO": { + "TITLE": "El Mucho", + "SHORT_DESCRIPTION": "This is about my first game on steam." + }, + "GAME_JAMS": { + "TITLE": "Game Jams", + "SHORT_DESCRIPTION": "This is about my participation at several game jams." + } } } diff --git a/src/styles.scss b/src/styles.scss index 38543ce..3d73efa 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -143,3 +143,53 @@ a { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } + +/* accordion */ +/* expansion panels like cards */ +.mat-accordion { + display: grid; + gap: 8px; +} + +.mat-accordion .mat-expansion-panel { + border-radius: var(--card-radius) !important; + background: var(--card-bg) !important; + overflow: hidden; /* ok */ + border: none !important; +} + +.mat-accordion .mat-expansion-panel:hover { + box-shadow: var(--card-shadow-hover) !important; + transform: translateY(-2px); + +} + +.mat-accordion .mat-expansion-panel::before { + content: ''; + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + + box-shadow: + inset 0 1px 0 var(--card-border-inset), + inset 0 -1px 0 var(--card-border-inset-dark); +} + +.mat-accordion .mat-expansion-panel::after { + content: ''; + position: absolute; + inset: -1px; + border-radius: inherit; + pointer-events: none; + + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04); +} + +.mat-expansion-panel-header { + background: transparent !important; +} + +.mat-expansion-panel-body { + padding-top: 0; +} From 0f1ff27ea1e37dc020e53a98294b9b597c85c637 Mon Sep 17 00:00:00 2001 From: Lobo Date: Sun, 14 Dec 2025 17:08:53 +0100 Subject: [PATCH 2/2] Added introduction and images for some projects --- src/app/constants/AssetsConstants.ts | 18 ++++++++ src/app/pages/about/about.component.html | 23 +++++----- src/app/pages/about/about.component.ts | 21 ++++++--- .../pages/projects/projects.component.html | 16 +++++-- .../pages/projects/projects.component.scss | 13 ++++++ src/app/pages/projects/projects.component.ts | 40 +++++++++++++++++- src/assets/i18n/de.json | 24 +++++++++-- src/assets/i18n/en.json | 24 +++++++++-- src/assets/projects/diploma/1.jpg | Bin 0 -> 36745 bytes src/assets/projects/diploma/2.jpg | Bin 0 -> 36542 bytes src/assets/projects/diploma/3.jpg | Bin 0 -> 29588 bytes src/assets/projects/diploma/4.jpg | Bin 0 -> 18286 bytes src/assets/projects/diploma/5.jpg | Bin 0 -> 16917 bytes src/assets/projects/diploma/6.jpg | Bin 0 -> 16097 bytes src/assets/projects/el-mucho/1.jpg | Bin 0 -> 435877 bytes src/assets/projects/el-mucho/2.jpg | Bin 0 -> 207157 bytes src/assets/projects/el-mucho/3.jpg | Bin 0 -> 756994 bytes src/assets/projects/el-mucho/4.jpg | Bin 0 -> 759476 bytes src/assets/projects/game-jams/1.png | Bin 0 -> 106555 bytes src/assets/projects/game-jams/2.png | Bin 0 -> 1596912 bytes src/assets/projects/game-jams/3.png | Bin 0 -> 29344 bytes 21 files changed, 152 insertions(+), 27 deletions(-) create mode 100644 src/assets/projects/diploma/1.jpg create mode 100644 src/assets/projects/diploma/2.jpg create mode 100644 src/assets/projects/diploma/3.jpg create mode 100644 src/assets/projects/diploma/4.jpg create mode 100644 src/assets/projects/diploma/5.jpg create mode 100644 src/assets/projects/diploma/6.jpg create mode 100644 src/assets/projects/el-mucho/1.jpg create mode 100644 src/assets/projects/el-mucho/2.jpg create mode 100644 src/assets/projects/el-mucho/3.jpg create mode 100644 src/assets/projects/el-mucho/4.jpg create mode 100644 src/assets/projects/game-jams/1.png create mode 100644 src/assets/projects/game-jams/2.png create mode 100644 src/assets/projects/game-jams/3.png diff --git a/src/app/constants/AssetsConstants.ts b/src/app/constants/AssetsConstants.ts index 4727ef3..adaebc7 100644 --- a/src/app/constants/AssetsConstants.ts +++ b/src/app/constants/AssetsConstants.ts @@ -13,4 +13,22 @@ static readonly TERAPORT_LOGO = '/assets/logos/teraport_gmbh_logo.jpg'; static readonly CV: 'assets/cv/andreas-dahm-cv.pdf'; + + //project images + static readonly EL_MUCHO_1 = '/assets/projects/el-mucho/1.jpg'; + static readonly EL_MUCHO_2 = '/assets/projects/el-mucho/2.jpg'; + static readonly EL_MUCHO_3 = '/assets/projects/el-mucho/3.jpg'; + static readonly EL_MUCHO_4 = '/assets/projects/el-mucho/4.jpg'; + + static readonly GAME_JAMS_1 = '/assets/projects/game-jams/1.png'; + static readonly GAME_JAMS_2 = '/assets/projects/game-jams/2.png'; + static readonly GAME_JAMS_3 = '/assets/projects/game-jams/3.png'; + + static readonly DIPLOMA_1 = '/assets/projects/diploma/1.jpg'; + static readonly DIPLOMA_2 = '/assets/projects/diploma/2.jpg'; + static readonly DIPLOMA_3 = '/assets/projects/diploma/3.jpg'; + static readonly DIPLOMA_4 = '/assets/projects/diploma/4.jpg'; + static readonly DIPLOMA_5 = '/assets/projects/diploma/5.jpg'; + static readonly DIPLOMA_6 = '/assets/projects/diploma/6.jpg'; + } diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html index 32848b8..8879f5a 100644 --- a/src/app/pages/about/about.component.html +++ b/src/app/pages/about/about.component.html @@ -116,18 +116,21 @@
{{ (entry.key + '.DESCRIPTION') | translate }}
+ @if (entry.externalLink) { + + } -