From 526836d8a9775049e83d844ab2a2f02e248e85b8 Mon Sep 17 00:00:00 2001
From: KamyCoding <kamyar.zamanfar@gmail.com>
Date: Sun, 9 Aug 2026 14:03:04 +0200
Subject: [PATCH] feat(privacy): implement privacy policy page

---
 src/app/app.routes.ts                         |   2 +-
 src/app/layout/footer/footer.css              |  23 +-
 src/app/layout/footer/footer.html             |  33 ++-
 .../pages/privacy-policy/privacy-policy.css   | 149 ++++++++++++
 .../pages/privacy-policy/privacy-policy.html  | 225 +++++++++++++++++-
 .../privacy-policy/privacy-policy.spec.ts     |  52 ++++
 .../pages/privacy-policy/privacy-policy.ts    |   8 +-
 7 files changed, 471 insertions(+), 21 deletions(-)
 create mode 100644 src/app/pages/privacy-policy/privacy-policy.spec.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index a1fd180..9469324 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -20,7 +20,7 @@ export const routes: Routes = [
   {
     path: 'privacy-policy',
     component: PrivacyPolicy,
-    title: 'Privacy Policy Kamycoding',
+    title: 'Privacy Policy | KamyCoding',
   },
   {
     path: 'projects/:slug',
diff --git a/src/app/layout/footer/footer.css b/src/app/layout/footer/footer.css
index c524acf..9466893 100644
--- a/src/app/layout/footer/footer.css
+++ b/src/app/layout/footer/footer.css
@@ -39,7 +39,7 @@
 }
 
 .site-footer__brand a,
-.site-footer__legal {
+.site-footer__legal-link {
   border-radius: 2px;
 }
 
@@ -58,15 +58,21 @@
   text-decoration: none;
 }
 
-.site-footer__legal {
+.site-footer__legal-links {
+  display: flex;
+  align-items: center;
+  justify-self: end;
+  gap: 16px;
+}
+
+.site-footer__legal-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  justify-self: end;
 }
 
-.site-footer__legal span {
+.site-footer__legal-link span {
   position: relative;
   z-index: 1;
 }
@@ -124,7 +130,7 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .site-footer__legal:hover .site-footer__legal-decoration {
+  .site-footer__legal-link:hover .site-footer__legal-decoration {
     opacity: 1;
   }
 
@@ -139,7 +145,7 @@
   }
 }
 
-.site-footer__legal:focus-visible .site-footer__legal-decoration {
+.site-footer__legal-link:focus-visible .site-footer__legal-decoration {
   opacity: 1;
 }
 
@@ -184,11 +190,14 @@
     font-size: 18px;
   }
 
-  .site-footer__legal {
+  .site-footer__legal-links {
     grid-column: 1;
     grid-row: 2;
     align-self: end;
+    flex-direction: column;
+    align-items: flex-start;
     justify-self: start;
+    gap: 8px;
   }
 
   .site-footer__socials {
diff --git a/src/app/layout/footer/footer.html b/src/app/layout/footer/footer.html
index 25ab923..9bbbdcf 100644
--- a/src/app/layout/footer/footer.html
+++ b/src/app/layout/footer/footer.html
@@ -11,16 +11,29 @@
       <p>© Kamyar Zamanfar {{ currentYear }}</p>
     </div>
 
-    <a class="site-footer__legal" routerLink="/legal-notice">
-      <span>Legal Notice</span>
-      <img
-        class="site-footer__legal-decoration"
-        src="/assets/decorations/navigation/nav-hover-contact.svg"
-        alt=""
-        aria-hidden="true"
-        draggable="false"
-      />
-    </a>
+    <nav class="site-footer__legal-links" aria-label="Legal pages">
+      <a class="site-footer__legal-link" routerLink="/legal-notice">
+        <span>Legal Notice</span>
+        <img
+          class="site-footer__legal-decoration"
+          src="/assets/decorations/navigation/nav-hover-contact.svg"
+          alt=""
+          aria-hidden="true"
+          draggable="false"
+        />
+      </a>
+
+      <a class="site-footer__legal-link" routerLink="/privacy-policy">
+        <span>Privacy Policy</span>
+        <img
+          class="site-footer__legal-decoration"
+          src="/assets/decorations/navigation/nav-hover-contact.svg"
+          alt=""
+          aria-hidden="true"
+          draggable="false"
+        />
+      </a>
+    </nav>
 
     <nav class="site-footer__socials" aria-label="Footer links">
       @for (item of socialLinks; track item.id) {
diff --git a/src/app/pages/privacy-policy/privacy-policy.css b/src/app/pages/privacy-policy/privacy-policy.css
index e69de29..8e28cc0 100644
--- a/src/app/pages/privacy-policy/privacy-policy.css
+++ b/src/app/pages/privacy-policy/privacy-policy.css
@@ -0,0 +1,149 @@
+:host {
+  display: block;
+}
+
+.privacy-policy {
+  min-height: 100svh;
+  background-color: var(--color-foreground);
+  color: var(--color-canvas);
+}
+
+.privacy-policy__hero {
+  height: 271px;
+  background-color: var(--color-foreground);
+  background-image: url('/assets/legal-notice/legal-notice-header-bg.png');
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: 100% 100%;
+  color: var(--color-foreground);
+}
+
+.privacy-policy__hero-inner {
+  display: flex;
+  width: min(1440px, 100%);
+  height: 100%;
+  margin-inline: auto;
+  padding: 0 20px 95px;
+  align-items: flex-end;
+}
+
+.privacy-policy h1,
+.privacy-policy h2,
+.privacy-policy p,
+.privacy-policy ul {
+  margin: 0;
+}
+
+.privacy-policy h1 {
+  font-size: clamp(40px, 12.8vw, 48px);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.privacy-policy__page {
+  width: min(1440px, 100%);
+  margin-inline: auto;
+}
+
+.privacy-policy__back {
+  display: inline-flex;
+  margin: 16px 20px 0;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-canvas);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-decoration: none;
+}
+
+.privacy-policy__back img {
+  width: 24px;
+  height: 24px;
+}
+
+.privacy-policy__back:is(:hover, :focus-visible, :active) {
+  color: var(--color-tertiary);
+}
+
+.privacy-policy__back:focus-visible,
+.privacy-policy__content a:focus-visible {
+  border-radius: 2px;
+  outline: 2px solid var(--color-primary);
+  outline-offset: 4px;
+}
+
+.privacy-policy__content {
+  display: flex;
+  width: min(1200px, calc(100% - 40px));
+  margin: 20px auto 0;
+  flex-direction: column;
+  gap: 32px;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.privacy-policy__content section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.privacy-policy__content h2 {
+  color: var(--color-primary);
+  font-size: 23px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.privacy-policy__content address {
+  font-style: normal;
+}
+
+.privacy-policy__content ul {
+  padding-inline-start: 24px;
+}
+
+.privacy-policy__content a {
+  color: var(--color-primary);
+  overflow-wrap: anywhere;
+  text-underline-offset: 3px;
+}
+
+.privacy-policy app-footer {
+  display: block;
+  margin-top: 64px;
+}
+
+@media (min-width: 64rem) {
+  .privacy-policy__hero {
+    height: 439px;
+  }
+
+  .privacy-policy__hero-inner {
+    padding: 0 clamp(32px, 8.333vw, 120px) 176px;
+  }
+
+  .privacy-policy h1 {
+    font-size: 64px;
+    line-height: 1;
+  }
+
+  .privacy-policy__back {
+    display: none;
+  }
+
+  .privacy-policy__content {
+    width: min(1200px, calc(100% - 64px));
+    margin-top: 80px;
+    gap: 40px;
+  }
+
+  .privacy-policy__content h2 {
+    font-size: 24px;
+  }
+
+  .privacy-policy app-footer {
+    margin-top: 80px;
+  }
+}
diff --git a/src/app/pages/privacy-policy/privacy-policy.html b/src/app/pages/privacy-policy/privacy-policy.html
index a8869ff..a8ae172 100644
--- a/src/app/pages/privacy-policy/privacy-policy.html
+++ b/src/app/pages/privacy-policy/privacy-policy.html
@@ -1 +1,224 @@
-<p>privacy-policy works!</p>
+<main class="privacy-policy">
+  <header class="privacy-policy__hero">
+    <div class="privacy-policy__hero-inner">
+      <h1 id="privacy-policy-title">Privacy Policy</h1>
+    </div>
+  </header>
+
+  <div class="privacy-policy__page">
+    <a class="privacy-policy__back" routerLink="/">
+      <img
+        src="/assets/project-detail/back-arrow.svg"
+        alt=""
+        aria-hidden="true"
+        draggable="false"
+      />
+      <span>Back</span>
+    </a>
+
+    <article class="privacy-policy__content" aria-labelledby="privacy-policy-title">
+      <section>
+        <h2>1. Controller</h2>
+        <p>The controller responsible for data processing on this website is:</p>
+
+        <address>
+          Kamyar Zamanfar<br />
+          KamyCoding<br />
+          Alte Poststraße 14<br />
+          53840 Troisdorf<br />
+          Germany
+        </address>
+
+        <p>
+          Email:
+          <a href="mailto:contact@kamycoding.com">contact&#64;kamycoding.com</a>
+        </p>
+      </section>
+
+      <section>
+        <h2>2. General Information</h2>
+        <p>The protection of your personal data is important to me.</p>
+        <p>
+          Personal data is any information relating to an identified or identifiable natural person.
+        </p>
+        <p>
+          This privacy policy explains what personal data is processed when you use this website,
+          for what purposes it is processed, and what rights you have under the General Data
+          Protection Regulation (GDPR).
+        </p>
+      </section>
+
+      <section>
+        <h2>3. Hosting and Server Log Files</h2>
+        <p>This website and its backend are hosted using external hosting providers.</p>
+        <p>
+          When you access this website, technical information may automatically be processed by the
+          hosting infrastructure. This may include, in particular:
+        </p>
+        <ul>
+          <li>IP address</li>
+          <li>date and time of access</li>
+          <li>requested page or file</li>
+          <li>referrer URL</li>
+          <li>browser type and version</li>
+          <li>operating system</li>
+          <li>HTTP status code</li>
+        </ul>
+        <p>
+          This processing is necessary to provide the website securely and reliably and to detect
+          technical problems or misuse.
+        </p>
+        <p>
+          The legal basis is Art. 6(1)(f) GDPR. My legitimate interest is the secure and technically
+          reliable operation of this website.
+        </p>
+        <p>
+          Hosting provider information will be added after the final production hosting setup has
+          been completed.
+        </p>
+      </section>
+
+      <section>
+        <h2>4. Contact Form</h2>
+        <p>
+          If you contact me using the contact form, the information you enter will be processed in
+          order to handle and respond to your request.
+        </p>
+        <p>The contact form may process the following data:</p>
+        <ul>
+          <li>name</li>
+          <li>email address</li>
+          <li>message</li>
+          <li>information concerning acceptance of the privacy notice</li>
+        </ul>
+        <p>The information is used to process your enquiry and communicate with you.</p>
+        <p>
+          Depending on the nature of your request, the legal basis is Art. 6(1)(b) GDPR where the
+          communication concerns pre-contractual measures, or Art. 6(1)(f) GDPR for other general
+          enquiries.
+        </p>
+        <p>
+          My legitimate interest is to receive and respond to enquiries submitted through this
+          website.
+        </p>
+      </section>
+
+      <section>
+        <h2>5. Email Delivery via Brevo</h2>
+        <p>
+          Messages submitted through the contact form are technically transmitted using the email
+          delivery service Brevo.
+        </p>
+        <p>
+          In this context, data contained in your enquiry, such as your name, email address and
+          message, may be processed by Brevo for the purpose of delivering the email.
+        </p>
+        <p>Brevo acts as a service provider for the technical delivery of these messages.</p>
+        <p>
+          Personal data is transmitted only to the extent necessary for the delivery and processing
+          of your enquiry.
+        </p>
+      </section>
+
+      <section>
+        <h2>6. Email Hosting via Zoho Mail</h2>
+        <p>
+          Emails sent to
+          <a href="mailto:contact@kamycoding.com">contact&#64;kamycoding.com</a>
+          are hosted and processed using Zoho Mail.
+        </p>
+        <p>
+          Zoho may process email content, sender and recipient addresses, and technical metadata
+          necessary for providing the email service.
+        </p>
+        <p>The processing is necessary to receive, store and respond to communications.</p>
+        <p>
+          The legal basis is Art. 6(1)(b) GDPR where the communication concerns contractual or
+          pre-contractual matters and Art. 6(1)(f) GDPR for general communication.
+        </p>
+      </section>
+
+      <section>
+        <h2>7. Storage Period</h2>
+        <p>
+          Personal data submitted through the contact form or by email is stored only for as long as
+          necessary to process and respond to the relevant enquiry.
+        </p>
+        <p>
+          Data may be retained for a longer period where this is necessary to comply with statutory
+          retention obligations or to establish, exercise or defend legal claims.
+        </p>
+        <p>
+          After the relevant purpose no longer applies and no statutory retention obligations
+          remain, the data will be deleted.
+        </p>
+      </section>
+
+      <section>
+        <h2>8. Cookies and Similar Technologies</h2>
+        <p>
+          This website does not currently use non-essential cookies for analytics, advertising or
+          marketing purposes.
+        </p>
+        <p>
+          If non-essential cookies, analytics tools or similar technologies are introduced in the
+          future, this privacy policy and, where legally required, the website's consent mechanism
+          will be updated accordingly.
+        </p>
+      </section>
+
+      <section>
+        <h2>9. Your Rights</h2>
+        <p>Under the GDPR, you may have the following rights regarding your personal data:</p>
+        <ul>
+          <li>right of access</li>
+          <li>right to rectification</li>
+          <li>right to erasure</li>
+          <li>right to restriction of processing</li>
+          <li>right to data portability</li>
+          <li>right to object to processing</li>
+          <li>right to withdraw consent where processing is based on consent</li>
+          <li>right to lodge a complaint with a competent data protection supervisory authority</li>
+        </ul>
+        <p>
+          To exercise your rights, contact:
+          <a href="mailto:contact@kamycoding.com">contact&#64;kamycoding.com</a>
+        </p>
+      </section>
+
+      <section>
+        <h2>10. Right to Object</h2>
+        <p>
+          Where personal data is processed on the basis of Art. 6(1)(f) GDPR, you have the right to
+          object to such processing on grounds relating to your particular situation.
+        </p>
+      </section>
+
+      <section>
+        <h2>11. Security</h2>
+        <p>
+          Appropriate technical and organisational measures are used to protect personal data
+          against loss, misuse, unauthorised access or disclosure.
+        </p>
+        <p>
+          Communication with this website is provided via encrypted HTTPS connections where
+          technically available.
+        </p>
+      </section>
+
+      <section>
+        <h2>12. Changes to this Privacy Policy</h2>
+        <p>
+          This privacy policy may be updated if the website, the services used, or the applicable
+          legal requirements change.
+        </p>
+        <p class="privacy-policy__updated">
+          Last updated:
+          <time datetime="2026-08-09">August 9, 2026</time>
+        </p>
+      </section>
+    </article>
+
+    <app-footer theme="light" />
+  </div>
+</main>
diff --git a/src/app/pages/privacy-policy/privacy-policy.spec.ts b/src/app/pages/privacy-policy/privacy-policy.spec.ts
new file mode 100644
index 0000000..7c14891
--- /dev/null
+++ b/src/app/pages/privacy-policy/privacy-policy.spec.ts
@@ -0,0 +1,52 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+
+import { PrivacyPolicy } from './privacy-policy';
+
+describe('PrivacyPolicy', () => {
+  let fixture: ComponentFixture<PrivacyPolicy>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PrivacyPolicy],
+      providers: [provideRouter([])],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PrivacyPolicy);
+    fixture.detectChanges();
+  });
+
+  it('creates the page with its primary heading', () => {
+    const heading = fixture.nativeElement.querySelector('h1') as HTMLHeadingElement | null;
+
+    expect(fixture.componentInstance).toBeTruthy();
+    expect(heading?.textContent).toBe('Privacy Policy');
+    expect(fixture.nativeElement.querySelectorAll('h1')).toHaveLength(1);
+  });
+
+  it('renders controller information and a contact email link', () => {
+    const content = fixture.nativeElement.textContent as string;
+    const emailLink = fixture.nativeElement.querySelector(
+      'a[href="mailto:contact@kamycoding.com"]',
+    ) as HTMLAnchorElement | null;
+
+    expect(content).toContain('1. Controller');
+    expect(content).toContain('Kamyar Zamanfar');
+    expect(content).toContain('Alte Poststraße 14');
+    expect(emailLink?.textContent).toBe('contact@kamycoding.com');
+  });
+
+  it('reuses the shared light footer and provides a route back home', () => {
+    const footer = fixture.nativeElement.querySelector('app-footer') as HTMLElement | null;
+    const backLink = fixture.nativeElement.querySelector(
+      '.privacy-policy__back',
+    ) as HTMLAnchorElement | null;
+    const privacyLink = footer?.querySelector(
+      'a[href="/privacy-policy"]',
+    ) as HTMLAnchorElement | null;
+
+    expect(footer?.querySelector('.site-footer--light')).not.toBeNull();
+    expect(backLink?.getAttribute('href')).toBe('/');
+    expect(privacyLink).not.toBeNull();
+  });
+});
diff --git a/src/app/pages/privacy-policy/privacy-policy.ts b/src/app/pages/privacy-policy/privacy-policy.ts
index c89ec4a..03103e4 100644
--- a/src/app/pages/privacy-policy/privacy-policy.ts
+++ b/src/app/pages/privacy-policy/privacy-policy.ts
@@ -1,9 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { Footer } from '../../layout/footer/footer';
 
 @Component({
   selector: 'app-privacy-policy',
-  imports: [],
+  imports: [RouterLink, Footer],
   templateUrl: './privacy-policy.html',
   styleUrl: './privacy-policy.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PrivacyPolicy {}