mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-15 20:20:09 +00:00
Fixed contact page sizing on mobile
This commit is contained in:
AdamBtech
@@ -1,99 +1,97 @@
|
|||||||
<!-- Contact content in separate container, isolated from section title -->
|
<!-- Contact content with proper container structure -->
|
||||||
<div class="flex justify-center w-full contact-content-container">
|
<div class="max-w-6xl mx-auto contact-content-container">
|
||||||
<div class="max-w-5xl w-full p-6">
|
<!-- Availability Status -->
|
||||||
<!-- 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="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>
|
||||||
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse status-dot"></div>
|
AVAILABLE FOR OPPORTUNITIES
|
||||||
AVAILABLE FOR OPPORTUNITIES
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Contact Grid -->
|
<!-- Contact Grid -->
|
||||||
<div class="grid gap-6 w-full 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 -->
|
<!-- Primary Communication Channel -->
|
||||||
<a
|
<a
|
||||||
href="mailto:adam.benyekkou@example.com"
|
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"
|
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">
|
<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>
|
<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>
|
||||||
<div class="flex-1">
|
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
|
||||||
<div class="font-terminal font-medium text-base text-nier-dark uppercase tracking-wide mb-2 group-hover:text-nier-light contact-label">
|
adam.benyekkou@example.com<br>
|
||||||
PRIMARY COMMUNICATION CHANNEL
|
Secure encrypted transmission protocol enabled
|
||||||
</div>
|
|
||||||
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
|
|
||||||
adam.benyekkou@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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<!-- Collaboration Status -->
|
<!-- Professional Network Access -->
|
||||||
<div class="bg-nier-mid border border-nier-border p-6 info-panel">
|
<a
|
||||||
<div class="font-terminal text-base font-medium text-nier-dark mb-3 uppercase tracking-wide info-panel-title">
|
href="https://linkedin.com/in/adambnk"
|
||||||
COLLABORATION STATUS
|
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>
|
||||||
<div class="font-noto-jp text-base text-nier-dark leading-relaxed info-panel-content">
|
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
|
||||||
Currently seeking: Full-time opportunities, internships, freelance projects<br>
|
LinkedIn professional interface<br>
|
||||||
Specialization: Web development, Angular, modern tech stack<br>
|
Connect for career opportunities and networking
|
||||||
Location: Remote-ready, French hideout base of operations
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user