feat: add animated network canvas background and update teaching section layout

devshafi · devshafi · commit 92b695c43d10 · 2026-04-15T17:57:13.000-04:00
diff --git a/index.html b/index.html
@@ -66,6 +66,7 @@
   </script>
 </head>
 <body>
+  <canvas id="network-canvas" aria-hidden="true"></canvas>
   <div class="bg-shape shape-1" aria-hidden="true"></div>
   <div class="bg-shape shape-2" aria-hidden="true"></div>
   <div class="cyber-grid-overlay" aria-hidden="true"></div>
@@ -86,6 +87,7 @@
           <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="#teaching">Teaching</a>
           <a class="nav-link" href="#skills">Skills</a>
           <a class="nav-link" href="#contact">Contact</a>
         </div>
@@ -175,17 +177,17 @@ <h2>Education</h2>
           <article class="mini-card">
             <h3>Doctor of Philosophy (PhD) in Computing</h3>
             <p class="meta">Queen's University, Kingston, ON, Canada</p>
-            <p>September 2025 - Present</p>
+            <p>Sep 2025 – Present</p>
           </article>
           <article class="mini-card">
             <h3>Master of Science (MSc) in Computing</h3>
             <p class="meta">Queen's University, Kingston, ON, Canada</p>
-            <p>September 2024 - August 2025 | CGPA: 4.24/4.30</p>
+            <p>Sep 2024 – Aug 2025 | CGPA: 4.24/4.30</p>
           </article>
           <article class="mini-card">
             <h3>Bachelor of Science (BSc) in Computer Science and Engineering</h3>
             <p class="meta">Metropolitan University, Sylhet, Bangladesh</p>
-            <p>September 2015 - August 2019 | CGPA: 3.90/4.00</p>
+            <p>Sep 2015 – Aug 2019 | CGPA: 3.90/4.00</p>
           </article>
         </div>
       </div>
@@ -203,7 +205,7 @@ <h3>Personalized Mental Health Assistance with Large Language Models</h3>
         <article class="card publication-card">
           <p class="year">2024</p>
           <h3>LLM-Therapist: A RAG-Based Multimodal Behavioral Therapist as Healthcare Assistant</h3>
-          <p>IEEE Global Communications Conference (GLOBECOM)</p>
+          <p>IEEE Global Communications Conference (GLOBECOM) 2024</p>
           <a href="https://ieeexplore.ieee.org/document/10901139" target="_blank" rel="noopener noreferrer">Read Publication</a>
         </article>
         <article class="card publication-card">
@@ -282,7 +284,7 @@ <h3>Full-Stack Engineer</h3>
       </div>
     </section>
 
-    <section class="section reveal teaching-section">
+    <section id="teaching" class="section reveal teaching-section">
       <h2>Teaching Experience</h2>
       <div class="grid cards teaching-grid">
         <article class="card teaching-card">
@@ -296,7 +298,7 @@ <h3>CISC 886 – Cloud Computing</h3>
         </article>
         <article class="card teaching-card">
           <div class="teaching-top">
-            <h3>CISC 498 - Information Technology Project</h3>
+            <h3>CISC 498 – Information Technology Project</h3>
             <span class="term-badge">Sep 2025 - Apr 2026</span>
           </div>
           <p class="meta">Queen's University, Kingston, ON</p>
@@ -305,7 +307,7 @@ <h3>CISC 498 - Information Technology Project</h3>
         </article>
         <article class="card teaching-card">
           <div class="teaching-top">
-            <h3>CISC 327 - Software Quality Assurance</h3>
+            <h3>CISC 327 – Software Quality Assurance</h3>
             <span class="term-badge">Sep 2025 - Dec 2025</span>
           </div>
           <p class="meta">Queen's University, Kingston, ON</p>
@@ -314,7 +316,7 @@ <h3>CISC 327 - Software Quality Assurance</h3>
         </article>
         <article class="card teaching-card">
           <div class="teaching-top">
-            <h3>CISC 324 - Operating Systems</h3>
+            <h3>CISC 324 – Operating Systems</h3>
             <span class="term-badge">Jan 2025 - Apr 2025</span>
           </div>
           <p class="meta">Queen's University, Kingston, ON</p>
@@ -323,7 +325,7 @@ <h3>CISC 324 - Operating Systems</h3>
         </article>
         <article class="card teaching-card">
           <div class="teaching-top">
-            <h3>CISC 327 - Software Quality Assurance</h3>
+            <h3>CISC 327 – Software Quality Assurance</h3>
             <span class="term-badge">Sep 2024 - Dec 2024</span>
           </div>
           <p class="meta">Queen's University, Kingston, ON</p>
diff --git a/script.js b/script.js
@@ -1,3 +1,78 @@
+(function () {
+  const canvas = document.getElementById('network-canvas');
+  if (!canvas || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  const ctx = canvas.getContext('2d');
+  const COLORS = ['#119f5d', '#0f766e', '#2563eb'];
+  const CONNECTION_DIST = 135;
+  const SPEED = 0.28;
+
+  let nodes = [], width = 0, height = 0, raf;
+
+  function resize() {
+    width = canvas.width = window.innerWidth;
+    height = canvas.height = window.innerHeight;
+  }
+
+  function makeNode() {
+    return {
+      x: Math.random() * width,
+      y: Math.random() * height,
+      vx: (Math.random() - 0.5) * SPEED * 2,
+      vy: (Math.random() - 0.5) * SPEED * 2,
+      r: 1.6 + Math.random() * 1.4,
+      color: COLORS[Math.floor(Math.random() * COLORS.length)],
+    };
+  }
+
+  function init() {
+    resize();
+    const count = window.innerWidth < 768 ? 36 : 62;
+    nodes = Array.from({ length: count }, makeNode);
+  }
+
+  function draw() {
+    ctx.clearRect(0, 0, width, height);
+
+    for (let i = 0; i < nodes.length; i++) {
+      for (let j = i + 1; j < nodes.length; j++) {
+        const dx = nodes[i].x - nodes[j].x;
+        const dy = nodes[i].y - nodes[j].y;
+        const d = Math.sqrt(dx * dx + dy * dy);
+        if (d < CONNECTION_DIST) {
+          ctx.beginPath();
+          ctx.moveTo(nodes[i].x, nodes[i].y);
+          ctx.lineTo(nodes[j].x, nodes[j].y);
+          ctx.strokeStyle = `rgba(17,159,93,${(1 - d / CONNECTION_DIST) * 0.22})`;
+          ctx.lineWidth = 0.9;
+          ctx.stroke();
+        }
+      }
+    }
+
+    nodes.forEach((n) => {
+      ctx.beginPath();
+      ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
+      ctx.fillStyle = n.color + 'aa';
+      ctx.fill();
+
+      n.x += n.vx;
+      n.y += n.vy;
+      if (n.x < -10) n.x = width + 10;
+      else if (n.x > width + 10) n.x = -10;
+      if (n.y < -10) n.y = height + 10;
+      else if (n.y > height + 10) n.y = -10;
+    });
+
+    raf = requestAnimationFrame(draw);
+  }
+
+  window.addEventListener('resize', () => { resize(); });
+
+  init();
+  draw();
+})();
+
 const reveals = document.querySelectorAll('.reveal');
 const navLinks = document.querySelectorAll('.nav-link');
 const sections = [...document.querySelectorAll('main section[id]')];
diff --git a/styles.css b/styles.css
@@ -598,6 +598,16 @@ article.card {
   font-size: 0.92rem;
 }
 
+#network-canvas {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.65;
+}
+
 .bg-shape {
   position: fixed;
   border-radius: 999px;
