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>
|
||||
|
||||
Reference in New Issue
Block a user