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

Refactoring contact page in smaller components

Browse Source
This commit is contained in:
AdamBtech
2025-05-28 14:25:19 +02:00
parent 469cd039d3
commit 98dedb0b22
9 changed files with 323 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/app/pages/contact/contact-content/contact-content.component.css
View File

@@ -39,12 +39,6 @@
to { opacity: 1; }
}
@keyframes scanLine {
from { transform: translate3d(-100%, 0, 0); opacity: 0; }
50% { opacity: 1; }
to { transform: translate3d(100%, 0, 0); opacity: 0; }
}
/* ===================== CONTACT ELEMENTS ===================== */
/* Content container */
@@ -71,59 +65,6 @@
animation: slideInUp 0.8s ease-out 0.8s forwards;
}
/* Contact items */
.contact-item {
opacity: 0;
animation: scaleIn 0.8s ease-out forwards;
position: relative;
}
.contact-item:nth-child(1) { animation-delay: 1.0s; }
.contact-item:nth-child(2) { animation-delay: 1.1s; }
.contact-item:nth-child(3) { animation-delay: 1.2s; }
/* Scan line effect */
.contact-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-nier-accent), transparent);
animation: scanLine 1.5s ease-out forwards;
z-index: 20;
}
.contact-item:nth-child(1)::before { animation-delay: 1.2s; }
.contact-item:nth-child(2)::before { animation-delay: 1.3s; }
.contact-item:nth-child(3)::before { animation-delay: 1.4s; }
/* Contact icons */
.contact-icon {
opacity: 0;
animation: scaleIn 0.5s ease-out forwards;
}
.contact-item:nth-child(1) .contact-icon { animation-delay: 1.3s; }
.contact-item:nth-child(2) .contact-icon { animation-delay: 1.4s; }
.contact-item:nth-child(3) .contact-icon { animation-delay: 1.5s; }
/* Contact labels and values */
.contact-label,
.contact-value {
opacity: 0;
animation: slideInLeft 0.4s ease-out forwards;
}
.contact-item:nth-child(1) .contact-label { animation-delay: 1.4s; }
.contact-item:nth-child(2) .contact-label { animation-delay: 1.5s; }
.contact-item:nth-child(3) .contact-label { animation-delay: 1.6s; }
.contact-item:nth-child(1) .contact-value { animation-delay: 1.5s; }
.contact-item:nth-child(2) .contact-value { animation-delay: 1.6s; }
.contact-item:nth-child(3) .contact-value { animation-delay: 1.7s; }
/* Info panels container */
.info-panels-container {
opacity: 0;
@@ -156,22 +97,6 @@
.info-panel:nth-child(1) .info-panel-content { animation-delay: 1.9s; }
.info-panel:nth-child(2) .info-panel-content { animation-delay: 2.0s; }
/* ===================== HOVER EFFECTS ===================== */
.contact-item:hover {
transform: translateY(-3px);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.2),
0 0 20px rgba(90, 90, 80, 0.1);
transition: all 0.3s ease;
}
.contact-item:hover .contact-icon {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(90, 90, 80, 0.3);
transition: all 0.3s ease;
}
/* ===================== BACKGROUND PATTERN ===================== */
.contact-content-container::before {
@@ -196,11 +121,6 @@
.contact-content-container { animation-delay: 0.3s; }
.availability-status { animation-delay: 0.4s; }
.contact-grid { animation-delay: 0.6s; }
.contact-item:nth-child(1) { animation-delay: 0.8s; }
.contact-item:nth-child(2) { animation-delay: 0.9s; }
\contact-item:nth-child(3) { animation-delay: 1.0s; }
.info-panels-container { animation-delay: 1.2s; }
.info-panel:nth-child(1) { animation-delay: 1.3s; }
.info-panel:nth-child(2) { animation-delay: 1.4s; }
@@ -209,16 +129,12 @@
.contact-content-container,
.availability-status,
.contact-grid,
.contact-item,
.info-panels-container,
.info-panel {
animation-duration: 0.6s;
}
.status-dot,
.contact-icon,
.contact-label,
.contact-value,
.info-panel-title,
.info-panel-content {
animation-duration: 0.3s;
@@ -237,12 +153,7 @@
transform: none !important;
}
.contact-item::before,
.contact-content-container::before {
display: none !important;
}
.contact-item:hover {
transform: none;
}
}

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

