From d9d6a459ed8670db2d4679dd4bc911c9a84acb3c Mon Sep 17 00:00:00 2001
From: "nico.hdr8" <n.haider@htlstp.at>
Date: Tue, 7 Oct 2025 13:51:45 +0200
Subject: [PATCH] style(home): animate section

---
 src/app/pages/home/home.html | 12 +++++++++---
 src/app/pages/home/home.ts   |  7 ++++++-
 src/styles.scss              |  1 +
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/pages/home/home.html b/src/app/pages/home/home.html
index 5f337cc..8618f0d 100644
--- a/src/app/pages/home/home.html
+++ b/src/app/pages/home/home.html
@@ -1,10 +1,16 @@
 <main class="flex flex-row flex-wrap justify-center items-center gap-10 py-10">
-    <div class="lg:w-[40%] w-[80%] text-center lg:text-left">
+    <div class="lg:w-[40%] w-[80%] text-center lg:text-left"
+            pAnimateOnScroll
+            enterClass="animate-enter fade-in-10 slide-in-from-{{ isMobile() ? 't' : 'l' }}-8 animate-duration-1000"
+            leaveClass="animate-leave fade-out-0">
         <span class="block text-[3rem]/[1.1] lg:text-[4rem]/[1.1] font-bold mb-4" [innerHTML]="'home.header' | translate"></span>
         <span class="block text-[1rem]/[1.3] lg:text-[1.5rem]/[1.3] text-gray">{{ 'home.subheader' | translate }}</span>
         <a class="block mt-5" href="https://www.google.com/maps/place/Dobersberg,+Nieder%C3%B6sterreich" target="_blank"><p-chip label="Dobersberg, Niederösterreich" icon="fa-solid fa-location-dot"/></a>
     </div>
-    <div class="lg:w-[30%] w-[80%] text-center">
+    <div class="lg:w-[30%] w-[80%] text-center"
+            pAnimateOnScroll
+            enterClass="animate-enter fade-in-10 slide-in-from-{{ isMobile() ? 'b' : 'r' }}-8 animate-duration-1000"
+            leaveClass="animate-leave fade-out-0">
         <img src="img/me.png" alt="">
         <div class="pt-5 p-3 flex gap-3 flex-wrap justify-center">
             <a pButton outlined severity="secondary" label="nico@td-haider.at" icon="fa-solid fa-envelope" href="mailto:nico@td-haider.at"></a>
@@ -16,4 +22,4 @@
             <a pButton text severity="secondary" icon="fa-brands fa-facebook" href="https://www.facebook.com/nico.haider.33" target="_blank"></a>
         </div>
     </div>
-</main>
\ No newline at end of file
+</main>
diff --git a/src/app/pages/home/home.ts b/src/app/pages/home/home.ts
index 276e539..2bf1c29 100644
--- a/src/app/pages/home/home.ts
+++ b/src/app/pages/home/home.ts
@@ -3,13 +3,18 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { ChipModule } from 'primeng/chip';
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { ButtonModule } from 'primeng/button';
+import { AnimateOnScrollModule } from 'primeng/animateonscroll';
 
 @Component({
   selector: 'app-home',
-  imports: [TranslatePipe, ChipModule, FontAwesomeModule, ButtonModule],
+  imports: [TranslatePipe, ChipModule, FontAwesomeModule, ButtonModule, AnimateOnScrollModule],
   templateUrl: './home.html',
   styleUrl: './home.scss'
 })
 export class Home {
 
+  isMobile() {
+    return window.innerWidth < 1024;
+  }
+
 }
diff --git a/src/styles.scss b/src/styles.scss
index 86512ae..65c22e9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,5 @@
 @use "tailwindcss";
+@plugin "tailwindcss-primeui";
 @import '@fontsource-variable/open-sans/wght.css';
 @import '@fontsource-variable/jetbrains-mono/wght.css';
 @import '@fortawesome/fontawesome-free/css/all.css';