refactor: update about section and enhance contact form styling

Author: devshafi

index.html

@@ -126,13 +126,13 @@ <h1>Fozle Rabbi Shafi</h1>
     <section id="about" class="section card reveal">
       <h2>About</h2>
       <p>
-        I am currently pursuing a PhD in Computing at Queen's University (started September 2025),
-        following my MSc in Computing at Queen's University (CGPA: 4.24/4.30) and a BSc in Computer
-        Science and Engineering from Metropolitan University, Bangladesh (CGPA: 3.90/4.00).
+        I am a PhD student in Computing at Queen's University specializing in AI-driven cybersecurity.
+        My research strengthens the security of cyber-physical systems using advanced AI, including
+        generative AI and deep neural networks, with autonomous vehicles as one key application area.
       </p>
       <p>
-        My work sits at the intersection of research and engineering, where I design and ship
-        AI-powered software with a strong focus on reliability, scalability, and meaningful impact.
+        Before starting my PhD, I completed my MSc in Computing at Queen's University after more than
+        five years of industry experience across software engineering roles.
       </p>
       <div class="grid two-col">
         <article class="mini-card">
@@ -301,50 +301,23 @@ <h2>Achievements & Activities</h2>
     <section id="contact" class="section card reveal">
       <h2>Contact</h2>
       <p>Open to collaborations in AI research, LLM applications, and software engineering opportunities.</p>
-      <p class="privacy-note">Privacy-first form with lightweight bot protection. No analytics or ad trackers are loaded.</p>
-
-      <form id="contact-form" class="contact-form" action="https://formsubmit.co/f.shafi@queensu.ca" method="POST" novalidate>
-        <div class="form-grid">
-          <label>
-            Name
-            <input type="text" name="name" autocomplete="name" required>
-          </label>
-          <label>
-            Email
-            <input type="email" name="email" autocomplete="email" required>
-          </label>
-        </div>
-
-        <label>
-          Subject
-          <input type="text" name="subject" required>
-        </label>
-
-        <label>
-          Message
-          <textarea name="message" rows="6" required></textarea>
-        </label>
-
-        <label id="human-check-label" data-answer="">
-          <span id="human-check-question">Human check</span>
-          <input type="number" id="human-check-input" name="human_check" inputmode="numeric" required>
-        </label>
-
-        <input type="text" name="_honey" class="hp-field" tabindex="-1" autocomplete="off" aria-hidden="true">
-        <input type="hidden" name="_subject" value="Portfolio Contact Form Submission">
-        <input type="hidden" name="_captcha" value="false">
-        <input type="hidden" name="_next" value="https://devshafi.github.io/#contact">
-        <input type="hidden" id="form-started-at" value="">
-
-        <button class="btn btn-primary" type="submit">Send Message</button>
-        <p id="form-status" class="form-status" role="status" aria-live="polite"></p>
-      </form>
-
       <div class="contact-grid">
-        <a href="mailto:f.shafi@queensu.ca">f.shafi@queensu.ca</a>
-        <a href="tel:+16135616661">+1 613 561 6661</a>
-        <a href="https://www.linkedin.com/in/fozle-rabbi-shafi-07841511a" target="_blank" rel="noopener noreferrer">LinkedIn Profile</a>
-        <span>Kingston, Ontario, Canada</span>
+        <a href="mailto:f.shafi@queensu.ca">
+          <span class="contact-icon email-icon" aria-hidden="true">✉</span>
+          <span>f.shafi@queensu.ca</span>
+        </a>
+        <a href="tel:+16135616661">
+          <span class="contact-icon phone-icon" aria-hidden="true">☎</span>
+          <span>+1 613 561 6661</span>
+        </a>
+        <a href="https://www.linkedin.com/in/fozle-rabbi-shafi-07841511a" target="_blank" rel="noopener noreferrer">
+          <span class="contact-icon linkedin-icon" aria-hidden="true">in</span>
+          <span>LinkedIn Profile</span>
+        </a>
+        <span>
+          <span class="contact-icon location-icon" aria-hidden="true">📍</span>
+          <span>Kingston, Ontario, Canada</span>
+        </span>
       </div>
     </section>
   </main>
@@ -353,6 +326,6 @@ <h2>Contact</h2>
     <p>© <span id="year"></span> Fozle Rabbi Shafi</p>
   </footer>
 
-  <script src="script.js?v=20260331"></script>
+  <script src="script.js?v=20260331-2"></script>
 </body>
 </html>

script.js

@@ -35,78 +35,3 @@ window.addEventListener('scroll', activateNav);
 window.addEventListener('load', activateNav);
 
 document.getElementById('year').textContent = new Date().getFullYear();
