From 8502a583f074b6a191cd47840358429746678b6b Mon Sep 17 00:00:00 2001
From: kamycoding <kamy.codes@gmail.com>
Date: Wed, 12 Aug 2026 17:10:05 +0200
Subject: [PATCH] fix: polish responsive layouts and interactions

---
 src/app/pages/home/sections/about/about.css   |  6 ++++
 src/app/pages/home/sections/about/about.html  |  2 +-
 .../pages/home/sections/contact/contact.html  | 11 +++---
 src/app/pages/home/sections/hero/hero.css     |  6 ++--
 src/app/pages/home/sections/hero/hero.html    |  2 +-
 .../home/sections/projects/projects.html      |  2 +-
 .../pages/home/sections/skills/skills.html    |  2 +-
 .../sections/testimonials/testimonials.css    | 35 ++++++++++++++-----
 .../sections/testimonials/testimonials.html   |  4 +++
 .../sections/testimonials/testimonials.ts     | 24 ++++++++++++-
 src/app/pages/legal-notice/legal-notice.css   |  5 ---
 .../pages/project-detail/project-detail.css   | 11 +++---
 src/app/shared/data/social-links.ts           |  2 +-
 .../legal-page-layout/legal-page-layout.css   | 22 +++++++-----
 src/styles.css                                | 11 +++++-
 15 files changed, 104 insertions(+), 41 deletions(-)

diff --git a/src/app/pages/home/sections/about/about.css b/src/app/pages/home/sections/about/about.css
index d0d74a2..a029217 100644
--- a/src/app/pages/home/sections/about/about.css
+++ b/src/app/pages/home/sections/about/about.css
@@ -136,3 +136,9 @@
     top: calc(50% - 3.404cqw);
   }
 }
+
+@media (min-width: 90rem) {
+  .about-section {
+    min-height: clamp(49.125rem, 50vw, 60rem);
+  }
+}
diff --git a/src/app/pages/home/sections/about/about.html b/src/app/pages/home/sections/about/about.html
index 223ac74..77b468c 100644
--- a/src/app/pages/home/sections/about/about.html
+++ b/src/app/pages/home/sections/about/about.html
@@ -1,6 +1,6 @@
 <section
   id="about"
-  class="scroll-mt-20 bg-foreground px-4 py-22 text-canvas lg:min-h-180 lg:px-30 lg:py-36"
+  class="about-section scroll-mt-20 bg-foreground px-4 py-22 text-canvas lg:min-h-180 lg:px-30 lg:py-36"
   aria-labelledby="about-title"
 >
   <div
diff --git a/src/app/pages/home/sections/contact/contact.html b/src/app/pages/home/sections/contact/contact.html
index d5c7632..4b4f3b7 100644
--- a/src/app/pages/home/sections/contact/contact.html
+++ b/src/app/pages/home/sections/contact/contact.html
@@ -7,21 +7,21 @@
     class="contact__inner relative mx-auto w-full max-w-2xl lg:grid lg:min-h-140 lg:max-w-300 lg:grid-cols-[minmax(0,560px)_minmax(0,480px)]"
   >
     <app-brand-stamp
-      class="contact__stamp absolute -top-8.5 right-0 z-1 w-30 min-[40rem]:right-6 lg:top-0 lg:right-0 lg:w-42"
+      class="contact__stamp absolute -top-4 right-0 z-1 w-30 min-[40rem]:-top-8.5 min-[40rem]:right-6 lg:-top-12 lg:right-0 lg:w-42 min-[75rem]:top-0"
     />
 
-    <div class="contact__intro pt-19 lg:flex lg:flex-col lg:pt-0">
+    <div class="contact__intro @container pt-19 lg:flex lg:flex-col lg:pt-0">
       <p class="contact__eyebrow text-base leading-none font-medium uppercase">
         {{ 'contact.eyebrow' | translate }}
       </p>
       <h2
         id="contact-title"
