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: [
-    FooterComponent,
-    SidebarComponent,
-    HeaderComponent
-  ],
+  imports: [FooterComponent, SidebarComponent, HeaderComponent, HeroComponent],
   templateUrl: './main-layout.component.html',
-  styleUrl: './main-layout.component.css'
+  styleUrl: './main-layout.component.css',
 })
-export class MainLayoutComponent {
-
-}
+export class MainLayoutComponent {}