Feat/hero

public/site.webmanifest

@@ -0,0 +1,26 @@
+{
+  "id": "/",
+  "name": "Kamy Coding Portfolio",
+  "short_name": "Kamy Coding",
+  "description": "Portfolio of Kamyar Zamanfar, Full-Stack Developer.",
+  "lang": "en",
+  "start_url": "/",
+  "scope": "/",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "theme_color": "#0e1013",
+  "background_color": "#0e1013",
+  "display": "standalone"
+}

src/app/pages/home/home.html

@@ -1,92 +1,3 @@
 <main>
-  <section
-    id="hero"
-    class="relative min-h-svh overflow-hidden bg-canvas px-4 text-foreground lg:px-18"
-    aria-labelledby="hero-title"
-  >
-    <img
-      class="pointer-events-none absolute inset-0 size-full object-cover object-bottom select-none"
-      src="/assets/hero/hero-background.webp"
-      alt=""
-      aria-hidden="true"
-      draggable="false"
-    />
-
-    <div class="relative z-10 mx-auto flex min-h-svh w-full max-w-324 flex-col pt-46">
-      <nav
-        class="absolute bottom-[110px] left-0 flex flex-col gap-2"
-        aria-label="Social media links"
-      >
-        <a
-          class="inline-flex size-10 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
-          href="https://www.linkedin.com/in/kamyarzamanfar/"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Open Kamyar Zamanfar's LinkedIn profile"
-        >
-          <img class="size-10" src="/assets/icons/social/linkedin.svg" alt="" draggable="false" />
-        </a>
-
-        <a
-          class="inline-flex size-10 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
-          href="https://github.com/kamycoding"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Open Kamyar Zamanfar's GitHub profile"
-        >
-          <img class="size-10" src="/assets/icons/social/github.svg" alt="" draggable="false" />
-        </a>
-
-        <a
-          class="inline-flex size-10 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
-          href="mailto:kamyar.zamanfar@gmail.com"
-          aria-label="Send an email to Kamyar Zamanfar"
-        >
-          <img class="size-10" src="/assets/icons/social/email.svg" alt="" draggable="false" />
-        </a>
-      </nav>
-
-      <div class="@container relative mx-auto w-full max-w-[864.544px] pt-[3.4649cqi] font-sans">
-        <div class="flex h-[9.2534cqi] items-end">
-          <p
-            class="inline-flex h-[4.6267cqi] items-center rounded-full border border-current px-[2.776cqi] text-[2.082cqi] leading-[1.2] font-medium"
-          >
-            Hello world
-          </p>
-        </div>
-
-        <h1 id="hero-title" class="mt-[3.7014cqi] text-[14.8055cqi] leading-none font-bold">
-          <span class="block">Frontend</span>
-          <span class="mt-[2.776cqi] block text-right">DEVELOPER</span>
-        </h1>
-
-        <div class="mt-[2.776cqi] flex h-[5.0894cqi] justify-end">
-          <a
-            class="inline-flex h-[4.6267cqi] items-center rounded-full border border-current px-[2.776cqi] text-[2.082cqi] leading-[1.2] font-medium focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
-            routerLink="/"
-            fragment="contact"
-          >
-            Get in Touch
-          </a>
-        </div>
-
-        <figure
-          class="absolute top-[2.175cqi] right-[3.6983cqi] m-0 w-[23.5459cqi] rotate-[8deg] bg-foreground p-[1.6078cqi] pb-0 text-canvas"
-        >
-          <img
-            class="block aspect-square w-full object-cover object-center"
-            src="/assets/hero/portrait-default.webp"
-            alt="Portrait of Kamyar Zamanfar"
-            draggable="false"
-          />
-
-          <figcaption
-            class="flex h-[6.2843cqi] items-center justify-center font-hand text-[2.776cqi] leading-none font-bold"
-          >
-            Kamy :)
-          </figcaption>
-        </figure>
-      </div>
-    </div>
-  </section>
+  <app-hero />
 </main>

src/app/pages/home/home.ts

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
 
+import { Hero } from './sections/hero/hero';
+
 @Component({
   selector: 'app-home',
-  imports: [],
+  imports: [Hero],
   templateUrl: './home.html',
   styleUrl: './home.css',
 })