Fixed topbar

src/app/layout/topbar/topbar.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar class="topbar" (keydown)="onKeydown($event)">
+<mat-toolbar class="topbar" color="primary" (keydown)="onKeydown($event)">
   <a class="brand" routerLink="/">
     <img class="logo-dot" src="{{AssetsConstants.LOGO}}" alt="" aria-hidden="true" draggable="false"
       oncontextmenu="return false;">

src/app/layout/topbar/topbar.component.scss

@@ -1 +1,76 @@
+/* ---- Topbar Host & Base ---- */
+:host {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: block;
+}
 
+.topbar {
+    /* Erzeugt den Milchglas-Effekt */
+    backdrop-filter: saturate(1.1) blur(8px);
+    -webkit-backdrop-filter: saturate(1.1) blur(8px);
+    /* Safari Support */
+
+    /* Mischt die Variable mit Transparenz. !important überschreibt Material-Vorgaben */
+    background: color-mix(in oklab, var(--app-topbar-bg) 80%, transparent) !important;
+    border-bottom: 1px solid rgba(0, 0, 0, .08);
+
+    display: flex;
+    align-items: center;
+    padding: clamp(0.5rem, 1vw, 1rem);
+}
+
+/* ---- Branding ---- */
+.brand {
+    display: flex;
+    align-items: center;
+    gap: clamp(0.4rem, 1vw, 0.6rem);
+    color: inherit;
+    text-decoration: none;
+
+    .logo-dot {
+        width: clamp(36px, 10vw, 48px);
+        height: clamp(36px, 10vw, 48px);
+        border-radius: 50%;
+    }
+
+    .brand-text {
+        font-weight: 600;
+        letter-spacing: .2px;
+        font-size: clamp(1rem, 3vw, 1.2rem);
+    }
+}
+
+/* ---- Navigation ---- */
+.nav {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: clamp(0.25rem, 1vw, 0.5rem);
+    justify-content: center;
+}
+
+.nav-menu-btn {
+    display: none;
+}
+
+.spacer {
+    flex: 1;
+}
+
+/* ---- Mobile Responsiveness ---- */
+@media (max-width: 760px) {
+    .nav {
+        display: none;
+    }
+
+    .nav-menu-btn {
+        display: inline-flex;
+    }
+
+    .brand {
+        flex: unset;
+    }
+}

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

@@ -1,13 +1,8 @@
 <section class="about">
   <mat-card class="hero">
     <div class="photo">
-      <img
+      <img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
-        [ngSrc]="AssetsConstants.ME"
+        draggable="false" oncontextmenu="return false;" priority />
-        width="421" height="512"
-        alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
-        draggable="false"
-        oncontextmenu="return false;"
-        priority />
     </div>
 
     <div class="intro">
@@ -26,10 +21,10 @@
           <span>{{ 'ABOUT.LOCATION' | translate }}</span>
         </div>
         <div class="row">
-            <mat-icon aria-hidden="true">email</mat-icon>
+          <mat-icon aria-hidden="true">email</mat-icon>
-            <a href="" (click)="SharedFunctions.openMail($event)">
+          <a href="" (click)="SharedFunctions.openMail($event)">
-              {{ 'ABOUT.CONTACT_ME' | translate }}
+            {{ 'ABOUT.CONTACT_ME' | translate }}
-            </a>
+          </a>
         </div>
         <div class="row">
           <mat-icon svgIcon="github"></mat-icon>
@@ -49,7 +44,7 @@
         <h3>{{ 'ABOUT.SECTION.PRIMARY' | translate }}</h3>
         <mat-chip-set aria-label="Primary skills">
           @for (s of primarySkills; track s) {
-            <mat-chip >{{ s | translate }}</mat-chip>
+          <mat-chip>{{ s | translate }}</mat-chip>
           }
         </mat-chip-set>
       </div>
@@ -57,8 +52,8 @@
       <div>
         <h3>{{ 'ABOUT.SECTION.TOOLSET' | translate }}</h3>
         <mat-chip-set aria-label="Toolset">