-
-const contactForm = document.getElementById('contact-form');
-const formStatus = document.getElementById('form-status');
-const humanCheckLabel = document.getElementById('human-check-label');
-const humanCheckQuestion = document.getElementById('human-check-question');
-const humanCheckInput = document.getElementById('human-check-input');
-const formStartedAt = document.getElementById('form-started-at');
-
-const createHumanCheck = () => {
-  const a = Math.floor(Math.random() * 8) + 1;
-  const b = Math.floor(Math.random() * 8) + 1;
-  humanCheckQuestion.textContent = `Human check: What is ${a} + ${b}?`;
-  humanCheckLabel.dataset.answer = String(a + b);
-};
-
-if (contactForm && formStatus && humanCheckLabel && humanCheckQuestion && humanCheckInput && formStartedAt) {
-  formStartedAt.value = String(Date.now());
-  createHumanCheck();
-
-  contactForm.addEventListener('submit', async (event) => {
-    event.preventDefault();
-    formStatus.textContent = '';
-
-    if (!contactForm.checkValidity()) {
-      formStatus.textContent = 'Please complete all required fields.';
-      contactForm.reportValidity();
-      return;
-    }
-
-    const elapsed = Date.now() - Number(formStartedAt.value);
-    if (elapsed < 4000) {
-      formStatus.textContent = 'Please wait a few seconds and try again.';
-      return;
-    }
-
-    if (humanCheckInput.value.trim() !== humanCheckLabel.dataset.answer) {
-      formStatus.textContent = 'Human check answer is incorrect.';
-      createHumanCheck();
-      humanCheckInput.value = '';
-      return;
-    }
-
-    const formData = new FormData(contactForm);
-    const endpoint = `https://formsubmit.co/ajax/${encodeURIComponent('f.shafi@queensu.ca')}`;
-
-    try {
-      const response = await fetch(endpoint, {
-        method: 'POST',
-        headers: { Accept: 'application/json' },
-        body: formData,
-      });
-
-      if (!response.ok) {
-        let detail = 'Request failed';
-        try {
-          const payload = await response.json();
-          if (payload?.message) {
-            detail = payload.message;
-          }
-        } catch {
-          // Ignore JSON parse failures and keep default detail
-        }
-        throw new Error(detail);
-      }
-
-      formStatus.textContent = 'Thanks! Your message has been sent.';
-      contactForm.reset();
-      createHumanCheck();
-      formStartedAt.value = String(Date.now());
-    } catch {
-      formStatus.textContent = 'Direct submit fallback started. If this is your first use, confirm the FormSubmit verification email once.';
-      contactForm.submit();
-    }
-  });
-}

styles.css

@@ -394,72 +394,46 @@ article.card {
   border-radius: 10px;
   text-decoration: none;
   color: #213145;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
 }
 
 .contact-grid a:hover {
   border-color: rgba(255, 122, 24, 0.45);
 }
 
-.privacy-note {
-  color: var(--muted);
-  font-size: 0.94rem;
-}
-
-.contact-form {
-  margin-top: 1rem;
-  padding: 1rem;
-  border: 1px solid var(--stroke);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.6);
-  display: grid;
-  gap: 0.8rem;
-}
-
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem;
-}
-
-.contact-form label {
-  display: grid;
-  gap: 0.35rem;
-  font-weight: 600;
-  color: #1a2b40;
-  font-size: 0.94rem;
+.contact-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 0.9rem;
+  flex-shrink: 0;
 }
 
-.contact-form input,
-.contact-form textarea {
-  width: 100%;
-  font: inherit;
-  color: #132033;
-  background: #ffffff;
-  border: 1px solid rgba(19, 32, 51, 0.18);
-  border-radius: 10px;
-  padding: 0.62rem 0.72rem;
+.email-icon {
+  background: #ffe5d1;
+  color: #b84c00;
 }
 
-.contact-form input:focus,
-.contact-form textarea:focus {
-  outline: none;
-  border-color: rgba(255, 122, 24, 0.65);
-  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.14);
+.phone-icon {
+  background: #d8f9f2;
+  color: #047a6c;
 }
 
-.form-status {
-  margin: 0;
-  min-height: 1.25rem;
-  font-size: 0.92rem;
-  color: #1f3c5f;
+.linkedin-icon {
+  background: #dbeaff;
+  color: #0a66c2;
+  font-family: "Space Grotesk", sans-serif;
 }
 
-.hp-field {
-  position: absolute;
-  left: -9999px;
-  width: 1px;
-  height: 1px;
-  opacity: 0;
+.location-icon {
+  background: #efe1ff;
+  color: #6d2fb0;
 }
 
 .site-footer {
@@ -543,10 +517,6 @@ article.card {
     justify-self: center;
   }
 
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-
   .timeline {
     padding-left: 0.8rem;
   }