From e66206c51811d61ac3fd0a96467a52f0a8aeec16 Mon Sep 17 00:00:00 2001
From: Lobo <andreas.dahm@gmail.com>
Date: Mon, 23 Feb 2026 09:07:33 +0100
Subject: [PATCH] Fixed hero page

---
 src/app/pages/about/about.component.html | 62 ++++++++++++------------
 src/styles.scss                          | 42 ++++++++++------
 2 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html
index 86f5fad..1deecd4 100644
--- a/src/app/pages/about/about.component.html
+++ b/src/app/pages/about/about.component.html
@@ -1,37 +1,39 @@
 <section class="about">
   <mat-card class="hero">
-    <div class="photo">
-      <img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
-        draggable="false" oncontextmenu="return false;" priority />
-    </div>
+    <div class="hero-flex-container">
+      <div class="photo">
+        <img [ngSrc]="AssetsConstants.ME" width="421" height="512" alt="{{ 'ABOUT.ALT.PROFILE' | translate }}"
+          draggable="false" oncontextmenu="return false;" priority />
+      </div>
 
-    <div class="intro">
-      <h1>{{ 'ABOUT.HELLO' | translate }}</h1>
-      <p class="lead">
-        {{ 'ABOUT.LEAD' | translate }}
-      </p>
+      <div class="intro">
+        <h1>{{ 'ABOUT.HELLO' | translate }}</h1>
+        <p class="lead">
+          {{ 'ABOUT.LEAD' | translate }}
+        </p>
 
-      <div class="meta">
-        <div class="row">
-          <mat-icon aria-hidden="true">work</mat-icon>
-          <span>{{ 'ABOUT.ROLE' | translate }}</span>
-        </div>
-        <div class="row">
-          <mat-icon aria-hidden="true">location_on</mat-icon>
-          <span>{{ 'ABOUT.LOCATION' | translate }}</span>
-        </div>
-        <div class="row">
-          <mat-icon aria-hidden="true">email</mat-icon>
-          <a href="" (click)="SharedFunctions.openMail($event)">
-            {{ 'ABOUT.CONTACT_ME' | translate }}
-          </a>
-        </div>
-        <div class="row">
-          <mat-icon>data_object</mat-icon>
-          <a href="{{UrlConstants.CODEBERG}}" target="_blank" rel="noopener">Codeberg</a>
-          <span>·</span>
-          <mat-icon svgIcon="linkedin"></mat-icon>
-          <a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a>
+        <div class="meta">
+          <div class="row">
+            <mat-icon aria-hidden="true">work</mat-icon>
+            <span>{{ 'ABOUT.ROLE' | translate }}</span>
+          </div>
+          <div class="row">
+            <mat-icon aria-hidden="true">location_on</mat-icon>
+            <span>{{ 'ABOUT.LOCATION' | translate }}</span>
+          </div>
+          <div class="row">
+            <mat-icon aria-hidden="true">email</mat-icon>
+            <a href="" (click)="SharedFunctions.openMail($event)">
+              {{ 'ABOUT.CONTACT_ME' | translate }}
+            </a>
+          </div>
+          <div class="row">
+            <mat-icon>data_object</mat-icon>
+            <a href="{{UrlConstants.CODEBERG}}" target="_blank" rel="noopener">Codeberg</a>
+            <span>·</span>
+            <mat-icon svgIcon="linkedin"></mat-icon>
+            <a href="{{UrlConstants.LINKED_IN}}" target="_blank" rel="noopener">LinkedIn</a>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/styles.scss b/src/styles.scss
index 2871d39..e8858bc 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -477,28 +477,22 @@ app-root {
 }
 
 .hero {
-  display: block;
   border-radius: var(--card-radius);
   background: var(--card-bg);
-  padding: clamp(1rem, 3vw, 1.5rem);
   overflow: hidden;
 }
 
-.hero .photo {
-  float: left;
-  margin-right: clamp(1rem, 4vw, 1.5rem);
-  margin-bottom: 0.5rem;
-  max-width: 100%;
+.hero-flex-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: clamp(1rem, 4vw, 2rem);
+  padding: clamp(1rem, 3vw, 1.5rem);
+  align-items: flex-start;
 }
 
-@media (max-width: 720px) {
-  .hero .photo {
-    float: none;
-    margin-right: 0;
-    margin-bottom: 1rem;
-    display: flex;
-    justify-content: center;
-  }
+.hero .photo {
+  flex: 0 0 auto;
+  max-width: 100%;
 }
 
 .hero .photo img {
@@ -512,7 +506,23 @@ app-root {
 }
 
 .hero .intro {
-  display: block;
+  flex: 1 1 400px;
+}
+
+@media (max-width: 850px) {
+  .hero-flex-container {
+    justify-content: center;
+  }
+
+  .hero .photo {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .hero .intro {
+    flex-basis: 100%;
+  }
 }
 
 .hero .intro h1 {