-          @for (t of toolset; track t)          {
+          @for (t of toolset; track t) {
-            <mat-chip>{{ t | translate }}</mat-chip>
+          <mat-chip>{{ t | translate }}</mat-chip>
           }
         </mat-chip-set>
       </div>
@@ -69,39 +64,34 @@
     <h2 style="margin-left: 0.5rem;">{{ 'ABOUT.SECTION.EXPERIENCE' | translate }}</h2>
     <div class="xp-list">
       @for (entry of xpKeys; track entry.key) {
-        <div class="xp-item">
+      <div class="xp-item">
-          <div class="xp-head-grid">
+        <div class="xp-head-grid">
-            <div class="logo-wrap">
+          <div class="logo-wrap">
-              <img
+            <img src="{{entry.logo}}" alt="" class="company-logo" aria-hidden="true" />
-                src="{{entry.logo}}"
-                alt=""
-                class="company-logo"
-                aria-hidden="true"
-              />
-            </div>
-            <div class="head-row">
-              <strong>{{ (entry.key + '.ROLE') | translate }}</strong>
-              <span class="time">{{ (entry.key + '.TIME') | translate }}</span>
-            </div>
-
-            <div class="company-row">
-              {{ (entry.key + '.COMPANY') | translate }}
-            </div>
-
           </div>
-          <div class="highlights">
+          <div class="head-row">
-            <ul>
+            <strong>{{ (entry.key + '.ROLE') | translate }}</strong>
-              <li>{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
+            <span class="time">{{ (entry.key + '.TIME') | translate }}</span>
-              <li>{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
-              <li>{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
-            </ul>
           </div>
+
+          <div class="company-row">
+            {{ (entry.key + '.COMPANY') | translate }}
+          </div>
+
         </div>
+        <div class="highlights">
+          <ul>
+            <li>{{ entry.key + '.HIGHLIGHTS.P1' | translate }}</li>
+            <li>{{ entry.key + '.HIGHLIGHTS.P2' | translate }}</li>
+            <li>{{ entry.key + '.HIGHLIGHTS.P3' | translate }}</li>
+          </ul>
+        </div>
+      </div>
 
-        @if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
+      @if(entry.key !== xpKeys.at(xpKeys.length-1)?.key)
-        {
+      {
-          <mat-divider></mat-divider>
+      <mat-divider></mat-divider>
-        }
+      }
       }
     </div>
   </mat-card>
@@ -118,21 +108,16 @@
           {{ (entry.key + '.DESCRIPTION') | translate }}
         </div>
         @if (entry.externalLink) {
-          <div class="link-row">
+        <div class="link-row">
-            <a class="link-with-icon"
+          <a class="link-with-icon" href="{{entry.externalLink}}" target="_blank" rel="noopener noreferrer">
-               href="{{entry.externalLink}}"
+            <mat-icon>open_in_new</mat-icon>
-               target="_blank"
+            {{ (entry.key + '.LINK_EXTERNAL') | translate }}
-               rel="noopener noreferrer">
+          </a>
-              <mat-icon>open_in_new</mat-icon>
+        </div>
-              {{ (entry.key + '.LINK_EXTERNAL') | translate }}
-            </a>
-          </div>
         }
         <div class="link-row">
-          <a class="link-with-icon"
+          <a class="link-with-icon" [routerLink]="['/projects']" [queryParams]="{ project: entry.identifier }"
-             [routerLink]="['/projects']"
+            rel="noopener noreferrer">
-             [queryParams]="{ project: entry.identifier }"
-             rel="noopener noreferrer">
             <mat-icon>link</mat-icon>
             {{ (entry.key + '.LINK_INTERNAL') | translate }}
           </a>
@@ -148,9 +133,9 @@
 
       @if(entry.key !== projectKeys.at(projectKeys.length-1)?.key)
       {
-        <mat-divider></mat-divider>
+      <mat-divider></mat-divider>
+      }
       }
-    }
     </div>
   </mat-card>
 
@@ -160,20 +145,20 @@
     <div class="xp-list">
       <div class="xp-item">
         @for (entry of educationKeys; track entry.key) {
-          <div class="head-row">
+        <div class="head-row">
-            <strong>{{ (entry.key + '.WHERE') | translate }}</strong>
+          <strong>{{ (entry.key + '.WHERE') | translate }}</strong>
-            <span class="time">{{ (entry.key + '.WHEN') | translate }}</span>
+          <span class="time">{{ (entry.key + '.WHEN') | translate }}</span>
-          </div>
+        </div>
-          <div class="company-row">
+        <div class="company-row">
-            {{ (entry.key + '.WHAT') | translate }}
+          {{ (entry.key + '.WHAT') | translate }}
-          </div>
+        </div>
 
-          @if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
+        @if(entry.key !== educationKeys.at(educationKeys.length-1)?.key)
-          {
+        {
-            <mat-divider style="margin-top: .5rem; margin-bottom: .5rem"></mat-divider>
+        <mat-divider style="margin-top: .5rem; margin-bottom: .5rem"></mat-divider>
-          }
+        }
         }
       </div>
     </div>
   </mat-card>
-</section>
+</section>

src/styles.scss

@@ -21,11 +21,11 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
 
 /* ---- Custom variables ---- */
 :root {
-  --app-topbar-bg: #{mat.get-theme-color($light-theme, surface)};
   --app-bg: #{mat.get-theme-color($light-theme, surface-container-low)};
   --app-fg: #{mat.get-theme-color($light-theme, on-surface)};
   --app-logo-bg: #313131;
   --app-card-background: #fafafa;
+  --app-topbar-bg: var(--app-card-background);
 
   --card-radius: 18px;
   --card-bg: var(--app-card-background);
@@ -37,11 +37,11 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
 }
 
 .dark {
-  --app-topbar-bg: #{mat.get-theme-color($dark-theme, surface-container-highest)};
   --app-bg: #{mat.get-theme-color($dark-theme,surface-variant)};
   --app-fg: #{mat.get-theme-color($dark-theme, on-surface)};
   --app-card-background: #313131;
   --app-logo-bg: #313131;
+  --app-topbar-bg: var(--app-card-background);
 
   --card-bg: var(--app-card-background);
 
@@ -424,77 +424,6 @@ app-root {
   background: var(--app-bg);
 }
 
-/* ---- Topbar ---- */
-app-topbar {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  display: block;
-}
-
-.topbar {
-  backdrop-filter: saturate(1.1) blur(8px);
-  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
-  border-bottom: 1px solid rgba(0, 0, 0, .08);
-  display: flex;
-  align-items: center;
-  padding: clamp(0.5rem, 1vw, 1rem);
-  color: var(--app-fg);
-}
-
-.topbar .brand {
-  display: flex;
-  align-items: center;
-  gap: clamp(0.4rem, 1vw, 0.6rem);
-  color: inherit;
-  text-decoration: none;
-}
-
-.topbar .brand .logo-dot {
-  width: clamp(36px, 10vw, 48px);
-  height: clamp(36px, 10vw, 48px);
-  border-radius: 50%;
-}
-
-.topbar .brand .brand-text {
-  font-weight: 600;
-  letter-spacing: .2px;
-  font-size: clamp(1rem, 3vw, 1.2rem);
-}
-
-.topbar .nav {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: clamp(0.25rem, 1vw, 0.5rem);
-  justify-content: center;
-}
-
-.topbar .nav-menu-btn {
-  display: none;
-}
-
-.topbar .spacer {
-  flex: 1;
-}
-
-@media (max-width: 760px) {
-  .topbar .nav {
-    display: none;
-  }
-
-  .topbar .nav-menu-btn {
-    display: inline-flex;
-  }
-
-  .topbar .brand {
-    flex: unset;
-  }
-
-  /* Allow brand to sit properly if nav falls back to menu button */
-}
-
 /* ---- Menu Overrides ---- */
 .mat-mdc-menu-item .mdc-list-item__primary-text {
   display: flex;
@@ -556,7 +485,8 @@ app-topbar {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-  flex: 0 0 clamp(300px, 100%, 425px);
+  flex: 0 1 425px;
+  max-width: 100%;
 }
 
 .hero .photo img {