@@ -1,97 +1,56 @@
<!-- 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>
<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 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.pro@hotmail.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="grid grid-cols-1 gap-6 w-full max-w-md mx-auto md:max-w-none contact-grid px-6"
>
<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="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value">
Email Access Granted<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>
<app-link-card
title="EMAIL COMMUNICATION CHANNEL"
contact_link="mailto:adam.benyekkou.pro@hotmail.com"
description="Secure encrypted transmission protocol"
/>
<app-link-card
title="PROFESSIONAL NETWORK ACCESS"
contact_link="https://linkedin.com/in/adambnk"
description="LinkedIn professional interface<br>
Connect for career opportunities and networking"
/>
<app-link-card
title="SOURCE CODE REPOSITORY"
contact_link="https://github.com/adam-benyekkou"
description="GitHub development archives<br />
Access project source files and contribution history"
/>
</div>
<!-- Info Panels -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12 w-full info-panels-container px-6">
<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>
<app-info-panel
title="RESPONSE PROTOCOL"
description="Standard response time: 24-48 hour cycle<br />
Emergency contact: Email protocol recommended<br />
Priority inquiries: LinkedIn messaging for urgent requests"
/>
<!-- Collaboration Status -->
<div class="bg-nier-mid border border-nier-border p-6 info-panel mb-8">
<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>
<app-info-panel
class="mb-8"
title="COLLABORATION STATUS"
description="Currently seeking: Full-time opportunities, internships<br />
Specialization: Web development, Angular, PHP, Python<br />
Location: Remote-ready, Toulouse, France"
/>
</div>
</div>

10
src/app/pages/contact/contact-content/contact-content.component.ts
View File

@@ -1,11 +1,11 @@
import { Component } from '@angular/core';
import { InfoPanelComponent } from './info-panel/info-panel.component';
import { LinkCardComponent } from './link-card/link-card.component';
@Component({
selector: 'app-contact-content',
imports: [],
imports: [InfoPanelComponent, LinkCardComponent],
templateUrl: './contact-content.component.html',
styleUrl: './contact-content.component.css'
styleUrl: './contact-content.component.css',
})
export class ContactContentComponent {
}
export class ContactContentComponent {}

84
src/app/pages/contact/contact-content/info-panel/info-panel.component.css Normal file
View File

