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

Added extra fonts, started button reusable component

Browse Source
This commit is contained in:
AdamBtech
2025-05-20 15:55:02 +02:00
parent 9a5f91685e
commit 2b2397e8a5
15 changed files with 49 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/features/about-display/about-display.component.html
View File

@@ -1,3 +1,3 @@
<section>
<p>ABOUT SECTION</p>
<section class="border-b-1 h-100 flex items-center justify-center">
<p class="text-6xl font-terminal-retro">ABOUT SECTION</p>
</section>

15
src/app/features/contact-display/contact-display.component.html
View File

@@ -1,3 +1,14 @@
<section>
<p>CONTACT FORM AND LINKS</p>
<section class="border-b-1 h-100 flex items-top justify-top bg-nier-bg p-6 relative">
<!-- First shadow layer (white/light) -->
<p class="absolute text-6xl font-noto-jp text-white opacity-50" style="top: 1.5rem; left: 1.5rem; transform: translate(1px, 1px);">
CONTACT FORM AND LINKS
</p>
<!-- Second shadow layer (dark) -->
<p class="absolute text-6xl font-noto-jp text-black opacity-15" style="top: 1.5rem; left: 1.5rem; transform: translate(5px, 10px);">
CONTACT FORM AND LINKS
</p>
<!-- Main text on top -->
<p class="relative text-6xl font-noto-jp text-nier-dark z-10">
CONTACT FORM AND LINKS
</p>
</section>

4
src/app/features/footer-display/footer-display.component.html
View File

@@ -1,3 +1,3 @@
<footer class="bg-nier-bg">
<p>FOOTER</p>
<footer class="bg-nier-dark border-b-1 h-100 flex items-center justify-center text-nier-light">
<p class="text-6xl font-terminal-retro">FOOTER</p>
</footer>

2
src/app/features/header-display/header-logo/header-logo.component.html
View File

@@ -1 +1 @@
<p class="font-terminal-nier text-xl">AB</p>
<p class="font-terminal-nier text-8xl">AB</p>

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

@@ -1,8 +1,8 @@
<nav>
<section>
<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()"/>
<nav class="flex items-center justify-center">
<section class="grid grid-cols-2 gap-4 mt-4">
<app-button class="flex items-center" label="Neural Profile" (click)="onClick()"/>
<app-button class="flex items-center" label="Execute//Directory" (click)="onClick()"/>
<app-button class="flex items-center" label="Operative History" (click)="onClick()"/>
<app-button class="flex items-center" label="Transmission Link" (click)="onClick()"/>
</section>
</nav>

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

@@ -1,4 +1,4 @@
<section class="">
<article><p class="text-6xl">HERO SECTION</p></article>
<article><p class="text-9xl">CREATIVE DEVELOPER</p></article>
<article class="border-b-1 h-100 flex items-center justify-center"><p class="text-9xl font-terminal-retro">HERO SECTION</p></article>
<article class="border-b-1 h-100 flex items-center justify-center"><p class="font-terminal-nier text-9xl">CREATIVE DEVELOPER</p></article>
</section>

2
src/app/features/project-display/components/projects-list/projects-list.component.html
View File

@@ -1,4 +1,4 @@
<section>
<article><p>PROJECT LIST</p></article>
<article class="border-b-1 h-100 flex items-center justify-center"><p class="text-6xl font-terminal-retro">PROJECTS</p></article>
</section>

3
src/app/features/sidebar-display/sidebar-display.component.html
View File

@@ -1 +1,2 @@
<p>SIDEBAR</p>
<p class="font-terminal-retro">SIDEBAR</p>

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

@@ -4,6 +4,6 @@
<app-projects />
<app-about />
<app-contact />
<app-sidebar />
</main>
<app-footer />
<app-sidebar />

4
src/app/shared/ui/button/button.component.css
View File

@@ -0,0 +1,4 @@
.button-hover:hover {
background-color: var(--color-nier-dark);
color: var(--color-nier-text-light);
}

8
src/app/shared/ui/button/button.component.html
View File

@@ -1,2 +1,6 @@
<button [class]="getButtonClass()"
(onClick)="handleClick()">{{label()}}</button>
<button
class="w-48 text-left font-noto-jp text-base uppercase transition-all duration-300 bg-nier-mid text-nier-dark rounded-none button-hover p-1.5"
(click)="handleClick()"
>
{{ label() }}
</button>

15
src/app/shared/ui/button/button.component.ts
View File

@@ -8,23 +8,8 @@ import { Component, input, output } from '@angular/core';
})
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();
}