Feature/music

frontend/package.json

@@ -79,6 +79,7 @@
     "@typescript-eslint/eslint-plugin": "^8.60.1",
     "@typescript-eslint/parser": "^8.60.1",
     "angular-eslint": "21.4.0",
+    "baseline-browser-mapping": "^2.10.34",
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-deprecation": "^3.0.0",

frontend/src/app/app.component.scss

@@ -6,17 +6,28 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
+  z-index: 0;
+  pointer-events: none;
 }
 
 .main-content {
   grid-area: main;
   background: transparent;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
   grid-column: 1 / -1;
+  min-height: 0;
   height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 0 1rem 1rem;
+}
+
+.main-content > * {
+  width: 100%;
 }
 
 app-header {
@@ -30,6 +41,8 @@ app-footer {
 }
 
 .app-container {
+  position: relative;
+  z-index: 1;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto auto 1fr 1fr 1fr 1fr auto;
@@ -44,4 +57,5 @@ app-footer {
     'footer footer footer footer';
   height: 100vh;
   background: transparent;
+  overflow: hidden;
 }

frontend/src/app/app.config.ts

@@ -1,9 +1,14 @@
 import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideClientHydration(withNoIncrementalHydration())],
+  providers: [
+    provideRouter(routes),
+    provideClientHydration(withNoIncrementalHydration()),
+    provideHttpClient(),
+  ],
 };

frontend/src/app/pages/about/about.component.scss

@@ -15,6 +15,7 @@
     background: rgba($color-background-dark, 0.8);
     padding: 1rem;
     border-radius: 1rem;