@@ -0,0 +1,84 @@
/* ===================== CONTACT PAGE ANIMATIONS ===================== */
/* Core keyframes - reused across components */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translate3d(-30px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===================== INFO PANELS ===================== */
/* Info panels */
.info-panel {
opacity: 0;
animation: scaleIn 0.6s ease-out forwards;
}
.info-panel:nth-child(1) { animation-delay: 1.6s; }
.info-panel:nth-child(2) { animation-delay: 1.7s; }
/* Info panel titles and content */
.info-panel-title {
opacity: 0;
animation: slideInLeft 0.4s ease-out forwards;
}
.info-panel-content {
opacity: 0;
animation: fadeIn 0.4s ease-out forwards;
}
.info-panel:nth-child(1) .info-panel-title { animation-delay: 1.8s; }
.info-panel:nth-child(2) .info-panel-title { animation-delay: 1.9s; }
.info-panel:nth-child(1) .info-panel-content { animation-delay: 1.9s; }
.info-panel:nth-child(2) .info-panel-content { animation-delay: 2.0s; }
/* ===================== RESPONSIVE DESIGN ===================== */
@media (max-width: 768px) {
.info-panel:nth-child(1) { animation-delay: 1.3s; }
.info-panel:nth-child(2) { animation-delay: 1.4s; }
/* Faster animations on mobile */
.info-panel {
animation-duration: 0.6s;
}
.info-panel-title,
.info-panel-content {
animation-duration: 0.3s;
}
}
/* ===================== ACCESSIBILITY ===================== */
@media (prefers-reduced-motion: reduce) {
*[class*="info-"] {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}

11
src/app/pages/contact/contact-content/info-panel/info-panel.component.html Normal file
View File

@@ -0,0 +1,11 @@
<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"
>
{{ title() }}
</div>
<div
class="font-noto-jp text-base text-nier-dark leading-relaxed info-panel-content"
[innerHTML]="description()"
></div>
</div>

12
src/app/pages/contact/contact-content/info-panel/info-panel.component.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Component, input } from '@angular/core';
@Component({
selector: 'app-info-panel',
imports: [],
templateUrl: './info-panel.component.html',
styleUrl: './info-panel.component.css',
})
export class InfoPanelComponent {
title = input.required<string>();
description = input.required<string>();
}

141
src/app/pages/contact/contact-content/link-card/link-card.component.css Normal file
View File

@@ -0,0 +1,141 @@
/* ===================== CONTACT PAGE ANIMATIONS ===================== */
/* Core keyframes - reused across components */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes scanLine {
from { transform: translate3d(-100%, 0, 0); opacity: 0; }
50% { opacity: 1; }
to { transform: translate3d(100%, 0, 0); opacity: 0; }
}
/* ===================== CONTACT ELEMENTS ===================== */
/* Contact items */
.contact-item {
opacity: 0;
animation: scaleIn 0.8s ease-out forwards;
position: relative;
}
.contact-item:nth-child(1) { animation-delay: 1.0s; }
.contact-item:nth-child(2) { animation-delay: 1.1s; }
.contact-item:nth-child(3) { animation-delay: 1.2s; }
/* Scan line effect */
.contact-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-nier-accent), transparent);
animation: scanLine 1.5s ease-out forwards;
z-index: 20;
}
.contact-item:nth-child(1)::before { animation-delay: 1.2s; }
.contact-item:nth-child(2)::before { animation-delay: 1.3s; }
.contact-item:nth-child(3)::before { animation-delay: 1.4s; }
/* Contact icons */
.contact-icon {
opacity: 0;
animation: scaleIn 0.5s ease-out forwards;
}
.contact-item:nth-child(1) .contact-icon { animation-delay: 1.3s; }
.contact-item:nth-child(2) .contact-icon { animation-delay: 1.4s; }
.contact-item:nth-child(3) .contact-icon { animation-delay: 1.5s; }
/* Contact labels and values */
.contact-label,
.contact-value {
opacity: 0;
animation: slideInLeft 0.4s ease-out forwards;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translate3d(-30px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.contact-item:nth-child(1) .contact-label { animation-delay: 1.4s; }
.contact-item:nth-child(2) .contact-label { animation-delay: 1.5s; }
.contact-item:nth-child(3) .contact-label { animation-delay: 1.6s; }
.contact-item:nth-child(1) .contact-value { animation-delay: 1.5s; }
.contact-item:nth-child(2) .contact-value { animation-delay: 1.6s; }
.contact-item:nth-child(3) .contact-value { animation-delay: 1.7s; }
/* ===================== HOVER EFFECTS ===================== */
.contact-item:hover {
transform: translateY(-3px);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.2),
0 0 20px rgba(90, 90, 80, 0.1);
transition: all 0.3s ease;
}
.contact-item:hover .contact-icon {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(90, 90, 80, 0.3);
transition: all 0.3s ease;
}
/* ===================== RESPONSIVE DESIGN ===================== */
@media (max-width: 768px) {
.contact-item:nth-child(1) { animation-delay: 0.8s; }
.contact-item:nth-child(2) { animation-delay: 0.9s; }
.contact-item:nth-child(3) { animation-delay: 1.0s; }
/* Faster animations on mobile */
.contact-item {
animation-duration: 0.6s;
}
.contact-icon,
.contact-label,
.contact-value {
animation-duration: 0.3s;
}
}
/* ===================== ACCESSIBILITY ===================== */
@media (prefers-reduced-motion: reduce) {
.contact-item,
.contact-icon,
.contact-label,
.contact-value {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.contact-item::before {
display: none !important;
}
.contact-item:hover {
transform: none;
}
}

15
src/app/pages/contact/contact-content/link-card/link-card.component.html Normal file
View File

@@ -0,0 +1,15 @@
<a
[href]="contact_link()" 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="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">
{{ title() }}
</div>
<div class="font-noto-jp text-base text-nier-mid leading-relaxed group-hover:text-nier-light contact-value" [innerHTML]="description()">
</div>
</div>
</a>

13
src/app/pages/contact/contact-content/link-card/link-card.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component, input } from '@angular/core';
@Component({
selector: 'app-link-card',
imports: [],
templateUrl: './link-card.component.html',
styleUrl: './link-card.component.css',
})
export class LinkCardComponent {
title = input.required<string>();
contact_link = input.required<string>();
description = input.required<string>();
}