add CV download link and enhance navigation styling

Author: devshafi

assets/CV-Shafi.pdf

@@ -69,17 +69,32 @@
   <div class="bg-shape shape-2" aria-hidden="true"></div>
 
   <header class="site-header">
-    <a href="#home" class="brand">FRS</a>
-    <nav class="nav" aria-label="Primary Navigation">
-      <a href="#about">About</a>
-      <a href="#education">Education</a>
-      <a href="#publications">Publications</a>
-      <a href="#experience">Experience</a>
-      <a href="#skills">Skills</a>
-      <a href="#contact">Contact</a>
-      <a href="https://scholar.google.com/scholar?q=Fozle+Rabbi+Shafi" target="_blank" rel="noopener noreferrer">Scholar</a>
-      <a href="https://www.linkedin.com/in/fozle-rabbi-shafi-07841511a" target="_blank" rel="noopener noreferrer">LinkedIn</a>
-    </nav>
+    <div class="header-inner">
+      <a href="#home" class="brand">FRS</a>
+      <nav class="nav" aria-label="Primary Navigation">
+        <div class="nav-links">
+          <a class="nav-link" href="#about">About</a>
+          <a class="nav-link" href="#education">Education</a>
+          <a class="nav-link" href="#publications">Publications</a>
+          <a class="nav-link" href="#experience">Experience</a>
+          <a class="nav-link" href="#skills">Skills</a>
+          <a class="nav-link" href="#contact">Contact</a>
+        </div>
+        <a class="nav-download" href="assets/CV-Shafi.pdf" download="Fozle-Rabbi-Shafi-CV.pdf">Download CV</a>
+        <div class="nav-socials" aria-label="Social Links">
+          <a href="https://scholar.google.com/scholar?q=Fozle+Rabbi+Shafi" target="_blank" rel="noopener noreferrer" aria-label="Google Scholar">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M12 3 2 8l10 5 8-4v6h2V8L12 3Zm-6 9v4.5c0 1.8 2.7 3.5 6 3.5s6-1.7 6-3.5V12l-6 3-6-3Z"/>
+            </svg>
+          </a>
+          <a href="https://www.linkedin.com/in/fozle-rabbi-shafi-07841511a" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M6.94 8.5a1.78 1.78 0 1 1 0-3.56 1.78 1.78 0 0 1 0 3.56ZM5.4 9.9h3.1V19H5.4V9.9Zm5 0h2.97v1.24h.04c.41-.78 1.42-1.6 2.92-1.6 3.12 0 3.7 2.06 3.7 4.74V19h-3.1v-4.13c0-.98-.02-2.25-1.37-2.25-1.37 0-1.58 1.07-1.58 2.18V19h-3.1V9.9Z"/>
+            </svg>
+          </a>
+        </div>
+      </nav>
+    </div>
   </header>
 
   <main>
@@ -221,7 +236,7 @@ <h3>Full-Stack Engineer</h3>
       <h2>Teaching Experience</h2>
       <div class="grid cards">
         <article class="card">
-          <h3>Head Teaching Assistant, CISC 498</h3>
+          <h3>Teaching Assistant, CISC 498</h3>
           <p class="meta">Queen's University | Sep 2025 - Present</p>
           <p>Mentored project teams, provided implementation guidance, and supported evaluation of deliverables and presentations.</p>
         </article>
@@ -288,7 +303,7 @@ <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" novalidate>
+      <form id="contact-form" class="contact-form" action="https://formsubmit.co/f.shafi@queensu.ca" method="POST" novalidate>
         <div class="form-grid">
           <label>
             Name
@@ -312,12 +327,13 @@ <h2>Contact</h2>
 
         <label id="human-check-label" data-answer="">
           <span id="human-check-question">Human check</span>
-          <input type="number" id="human-check-input" inputmode="numeric" required>
+          <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>
@@ -337,6 +353,6 @@ <h2>Contact</h2>
     <p>© <span id="year"></span> Fozle Rabbi Shafi</p>
   </footer>
 
-  <script src="script.js"></script>
+  <script src="script.js?v=20260331"></script>
 </body>
 </html>

index.html

@@ -1,5 +1,5 @@
 const reveals = document.querySelectorAll('.reveal');
