Removed Primeng in favor of custom made components for easier styling (Too many Tailwind conflicts)

package-lock.json

@@ -17,8 +17,6 @@
         "@angular/router": "^19.2.0",
         "@primeng/themes": "^19.1.3",
         "prettier": "^3.5.3",
-        "primeicons": "^7.0.0",
-        "primeng": "^19.1.3",
         "rxjs": "~7.8.0",
         "tailwindcss-primeui": "^0.6.1",
         "tslib": "^2.3.0",
@@ -405,6 +403,7 @@
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.11.tgz",
       "integrity": "sha512-NR33bZVho7EgTc1fmCnmkwc2/U266n311Wfvk7VVtz+0Q9WliNdDLBon654V8IWSKvlqKXyU3W+fp0VjH/FvSw==",
       "license": "MIT",
+      "optional": true,
       "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
@@ -503,22 +502,6 @@
         }
       }
     },
-    "node_modules/@angular/cdk": {
-      "version": "19.2.16",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.16.tgz",
-      "integrity": "sha512-67nbWqoiZIBc8nEaCn7GHd02bM5T9qAbJ5w+Zq4V19CL3oCtrCrS4CV3Lsoi5HETSmn4iZcYS/Dph8omCvNkew==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "parse5": "^7.1.2",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^19.0.0 || ^20.0.0",
-        "@angular/core": "^19.0.0 || ^20.0.0",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
     "node_modules/@angular/cli": {
       "version": "19.2.12",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.12.tgz",
@@ -14669,6 +14652,7 @@
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -14709,6 +14693,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz",
       "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -15168,33 +15153,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/primeicons": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
-      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
-      "license": "MIT"
-    },
-    "node_modules/primeng": {
-      "version": "19.1.3",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-19.1.3.tgz",
-      "integrity": "sha512-KsrvJFblKg28kA6d4npnnABjKClmJv0CgDT/kOxFq5onQNBy4547DJzRGMba4+CMLKjHWWkYWuC+XSkPMNFrZg==",
-      "license": "SEE LICENSE IN LICENSE.md",
-      "dependencies": {
-        "@primeuix/styled": "^0.3.2",
-        "@primeuix/utils": "^0.3.2",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/animations": "^19.0.0",
-        "@angular/cdk": "^19.0.0",
-        "@angular/common": "^19.0.0",
-        "@angular/core": "^19.0.0",
-        "@angular/forms": "^19.0.0",
-        "@angular/platform-browser": "^19.0.0",
-        "@angular/router": "^19.0.0",
-        "rxjs": "^6.0.0 || ^7.8.1"
-      }
-    },
     "node_modules/proc-log": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",

package.json

@@ -19,8 +19,6 @@
     "@angular/router": "^19.2.0",
     "@primeng/themes": "^19.1.3",
     "prettier": "^3.5.3",
-    "primeicons": "^7.0.0",
-    "primeng": "^19.1.3",
     "rxjs": "~7.8.0",
     "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.3.0",

src/app/app.config.ts

@@ -2,23 +2,7 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { providePrimeNG } from 'primeng/config';
-import Aura from '@primeng/themes/aura'; // Choisissez votre thème
 
 export const appConfig: ApplicationConfig = {
-  providers: [
+  providers: [provideRouter(routes), provideAnimationsAsync()],
-    provideRouter(routes),
-    provideAnimationsAsync(),
-    providePrimeNG({
-      theme: {
-        preset: Aura,
-        options: {
-          cssLayer: {
-            name: 'primeng',
-            order: 'tailwind-base, primeng, tailwind-utilities'
-          }
-        }
-      }
-    })
-  ]
 };

src/app/features/header-display/header-nav-links/header-nav-links.component.html

@@ -1,20 +1,8 @@
 <nav>
   <section>
-  <p-button
+    <app-button label="Neural Profile" (click)="onClick()"/>
-    label="Neural Profile"
+    <app-button label="Execute//Directory" (click)="onClick()"/>
-    (onClick)="onClick()"
+    <app-button label="Operative History" (click)="onClick()"/>
-  ></p-button>
+    <app-button label="Transmission Link" (click)="onClick()"/>
-  <p-button
-    label="Execute//Directory"
-    (onClick)="onClick()"
-  ></p-button>
-  <p-button
-    label="Operative History"
-    (onClick)="onClick()"
-  ></p-button>
-    <p-button
-      label="Transmission Link"
-      (onClick)="onClick()"
-    ></p-button>
   </section>
 </nav>

src/app/features/header-display/header-nav-links/header-nav-links.component.ts

@@ -1,16 +1,15 @@
 import { Component } from '@angular/core';
 
-
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
-import { ButtonModule } from 'primeng/button';
 
 @Component({
   selector: 'app-header-nav-links',
-  imports: [ButtonModule],
+  imports: [ButtonComponent],
   templateUrl: './header-nav-links.component.html',
-  styleUrl: './header-nav-links.component.css'
+  styleUrl: './header-nav-links.component.css',
 })
 export class HeaderNavLinksComponent {
-  onClick(){
+  onClick() {
     console.log('click');
   }
 }

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

@@ -1,4 +1,4 @@
-<section>
+<section class="">
-  <article><p>HERO SECTION</p></article>
+  <article><p class="text-6xl">HERO SECTION</p></article>
-  <article><p>CREATIVE DEVELOPER</p></article>
+  <article><p class="text-9xl">CREATIVE DEVELOPER</p></article>
 </section>

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

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

src/app/shared/ui/button/button.component.html

@@ -0,0 +1,2 @@
+<button [class]="getButtonClass()"
+  (onClick)="handleClick()">{{label()}}</button>

src/app/shared/ui/button/button.component.ts

@@ -0,0 +1,31 @@
+import { Component, input, output } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  imports: [],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css',
+})
+export class ButtonComponent {
+  label = input<string>('label');
+  selected = input<boolean>(false);
+  isNav = input<boolean>(false);
+  onClick = output<void>();
+
+  getButtonClass() {
+    const baseClass =
+      'font-terminal-retro uppercase transition-all duration-300';
+
+    if (this.isNav()) {
+      return `${baseClass} bg-transparent text-nier-text-dark border-0 hover:underline`;
+    }
+
+    return this.selected()
+      ? `${baseClass} bg-nier-dark text-nier-text-light border border-nier-border rounded-none`
+      : `${baseClass} bg-nier-mid text-nier-text-dark border border-nier-border rounded-none hover:bg-nier-dark hover:text-nier-text-light`;
+  }
+
+  handleClick() {
+    this.onClick.emit();
+  }
+}

