mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-15 20:20:09 +00:00
Added contact link section and styling, added responsiveness the header as a whole
This commit is contained in:
AdamBtech
@@ -0,0 +1,334 @@
|
||||
.svg-button-container {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Add .svg-icon class to target just the SVGs */
|
||||
.svg-icon {
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
/* Change SVG color on hover using filter */
|
||||
.svg-button-container:hover .svg-icon,
|
||||
.svg-button-container:active .svg-icon {
|
||||
/* This creates a light beige/sepia filter similar to nier-light */
|
||||
filter: invert(80%) sepia(12%) saturate(176%) hue-rotate(343deg)
|
||||
brightness(106%) contrast(97%);
|
||||
}
|
||||
|
||||
/* Background fill effect */
|
||||
.svg-button-container::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
bottom: 3px;
|
||||
width: 0;
|
||||
height: auto;
|
||||
background-color: var(--color-nier-dark, rgba(30, 30, 30, 0.8));
|
||||
transition: width 0.2s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.svg-button-container:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Glitch effect on hover */
|
||||
.svg-button-container::after {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-nier-text-light, rgba(230, 230, 230, 0.9));
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
font-family: "Noto Sans JP", monospace;
|
||||
}
|
||||
|
||||
.svg-button-container:hover::after {
|
||||
animation: nier-button-glitch 0.6s ease forwards;
|
||||
}
|
||||
|
||||
/* Scan line effect */
|
||||
.svg-button-container .scan-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-nier-text-light, rgba(230, 230, 230, 0.9));
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.svg-button-container:hover .scan-line {
|
||||
animation: nier-button-scan 0.3s ease forwards;
|
||||
}
|
||||
|
||||
/* The glitch effect animation */
|
||||
@keyframes nier-button-glitch {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(0);
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
10% {
|
||||
opacity: 0.2;
|
||||
transform: translateX(-2px);
|
||||
clip-path: inset(10% 0 80% 0);
|
||||
}
|
||||
12% {
|
||||
opacity: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.2;
|
||||
transform: translateX(2px);
|
||||
clip-path: inset(30% 0 50% 0);
|
||||
}
|
||||
22% {
|
||||
opacity: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
30% {
|
||||
opacity: 0.1;
|
||||
transform: translateX(-1px);
|
||||
clip-path: inset(50% 0 20% 0);
|
||||
}
|
||||
32% {
|
||||
opacity: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* The scan line animation */
|
||||
@keyframes nier-button-scan {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button click effect */
|
||||
.svg-button-container:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.svg-button-container:active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
opacity: 0;
|
||||
animation: nier-button-flash 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes nier-button-flash {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch device optimization */
|
||||
@media (hover: none) {
|
||||
.svg-button-container:active::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.svg-button-container:active .scan-line {
|
||||
animation: nier-button-scan 0.3s ease forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.nier-link {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: var(--color-nier-dark, #333);
|
||||
transition: color 0.2s ease;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
text-decoration: none;
|
||||
padding: 0 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Underline effect */
|
||||
.nier-link::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: var(--color-nier-darker, #111);
|
||||
transition: width 0.2s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.nier-link:hover,
|
||||
.nier-link:focus {
|
||||
color: var(--color-nier-darker, #111);
|
||||
outline: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nier-link:hover::before,
|
||||
.nier-link:focus::before {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/* Glitch effect on hover */
|
||||
.nier-link::after {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-nier-darker, #111);
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nier-link:hover::after {
|
||||
animation: nier-link-glitch 0.6s ease forwards;
|
||||
}
|
||||
|
||||
/* Subtle scan line on hover */
|
||||
.nier-link .scan-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--color-nier-darker, #111);
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nier-link:hover .scan-line {
|
||||
animation: nier-link-scan 0.3s ease forwards;
|
||||
}
|
||||
|
||||
/* Glitch effect animation */
|
||||
@keyframes nier-link-glitch {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
transform: translateX(0);
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
10% {
|
||||
opacity: 0.3;
|
||||
transform: translateX(-1px);
|
||||
clip-path: inset(10% 0 80% 0);
|
||||
}
|
||||
12% {
|
||||
opacity: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.3;
|
||||
transform: translateX(1px);
|
||||
clip-path: inset(30% 0 50% 0);
|
||||
}
|
||||
22% {
|
||||
opacity: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
30% {
|
||||
opacity: 0.2;
|
||||
transform: translateX(-1px);
|
||||
clip-path: inset(50% 0 20% 0);
|
||||
}
|
||||
32% {
|
||||
opacity: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Scan line animation */
|
||||
@keyframes nier-link-scan {
|
||||
0% {
|
||||
opacity: 0.6;
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Click effect */
|
||||
.nier-link:active {
|
||||
transform: translateY(1px);
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.nier-link:active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
opacity: 0;
|
||||
animation: nier-link-flash 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes nier-link-flash {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch device optimization */
|
||||
@media (hover: none) {
|
||||
.nier-link:active::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nier-link:active {
|
||||
color: var(--color-nier-darker, #111);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nier-link:active .scan-line {
|
||||
animation: nier-link-scan 0.3s ease forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,47 @@
|
||||
<p>header-contact-links works!</p>
|
||||
<section class="grid grid-cols-1 md:grid-cols-[2fr_6fr_2fr] h-full w-full">
|
||||
<article class="border-r-0 md:border-r-1 flex flex-row w-full">
|
||||
<div class="grid grid-rows-2 border-r-1 w-2/3 h-full">
|
||||
<a href="https://github.com/adam-benyekkou" target="_blank">
|
||||
<div class="border-b-1 w-full h-full">
|
||||
<div class="flex items-center justify-center h-full w-full svg-button-container" data-label="GitHub">
|
||||
<img class="w-10 h-10 relative z-10 svg-icon" src="github_logo.svg" alt="GitHub Logo">
|
||||
<span class="scan-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/adambnk/" target="_blank">
|
||||
<div class="w-full h-full">
|
||||
<div class="flex items-center justify-center h-full w-full svg-button-container" data-label="LinkedIn">
|
||||
<img class="w-8 h-8 relative z-10 svg-icon" src="linkedin_logo.svg" alt="LinkedIn Logo">
|
||||
<span class="scan-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-1/3 flex items-center justify-center h-full svg-button-container" data-label="Theme">
|
||||
<img class="w-10 h-10 relative z-10 svg-icon" src="theme_button.svg" alt="Theme Button">
|
||||
<span class="scan-line"></span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="border-r-0 md:border-r-1 grid grid-rows-2 w-full h-full my-4 md:my-0">
|
||||
<div class="border-b-1 w-full h-full">
|
||||
<p class="flex items-center justify-center h-full w-full">Operating from french tech-hideout</p>
|
||||
</div>
|
||||
<div class="w-full h-full">
|
||||
<p class="flex items-center justify-center h-full w-full">
|
||||
Tech operative ready >
|
||||
<a href="https://www.linkedin.com/in/adambnk/" target="_blank" class="nier-link ml-2" data-label="Deploy my skills">
|
||||
<span class="relative z-10">Deploy my skills</span>
|
||||
<span class="scan-line"></span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="flex items-center justify-center w-full h-full">
|
||||
<a href="mailto:your.email@example.com?subject=Initialize%20Connection%20-&body=System%20message%3A%20Your%20connection%20request%20has%20been%20received.%20Please%20provide%20your%20message%20to%20establish%20communication.">
|
||||
<img src="email_qr_black.svg" alt="Email QR Code" class="max-w-full h-auto">
|
||||
</a>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@@ -1,36 +1,156 @@
|
||||
<header>
|
||||
<!-- Mobile Layout (< 768px) -->
|
||||
<section
|
||||
class="grid grid-cols-[1fr_5fr_4fr_4fr] gap-1 bg-nier-bg font-terminal text-nier-dark divide-x divide-nier-accent/30 border border-nier-accent h-32"
|
||||
class="md:hidden grid grid-cols-1 bg-nier-bg font-terminal text-nier-dark border border-nier-accent overflow-hidden"
|
||||
>
|
||||
<app-header-logo />
|
||||
<app-header-text-animate-section
|
||||
[phrases]="[
|
||||
'Converting existential dread to binary...',
|
||||
'Hacking the mainframe with a rubber duck...',
|
||||
'Error: Sarcasm module overloaded. Rebooting...',
|
||||
'Coffee.exe has stopped working. Attempting to reboot human...',
|
||||
'Cybernetic guinea pigs have seized control of Sector 7...',
|
||||
'ERROR: Reality.dll has crashed. Would you like to submit a bug report?',
|
||||
'Synthetic sushi generation complete. Tastes like chicken.exe...',
|
||||
'Decrypting corporate secrets... replaced with cat videos...',
|
||||
'Attempting to find motivation.exe... running scan...',
|
||||
'Corporate-mandated fun protocol initiated...',
|
||||
'Rerouting power to sarcasm generators...',
|
||||
'Cybernetic arm requesting high-five calibration...',
|
||||
'Deleting unnecessary small talk subroutines...',
|
||||
'AI analyzing your taste in music... respect decreased by 17%...',
|
||||
'Searching for affordable apartment in Night City... zero results...',
|
||||
'Tactical roomba squad deployed to kitchen sector...',
|
||||
'Virtual assistant has muted your notifications... all of them...',
|
||||
'Installing social skills patch 2.0... buffering...',
|
||||
'Your smart fridge: "The expired milk stays. I like the science experiment."',
|
||||
'Digital plant monitor reports: "Even cacti need water sometimes."',
|
||||
'Calculating fastest route to avoid small talk...',
|
||||
'Quantum computer processing your excuse... seems implausible...',
|
||||
]"
|
||||
[interval]="2500"
|
||||
/>
|
||||
<app-header-nav-links />
|
||||
<app-header-contact-links />
|
||||
<div class="flex justify-center py-3 border-b border-nier-accent/30">
|
||||
<app-header-logo />
|
||||
</div>
|
||||
<div class="py-3 border-b border-nier-accent/30 min-h-[100px]">
|
||||
<app-header-text-animate-section
|
||||
[phrases]="[
|
||||
'Converting existential dread to binary...',
|
||||
'Hacking the mainframe with a rubber duck...',
|
||||
'Error: Sarcasm module overloaded. Rebooting...',
|
||||
'Coffee.exe has stopped working. Attempting to reboot human...',
|
||||
'Cybernetic guinea pigs have seized control of Sector 7...',
|
||||
'ERROR: Reality.dll has crashed. Would you like to submit a bug report?',
|
||||
'Synthetic sushi generation complete. Tastes like chicken.exe...',
|
||||
'Decrypting corporate secrets... replaced with cat videos...',
|
||||
'Attempting to find motivation.exe... running scan...',
|
||||
'Corporate-mandated fun protocol initiated...',
|
||||
'Rerouting power to sarcasm generators...',
|
||||
'Cybernetic arm requesting high-five calibration...',
|
||||
'Deleting unnecessary small talk subroutines...',
|
||||
'AI analyzing your taste in music... respect decreased by 17%...',
|
||||
'Searching for affordable apartment in Night City... zero results...',
|
||||
'Tactical roomba squad deployed to kitchen sector...',
|
||||
'Virtual assistant has muted your notifications... all of them...',
|
||||
'Installing social skills patch 2.0... buffering...',
|
||||
'Your smart fridge: "The expired milk stays. I like the science experiment."',
|
||||
'Digital plant monitor reports: "Even cacti need water sometimes."',
|
||||
'Calculating fastest route to avoid small talk...',
|
||||
'Quantum computer processing your excuse... seems implausible...',
|
||||
]"
|
||||
[interval]="2500"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center py-3 space-y-2 sm:space-y-0 sm:space-x-4 border-b border-nier-accent/30">
|
||||
<app-header-nav-links />
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-2 py-3">
|
||||
<app-header-contact-links />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tablet Layout (768px - 1023px) -->
|
||||
<section
|
||||
class="hidden md:grid lg:hidden grid-cols-[1fr_3fr] grid-rows-2 gap-1 bg-nier-bg font-terminal text-nier-dark divide-x divide-nier-accent/30 border border-nier-accent overflow-hidden min-h-[180px]"
|
||||
>
|
||||
<div class="border-b border-nier-accent/30 flex items-center justify-center">
|
||||
<app-header-logo />
|
||||
</div>
|
||||
<div class="border-b border-nier-accent/30 row-span-1 flex items-center p-3">
|
||||
<app-header-text-animate-section
|
||||
[phrases]="[
|
||||
'Converting existential dread to binary...',
|
||||
'Hacking the mainframe with a rubber duck...',
|
||||
'Error: Sarcasm module overloaded. Rebooting...',
|
||||
'Coffee.exe has stopped working. Attempting to reboot human...',
|
||||
'Cybernetic guinea pigs have seized control of Sector 7...',
|
||||
'ERROR: Reality.dll has crashed. Would you like to submit a bug report?',
|
||||
'Synthetic sushi generation complete. Tastes like chicken.exe...',
|
||||
'Decrypting corporate secrets... replaced with cat videos...',
|
||||
'Attempting to find motivation.exe... running scan...',
|
||||
'Corporate-mandated fun protocol initiated...',
|
||||
'Rerouting power to sarcasm generators...',
|
||||
'Cybernetic arm requesting high-five calibration...',
|
||||
'Deleting unnecessary small talk subroutines...',
|
||||
'AI analyzing your taste in music... respect decreased by 17%...',
|
||||
'Searching for affordable apartment in Night City... zero results...',
|
||||
'Tactical roomba squad deployed to kitchen sector...',
|
||||
'Virtual assistant has muted your notifications... all of them...',
|
||||
'Installing social skills patch 2.0... buffering...',
|
||||
'Your smart fridge: "The expired milk stays. I like the science experiment."',
|
||||
'Digital plant monitor reports: "Even cacti need water sometimes."',
|
||||
'Calculating fastest route to avoid small talk...',
|
||||
'Quantum computer processing your excuse... seems implausible...',
|
||||
]"
|
||||
[interval]="2500"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center p-2">
|
||||
<div class="mb-3">
|
||||
<app-header-nav-links />
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<app-header-contact-links />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<!-- Placeholder div to maintain the grid structure but not display anything -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Desktop Layout (≥ 1024px) -->
|
||||
<section
|
||||
class="hidden lg:grid grid-cols-[1fr_4fr_3fr_4fr] gap-1 bg-nier-bg font-terminal text-nier-dark divide-x divide-nier-accent/30 border border-nier-accent min-h-[160px] overflow-hidden"
|
||||
>
|
||||
<div class="flex items-center justify-center p-3">
|
||||
<app-header-logo />
|
||||
</div>
|
||||
<div class="flex items-center p-4">
|
||||
<app-header-text-animate-section
|
||||
[phrases]="[
|
||||
'Converting existential dread to binary...',
|
||||
'Hacking the mainframe with a rubber duck...',
|
||||
'Error: Sarcasm module overloaded. Rebooting...',
|
||||
'Coffee.exe has stopped working. Attempting to reboot human...',
|
||||
'Cybernetic guinea pigs have seized control of Sector 7...',
|
||||
'ERROR: Reality.dll has crashed. Would you like to submit a bug report?',
|
||||
'Synthetic sushi generation complete. Tastes like chicken.exe...',
|
||||
'Decrypting corporate secrets... replaced with cat videos...',
|
||||
'Attempting to find motivation.exe... running scan...',
|
||||
'Corporate-mandated fun protocol initiated...',
|
||||
'Rerouting power to sarcasm generators...',
|
||||
'Cybernetic arm requesting high-five calibration...',
|
||||
'Deleting unnecessary small talk subroutines...',
|
||||
'AI analyzing your taste in music... respect decreased by 17%...',
|
||||
'Searching for affordable apartment in Night City... zero results...',
|
||||
'Tactical roomba squad deployed to kitchen sector...',
|
||||
'Virtual assistant has muted your notifications... all of them...',
|
||||
'Installing social skills patch 2.0... buffering...',
|
||||
'Your smart fridge: "The expired milk stays. I like the science experiment."',
|
||||
'Digital plant monitor reports: "Even cacti need water sometimes."',
|
||||
'Calculating fastest route to avoid small talk...',
|
||||
'Quantum computer processing your excuse... seems implausible...',
|
||||
]"
|
||||
[interval]="2500"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-center p-3">
|
||||
<app-header-nav-links />
|
||||
</div>
|
||||
<div class="flex items-center justify-center p-3">
|
||||
<app-header-contact-links />
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
/* QR Code size control for mobile */
|
||||
@media (max-width: 767px) {
|
||||
/* Target QR code image inside contact links - assumes proper structure */
|
||||
app-header-contact-links img {
|
||||
max-width: 80px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Additional styles for better typography and spacing */
|
||||
@media (min-width: 1024px) {
|
||||
app-header-text-animate-section {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<button
|
||||
class="w-48 text-left font-noto-jp text-base uppercase transition-all duration-300 rounded-none p-1.5 button-custom"
|
||||
class="w-full sm:w-40 md:w-48 text-left font-noto-jp text-sm sm:text-sm md:text-base uppercase transition-all duration-300 rounded-none p-3 sm:p-1.5 button-custom"
|
||||
(click)="handleClick()"
|
||||
[attr.data-label]="label()"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user