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