feat: added content to about page

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

@@ -1 +1,45 @@
-<p>about works!</p>
+<div class="about-container">
+  <div class="card">
+    <img src="assets/logo/djredflame.png" alt="Dj Redflame Logo" class="profile-image" />
+    <div class="card-content">
+      <h1 class="name">DJ Redflame</h1>
+      <span class="short-description">Music Producer & Application Developer</span>
+      <span class="detailed-description"
+        >Driven by a passion for music, creativity and modern technology. Creating electronic music,
+        digital experiences and software projects with a strong focus on design and
+        atmosphere.</span
+      >
+    </div>
+  </div>
+  <div class="about-content">
+    <h2 class="title">About Me</h2>
+    <p>
+      Passionate about technology, electronic music and creative digital experiences. What started
+      as curiosity became two major passions in my life: software development and music production.
+    </p>
+
+    <p>
+      I started producing music at the age of 12, experimenting with FL Studio, later moving to
+      Reason and eventually working with tools like Ableton Live and Korg Gadget. Electronic Dance
+      Music, House and Electro became the foundation of my creative style and artistic identity.
+    </p>
+
+    <p>
+      My journey into software development began a few years later through self-learning and
+      curiosity for how applications, games and digital systems work. Starting with small projects
+      and ActionScript, I continued learning through Unity, C#, full-stack web development and
+      modern frontend technologies.
+    </p>
+
+    <p>
+      Today, I mainly work with Angular and modern full-stack technologies while continuously
+      expanding my knowledge across software architecture, backend development, embedded systems and
+      creative technologies.
+    </p>
+
+    <p>
+      This portfolio combines both worlds, music and software engineering, representing the
+      connection between creativity, technology and digital experiences.
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,59 @@
+@use 'variables' as *;
+
+.about-container {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: center;
+  gap: 1rem;
+  padding: 0.5rem;
+
+  .card {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    width: min(100%, 600px);
+    background: rgba($color-background-dark, 0.8);
+    padding: 1rem;
+    border-radius: 1rem;
+
+    .profile-image {
+      padding-top: 1rem;
+      align-self: center;
+      width: 10rem;
+    }
+
+    .card-content {
+      display: grid;
+      grid-template-rows: auto auto 1fr;
+      padding: 1rem;
+      background: rgba($color-background-dark, 0.8);
+
+      .name {
+        color: $color-accent;
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+
+      span {
+        color: $color-text;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  .about-content {
+    width: min(100%, 38rem);
+    background: rgba($color-background-dark, 0.8);
+    padding: 1rem;
+
+    .title {
+      text-align: center;
+      color: $color-accent;
+    }
+
+    p {
+      text-align: center;
+      color: $color-text;
+    }
+  }
+}