Added project accordion next will be more content

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

@@ -47,7 +47,7 @@
       <div>
         <h3>{{ 'ABOUT.SECTION.PRIMARY' | translate }}</h3>
         <mat-chip-set aria-label="Primary skills">
-          @for (s of primarySkills; track primarySkills)          {
+          @for (s of primarySkills; track s) {
             <mat-chip >{{ s | translate }}</mat-chip>
           }
         </mat-chip-set>
@@ -56,7 +56,7 @@
       <div>
         <h3>{{ 'ABOUT.SECTION.TOOLSET' | translate }}</h3>
         <mat-chip-set aria-label="Toolset">
-          @for (t of toolset; track toolset)          {
+          @for (t of toolset; track t)          {
             <mat-chip>{{ t | translate }}</mat-chip>
           }
         </mat-chip-set>
@@ -67,7 +67,7 @@
   <mat-card class="experience">
     <h2>{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
     <div class="xp-list">
-      @for (entry of xpKeys; track entry) {
+      @for (entry of xpKeys; track entry.key) {
         <div class="xp-item">
           <div class="xp-head-grid">
             <div class="logo-wrap">
@@ -108,7 +108,7 @@
     <h2>{{ 'ABOUT.SECTION.PROJECTS' | translate }}</h2>
 
     <div class="xp-list">
-      @for (entry of projectKeys; track entry) {
+      @for (entry of projectKeys; track entry.key) {
       <div class="xp-item">
         <div class="head-row">
           <strong>{{ (entry.key + '.TITLE') | translate }}</strong>
@@ -155,7 +155,7 @@
 
     <div class="xp-list">
       <div class="xp-item">
-        @for (entry of educationKeys; track entry) {
+        @for (entry of educationKeys; track entry.key) {
           <div class="head-row">
             <strong>{{ (entry.key + '.WHERE') | translate }}</strong>
             <span class="time">{{ (entry.key + '.WHEN') | translate }}</span>

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

@@ -1,6 +1,14 @@
-<div class="wip">
-  <div class="dots">
-    <span></span><span></span><span></span>
-  </div>
-  <p>Work in progress…</p>
-</div>
+<mat-accordion class="project-headers-align" multi>
+  @for (project of allProjects; track project.title) {
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>{{ project.title | translate }}</mat-panel-title>
+        <mat-panel-description>
+          {{ project.shortDescription | translate}}
+          <mat-icon>{{ project.icon }}</mat-icon>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+
+    </mat-expansion-panel>
+  }
+</mat-accordion>

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

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

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

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

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