-        class="contact__title mt-4 text-[clamp(40px,12.8vw,48px)] leading-none font-bold whitespace-pre-line lg:text-[64px]"
+        class="contact__title mt-4 text-[clamp(40px,12.8vw,48px)] leading-none font-bold whitespace-pre-line [&:lang(de)]:text-[clamp(32px,11.2cqw,48px)] min-[40rem]:[&:lang(en)]:text-[clamp(40px,5vw,48px)] lg:text-[64px] lg:[&:lang(en)]:text-[clamp(40px,11.2cqw,64px)] lg:[&:lang(de)]:text-[clamp(40px,11.2cqw,64px)]"
       >
         {{ 'contact.heading' | translate }}
       </h2>
 
-      <div class="contact__copy mt-8 text-justify text-base leading-[1.2] lg:max-w-140 lg:text-lg">
+      <div class="contact__copy mt-8 text-start text-base leading-[1.2] lg:max-w-140 lg:text-lg">
         <p class="mt-4">
           {{ 'contact.paragraphs.projects' | translate }}
         </p>
@@ -129,8 +129,9 @@
           height="44"
           draggable="false"
         />
-        <label class="contact-consent__label" for="contact-privacy">
+        <label class="contact-consent__label group" for="contact-privacy">
           <input
+            class="cursor-pointer transition-[background-color,box-shadow,transform] duration-180 ease-out checked:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-primary)_18%,transparent)] active:scale-90 active:-rotate-4 group-hover:scale-108 group-hover:rotate-2 group-hover:shadow-[0_0_0_5px_color-mix(in_srgb,var(--color-primary)_16%,transparent)] motion-reduce:transition-none"
             id="contact-privacy"
             type="checkbox"
             formControlName="privacyAccepted"
diff --git a/src/app/pages/home/sections/hero/hero.css b/src/app/pages/home/sections/hero/hero.css
index 27c5d2b..97b6fe6 100644
--- a/src/app/pages/home/sections/hero/hero.css
+++ b/src/app/pages/home/sections/hero/hero.css
@@ -230,7 +230,7 @@
   .hero__polaroid {
     position: absolute;
     top: clamp(8px, 0.902vw, 13px);
-    right: clamp(8px, 1.111vw, 16px);
+    right: clamp(-48px, calc(0.2333 * (100vw - 1200px) + 8px), 16px);
     width: clamp(160px, 14.137vw, 203.567px);
     padding: clamp(11px, 0.972vw, 14px) clamp(11px, 0.972vw, 14px) 0;
   }
