refactored projects site

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

@@ -1,11 +1,13 @@
-import {Component, inject, signal, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import {MatAccordion, MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelHeader, MatExpansionPanelTitle} from '@angular/material/expansion';
+import {Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {MatCardModule} from '@angular/material/card';
+import {MatChipsModule} from '@angular/material/chips';
 import {MatIcon} from '@angular/material/icon';
 import {TranslatePipe, TranslateService} from '@ngx-translate/core';
 import {ActivatedRoute} from '@angular/router';
 import {AssetsConstants} from '../../constants/AssetsConstants';
 import {MatDialog} from '@angular/material/dialog';
-import {ImageDialogComponent} from '../../layout/imageDialog/image.component';
+import {MatButtonModule} from '@angular/material/button';
+import {ProjectDialogComponent} from './dialog/project-dialog.component';
 
 
 export interface Projects {
@@ -18,18 +20,18 @@ export interface Projects {
   assets: string,
   link: string,
   bulletPoints: string[],
+  isFeatured: boolean,
+  technologies: string[]
 }
 
 @Component({
   selector: 'app-projects',
   imports: [
-    MatAccordion,
-    MatExpansionPanel,
-    MatExpansionPanelHeader,
-    MatExpansionPanelTitle,
-    MatExpansionPanelDescription,
+    MatCardModule,
+    MatChipsModule,
     MatIcon,
-    TranslatePipe
+    TranslatePipe,
+    MatButtonModule
   ],
   templateUrl: './projects.component.html',
   styleUrl: './projects.component.scss',
@@ -41,8 +43,6 @@ export class ProjectsComponent {
     private readonly dialog = inject(MatDialog);
     private readonly translateService = inject(TranslateService);
 
-    selectedKey = signal<string | null>(null);
-
     allProjects: Projects[] = [
       {
         identifier: "playground",
@@ -53,7 +53,14 @@ export class ProjectsComponent {
         icon: 'web',
         assets: '',
         link: 'https://andreas-dahm.eu',
-        bulletPoints: []
+        bulletPoints: [
+          'PROJECTS.PLAYGROUND.BULLET_1',
+          'PROJECTS.PLAYGROUND.BULLET_2',
+          'PROJECTS.PLAYGROUND.BULLET_3',
+          'PROJECTS.PLAYGROUND.BULLET_4',
+        ],
+        isFeatured: false,
+        technologies: ['Angular', 'TypeScript', 'SCSS', 'HTML', 'GitHub Actions', 'Docker']
       },
       {
         identifier: "elmucho",
@@ -63,8 +70,15 @@ export class ProjectsComponent {
         images: [AssetsConstants.EL_MUCHO_1, AssetsConstants.EL_MUCHO_2, AssetsConstants.EL_MUCHO_3, AssetsConstants.EL_MUCHO_4],
         icon: 'sports_esports',
         assets: '',
-        link: 'https://store.steampowered.com/app/1532640/El_Mucho/',
-        bulletPoints: []
+        link: 'https.store.steampowered.com/app/1532640/El_Mucho/',
+        bulletPoints: [
+          'PROJECTS.EL_MUCHO.BULLET_1',
+          'PROJECTS.EL_MUCHO.BULLET_2',
+          'PROJECTS.EL_MUCHO.BULLET_3',
+          'PROJECTS.EL_MUCHO.BULLET_4',
+        ],
+        isFeatured: true,
+        technologies: ['Unity', 'C#', 'Steamworks', 'Git']
       },
       {
         identifier: "gamejams",
@@ -74,8 +88,15 @@ export class ProjectsComponent {
         images: [AssetsConstants.GAME_JAMS_1, AssetsConstants.GAME_JAMS_2, AssetsConstants.GAME_JAMS_3],
         icon: 'videogame_asset',
         assets: '',
-        link: 'https://itch.io/c/6628860/lobos-collection',
-        bulletPoints: []
+        link: 'https.itch.io/c/6628860/lobos-collection',
+        bulletPoints: [
+          'PROJECTS.GAME_JAMS.BULLET_1',
+          'PROJECTS.GAME_JAMS.BULLET_2',
+          'PROJECTS.GAME_JAMS.BULLET_3',
+          'PROJECTS.GAME_JAMS.BULLET_4',
+        ],
+        isFeatured: false,
+        technologies: ['Unity', 'C#', 'Git']
       },
       {
         identifier: "diploma",
@@ -85,32 +106,33 @@ export class ProjectsComponent {
         images: [AssetsConstants.DIPLOMA_1, AssetsConstants.DIPLOMA_2, AssetsConstants.DIPLOMA_3, AssetsConstants.DIPLOMA_4, AssetsConstants.DIPLOMA_5, AssetsConstants.DIPLOMA_6],
         icon: 'history_edu',
         assets: AssetsConstants.DIPLOMA,
-        link: 'https://www.th-bingen.de',
-        bulletPoints: []
+        link: 'https.www.th-bingen.de',
+        bulletPoints: [
+          'PROJECTS.DIPLOMA.BULLET_1',
+          'PROJECTS.DIPLOMA.BULLET_2',
+          'PROJECTS.DIPLOMA.BULLET_3',
+          'PROJECTS.DIPLOMA.BULLET_4',
+        ],
+        isFeatured: false,
+        technologies: ['C++', 'OpenGL', 'Qt', '3D-Scanner']
       }
     ]
 
+  featuredProject = computed(() => this.allProjects.find(p => p.isFeatured));
+  otherProjects = computed(() => this.allProjects.filter(p => !p.isFeatured));
+
+
   constructor() {
     this.route.queryParamMap.subscribe(params => {
-      this.selectedKey.set(params.get('project'));
+      // this.selectedKey.set(params.get('project'));
     });
   }
 
-  isExpanded(projectKey: string): boolean {
-    return this.selectedKey() === projectKey;
-  }
-
-  openImage(title: string, src: string) {
-      const translatedTitle = this.translateService.instant(title);
-      this.dialog.open(ImageDialogComponent, {
-        data: { title: translatedTitle, src },
-        width: '96vw',
-        height: '96vh',
-        maxWidth: '96vw',
-        maxHeight: '96vh',
-        panelClass: 'image-dialog-panel',
-        autoFocus: false,
-        restoreFocus: true,
-      });
+  openProjectDialog(project: Projects) {
+    this.dialog.open(ProjectDialogComponent, {
+      data: project,
+      width: '90vw',
+      maxWidth: '900px',
+    });
   }
 }