From 7b1e02d8bf01b6179d3e49be55dde72a97effbfd Mon Sep 17 00:00:00 2001 From: AdamBtech <60339324+AdamBtech@users.noreply.github.com> Date: Tue, 20 May 2025 11:13:00 +0200 Subject: [PATCH] Added components architecture and order to main layout --- src/app/app.component.html | 2 +- .../about-display.component.html | 4 +- .../contact-display.component.css} | 0 .../contact-display.component.html | 3 + .../contact-display.component.ts | 11 ++++ .../footer-display.component.css | 0 .../footer-display.component.html | 3 + .../footer-display.component.ts | 11 ++++ .../sidebar-display.component.css | 0 .../sidebar-display.component.html | 1 + .../sidebar-display.component.ts | 11 ++++ src/app/layout/about/about.component.html | 1 - src/app/layout/about/about.component.ts | 11 ---- .../components/about/about.component.css | 0 .../components/about/about.component.html | 1 + .../components/about/about.component.ts | 10 ++++ .../components/contact/contact.component.css | 0 .../components/contact/contact.component.html | 1 + .../contact/contact.component.spec.ts | 23 ++++++++ .../components/contact/contact.component.ts | 10 ++++ .../components/footer/footer.component.html | 4 +- .../components/footer/footer.component.ts | 9 ++- .../components/header/header.component.html | 2 +- .../main-layout/main-layout.component.html | 9 ++- .../main-layout/main-layout.component.ts | 21 +++++-- .../projects/projects.component.css | 0 .../projects/projects.component.html | 1 + .../components/projects/projects.component.ts | 12 ++++ .../components/sidebar/sidebar.component.html | 8 +-- .../components/sidebar/sidebar.component.ts | 9 ++- src/styles.css | 55 ++++++++++--------- tailwind.config.js | 16 +++--- 32 files changed, 173 insertions(+), 76 deletions(-) rename src/app/{layout/about/about.component.css => features/contact-display/contact-display.component.css} (100%) create mode 100644 src/app/features/contact-display/contact-display.component.html create mode 100644 src/app/features/contact-display/contact-display.component.ts create mode 100644 src/app/features/footer-display/footer-display.component.css create mode 100644 src/app/features/footer-display/footer-display.component.html create mode 100644 src/app/features/footer-display/footer-display.component.ts create mode 100644 src/app/features/sidebar-display/sidebar-display.component.css create mode 100644 src/app/features/sidebar-display/sidebar-display.component.html create mode 100644 src/app/features/sidebar-display/sidebar-display.component.ts delete mode 100644 src/app/layout/about/about.component.html delete mode 100644 src/app/layout/about/about.component.ts create mode 100644 src/app/layout/components/about/about.component.css create mode 100644 src/app/layout/components/about/about.component.html create mode 100644 src/app/layout/components/about/about.component.ts create mode 100644 src/app/layout/components/contact/contact.component.css create mode 100644 src/app/layout/components/contact/contact.component.html create mode 100644 src/app/layout/components/contact/contact.component.spec.ts create mode 100644 src/app/layout/components/contact/contact.component.ts create mode 100644 src/app/layout/components/projects/projects.component.css create mode 100644 src/app/layout/components/projects/projects.component.html create mode 100644 src/app/layout/components/projects/projects.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 793f8a7..c09dea7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -6,7 +6,7 @@ {{title}} - + diff --git a/src/app/features/about-display/about-display.component.html b/src/app/features/about-display/about-display.component.html index d3f41bf..d759943 100644 --- a/src/app/features/about-display/about-display.component.html +++ b/src/app/features/about-display/about-display.component.html @@ -1 +1,3 @@ -

about-display works!

+
+

ABOUT SECTION

+
diff --git a/src/app/layout/about/about.component.css b/src/app/features/contact-display/contact-display.component.css similarity index 100% rename from src/app/layout/about/about.component.css rename to src/app/features/contact-display/contact-display.component.css diff --git a/src/app/features/contact-display/contact-display.component.html b/src/app/features/contact-display/contact-display.component.html new file mode 100644 index 0000000..66159c9 --- /dev/null +++ b/src/app/features/contact-display/contact-display.component.html @@ -0,0 +1,3 @@ +
+

CONTACT FORM AND LINKS

+
diff --git a/src/app/features/contact-display/contact-display.component.ts b/src/app/features/contact-display/contact-display.component.ts new file mode 100644 index 0000000..ec9e3e6 --- /dev/null +++ b/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 { + +} diff --git a/src/app/features/footer-display/footer-display.component.css b/src/app/features/footer-display/footer-display.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/footer-display/footer-display.component.html b/src/app/features/footer-display/footer-display.component.html new file mode 100644 index 0000000..8da4d90 --- /dev/null +++ b/src/app/features/footer-display/footer-display.component.html @@ -0,0 +1,3 @@ +
+

FOOTER

+
diff --git a/src/app/features/footer-display/footer-display.component.ts b/src/app/features/footer-display/footer-display.component.ts new file mode 100644 index 0000000..c68bebb --- /dev/null +++ b/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 { + +} diff --git a/src/app/features/sidebar-display/sidebar-display.component.css b/src/app/features/sidebar-display/sidebar-display.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/sidebar-display/sidebar-display.component.html b/src/app/features/sidebar-display/sidebar-display.component.html new file mode 100644 index 0000000..4f877f1 --- /dev/null +++ b/src/app/features/sidebar-display/sidebar-display.component.html @@ -0,0 +1 @@ +