+    border: 2px solid $color-accent;
 
     .profile-image {
       padding-top: 1rem;
@@ -45,6 +46,8 @@
     width: min(100%, 38rem);
     background: rgba($color-background-dark, 0.8);
     padding: 1rem;
+    border: 2px solid $color-accent;
+    border-radius: 1rem;
 
     .title {
       text-align: center;

frontend/src/app/pages/music/music.component.html

@@ -1 +1,28 @@
-<p>music works!</p>
+<section class="discographies">
+  <h1>Discographies</h1>
+  @if (releases$ | async; as releases) {
+    @for (item of releases; track item.title) {
+      <article>
+        <img [src]="item.image" [alt]="item.title" title="Release cover" />
+        <div class="content">
+          <h3>{{ item.title }}</h3>
+          <time>{{ item.short_infos[0].released }}</time>
+          <p>{{ item.short_infos[0].songs }}</p>
+          <p>{{ item.short_infos[0].songs_length }}</p>
+          <p>{{ item.short_infos[0].bpm }}</p>
+          <div class="icons">
+            <a [href]="item.short_infos[0].spotify_link" target="_blank" rel="noopener noreferrer">
+              <img [src]="item.short_infos[0].spotify_icon" alt="Spotify" title="Spotify" />
+            </a>
+            <a [href]="item.short_infos[0].youtube_link" target="_blank" rel="noopener noreferrer">
+              <img [src]="item.short_infos[0].youtube_icon" alt="YouTube" title="YouTube" />
+            </a>
+            <a [href]="item.short_infos[0].itunes_link" target="_blank" rel="noopener noreferrer">
+              <img [src]="item.short_infos[0].itunes_icon" alt="iTunes" title="iTunes" />
+            </a>
+          </div>
+        </div>
+      </article>
+    }
+  }
+</section>

frontend/src/app/pages/music/music.component.scss

@@ -0,0 +1,91 @@
+@use 'variables' as *;
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.discographies {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: flex-start;
+  align-items: flex-start;
+  gap: 1.5em;
+  padding: 1em;
+  scroll-margin-top: 150px;
+  width: min(1500px, 100%);
+  margin-inline: auto;
+  box-sizing: border-box;
+
+  h1 {
+    flex-basis: 100%;
+    margin: 0;
+    color: $color-accent;
+    text-align: center;
+  }
+
+  article {
+    display: grid;
+    grid-template-rows: auto auto auto;
+    padding: 0.5em;
+    grid-gap: 0.5em;
+    width: min(420px, 100%);
+
+    > img {
+      grid-row: 1;
+      border: 2px solid $color-accent;
+      border-radius: 2em;
+      width: 100%;
+      height: auto;
+    }
+
+    .content {
+      grid-row: 3;
+      display: grid;
+      grid-template-columns: 20% 20% 35% 25%;
+      border: 2px solid $color-accent;
+      border-radius: 2em;
+      background: rgba($color-background-dark, 0.8);
+      padding: 1em;
+
+      h3 {
+        grid-column: 1/-1;
+        color: $color-accent;
+      }
+
+      time,
+      p {
+        margin: 2em 0 2em 0;
+        color: $color-text;
+      }
+    }
+  }
+
+  .content .icons {
+    grid-column: 1/-1;
+    display: flex;
+    justify-content: center;
+    padding: 0.5em;
+
+    img {
+      width: 128px;
+      height: 128px;
+      padding: 0.5em;
+      border: none;
+      border-radius: 0;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .discographies {
+    gap: 4.5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .discographies {
+    gap: 4.5rem;
+  }
+}

frontend/src/app/pages/music/music.component.ts

@@ -1,11 +1,47 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { catchError, map, Observable, of } from 'rxjs';
+
+interface ReleaseInfo {
+  released: number;
+  songs: string;
+  songs_length: string;
+  bpm: string;
+  spotify_icon: string;
+  spotify_link: string;
+  youtube_icon: string;
+  youtube_link: string;
+  itunes_icon: string;
+  itunes_link: string;
+}
+
+interface Release {
+  image: string;
+  title: string;
+  short_infos: ReleaseInfo[];
+}
+
+interface MusicData {
+  releases: Release[];
+}
 
 @Component({
   standalone: true,
   selector: 'app-music',
-  imports: [],
+  imports: [AsyncPipe],
   templateUrl: './music.component.html',
   styleUrl: './music.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MusicComponent {}
+export class MusicComponent {
+  private readonly http = inject(HttpClient);
+
+  readonly releases$: Observable<Release[]> = this.http
+    .get<MusicData>('assets/musicdata.json')
+    .pipe(
+      map((data) => data.releases ?? []),
+      catchError(() => of([])),
+    );
+}

frontend/src/assets/musicdata.json

@@ -0,0 +1,76 @@
+{
+  "releases": [
+    {
+      "image": "assets/resources/covers/Cover_Find_Flow.jpg",
+      "title": "Find Flow",
+      "short_infos": [
+        {
+          "released": 2025,
+          "songs": "1 Song",
+          "songs_length": "5 Min. 45 sec",
+          "bpm": "128 BPM",
+          "spotify_icon": "assets/resources/icons/spotify.png",
+          "spotify_link": "https://open.spotify.com/intl-de/album/7543yReuf6ojw47puZiymj?si=OzUlK7siRGmvHsgOb37NZg",
+          "youtube_icon": "assets/resources/icons/youtube.png",
+          "youtube_link": "https://music.youtube.com/watch?v=mUo69BB3f5c&si=_kBvkxY5C53BHzkH",
+          "itunes_icon": "assets/resources/icons/itunes.png",
+          "itunes_link": "https://music.apple.com/ch/album/find-flow/1839233312?i=1839233313"
+        }
+      ]
+    },
+    {
+      "image": "assets/resources/covers/Cover_Breathe_Again.png",
+      "title": "Breath Again",
+      "short_infos": [
+        {
+          "released": 2025,
+          "songs": "1 Song",
+          "songs_length": "4 Min. 04 sec",
+          "bpm": "143 BPM",
+          "spotify_icon": "assets/resources/icons/spotify.png",
+          "spotify_link": "https://open.spotify.com/intl-de/album/3Zl4tMXmSVCSeb9uIdTiRq?si=kLGm17jPRQGwpiciHCaxBA",
+          "youtube_icon": "assets/resources/icons/youtube.png",
+          "youtube_link": "https://music.youtube.com/watch?v=BS053uOLDrE&si=aYqkf_lj2ocs3Hyy",
+          "itunes_icon": "assets/resources/icons/itunes.png",
+          "itunes_link": "https://music.apple.com/ch/album/breathe-again/1827254948?i=1827254950"
+        }
+      ]
+    },
+    {
+      "image": "assets/resources/covers/Cover_Summer_Vibes.jpeg",
+      "title": "Summer Vibes",
+      "short_infos": [
+        {
+          "released": 2018,
+          "songs": "1 Song",
+          "songs_length": "4 Min. 31 sec",
+          "bpm": "128 BPM",
+          "spotify_icon": "assets/resources/icons/spotify.png",
+          "spotify_link": "https://open.spotify.com/album/2XFUE1SkxBwVkHoxWSJN3W",
+          "youtube_icon": "assets/resources/icons/youtube.png",
+          "youtube_link": "https://www.youtube.com/watch?v=9Fig45Lgfrw&list=PLPY7SNMth8dYYcc24wvGpjXMTP7x189oE",
+          "itunes_icon": "assets/resources/icons/itunes.png",
+          "itunes_link": "https://music.apple.com/us/album/summer-vibes/1410121451?i=1410121722"
+        }
+      ]
+    },
+    {
+      "image": "assets/resources/covers/Cover_Heart_in_Fire.jpeg",
+      "title": "Heart in Fire",
+      "short_infos": [
+        {
+          "released": 2014,
+          "songs": "2 Song",
+          "songs_length": "9 Min. 22 sec",
+          "bpm": "128 BPM",
+          "spotify_icon": "assets/resources/icons/spotify.png",
+          "spotify_link": "https://open.spotify.com/album/4qEK9uwnvTNcWQrJue5dgr?si=r5UFkTUMRXaf6JIPuTCVQQ",
+          "youtube_icon": "assets/resources/icons/youtube.png",
+          "youtube_link": "https://www.youtube.com/watch?v=a1u3rpDJkvs&list=PLPY7SNMth8dYYcc24wvGpjXMTP7x189oE&index=2",
+          "itunes_icon": "assets/resources/icons/itunes.png",
+          "itunes_link": "https://music.apple.com/us/album/heart-in-fire-single/878646664"
+        }
+      ]
+    }
+  ]
+}