-const navLinks = document.querySelectorAll('.nav a');
+const navLinks = document.querySelectorAll('.nav-link');
 const sections = [...document.querySelectorAll('main section[id]')];
 
 const revealObserver = new IntersectionObserver(
@@ -78,7 +78,7 @@ if (contactForm && formStatus && humanCheckLabel && humanCheckQuestion && humanC
     }
 
     const formData = new FormData(contactForm);
-    const endpoint = 'https://formsubmit.co/ajax/f.shafi@queensu.ca';
+    const endpoint = `https://formsubmit.co/ajax/${encodeURIComponent('f.shafi@queensu.ca')}`;
 
     try {
       const response = await fetch(endpoint, {
@@ -88,15 +88,25 @@ if (contactForm && formStatus && humanCheckLabel && humanCheckQuestion && humanC
       });
 
       if (!response.ok) {
-        throw new Error('Request failed');
+        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 = 'Could not send right now. Please email me directly at f.shafi@queensu.ca.';
+      formStatus.textContent = 'Direct submit fallback started. If this is your first use, confirm the FormSubmit verification email once.';
+      contactForm.submit();
     }
   });
 }

script.js

@@ -67,46 +67,114 @@ ul {
   left: 0;
   z-index: 10;
   width: 100%;
-  padding: 0.75rem 1rem;
+  padding: 0.7rem 1rem;
   border-radius: 0;
   background: #ffffff;
   border-bottom: 1px solid var(--stroke);
+  box-shadow: 0 8px 20px rgba(15, 40, 75, 0.08);
+}
+
+.header-inner {
+  width: min(1180px, 100%);
+  margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 1rem;
 }
 
 .brand {
   text-decoration: none;
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
   letter-spacing: 0.1em;
+  color: #0d1b2c;
+  background: linear-gradient(120deg, rgba(255, 122, 24, 0.14), rgba(12, 157, 138, 0.14));
+  border: 1px solid var(--stroke);
+  padding: 0.36rem 0.62rem;
+  border-radius: 10px;
 }
 
 .nav {
   display: flex;
-  gap: 0.9rem;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.nav-links {
+  display: flex;
   flex-wrap: wrap;
+  gap: 0.35rem;
 }
 
-.nav a {
+.nav-link {
   text-decoration: none;
-  font-size: 0.9rem;
+  font-size: 0.88rem;
   color: var(--muted);
-  padding: 0.25rem 0.45rem;
-  border-radius: 8px;
+  padding: 0.35rem 0.55rem;
+  border-radius: 9px;
   transition: color 180ms ease, background-color 180ms ease;
 }
 
-.nav a:hover,
-.nav a.active {
+.nav-link:hover,
+.nav-link.active {
   color: #0e1726;
   background-color: rgba(255, 122, 24, 0.2);
 }
 
+.nav-download {
+  text-decoration: none;
+  padding: 0.42rem 0.78rem;
+  border-radius: 10px;
+  background: linear-gradient(120deg, var(--accent), #ffb12f);
+  color: #1a1f26;
+  font-weight: 700;
+  font-size: 0.84rem;
+  box-shadow: 0 8px 18px rgba(255, 122, 24, 0.26);
+  transition: transform 180ms ease, box-shadow 180ms ease;
+}
+
+.nav-download:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 20px rgba(255, 122, 24, 0.34);
+}
+
+.nav-socials {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.nav-socials a {
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+  border: 1px solid var(--stroke);
+  color: #223348;
+  background: #f8fbff;
+  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
+}
+
+.nav-socials a:hover {
+  transform: translateY(-1px);
+  border-color: rgba(12, 157, 138, 0.5);
+  background-color: #f1f8ff;
+}
+
+.nav-socials svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
 main {
   width: min(1120px, calc(100% - 2rem));
-  margin: 5.8rem auto 3rem;
+  margin: 6.4rem auto 3rem;
 }
 
 .section {
@@ -444,15 +512,26 @@ article.card {
   }
 
   .nav {
-    gap: 0.3rem;
+    gap: 0.45rem;
+  }
+
+  .nav-link {
+    font-size: 0.8rem;
+    padding: 0.28rem 0.45rem;
+  }
+
+  .nav-download {
+    font-size: 0.78rem;
+    padding: 0.38rem 0.62rem;
   }
 
-  .nav a {
-    font-size: 0.82rem;
+  .nav-socials a {
+    width: 30px;
+    height: 30px;
   }
 
   main {
-    margin-top: 6.3rem;
+    margin-top: 8.2rem;
   }
 
   .hero-layout {