Communications
Contact Page
Two-column contact page with a complete form system and triple-fallback email sending. Features animated left panel with status indicator and clickable social grid.
Left-এ profile + contact info, right-এ animated form। EmailJS fail হলে Web3Forms, সেটাও fail হলে mailto — triple-fallback system।
Contact/contact.html
Triple Fallback
Live Status Dot
Layout Structure
Two-Column Layout
পুরো page CSS Grid দিয়ে দুই column-এ ভাগ — left: profile info panel, right: contact form।
Left Panel — Info
Profile photo, name, subtitle, animated "Available" status with pulsing green dot, 3 direct contact items (Email, Location, Response Time), and 5-icon social grid.
Profile info সব এক জায়গায় — hover করলে contact items scale up হয়।
Right Panel — Form
Full contact form: Name, Email, Subject, Message textarea. Submit button shows loading spinner. Success/error message overlay appears after sending.
Submit করলে button-এ spinner চলে। Send হলে success message, fail হলে error — সব animated।
Status Indicator
Pulsing green dot showing "Available for Projects". CSS statusPulse animation: box-shadow grows and fades in 2.5s loop. Color: #22c55e.
Green dot টি CSS animation দিয়ে চলমান। "Available" = সবুজ, busy হলে হলুদ করা যাবে।
Mobile Responsive
Below 768px: stacks to single column. Left panel becomes top strip, form below. Desktop-only horizontal line decorators hidden on mobile.
Mobile-এ একটার নিচে আরেকটা stack হয়। Desktop redirect হয় না — contact page responsive।
Email System
Triple-Fallback Sending
Form submit হলে পর্যায়ক্রমে তিনটি method চেষ্টা করে — যেটা কাজ করে সেটা দিয়ে email পাঠায়।
PRIMARY
EmailJS
SDK-based · auto-reply to sender · template variables · direct gmail send
FALLBACK 1
Web3Forms
REST API · no SDK needed · works even if EmailJS quota exceeded
FALLBACK 2
mailto:
Native OS email client · zero dependency · always available
EmailJS Auto-Reply
Primary EmailJS call-এ sender-কে automatically একটি reply email যায়। Template ID: stored in JS config। Service ID + Template ID + Public Key তিনটি পৃথক variable-এ রাখা। কোনো backend নেই — সব client-side।
Form Structure
Form Fields
| Field | Type | Validation | Purpose |
|---|
name | text input | required, minlength 2 | Sender's full name |
email | email input | required, email format | Reply-to address for auto-reply |
subject | text input | required | Email subject line |
message | textarea | required, minlength 10 | Main message body |
| Submit button | button | — | Shows spinner during send, disabled while loading |
Social Links
Social Grid
Left panel-এর নিচে ৫টি social icon — hover করলে প্রতিটি তার brand color-এ glow করে।
Animations
CSS Animations
| Animation | Element | Effect |
|---|
statusPulse | Green status dot | box-shadow expands from 0→5px and fades, 2.5s loop |
formSlide | Form panel | slides in from right on page load (0.6s ease) |
infoFade | Info panel | fades + slides in from left on page load |
| Hover scale | Contact items | translateX(6px) on hover |
| Spinner | Submit button | CSS spin keyframe on fa-spinner icon during send |