Added file structure for sections about | hero | header | projects, picked the fonts and colors

src/app/features/about-display/about-display.component.html

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

src/app/features/about-display/about-display.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about-display',
+  imports: [],
+  templateUrl: './about-display.component.html',
+  styleUrl: './about-display.component.css'
+})
+export class AboutDisplayComponent {
+
+}

src/app/features/header-display/header-logo/header-logo.component.html

@@ -1 +1 @@
-<p class="!bg-red-500">Adam Logo</p>
+<p class="font-terminal-nier  text-xl">AB</p>

src/app/features/hero-display/hero-display.component.html

@@ -0,0 +1,4 @@
+<section>
+  <article><p>HERO SECTION</p></article>
+  <article><p>CREATIVE DEVELOPER</p></article>
+</section>

src/app/features/hero-display/hero-display.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hero-display',
+  imports: [],
+  templateUrl: './hero-display.component.html',
+  styleUrl: './hero-display.component.css'
+})
+export class HeroDisplayComponent {
+
+}

src/app/features/project-display/components/projects-list/projects-list.component.html

@@ -1 +1,4 @@
-<p>projects-list works!</p>
+<section>
+  <article><p>PROJECT LIST</p></article>
+</section>
+

src/app/layout/about/about.component.html

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

src/app/layout/about/about.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  imports: [],
+  templateUrl: './about.component.html',
+  styleUrl: './about.component.css'
+})
+export class AboutComponent {
+
+}

src/app/layout/components/header/header.component.html

@@ -1,6 +1,8 @@
 <header>
+  <section class="grid grid-cols-[1fr_5fr_4fr_4fr] gap-1 bg-nier-dark font-terminal text-nier-light divide-x divide-nier-accent/30 border border-nier-accent h-32">
   <app-header-logo />
   <app-header-text-animate-section />
   <app-header-nav-links />
   <app-header-contact-links />
+  </section>
 </header>

src/app/layout/components/hero/hero.component.html

@@ -0,0 +1 @@
+<app-hero-display />

src/app/layout/components/hero/hero.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import {HeroDisplayComponent} from '../../../features/hero-display/hero-display.component';
+
+@Component({
+  selector: 'app-hero',
+  imports: [HeroDisplayComponent],
+  templateUrl: './hero.component.html',
+  styleUrl: './hero.component.css',
+})
+export class HeroComponent {}

src/app/layout/components/main-layout/main-layout.component.html

@@ -1,3 +1,4 @@
 <app-header />
+<app-hero />
 <app-sidebar />
 <app-footer />

src/app/layout/components/main-layout/main-layout.component.ts

@@ -2,17 +2,12 @@ import { Component } from '@angular/core';
 import {FooterComponent} from '../footer/footer.component';
 import {SidebarComponent} from '../sidebar/sidebar.component';
 import {HeaderComponent} from '../header/header.component';
+import {HeroComponent} from '../hero/hero.component';
 
 @Component({
   selector: 'app-main-layout',
-  imports: [
+  imports: [FooterComponent, SidebarComponent, HeaderComponent, HeroComponent],
-    FooterComponent,
-    SidebarComponent,
-    HeaderComponent
-  ],
   templateUrl: './main-layout.component.html',
-  styleUrl: './main-layout.component.css'
+  styleUrl: './main-layout.component.css',
 })
-export class MainLayoutComponent {
+export class MainLayoutComponent {}
-
-}

src/styles.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=VT323&display=swap');
+
 @layer theme, tailwind-base, primeng, tailwind-utilities;
 
 @import "tailwindcss-primeui";
@@ -6,6 +8,58 @@
 @import "tailwindcss/preflight.css" layer(tailwind-base);
 @import "tailwindcss/utilities.css" layer(tailwind-utilities);
 
-@layer primeng {
+/* Import the fonts first, outside any layer */
 
-};
+/* Define variables in theme layer instead of base */
+@layer theme {
+  :root {
+    /* Font variables - keeping these as they're good */
+    --font-terminal: 'JetBrains Mono', monospace;
+    --font-terminal-retro: 'VT323', monospace;
+    --font-terminal-nier: 'Major Mono Display', monospace;
+
+    /* NieR Automata UI color scheme */
+    --color-nier-dark: #2a2a2a;        /* Dark background */
+    --color-nier-darker: #1f1f1f;      /* Darker background for contrast */
+    --color-nier-light: #e9dcc9;       /* Light parchment text color */
+    --color-nier-accent: #c8b086;      /* Golden tan accent */
+    --color-nier-highlight: #d9cdb9;   /* Brighter highlight for hover/focus */
+    --color-nier-subtle: #3a3a3a;      /* Slightly lighter than background for cards */
+    --color-nier-red: #9e3f3f;         /* For warnings/errors */
+  }
+}
+
+@layer tailwind-utilities {
+  /* Add these to your custom utilities */
+  .bg-nier-dark {
+    background-color: var(--color-nier-dark);
+  }
+
+  .bg-nier-darker {
+    background-color: var(--color-nier-darker);
+  }
+
+  .bg-nier-subtle {
+    background-color: var(--color-nier-subtle);
+  }
+
+  .text-nier-light {
+    color: var(--color-nier-light);
+  }
+
+  .text-nier-accent {
+    color: var(--color-nier-accent);
+  }
+
+  .text-nier-highlight {
+    color: var(--color-nier-highlight);
+  }
+
+  .border-nier-accent {
+    border-color: var(--color-nier-accent);
+  }
+}
+
+@layer primeng {
+  /* Your PrimeNG customizations here */
+}

tailwind.config.js

@@ -0,0 +1,23 @@
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      fontFamily: {
+        terminal: ["JetBrains Mono", "monospace"],
+        "terminal-retro": ["VT323", "monospace"],
+        "terminal-nier": ["Major Mono Display", "monospace"],
+      },
+      colors: {
+        nier: {
+          dark: "#2a2a2a",
+          darker: "#1f1f1f",
+          light: "#e9dcc9",
+          accent: "#c8b086",
+          highlight: "#d9cdb9",
+          subtle: "#3a3a3a",
+          red: "#9e3f3f",
+        },
+      },
+    },
+  },
+};