@@ -249,8 +249,8 @@
 
   .hero__socials {
     position: absolute;
-    /* Tracks the width-driven cover scale of the bottom-anchored artwork. */
-    bottom: max(110px, 5.882vw);
+    /* Tracks both axes of the bottom-anchored 1440 × 900 cover artwork. */
+    bottom: max(110px, 5.882vw, 12.222svh);
     left: max(72px, calc((100% - var(--hero-desktop-content-width)) / 2 + 72px));
     display: flex;
     width: 40px;
diff --git a/src/app/pages/home/sections/hero/hero.html b/src/app/pages/home/sections/hero/hero.html
index 576e880..15173d2 100644
--- a/src/app/pages/home/sections/hero/hero.html
+++ b/src/app/pages/home/sections/hero/hero.html
@@ -110,7 +110,7 @@ <h1 id="hero-title" class="hero__title" [attr.aria-label]="'hero.roleAria' | tra
       </a>
 
       <a
-        href="mailto:kamyar.zamanfar@gmail.com"
+        href="mailto:contact@kamycoding.com"
         [attr.aria-label]="'social.emailKamyarAria' | translate"
       >
         <img src="/assets/icons/social/email.svg" alt="" aria-hidden="true" draggable="false" />
diff --git a/src/app/pages/home/sections/projects/projects.html b/src/app/pages/home/sections/projects/projects.html
index 69f24e9..585cf04 100644
--- a/src/app/pages/home/sections/projects/projects.html
+++ b/src/app/pages/home/sections/projects/projects.html
@@ -67,7 +67,7 @@ <h2 id="projects-title" class="text-5xl leading-none font-bold lg:text-[4rem]">
 
         <div class="col-start-1 row-start-2 mt-4">
           <h3 class="text-xl leading-none font-bold lg:text-2xl">{{ project.title }}</h3>
-          <p class="mt-4 text-justify text-base leading-normal lg:text-lg">
+          <p class="mt-4 text-start text-base leading-normal lg:text-lg">
             {{ project.descriptionKey | translate }}
           </p>
         </div>
diff --git a/src/app/pages/home/sections/skills/skills.html b/src/app/pages/home/sections/skills/skills.html
index 20ec9a5..462a516 100644
--- a/src/app/pages/home/sections/skills/skills.html
+++ b/src/app/pages/home/sections/skills/skills.html
@@ -1,6 +1,6 @@
 <section
   id="skills"
-  class="skills-section flex min-h-290 scroll-mt-20 items-center overflow-hidden px-4 pt-22 pb-40 text-foreground lg:min-h-200 lg:px-8 lg:py-36 min-[90rem]:px-30"
+  class="skills-section flex min-h-290 scroll-mt-20 items-center overflow-hidden px-4 pt-22 pb-40 text-foreground lg:min-h-200 lg:px-8 lg:py-36 min-[90rem]:min-h-[clamp(50rem,30vw,68.75rem)] min-[90rem]:px-30"
   aria-labelledby="skills-title"
 >
   <div
diff --git a/src/app/pages/home/sections/testimonials/testimonials.css b/src/app/pages/home/sections/testimonials/testimonials.css
index 1a15a19..c7fe4f1 100644
--- a/src/app/pages/home/sections/testimonials/testimonials.css
+++ b/src/app/pages/home/sections/testimonials/testimonials.css
@@ -109,15 +109,18 @@
     height: auto;
   }
 
-  .testimonial-card:focus-within {
+  .testimonial-card:focus-within,
+  .testimonial-card--active {
     z-index: 4;
   }
 
-  .testimonial-card:focus-within .testimonial-card__highlight {
+  .testimonial-card:focus-within .testimonial-card__highlight,
+  .testimonial-card--active .testimonial-card__highlight {
     opacity: 1;
   }
 
-  .testimonial-card:focus-within .testimonial-card__identity {
+  .testimonial-card:focus-within .testimonial-card__identity,
+  .testimonial-card--active .testimonial-card__identity {
     color: var(--color-foreground);
   }
 }
@@ -191,23 +194,37 @@
     width: clamp(20px, 1.667vw, 24px);
     height: clamp(20px, 1.667vw, 24px);
   }
+
+  .testimonial-card:focus-within,
+  .testimonial-card--active {
+    z-index: 3;
+    filter: drop-shadow(0 12px 16px rgb(14 16 19 / 18%));
+    scale: 1.02;
+  }
+
+  .testimonial-card:focus-within .testimonial-card__highlight,
+  .testimonial-card--active .testimonial-card__highlight {
+    opacity: 1;
+  }
+
+  .testimonial-card:focus-within .testimonial-card__identity,
+  .testimonial-card--active .testimonial-card__identity {
+    color: var(--color-foreground);
+  }
 }
 
 @media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
