LogoLogoAbdelrahman
Sabbagh
languageAR
Phase 01 // Discovery

LET'S
TALK
WORK.

The right conversation at the right time changes everything. Don't let the perfect collaboration pass you by, drop a message and let's make something worth talking about!

Status: Available
hub

Direct Communication

abdelrahman.sabbagh@kaust.edu.sa
Timezone: UTC+3 Response: < 24h
info

Your message goes straight to me. No middlemen, no spam filters, no black holes. I read every single one and reply personally.

Office Hours

Sun — Thu

09:00 — 17:00 (UTC+3)

Location

Saudi Arabia

Remote

(function () { /* ── Replace the value below with your Formspree form ID ───────────── 1. Go to https://formspree.io and create a free account. 2. Create a new form, copy the form ID (the part after /f/ in the endpoint). 3. Paste it here, e.g. "xpwzrjkq" ── ──────────────────────────────────────────────────────────────────── */ var FORMSPREE_ID = 'mvzwnepg'; var form = document.getElementById('contact-form'); var success = document.getElementById('form-success'); var errorBanner= document.getElementById('form-error'); var submitBtn = document.getElementById('submit-btn'); var submitLabel= document.getElementById('submit-label'); var submitLoad = document.getElementById('submit-loading'); var resetBtn = document.getElementById('form-reset-btn'); /* ── Category buttons ─────────────────────────────────────────── */ var catBtns = document.querySelectorAll('#category-btns .category-btn'); var catInput = document.getElementById('category-value'); catBtns.forEach(function (btn) { btn.addEventListener('click', function () { catBtns.forEach(function (b) { b.className = 'category-btn px-4 py-3 bg-[#1a1a1c] border border-[rgba(64,73,61,0.25)] text-[#F2F2F2] font-mono text-[10px] uppercase tracking-wider rounded-lg hover:border-[#2E7D32]/40 hover:text-[#2E7D32] transition-all'; }); btn.className = 'category-btn px-4 py-3 bg-[#2E7D32] text-white border border-[#2E7D32] font-mono text-[10px] uppercase tracking-wider rounded-lg transition-all'; catInput.value = btn.dataset.value; }); }); /* ── Inline field validation helper ──────────────────────────── */ function validateField(input) { var errEl = input.parentElement.querySelector('.field-error'); var valid = true; if (input.required && !input.value.trim()) { valid = false; } else if (input.type === 'email' && input.value.trim()) { valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value.trim()); } if (!valid) { input.style.borderBottomColor = '#f87171'; if (errEl) errEl.classList.remove('hidden'); } else { input.style.borderBottomColor = ''; if (errEl) errEl.classList.add('hidden'); } return valid; } /* Live validation on blur */ ['f-name', 'f-email', 'f-message'].forEach(function (id) { var el = document.getElementById(id); if (el) el.addEventListener('blur', function () { validateField(el); }); if (el) el.addEventListener('input', function () { if (el.style.borderBottomColor === 'rgb(248, 113, 113)') validateField(el); }); }); /* ── Form submit ──────────────────────────────────────────────── */ form.addEventListener('submit', function (e) { e.preventDefault(); /* Validate all fields */ var allValid = true; ['f-name', 'f-email', 'f-message'].forEach(function (id) { var el = document.getElementById(id); if (el && !validateField(el)) allValid = false; }); if (!allValid) return; /* Loading state */ submitBtn.disabled = true; submitLabel.classList.add('hidden'); submitLoad.classList.remove('hidden'); errorBanner.classList.add('hidden'); /* Submit via Formspree */ var data = new FormData(form); fetch('https://formspree.io/f/' + FORMSPREE_ID, { method: 'POST', body: data, headers: { 'Accept': 'application/json' } }) .then(function (res) { if (res.ok) { form.classList.add('hidden'); success.classList.remove('hidden'); } else { return res.json().then(function (body) { throw body; }); } }) .catch(function () { errorBanner.classList.remove('hidden'); errorBanner.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }) .finally(function () { submitBtn.disabled = false; submitLabel.classList.remove('hidden'); submitLoad.classList.add('hidden'); }); }); /* ── Reset button ─────────────────────────────────────────────── */ resetBtn.addEventListener('click', function () { form.reset(); /* Restore category buttons */ catBtns.forEach(function (b) { b.className = 'category-btn px-4 py-3 bg-[#1a1a1c] border border-[rgba(64,73,61,0.25)] text-[#F2F2F2] font-mono text-[10px] uppercase tracking-wider rounded-lg hover:border-[#2E7D32]/40 hover:text-[#2E7D32] transition-all'; }); catBtns[0].className = 'category-btn px-4 py-3 bg-[#2E7D32] text-white border border-[#2E7D32] font-mono text-[10px] uppercase tracking-wider rounded-lg transition-all'; catInput.value = 'Emcee / Speaking'; success.classList.add('hidden'); form.classList.remove('hidden'); }); })();