SIDEBAR

diff --git a/src/app/features/sidebar-display/sidebar-display.component.ts b/src/app/features/sidebar-display/sidebar-display.component.ts new file mode 100644 index 0000000..c3c9c9e --- /dev/null +++ b/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 { + +} diff --git a/src/app/layout/about/about.component.html b/src/app/layout/about/about.component.html deleted file mode 100644 index 6094aa9..0000000 --- a/src/app/layout/about/about.component.html +++ /dev/null @@ -1 +0,0 @@ -

about works!

diff --git a/src/app/layout/about/about.component.ts b/src/app/layout/about/about.component.ts deleted file mode 100644 index 1988da8..0000000 --- a/src/app/layout/about/about.component.ts +++ /dev/null @@ -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 { - -} diff --git a/src/app/layout/components/about/about.component.css b/src/app/layout/components/about/about.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/layout/components/about/about.component.html b/src/app/layout/components/about/about.component.html new file mode 100644 index 0000000..aade7cf --- /dev/null +++ b/src/app/layout/components/about/about.component.html @@ -0,0 +1 @@ + diff --git a/src/app/layout/components/about/about.component.ts b/src/app/layout/components/about/about.component.ts new file mode 100644 index 0000000..955aa6e --- /dev/null +++ b/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 {} diff --git a/src/app/layout/components/contact/contact.component.css b/src/app/layout/components/contact/contact.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/layout/components/contact/contact.component.html b/src/app/layout/components/contact/contact.component.html new file mode 100644 index 0000000..d34cbbb --- /dev/null +++ b/src/app/layout/components/contact/contact.component.html @@ -0,0 +1 @@ + diff --git a/src/app/layout/components/contact/contact.component.spec.ts b/src/app/layout/components/contact/contact.component.spec.ts new file mode 100644 index 0000000..dae8ee6 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ContactComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/layout/components/contact/contact.component.ts b/src/app/layout/components/contact/contact.component.ts new file mode 100644 index 0000000..7cbfc0c --- /dev/null +++ b/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 {} diff --git a/src/app/layout/components/footer/footer.component.html b/src/app/layout/components/footer/footer.component.html index c7e5f4b..54a2a5e 100644 --- a/src/app/layout/components/footer/footer.component.html +++ b/src/app/layout/components/footer/footer.component.html @@ -1,3 +1 @@ -
-

footer works!

-
+ diff --git a/src/app/layout/components/footer/footer.component.ts b/src/app/layout/components/footer/footer.component.ts index 08cf5c1..d28de75 100644 --- a/src/app/layout/components/footer/footer.component.ts +++ b/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 {} diff --git a/src/app/layout/components/header/header.component.html b/src/app/layout/components/header/header.component.html index e4d4cfe..b74ce07 100644 --- a/src/app/layout/components/header/header.component.html +++ b/src/app/layout/components/header/header.component.html @@ -1,5 +1,5 @@
-
+
diff --git a/src/app/layout/components/main-layout/main-layout.component.html b/src/app/layout/components/main-layout/main-layout.component.html index 023df60..a644189 100644 --- a/src/app/layout/components/main-layout/main-layout.component.html +++ b/src/app/layout/components/main-layout/main-layout.component.html @@ -1,4 +1,9 @@ - - +
+ + + + + +
diff --git a/src/app/layout/components/main-layout/main-layout.component.ts b/src/app/layout/components/main-layout/main-layout.component.ts index f8167c9..71751de 100644 --- a/src/app/layout/components/main-layout/main-layout.component.ts +++ b/src/app/layout/components/main-layout/main-layout.component.ts @@ -1,12 +1,23 @@ 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'; +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', }) diff --git a/src/app/layout/components/projects/projects.component.css b/src/app/layout/components/projects/projects.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/layout/components/projects/projects.component.html b/src/app/layout/components/projects/projects.component.html new file mode 100644 index 0000000..16de6bf --- /dev/null +++ b/src/app/layout/components/projects/projects.component.html @@ -0,0 +1 @@ + diff --git a/src/app/layout/components/projects/projects.component.ts b/src/app/layout/components/projects/projects.component.ts new file mode 100644 index 0000000..63e5bc6 --- /dev/null +++ b/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 {} diff --git a/src/app/layout/components/sidebar/sidebar.component.html b/src/app/layout/components/sidebar/sidebar.component.html index 76a279f..de07bf1 100644 --- a/src/app/layout/components/sidebar/sidebar.component.html +++ b/src/app/layout/components/sidebar/sidebar.component.html @@ -1,7 +1 @@ -
- -
+ diff --git a/src/app/layout/components/sidebar/sidebar.component.ts b/src/app/layout/components/sidebar/sidebar.component.ts index ebdf51e..25300e3 100644 --- a/src/app/layout/components/sidebar/sidebar.component.ts +++ b/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 {} diff --git a/src/styles.css b/src/styles.css index 1fa0f2d..3904463 100644 --- a/src/styles.css +++ b/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 { - /* Add these to your custom utilities */ + .bg-nier-bg { + background-color: var(--color-nier-bg); + } + .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; } } diff --git a/tailwind.config.js b/tailwind.config.js index 343f706..cbaec6a 100644 --- a/tailwind.config.js +++ b/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", }, }, },