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
2602
public/email_qr_black.svg
Normal file
2602
public/email_qr_black.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 231 KiB |
5
public/github_logo.svg
Normal file
5
public/github_logo.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.0744 2.9938C4.13263 1.96371 4.37869 1.51577 5.08432 1.15606C5.84357 0.768899 7.04106 0.949072 8.45014 1.66261C9.05706 1.97009 9.11886 1.97635 10.1825 1.83998C11.5963 1.65865 13.4164 1.65929 14.7213 1.84164C15.7081 1.97954 15.7729 1.97265 16.3813 1.66453C18.3814 0.651679 19.9605 0.71795 20.5323 1.8387C20.8177 2.39812 20.8707 3.84971 20.6494 5.04695C20.5267 5.71069 20.5397 5.79356 20.8353 6.22912C22.915 9.29385 21.4165 14.2616 17.8528 16.1155C17.5801 16.2574 17.3503 16.3452 17.163 16.4167C16.5879 16.6363 16.4133 16.703 16.6247 17.7138C16.7265 18.2 16.8491 19.4088 16.8973 20.4002C16.9844 22.1922 16.9831 22.2047 16.6688 22.5703C16.241 23.0676 15.6244 23.076 15.2066 22.5902C14.9341 22.2734 14.9075 22.1238 14.9075 20.9015C14.9075 19.0952 14.7095 17.8946 14.2417 16.8658C13.6854 15.6415 14.0978 15.185 15.37 14.9114C17.1383 14.531 18.5194 13.4397 19.2892 11.8146C20.0211 10.2698 20.1314 8.13501 18.8082 6.83668C18.4319 6.3895 18.4057 5.98446 18.6744 4.76309C18.7748 4.3066 18.859 3.71768 18.8615 3.45425C18.8653 3.03823 18.8274 2.97541 18.5719 2.97541C18.4102 2.97541 17.7924 3.21062 17.1992 3.49805L16.2524 3.95695C16.1663 3.99866 16.07 4.0147 15.975 4.0038C13.5675 3.72746 11.2799 3.72319 8.86062 4.00488C8.76526 4.01598 8.66853 3.99994 8.58215 3.95802L7.63585 3.49882C7.04259 3.21087 6.42482 2.97541 6.26317 2.97541C5.88941 2.97541 5.88379 3.25135 6.22447 4.89078C6.43258 5.89203 6.57262 6.11513 5.97101 6.91572C5.06925 8.11576 4.844 9.60592 5.32757 11.1716C5.93704 13.1446 7.4295 14.4775 9.52773 14.9222C10.7926 15.1903 11.1232 15.5401 10.6402 16.9905C10.26 18.1319 10.0196 18.4261 9.46707 18.4261C8.72365 18.4261 8.25796 17.7821 8.51424 17.1082C8.62712 16.8112 8.59354 16.7795 7.89711 16.5255C5.77117 15.7504 4.14514 14.0131 3.40172 11.7223C2.82711 9.95184 3.07994 7.64739 4.00175 6.25453C4.31561 5.78028 4.32047 5.74006 4.174 4.83217C4.09113 4.31822 4.04631 3.49103 4.0744 2.9938Z" fill="#0F0F0F"/>
|
||||
<path d="M3.33203 15.9454C3.02568 15.4859 2.40481 15.3617 1.94528 15.6681C1.48576 15.9744 1.36158 16.5953 1.66793 17.0548C1.8941 17.3941 2.16467 17.6728 2.39444 17.9025C2.4368 17.9449 2.47796 17.9858 2.51815 18.0257C2.71062 18.2169 2.88056 18.3857 3.05124 18.5861C3.42875 19.0292 3.80536 19.626 4.0194 20.6962C4.11474 21.1729 4.45739 21.4297 4.64725 21.5419C4.85315 21.6635 5.07812 21.7352 5.26325 21.7819C5.64196 21.8774 6.10169 21.927 6.53799 21.9559C7.01695 21.9877 7.53592 21.998 7.99999 22.0008C8.00033 22.5527 8.44791 23.0001 8.99998 23.0001C9.55227 23.0001 9.99998 22.5524 9.99998 22.0001V21.0001C9.99998 20.4478 9.55227 20.0001 8.99998 20.0001C8.90571 20.0001 8.80372 20.0004 8.69569 20.0008C8.10883 20.0026 7.34388 20.0049 6.67018 19.9603C6.34531 19.9388 6.07825 19.9083 5.88241 19.871C5.58083 18.6871 5.09362 17.8994 4.57373 17.2891C4.34391 17.0194 4.10593 16.7834 3.91236 16.5914C3.87612 16.5555 3.84144 16.5211 3.80865 16.4883C3.5853 16.265 3.4392 16.1062 3.33203 15.9454Z" fill="#0F0F0F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
13
public/linkedin_logo.svg
Normal file
13
public/linkedin_logo.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="-271 283.9 256 235.1" xml:space="preserve">
|
||||
<g>
|
||||
<rect x="-264.4" y="359.3" width="49.9" height="159.7"/>
|
||||
<path d="M-240.5,283.9c-18.4,0-30.5,11.9-30.5,27.7c0,15.5,11.7,27.7,29.8,27.7h0.4c18.8,0,30.5-12.3,30.4-27.7
|
||||
C-210.8,295.8-222.1,283.9-240.5,283.9z"/>
|
||||
<path d="M-78.2,357.8c-28.6,0-46.5,15.6-49.8,26.6v-25.1h-56.1c0.7,13.3,0,159.7,0,159.7h56.1v-86.3c0-4.9-0.2-9.7,1.2-13.1
|
||||
c3.8-9.6,12.1-19.6,27-19.6c19.5,0,28.3,14.8,28.3,36.4V519h56.6v-88.8C-14.9,380.8-42.7,357.8-78.2,357.8z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 760 B |
16
public/theme_button.svg
Normal file
16
public/theme_button.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>dark-mode</title>
|
||||
<g id="Layer_2" data-name="Layer 2">
|
||||
<g id="Icons">
|
||||
<g>
|
||||
<rect width="48" height="48" fill="none"/>
|
||||
<g>
|
||||
<path d="M14,24A10,10,0,0,0,24,34V14A10,10,0,0,0,14,24Z"/>
|
||||
<path d="M24,2A22,22,0,1,0,46,24,21.9,21.9,0,0,0,24,2ZM6,24A18.1,18.1,0,0,1,24,6v8a10,10,0,0,1,0,20v8A18.1,18.1,0,0,1,6,24Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
After Width: | Height: | Size: 634 B |
@@ -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