feat(home): implement and style first section at home

public/i18n/de.json

@@ -1,6 +1,11 @@
 {
     "common": {
         "home": "Startseite",
-        "about": "Über mich"
+        "about": "Über mich",
+        "projects": "Projekte"
+    },
+    "home": {
+        "header": "Hi, ich bin<br/>Nico HAIDER.",
+        "subheader": "Softwareentwickler für Webseiten, Web-Apps, Mobile-Apps, Desktop-Apps und vieles mehr."
     }
 }

public/i18n/en.json

@@ -1,6 +1,11 @@
 {
     "common": {
         "home": "Home",
-        "about": "About"
+        "about": "About",
+        "projects": "Projects"
+    },
+    "home": {
+        "header": "Hi, I'm<br/>Nico HAIDER.",
+        "subheader": "Software developer for websites, web apps, mobile apps, desktop apps and much more."
     }
 }

public/theme/theme.ts

@@ -323,17 +323,17 @@ export const Theme = definePreset(Aura, {
             transitionDuration: "{transition.duration}"
         },
         primary: {
-            50:  "#fffdea",
+            50:  "#fff9ec",
-            100: "#fff7c2",
+            100: "#fff3d4",
-            200: "#ffef85",
+            200: "#ffe7a8",
-            300: "#ffe24d",
+            300: "#ffdb70", // deine gewünschte Farbe als Kern
-            400: "#ffd700",
+            400: "#ffcf38",
-            500: "#e6c200",
+            500: "#ffdb70", // Hauptfarbe
-            600: "#bfa100",
+            600: "#e6c35f",
-            700: "#997f00",
+            700: "#bf9e4a",
-            800: "#735f00",
+            800: "#997a36",
-            900: "#4d3f00",
+            900: "#735625",
-            950: "#1f1600"
+            950: "#4d3817"
         },
         colorScheme: {
             light: {

src/app/app.routes.ts

@@ -1,9 +1,11 @@
 import { Routes } from '@angular/router';
 import { Home } from './pages/home/home';
 import { About } from './pages/about/about';
+import { Projects } from './pages/projects/projects';
 
 export const routes: Routes = [
     { path: '', component: Home },
     { path: 'about', component: About },
+    { path: 'projects', component: Projects },
     { path: '**', redirectTo: '', pathMatch: 'full' },
 ];

src/app/core/components/background/background.ts

@@ -16,7 +16,7 @@ export class Background {
   @ViewChild('canvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
 
   // Config
-  private numStars = 150;
+  private numStars = 300;
   private minBlink = 0.2;
   private maxBlink = 1;
   private blinkSpeed = 0.002;    // Stern blinkt langsamer oder schneller
@@ -96,8 +96,8 @@ export class Background {
       ctx.beginPath();
       ctx.arc(star.x, star.y - this.scrollY * this.parallaxFactor, star.radius, 0, Math.PI * 2);
       ctx.fillStyle = this.themeSwitchService.darkMode()
-        ? `rgba(255, 215, 0, ${star.alpha})`
+        ? `rgba(191, 158, 74, ${star.alpha})`
-        : `rgba(184, 134, 11, ${star.alpha})`;
+        : `rgba(255, 219, 112, ${star.alpha})`;
       ctx.fill();
     }
 

src/app/core/components/navigation-bar/navigation-bar.html

@@ -13,6 +13,9 @@
                 <a routerLink="/about" routerLinkActive="active">
                     {{ 'common.about' | translate }}
                 </a>
+                <a routerLink="/projects" routerLinkActive="active">
+                    {{ 'common.projects' | translate }}
+                </a>
             </li>
         </ul>
     </div>

src/app/pages/home/home.html

@@ -1 +1,19 @@
-<p>home works!</p>
+<main class="flex flex-row justify-center items-center gap-10 py-10">
+    <div class="w-[40%]">
+        <span class="block text-[4rem]/[1.1] font-bold mb-4" [innerHTML]="'home.header' | translate"></span>
+        <span class="block 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="w-[40%]">
+        <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>
+            <a pButton outlined severity="secondary" label="+43 670 2060140" icon="fa-solid fa-phone" href="tel:+436702060140"></a>
+        </div>
+        <div class="flex gap-3 justify-center text-[1.5rem] text-gray">
+            <a pButton text severity="secondary" icon="fa-brands fa-linkedin" href="https://www.linkedin.com/in/nico-haider-164444316/" target="_blank"></a>
+            <a pButton text severity="secondary" icon="fa-brands fa-instagram" href="https://www.instagram.com/nico.hdr8/" target="_blank"></a>
+            <a pButton text severity="secondary" icon="fa-brands fa-facebook" href="https://www.facebook.com/nico.haider.33" target="_blank"></a>
+        </div>
+    </div>
+</main>

src/app/pages/home/home.scss

@@ -0,0 +1,10 @@
+main {
+    img {
+        filter: drop-shadow(0 0 30px rgb(from var(--primary-color) r g b / 0.2));
+        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
+    }
+}
+
+.text-gray {
+    color: rgb(from var(--content-color) r g b / 0.7);
+}

src/app/pages/home/home.ts

@@ -1,8 +1,12 @@
 import { Component } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ChipModule } from 'primeng/chip';
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { ButtonModule } from 'primeng/button';
 
 @Component({
   selector: 'app-home',
-  imports: [],
+  imports: [TranslatePipe, ChipModule, FontAwesomeModule, ButtonModule],
   templateUrl: './home.html',
   styleUrl: './home.scss'
 })

src/app/pages/projects/projects.html

@@ -0,0 +1 @@
+<p>projects works!</p>

src/app/pages/projects/projects.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ChipModule } from 'primeng/chip';
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+  selector: 'app-home',
+  imports: [],
+  templateUrl: './projects.html',
+  styleUrl: './projects.scss'
+})
+export class Projects {
+
+
+
+}