Added project accordion next will be more content

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