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

3
angular.json
View File

@@ -86,8 +86,7 @@
}
],
"styles": [
"src/styles.css",
"./node_modules/tailwindcss-primeui/v4/index.css"
"src/styles.css"
],
"scripts": []
}

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

48
src/styles.css
View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=Noto+Sans+JP:wght@300;400;500&family=VT323&display=swap');
@layer theme, tailwind-base, tailwind-utilities;
@@ -12,6 +12,7 @@
--font-terminal: 'JetBrains Mono', monospace;
--font-terminal-retro: 'VT323', monospace;
--font-terminal-nier: 'Major Mono Display', monospace;
--font-noto-jp: 'Noto Sans JP', sans-serif;
/* Authentic NieR Automata UI colors from screenshot */
--color-nier-bg: #dcd8c0; /* Main parchment background */
@@ -40,6 +41,11 @@
font-family: var(--font-terminal-nier);
}
.font-noto-jp {
font-family: var(--font-noto-jp);
letter-spacing: -0.02em; /* Slight adjustment to mimic NieR style */
}
/* Background utilities */
.bg-nier-bg {
background-color: var(--color-nier-bg);
@@ -72,45 +78,5 @@
}
/* 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;
}
/* 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;
}
.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;
}
}

1
tailwind.config.js
View File

@@ -6,6 +6,7 @@ module.exports = {
terminal: ["JetBrains Mono", "monospace"],
"terminal-retro": ["VT323", "monospace"],
"terminal-nier": ["Major Mono Display", "monospace"],
"noto-jp": ["Noto Sans JP", "sans-serif"],
},
colors: {
nier: {