Added components architecture and order to main layout

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

@@ -1 +1,3 @@
-<p>about-display works!</p>
+<section>
+  <p>ABOUT SECTION</p>
+</section>

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

@@ -0,0 +1,3 @@
+<section>
+  <p>CONTACT FORM AND LINKS</p>
+</section>

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

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

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

@@ -0,0 +1,3 @@
+<footer class="bg-nier-bg">
+  <p>FOOTER</p>
+</footer>

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

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

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

@@ -0,0 +1 @@
+<p>SIDEBAR</p>

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

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

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

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

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

@@ -1,11 +0,0 @@
-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/about/about.component.html

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

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

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

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

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

src/app/layout/components/contact/contact.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -1,3 +1 @@
-<footer>
-  <p>footer works!</p>
-</footer>
+<app-footer-display />

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

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

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

@@ -1,5 +1,5 @@
 <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">
+  <section class="grid grid-cols-[1fr_5fr_4fr_4fr] gap-1 bg-nier-bg font-terminal text-nier-dark divide-x divide-nier-accent/30 border border-nier-accent h-32">
   <app-header-logo />
   <app-header-text-animate-section />
   <app-header-nav-links />

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

@@ -1,4 +1,9 @@
 <app-header />
+<main class="bg-nier-bg">
   <app-hero />
+  <app-about />
+  <app-projects />
+  <app-contact />
   <app-sidebar />
+</main>
 <app-footer />

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

@@ -3,10 +3,21 @@ import {FooterComponent} from '../footer/footer.component';
 import { SidebarComponent } from '../sidebar/sidebar.component';
 import { HeaderComponent } from '../header/header.component';
 import { HeroComponent } from '../hero/hero.component';
+import { AboutComponent } from '../about/about.component';
+import { ProjectsComponent } from '../projects/projects.component';
+import { ContactComponent } from '../contact/contact.component';
 
 @Component({
   selector: 'app-main-layout',
-  imports: [FooterComponent, SidebarComponent, HeaderComponent, HeroComponent],
+  imports: [
+    FooterComponent,
+    SidebarComponent,
+    HeaderComponent,
+    HeroComponent,
+    AboutComponent,
+    ProjectsComponent,
+    ContactComponent,
+  ],
   templateUrl: './main-layout.component.html',
   styleUrl: './main-layout.component.css',
 })

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

@@ -0,0 +1 @@
+<app-projects-list />

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import {
+  ProjectsListComponent
+} from '../../../features/project-display/components/projects-list/projects-list.component';
+
+@Component({
+  selector: 'app-projects',
+  imports: [ProjectsListComponent],
+  templateUrl: './projects.component.html',
+  styleUrl: './projects.component.css',
+})
+export class ProjectsComponent {}

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

@@ -1,7 +1 @@
-<div>
-  <nav>
-    <li>sidebar works</li>
-    <li>sidebar works</li>
-    <li>sidebar works</li>
-  </nav>
-</div>
+<app-sidebar-display />

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

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

src/styles.css

@@ -8,55 +8,56 @@
 @import "tailwindcss/preflight.css" layer(tailwind-base);
 @import "tailwindcss/utilities.css" layer(tailwind-utilities);
 
-/* 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 variables */
     --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 */
+    /* Authentic NieR Automata UI colors from screenshot */
+    --color-nier-bg: #dcd8c0;         /* Main parchment background */
+    --color-nier-dark: #5a5a50;       /* Dark UI elements */
+    --color-nier-mid: #adaba0;        /* Medium gray UI elements */
+    --color-nier-text-dark: #292925;  /* Dark text */
+    --color-nier-text-light: #dcd8c0; /* Light text */
+    --color-nier-border: #a39e8c;     /* Border color */
+    --color-nier-grid: #bfbcad;       /* Grid lines */
+    --color-nier-accent: #292925;     /* Dark accent */
+    --color-nier-highlight: #5a5a50;  /* Highlight for selection */
   }
 }
+@layer tailwind-utilities {
+  .bg-nier-bg {
+    background-color: var(--color-nier-bg);
+  }
 
-@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-mid {
+    background-color: var(--color-nier-mid);
   }
 
-  .bg-nier-subtle {
-    background-color: var(--color-nier-subtle);
+  .text-nier-dark {
+    color: var(--color-nier-text-dark);
   }
 
   .text-nier-light {
-    color: var(--color-nier-light);
+    color: var(--color-nier-text-light);
   }
 
-  .text-nier-accent {
-    color: var(--color-nier-accent);
+  .border-nier-border {
+    border-color: var(--color-nier-border);
   }
 
-  .text-nier-highlight {
-    color: var(--color-nier-highlight);
-  }
-
-  .border-nier-accent {
-    border-color: var(--color-nier-accent);
+  /* Grid background utility */
+  .bg-nier-grid {
+    background-color: var(--color-nier-bg);
+    background-image: linear-gradient(var(--color-nier-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-nier-grid) 1px, transparent 1px);
+    background-size: 20px 20px;
   }
 }
 

tailwind.config.js

@@ -9,13 +9,15 @@ module.exports = {
       },
       colors: {
         nier: {
-          dark: "#2a2a2a",
-          darker: "#1f1f1f",
-          light: "#e9dcc9",
-          accent: "#c8b086",
-          highlight: "#d9cdb9",
-          subtle: "#3a3a3a",
-          red: "#9e3f3f",
+          bg: "#dcd8c0",
+          dark: "#5a5a50",
+          mid: "#adaba0",
+          "text-dark": "#292925",
+          "text-light": "#dcd8c0",
+          border: "#a39e8c",
+          grid: "#bfbcad",
+          accent: "#292925",
+          highlight: "#5a5a50",
         },
       },
     },