src/styles.css

@@ -1,8 +1,6 @@
 @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;
+@layer theme, tailwind-base, tailwind-utilities;
-
-@import "tailwindcss-primeui";
 
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/preflight.css" layer(tailwind-base);
@@ -27,7 +25,22 @@
     --color-nier-highlight: #5a5a50;  /* Highlight for selection */
   }
 }
+
 @layer tailwind-utilities {
+  /* Font utilities */
+  .font-terminal {
+    font-family: var(--font-terminal);
+  }
+
+  .font-terminal-retro {
+    font-family: var(--font-terminal-retro);
+  }
+
+  .font-terminal-nier {
+    font-family: var(--font-terminal-nier);
+  }
+
+  /* Background utilities */
   .bg-nier-bg {
     background-color: var(--color-nier-bg);
   }
@@ -40,6 +53,7 @@
     background-color: var(--color-nier-mid);
   }
 
+  /* Text utilities */
   .text-nier-dark {
     color: var(--color-nier-text-dark);
   }
@@ -48,10 +62,15 @@
     color: var(--color-nier-text-light);
   }
 
+  /* Border utilities */
   .border-nier-border {
     border-color: var(--color-nier-border);
   }
 
+  .border-nier-accent {
+    border-color: var(--color-nier-accent);
+  }
+
   /* Grid background utility */
   .bg-nier-grid {
     background-color: var(--color-nier-bg);
@@ -59,8 +78,39 @@
     linear-gradient(90deg, var(--color-nier-grid) 1px, transparent 1px);
     background-size: 20px 20px;
   }
-}
 
-@layer primeng {
+  /* Button utilities */
-  /* Your PrimeNG customizations here */
+  .nier-button {
+    background-color: var(--color-nier-mid);
+    color: var(--color-nier-text-dark);
+    border: 1px solid var(--color-nier-border);
+    font-family: var(--font-terminal-retro);
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+    transition: all 0.3s;
+  }
+
+  .nier-button:hover {
+    background-color: var(--color-nier-dark);
+    color: var(--color-nier-text-light);
+  }
+
+  .nier-button-active {
+    background-color: var(--color-nier-dark);
+    color: var(--color-nier-text-light);
+    border: 1px solid var(--color-nier-border);
+    font-family: var(--font-terminal-retro);
+    text-transform: uppercase;
+    padding: 0.5rem 1rem;
+  }
+
+  /* Interactive element focus styles */
+  .nier-focus-ring {
+    outline: none;
+  }
+
+  .nier-focus-ring:focus-visible {
+    outline: 2px solid var(--color-nier-dark);
+    outline-offset: 1px;
+  }
 }