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

Fixed contact page sizing on mobile

Browse Source
This commit is contained in:
AdamBtech
2025-05-27 15:13:46 +02:00
parent 800e5dd187
commit 2af38e8422
1 changed files with 86 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/app/pages/contact/contact-content/contact-content.component.html
View File

@@ -1,99 +1,97 @@
<!-- Contact content in separate container, isolated from section title -->
<div class="flex justify-center w-full contact-content-container">
<div class="max-w-5xl w-full p-6">
<!-- Availability Status -->
<div class="inline-flex items-center gap-2 bg-nier-dark text-nier-light px-5 py-3 border border-nier-border mb-12 font-terminal text-xs uppercase tracking-wide availability-status">
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse status-dot"></div>
AVAILABLE FOR OPPORTUNITIES
</div>
<!-- Contact content with proper container structure -->
<div class="max-w-6xl mx-auto contact-content-container">
<!-- Availability Status -->
<div class="inline-flex items-center gap-2 bg-nier-dark text-nier-light px-5 py-3 border border-nier-border mb-12 font-terminal text-xs uppercase tracking-wide availability-status mx-6">
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse status-dot"></div>
AVAILABLE FOR OPPORTUNITIES
</div>
<!-- Contact Grid -->
<div class="grid gap-6 w-full contact-grid">
<!-- Primary Communication Channel -->
<a
href="mailto:adam.benyekkou@example.com"
class="bg-nier-bg border border-nier-border p-8 flex items-center gap-6 text-nier-dark no-underline transition-all duration-200 hover:bg-nier-highlight hover:text-nier-light hover:border-nier-accent group contact-item relative"
>
<div class="w-14 h-14 bg-nier-mid border border-nier-border flex items-center justify-center text-xl text-nier-dark flex-shrink-0 transition-all duration-200 group-hover:bg-nier-light group-hover:text-nier-dark contact-icon">
<i class="fas fa-envelope"></i>
<!-- Contact Grid -->
<div class="grid grid-cols-1 gap-6 w-full max-w-md mx-auto md:max-w-none contact-grid px-6">
<!-- Primary Communication Channel -->
<a
href="mailto:adam.benyekkou@example.com"
class="bg-nier-bg border border-nier-border p-8 flex items-center gap-6 text-nier-dark no-underline transition-all duration-200 hover:bg-nier-highlight hover:text-nier-light hover:border-nier-accent group contact-item relative"
>
<div class="w-14 h-14 bg-nier-mid border border-nier-border flex items-center justify-center text-xl text-nier-dark flex-shrink-0 transition-all duration-200 group-hover:bg-nier-light group-hover:text-nier-dark contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="flex-1">
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
PRIMARY COMMUNICATION CHANNEL
</div>
<div class="flex-1">
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
PRIMARY COMMUNICATION CHANNEL
</div>
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
adam.benyekkou&#64;example.com<br>
Secure encrypted transmission protocol enabled
</div>
</div>
</a>
<!-- Professional Network Access -->
<a
href="https://linkedin.com/in/adambnk"
target="_blank"
class="bg-nier-bg border border-nier-border p-8 flex items-center gap-6 text-nier-dark no-underline transition-all duration-200 hover:bg-nier-highlight hover:text-nier-light hover:border-nier-accent group contact-item relative"
>
<div class="w-14 h-14 bg-nier-mid border border-nier-border flex items-center justify-center text-xl text-nier-dark flex-shrink-0 transition-all duration-200 group-hover:bg-nier-light group-hover:text-nier-dark contact-icon">
<i class="fab fa-linkedin-in"></i>
</div>
<div class="flex-1">
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
PROFESSIONAL NETWORK ACCESS
</div>
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
LinkedIn professional interface<br>
Connect for career opportunities and networking
</div>
</div>
</a>
<!-- Source Code Repository -->
<a
href="https://github.com/adam-benyekkou"
target="_blank"
class="bg-nier-bg border border-nier-border p-8 flex items-center gap-6 text-nier-dark no-underline transition-all duration-200 hover:bg-nier-highlight hover:text-nier-light hover:border-nier-accent group contact-item relative"
>
<div class="w-14 h-14 bg-nier-mid border border-nier-border flex items-center justify-center text-xl text-nier-dark flex-shrink-0 transition-all duration-200 group-hover:bg-nier-light group-hover:text-nier-dark contact-icon">
<i class="fab fa-github"></i>
</div>
<div class="flex-1">
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
SOURCE CODE REPOSITORY
</div>
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
GitHub development archives<br>
Access project source files and contribution history
</div>
</div>
</a>
</div>
<!-- Info Panels -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12 w-full info-panels-container">
<!-- Response Protocol -->
<div class="bg-nier-mid border border-nier-border p-6 info-panel">
<div class="font-terminal text-base font-medium text-nier-dark mb-3 uppercase tracking-wide info-panel-title">
RESPONSE PROTOCOL
</div>
<div class="font-noto-jp text-base text-nier-dark leading-relaxed info-panel-content">
Standard response time: 24-48 hour cycle<br>
Emergency contact: Email protocol recommended<br>
Priority inquiries: LinkedIn messaging for urgent requests
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
adam.benyekkou&#64;example.com<br>
Secure encrypted transmission protocol enabled
</div>
</div>
</a>
<!-- Collaboration Status -->
<div class="bg-nier-mid border border-nier-border p-6 info-panel">
<div class="font-terminal text-base font-medium text-nier-dark mb-3 uppercase tracking-wide info-panel-title">
COLLABORATION STATUS
<!-- Professional Network Access -->
<a
href="https://linkedin.com/in/adambnk"
target="_blank"
class="bg-nier-bg border border-nier-border p-8 flex items-center gap-6 text-nier-dark no-underline transition-all duration-200 hover:bg-nier-highlight hover:text-nier-light hover:border-nier-accent group contact-item relative"
>
<div class="w-14 h-14 bg-nier-mid border border-nier-border flex items-center justify-center text-xl text-nier-dark flex-shrink-0 transition-all duration-200 group-hover:bg-nier-light group-hover:text-nier-dark contact-icon">
<i class="fab fa-linkedin-in"></i>
</div>
<div class="flex-1">
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
PROFESSIONAL NETWORK ACCESS
</div>
<div class="font-noto-jp text-base text-nier-dark leading-relaxed info-panel-content">
Currently seeking: Full-time opportunities, internships, freelance projects<br>
Specialization: Web development, Angular, modern tech stack<br>
Location: Remote-ready, French hideout base of operations
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
LinkedIn professional interface<br>
Connect for career opportunities and networking
</div>
</div>
</a>
<!-- Source Code Repository -->
<a
href="https://github.com/adam-benyekkou"
target="_blank"
class="bg-nier-bg border border-nier-border p-8 flex items-center gap-6 text-nier-dark no-underline transition-all duration-200 hover:bg-nier-highlight hover:text-nier-light hover:border-nier-accent group contact-item relative"
>
<div class="w-14 h-14 bg-nier-mid border border-nier-border flex items-center justify-center text-xl text-nier-dark flex-shrink-0 transition-all duration-200 group-hover:bg-nier-light group-hover:text-nier-dark contact-icon">
<i class="fab fa-github"></i>
</div>
<div class="flex-1">
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
SOURCE CODE REPOSITORY
</div>
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
GitHub development archives<br>
Access project source files and contribution history
</div>
</div>
</a>
</div>
<!-- Info Panels -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12 w-full info-panels-container px-6">
<!-- Response Protocol -->
<div class="bg-nier-mid border border-nier-border p-6 info-panel">
<div class="font-terminal text-base font-medium text-nier-dark mb-3 uppercase tracking-wide info-panel-title">
RESPONSE PROTOCOL
</div>
<div class="font-noto-jp text-base text-nier-dark leading-relaxed info-panel-content">
Standard response time: 24-48 hour cycle<br>
Emergency contact: Email protocol recommended<br>
Priority inquiries: LinkedIn messaging for urgent requests
</div>
</div>
<!-- Collaboration Status -->
<div class="bg-nier-mid border border-nier-border p-6 info-panel">
<div class="font-terminal text-base font-medium text-nier-dark mb-3 uppercase tracking-wide info-panel-title">
COLLABORATION STATUS
</div>
<div class="font-noto-jp text-base text-nier-dark leading-relaxed info-panel-content">
Currently seeking: Full-time opportunities, internships, freelance projects<br>
Specialization: Web development, Angular, modern tech stack<br>
Location: Remote-ready, French hideout base of operations
</div>
</div>
</div>
</div>