CavyDev/my_portfolio
1
0
Fork 0
mirror of https://github.com/adam-benyekkou/my_portfolio.git synced 2026-01-15 20:20:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
AdamBtech
2025-05-20 13:40:59 +02:00
parent 7b1e02d8bf
commit 9a5f91685e
11 changed files with 105 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

18
src/app/app.config.ts
View File

@@ -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: [
provideRouter(routes),
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Aura,
options: {
cssLayer: {
name: 'primeng',
order: 'tailwind-base, primeng, tailwind-utilities'
}
}
}
})
]
providers: [provideRouter(routes), provideAnimationsAsync()],
};

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

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

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

@@ -1,13 +1,12 @@
import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { ButtonComponent } from '../../../shared/ui/button/button.component';
@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() {

6
src/app/features/hero-display/hero-display.component.html
View File

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

2
src/app/layout/components/main-layout/main-layout.component.html
View File

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

0
src/app/shared/ui/button/button.component.css Normal file
View File

2
src/app/shared/ui/button/button.component.html Normal file
View File

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

31
src/app/shared/ui/button/button.component.ts Normal file
View File

@@ -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();
}
}

60
src/styles.css
View File

@@ -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;
@import "tailwindcss-primeui";
@layer theme, tailwind-base, tailwind-utilities;
@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;
}
/* Button utilities */
.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;
}
@layer primeng {
/* Your PrimeNG customizations here */
.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;
}
}