-  .testimonial-card:hover,
-  .testimonial-card:focus-within {
+  .testimonial-card:hover {
     z-index: 3;
     filter: drop-shadow(0 12px 16px rgb(14 16 19 / 18%));
     scale: 1.02;
   }
 
-  .testimonial-card:hover .testimonial-card__highlight,
-  .testimonial-card:focus-within .testimonial-card__highlight {
+  .testimonial-card:hover .testimonial-card__highlight {
     opacity: 1;
   }
 
-  .testimonial-card:hover .testimonial-card__identity,
-  .testimonial-card:focus-within .testimonial-card__identity {
+  .testimonial-card:hover .testimonial-card__identity {
     color: var(--color-foreground);
   }
 
diff --git a/src/app/pages/home/sections/testimonials/testimonials.html b/src/app/pages/home/sections/testimonials/testimonials.html
index c3c108c..3017a63 100644
--- a/src/app/pages/home/sections/testimonials/testimonials.html
+++ b/src/app/pages/home/sections/testimonials/testimonials.html
@@ -30,7 +30,11 @@
       @for (testimonial of testimonials; track testimonial.id) {
         <li
           class="testimonial-card relative z-1 grid aspect-square w-full min-w-0 origin-center text-canvas isolate"
+          [class.testimonial-card--active]="activeTestimonialId() === testimonial.id"
           tabindex="0"
+          (click)="activateTestimonial($event, testimonial.id)"
+          (keydown.enter)="activateTestimonial($event, testimonial.id)"
+          (keydown.space)="activateTestimonial($event, testimonial.id)"
         >
           <picture class="testimonial-card__paper" aria-hidden="true">
             <source
diff --git a/src/app/pages/home/sections/testimonials/testimonials.ts b/src/app/pages/home/sections/testimonials/testimonials.ts
index fbe5060..9f247af 100644
--- a/src/app/pages/home/sections/testimonials/testimonials.ts
+++ b/src/app/pages/home/sections/testimonials/testimonials.ts
@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, HostListener, signal } from '@angular/core';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import {
   TESTIMONIAL_PAPER_ASSETS,
   TESTIMONIALS,
 } from '../../../../features/testimonials/testimonials.data';
+import type { TestimonialId } from '../../../../features/testimonials/testimonials.model';
 
 @Component({
   selector: 'app-testimonials',
@@ -15,4 +16,25 @@ import {
 export class Testimonials {
   protected readonly paperAssets = TESTIMONIAL_PAPER_ASSETS;
   protected readonly testimonials = TESTIMONIALS;
+  protected readonly activeTestimonialId = signal<TestimonialId | null>(null);
+
+  protected activateTestimonial(event: Event, testimonialId: TestimonialId): void {
+    if (event instanceof KeyboardEvent) {
+      event.preventDefault();
+    }
+
+    event.stopPropagation();
+    this.activeTestimonialId.set(testimonialId);
+  }
+
+  @HostListener('document:click', ['$event'])
+  protected clearActiveTestimonial(event: MouseEvent): void {
+    this.activeTestimonialId.set(null);
+
+    const activeElement = (event.currentTarget as Document).activeElement;
+
+    if (activeElement instanceof HTMLElement && activeElement.closest('.testimonial-card')) {
+      activeElement.blur();
+    }
+  }
 }
diff --git a/src/app/pages/legal-notice/legal-notice.css b/src/app/pages/legal-notice/legal-notice.css
index ce41742..71520f9 100644
--- a/src/app/pages/legal-notice/legal-notice.css
+++ b/src/app/pages/legal-notice/legal-notice.css
@@ -3,7 +3,6 @@
 }
 
 app-legal-page-layout {
-  --legal-content-min-height: 430px;
   --legal-content-line-height: 1.2;
 }
 
@@ -49,10 +48,6 @@ a:focus-visible {
 }
 
 @media (min-width: 64rem) {
-  app-legal-page-layout {
-    --legal-content-min-height: 475px;
-  }
-
   h2 {
     font-size: 24px;
   }
diff --git a/src/app/pages/project-detail/project-detail.css b/src/app/pages/project-detail/project-detail.css
index 3d56708..57f163e 100644
--- a/src/app/pages/project-detail/project-detail.css
+++ b/src/app/pages/project-detail/project-detail.css
@@ -6,8 +6,8 @@
   display: grid;
   min-height: max(900px, 100svh);
   overflow: hidden;
-  padding: 96px 72px 24px;
-  grid-template-rows: auto auto auto;
+  padding: clamp(96px, 8svh, 160px) 72px 24px;
+  grid-template-rows: auto auto minmax(max-content, 1fr);
   background-color: var(--color-canvas);
   background-image: url('/assets/project-detail/project-detail-header-bg.webp');
   background-repeat: no-repeat;
@@ -32,6 +32,8 @@
 }
 
 .project-detail__back {
+  width: min(1296px, 100%);
+  margin-inline: auto;
   grid-row: 1;
   justify-self: start;
   color: var(--color-canvas);
@@ -46,7 +48,7 @@
 
 .project-detail__layout {
   display: grid;
-  width: min(1200px, 100%);
+  width: min(1296px, 100%);
   margin: 38px auto 0;
   grid-row: 2;
   grid-template-columns: minmax(0, 488px) minmax(0, 560px);
@@ -105,7 +107,7 @@
 }
 
 .project-detail__copy section p {
-  text-align: justify;
+  text-align: start;
 }
 
 .project-detail__technologies {
@@ -181,6 +183,7 @@
   width: min(1296px, 100%);
   margin: 48px auto 0;
   grid-row: 3;
+  align-self: start;
   justify-content: flex-end;
   color: var(--color-foreground);
 }
diff --git a/src/app/shared/data/social-links.ts b/src/app/shared/data/social-links.ts
index 35ac12e..01cd17f 100644
--- a/src/app/shared/data/social-links.ts
+++ b/src/app/shared/data/social-links.ts
@@ -27,7 +27,7 @@ const SOCIAL_LINKS = {
   email: {
     id: 'email',
     labelKey: 'social.emailLabel',
-    href: 'mailto:kamyar.zamanfar@gmail.com',
+    href: 'mailto:contact@kamycoding.com',
     accessibleLabelKey: 'social.emailAria',
     iconSrc: '/assets/icons/social/email.svg',
     opensInNewTab: false,
diff --git a/src/app/shared/legal-page-layout/legal-page-layout.css b/src/app/shared/legal-page-layout/legal-page-layout.css
index f20283c..77d7d3e 100644
--- a/src/app/shared/legal-page-layout/legal-page-layout.css
+++ b/src/app/shared/legal-page-layout/legal-page-layout.css
@@ -3,11 +3,19 @@
 }
 
 .legal-page {
+  display: flex;
   min-height: 100svh;
+  flex-direction: column;
   background-color: var(--color-foreground);
   color: var(--color-canvas);
 }
 
+@supports (height: 100dvh) {
+  .legal-page {
+    min-height: 100dvh;
+  }
+}
+
 .legal-page__hero {
   height: 271px;
   background-color: var(--color-foreground);
@@ -35,8 +43,11 @@
 }
 
 .legal-page__page {
+  display: flex;
   width: min(1440px, 100%);
   margin-inline: auto;
+  flex: 1;
+  flex-direction: column;
 }
 
 .legal-page__back {
@@ -69,8 +80,7 @@
 .legal-page__content {
   display: flex;
   width: min(1200px, calc(100% - 40px));
-  min-height: var(--legal-content-min-height, auto);
-  margin: 20px auto 0;
+  margin: 20px auto 64px;
   flex-direction: column;
   gap: 32px;
   font-size: 16px;
@@ -79,7 +89,7 @@
 
 .legal-page app-footer {
   display: block;
-  margin-top: 64px;
+  margin-top: auto;
 }
 
 @media (min-width: 64rem) {
@@ -102,11 +112,7 @@
 
   .legal-page__content {
     width: min(1200px, calc(100% - 64px));
-    margin-top: 80px;
+    margin: 80px auto;
     gap: 40px;
   }
-
-  .legal-page app-footer {
-    margin-top: 80px;
-  }
 }
diff --git a/src/styles.css b/src/styles.css
index 0144ef7..e90ea41 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -96,7 +96,16 @@ html {
 
 @media (min-width: 64rem) {
   .project-detail-active app-header .site-header__desktop {
-    max-width: none;
+    grid-template-columns: auto auto auto minmax(96px, 1fr) auto auto;
+    column-gap: clamp(28px, 3.25vw, 52px);
+  }
+
+  .project-detail-active app-header .site-header__desktop nav li:nth-child(3) {
+    justify-self: end;
+  }
+
+  .project-detail-active app-header .site-header__desktop > button {
+    margin-inline-start: clamp(20px, 2.25vw, 36px);
   }
 
   .project-detail-active .project-detail__copy {