From 4517ca020162e10a40e917b29f20e4405455db9e Mon Sep 17 00:00:00 2001 From: AdamBtech <60339324+AdamBtech@users.noreply.github.com> Date: Tue, 20 May 2025 10:44:59 +0200 Subject: [PATCH] Added file structure for sections about | hero | header | projects, picked the fonts and colors --- .../about-display/about-display.component.css | 0 .../about-display.component.html | 1 + .../about-display/about-display.component.ts | 11 ++++ .../header-logo/header-logo.component.html | 2 +- .../hero-display/hero-display.component.css | 0 .../hero-display/hero-display.component.html | 4 ++ .../hero-display/hero-display.component.ts | 11 ++++ .../projects-list.component.html | 5 +- src/app/layout/about/about.component.css | 0 src/app/layout/about/about.component.html | 1 + src/app/layout/about/about.component.ts | 11 ++++ .../components/header/header.component.html | 2 + .../layout/components/hero/hero.component.css | 0 .../components/hero/hero.component.html | 1 + .../layout/components/hero/hero.component.ts | 10 ++++ .../main-layout/main-layout.component.html | 1 + .../main-layout/main-layout.component.ts | 13 ++--- src/styles.css | 58 ++++++++++++++++++- tailwind.config.js | 23 ++++++++ 19 files changed, 141 insertions(+), 13 deletions(-) create mode 100644 src/app/features/about-display/about-display.component.css create mode 100644 src/app/features/about-display/about-display.component.html create mode 100644 src/app/features/about-display/about-display.component.ts create mode 100644 src/app/features/hero-display/hero-display.component.css create mode 100644 src/app/features/hero-display/hero-display.component.html create mode 100644 src/app/features/hero-display/hero-display.component.ts create mode 100644 src/app/layout/about/about.component.css create mode 100644 src/app/layout/about/about.component.html create mode 100644 src/app/layout/about/about.component.ts create mode 100644 src/app/layout/components/hero/hero.component.css create mode 100644 src/app/layout/components/hero/hero.component.html create mode 100644 src/app/layout/components/hero/hero.component.ts create mode 100644 tailwind.config.js diff --git a/src/app/features/about-display/about-display.component.css b/src/app/features/about-display/about-display.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/about-display/about-display.component.html b/src/app/features/about-display/about-display.component.html new file mode 100644 index 0000000..d3f41bf --- /dev/null +++ b/src/app/features/about-display/about-display.component.html @@ -0,0 +1 @@ +

about-display works!

diff --git a/src/app/features/about-display/about-display.component.ts b/src/app/features/about-display/about-display.component.ts new file mode 100644 index 0000000..5871289 --- /dev/null +++ b/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 { + +} diff --git a/src/app/features/header-display/header-logo/header-logo.component.html b/src/app/features/header-display/header-logo/header-logo.component.html index 4f5777d..dc273e2 100644 --- a/src/app/features/header-display/header-logo/header-logo.component.html +++ b/src/app/features/header-display/header-logo/header-logo.component.html @@ -1 +1 @@ -

Adam Logo

+

AB

diff --git a/src/app/features/hero-display/hero-display.component.css b/src/app/features/hero-display/hero-display.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/hero-display/hero-display.component.html b/src/app/features/hero-display/hero-display.component.html new file mode 100644 index 0000000..1b37e88 --- /dev/null +++ b/src/app/features/hero-display/hero-display.component.html @@ -0,0 +1,4 @@ +
+

HERO SECTION

+

CREATIVE DEVELOPER

+
diff --git a/src/app/features/hero-display/hero-display.component.ts b/src/app/features/hero-display/hero-display.component.ts new file mode 100644 index 0000000..22d157c --- /dev/null +++ b/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 { + +} diff --git a/src/app/features/project-display/components/projects-list/projects-list.component.html b/src/app/features/project-display/components/projects-list/projects-list.component.html index 6db9b64..c8f248c 100644 --- a/src/app/features/project-display/components/projects-list/projects-list.component.html +++ b/src/app/features/project-display/components/projects-list/projects-list.component.html @@ -1 +1,4 @@ -

projects-list works!

+
+

PROJECT LIST

+
+ diff --git a/src/app/layout/about/about.component.css b/src/app/layout/about/about.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/layout/about/about.component.html b/src/app/layout/about/about.component.html new file mode 100644 index 0000000..6094aa9 --- /dev/null +++ b/src/app/layout/about/about.component.html @@ -0,0 +1 @@ +

about works!

diff --git a/src/app/layout/about/about.component.ts b/src/app/layout/about/about.component.ts new file mode 100644 index 0000000..1988da8 --- /dev/null +++ b/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 { + +} diff --git a/src/app/layout/components/header/header.component.html b/src/app/layout/components/header/header.component.html index 9450441..e4d4cfe 100644 --- a/src/app/layout/components/header/header.component.html +++ b/src/app/layout/components/header/header.component.html @@ -1,6 +1,8 @@
+
+
diff --git a/src/app/layout/components/hero/hero.component.css b/src/app/layout/components/hero/hero.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/layout/components/hero/hero.component.html b/src/app/layout/components/hero/hero.component.html new file mode 100644 index 0000000..12fbd4d --- /dev/null +++ b/src/app/layout/components/hero/hero.component.html @@ -0,0 +1 @@ + diff --git a/src/app/layout/components/hero/hero.component.ts b/src/app/layout/components/hero/hero.component.ts new file mode 100644 index 0000000..5b13f13 --- /dev/null +++ b/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 {} 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 aeeeb7f..023df60 100644 --- a/src/app/layout/components/main-layout/main-layout.component.html +++ b/src/app/layout/components/main-layout/main-layout.component.html @@ -1,3 +1,4 @@ + 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 2829a11..f8167c9 100644 --- a/src/app/layout/components/main-layout/main-layout.component.ts +++ b/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 {} diff --git a/src/styles.css b/src/styles.css index 3333e31..1fa0f2d 100644 --- a/src/styles.css +++ b/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 */ +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..343f706 --- /dev/null +++ b/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", + }, + }, + }, + }, +};