Added introduction and images for some projects

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