Added introduction and images for some projects

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

src/app/pages/about/about.component.html

@@ -116,18 +116,21 @@
         <div class="company-row">
           {{ (entry.key + '.DESCRIPTION') | translate }}
         </div>
+        @if (entry.externalLink) {
+          <div class="link-row">
+            <a class="link-with-icon"
+               href="{{entry.externalLink}}"
+               target="_blank"
+               rel="noopener noreferrer">
+              <mat-icon>open_in_new</mat-icon>
+              {{ (entry.key + '.LINK_EXTERNAL') | translate }}
+            </a>
+          </div>
+        }
         <div class="link-row">
           <a class="link-with-icon"
-             href="{{entry.externalLink}}"
-             target="_blank"
-             rel="noopener noreferrer">
-            <mat-icon>open_in_new</mat-icon>
-            {{ (entry.key + '.LINK_EXTERNAL') | translate }}
-          </a>
-        </div>
-        <div class="link-row">
-          <a class="link-with-icon"
-             href="{{entry.internalLink}}"
+             [routerLink]="['/projects']"
+             [queryParams]="{ project: entry.identifier }"
              rel="noopener noreferrer">
             <mat-icon>link</mat-icon>
             {{ (entry.key + '.LINK_INTERNAL') | translate }}

src/app/pages/about/about.component.ts

@@ -8,6 +8,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { TranslateModule } from '@ngx-translate/core';
 import {UrlConstants} from '../../constants/UrlConstants';
 import {AssetsConstants} from '../../constants/AssetsConstants';
+import {RouterLink} from '@angular/router';
 
 
 @Component({
@@ -20,8 +21,9 @@ import {AssetsConstants} from '../../constants/AssetsConstants';
     MatIconModule,
     MatButtonModule,
     MatDividerModule,
-    TranslateModule
-],
+    TranslateModule,
+    RouterLink
+  ],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'
 })
@@ -71,17 +73,26 @@ export class AboutComponent {
     {
       key: 'ABOUT.PROJECT.P2',
       externalLink: 'https://andreas-dahm.eu/',
-      internalLink: 'projects'
+      internalLink: 'projects',
+      identifier: 'playground',
     },
     {
       key: 'ABOUT.PROJECT.P1',
       externalLink: 'https://store.steampowered.com/app/1532640/El_Mucho/',
-      internalLink: 'projects'
+      internalLink: 'projects',
+      identifier: 'elmucho',
     },
     {
       key: 'ABOUT.PROJECT.P0',
       externalLink: 'https://itch.io/c/6628860/lobos-collection',
-      internalLink: 'projects'
+      internalLink: 'projects',
+      identifier: 'gamejams',
+    },
+    {
+      key: 'ABOUT.PROJECT.DIPLOMA',
+      externalLink: '',
+      internalLink: 'projects',
+      identifier: 'diploma',
     }
   ];
 

src/app/pages/projects/projects.component.html

@@ -1,6 +1,6 @@
-<mat-accordion class="project-headers-align" multi>
-  @for (project of allProjects; track project.title) {
-    <mat-expansion-panel>
+<mat-accordion class="project-headers-align">
+  @for (project of allProjects; track project) {
+    <mat-expansion-panel [expanded]="isExpanded(project.identifier)">
       <mat-expansion-panel-header>
         <mat-panel-title>{{ project.title | translate }}</mat-panel-title>
         <mat-panel-description>
@@ -8,7 +8,15 @@
           <mat-icon>{{ project.icon }}</mat-icon>
         </mat-panel-description>
       </mat-expansion-panel-header>
-
+      <p>{{ project.introduction | translate }}</p>
+      @if (project.images.length > 0)
+      {
+        <div class="gallery">
+          @for (img of project.images; track img) {
+            <img class="gallery-img" [src]="img" [alt]="project.title | translate" />
+          }
+        </div>
+      }
     </mat-expansion-panel>
   }
 </mat-accordion>

src/app/pages/projects/projects.component.scss

@@ -6,3 +6,16 @@
 .project-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
   margin-left: 8px;
 }
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
+  gap: 12px;
+}
+
+.gallery-img {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 16px;
+}

src/app/pages/projects/projects.component.ts

@@ -1,11 +1,16 @@
-import { Component } from '@angular/core';
+import {Component, inject, signal} 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';
+import {ActivatedRoute} from '@angular/router';
+import {AssetsConstants} from '../../constants/AssetsConstants';
 
 export interface Projects {
+  identifier: string;
   title: string,
   shortDescription: string,
+  introduction: string,
+  images: string[],
   icon: string,
 }
 
@@ -18,27 +23,58 @@ export interface Projects {
     MatExpansionPanelTitle,
     MatExpansionPanelDescription,
     MatIcon,
-    TranslatePipe
+    TranslatePipe,
   ],
   templateUrl: './projects.component.html',
   styleUrl: './projects.component.scss',
 })
 export class ProjectsComponent {
+
+    private readonly route = inject(ActivatedRoute);
+    selectedKey = signal<string | null>(null);
+
     allProjects: Projects[] = [
       {
+        identifier: "playground",
         title: 'PROJECTS.PLAYGROUND.TITLE',
         shortDescription: 'PROJECTS.PLAYGROUND.SHORT_DESCRIPTION',
+        introduction: 'PROJECTS.PLAYGROUND.INTRODUCTION',
+        images: [],
         icon: 'web'
       },
       {
+        identifier: "elmucho",
         title: 'PROJECTS.EL_MUCHO.TITLE',
         shortDescription: 'PROJECTS.EL_MUCHO.SHORT_DESCRIPTION',
+        introduction: 'PROJECTS.EL_MUCHO.INTRODUCTION',
+        images: [AssetsConstants.EL_MUCHO_1, AssetsConstants.EL_MUCHO_2, AssetsConstants.EL_MUCHO_3, AssetsConstants.EL_MUCHO_4],
         icon: 'sports_esports'
       },
       {
+        identifier: "gamejams",
         title: 'PROJECTS.GAME_JAMS.TITLE',
         shortDescription: 'PROJECTS.GAME_JAMS.SHORT_DESCRIPTION',
+        introduction: 'PROJECTS.GAME_JAMS.INTRODUCTION',
+        images: [AssetsConstants.GAME_JAMS_1, AssetsConstants.GAME_JAMS_2, AssetsConstants.GAME_JAMS_3],
         icon: 'videogame_asset'
+      },
+      {
+        identifier: "diploma",
+        title: 'PROJECTS.DIPLOMA.TITLE',
+        shortDescription: 'PROJECTS.DIPLOMA.SHORT_DESCRIPTION',
+        introduction: 'PROJECTS.DIPLOMA.INTRODUCTION',
+        images: [AssetsConstants.DIPLOMA_1, AssetsConstants.DIPLOMA_2, AssetsConstants.DIPLOMA_3, AssetsConstants.DIPLOMA_4, AssetsConstants.DIPLOMA_5, AssetsConstants.DIPLOMA_6],
+        icon: 'history_edu'
       }
     ]
+
+  constructor() {
+    this.route.queryParamMap.subscribe(params => {
+      this.selectedKey.set(params.get('project'));
+    });
+  }
+
+  isExpanded(projectKey: string): boolean {
+    return this.selectedKey() === projectKey;
+  }
 }