mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-16 04:30:08 +00:00
Added contact link section and styling, added responsiveness the header as a whole
This commit is contained in:
AdamBtech
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user