feat: enhance teaching experience section with improved layout and styling

Author: devshafi

index.html

@@ -245,27 +245,43 @@ <h3>Full-Stack Engineer</h3>
       </div>
     </section>
 
-    <section class="section reveal">
+    <section class="section reveal teaching-section">
       <h2>Teaching Experience</h2>
-      <div class="grid cards">
-        <article class="card">
-          <h3>Teaching Assistant, CISC 498</h3>
-          <p class="meta">Queen's University | Sep 2025 - Present</p>
+      <div class="grid cards teaching-grid">
+        <article class="card teaching-card">
+          <div class="teaching-top">
+            <h3>CISC 498 - Information Technology Project</h3>
+            <span class="term-badge">Sep 2025 - Present</span>
+          </div>
+          <p class="meta">Queen's University</p>
+          <p class="teaching-role">Teaching Assistant</p>
           <p>Mentored project teams, provided implementation guidance, and supported evaluation of deliverables and presentations.</p>
         </article>
-        <article class="card">
-          <h3>Head Teaching Assistant, CISC 327</h3>
-          <p class="meta">Queen's University | Sep 2025 - Dec 2025</p>
+        <article class="card teaching-card">
+          <div class="teaching-top">
+            <h3>CISC 327 - Software Quality Assurance</h3>
+            <span class="term-badge">Sep 2025 - Dec 2025</span>
+          </div>
+          <p class="meta">Queen's University</p>
+          <p class="teaching-role">Head Teaching Assistant</p>
           <p>Designed assignments with instructor collaboration, coordinated grading, and supported students with coursework and exams.</p>
         </article>
-        <article class="card">
-          <h3>Head Teaching Assistant, CISC 324</h3>
-          <p class="meta">Queen's University | Jan 2025 - Apr 2025</p>
+        <article class="card teaching-card">
+          <div class="teaching-top">
+            <h3>CISC 324 - Operating Systems</h3>
+            <span class="term-badge">Jan 2025 - Apr 2025</span>
+          </div>
+          <p class="meta">Queen's University</p>
+          <p class="teaching-role">Head Teaching Assistant</p>
           <p>Assisted assignment design, coordinated TA workflows, and supported student learning in operating systems.</p>
         </article>
-        <article class="card">
-          <h3>Head Teaching Assistant, CISC 327</h3>
-          <p class="meta">Queen's University | Sep 2024 - Dec 2024</p>
+        <article class="card teaching-card">
+          <div class="teaching-top">
+            <h3>CISC 327 - Software Quality Assurance</h3>
+            <span class="term-badge">Sep 2024 - Dec 2024</span>
+          </div>
+          <p class="meta">Queen's University</p>
+          <p class="teaching-role">Head Teaching Assistant</p>
           <p>Supported assignment development, grading, exam proctoring, and student communication.</p>
         </article>
       </div>
@@ -304,10 +320,10 @@ <h3>Embedded & Design</h3>
     <section class="section card reveal">
       <h2>Achievements & Activities</h2>
       <ul>
-        <li>Chairman's Scholarship, Metropolitan University (2016 - 2018)</li>
-        <li>Mobile App Development Trainer, Google Techmakers Bangladesh (2017)</li>
-        <li>Information and Technology Officer, Queen's Bangladeshi Students Association (2025 - 26)</li>
+        <li>Information and Technology Officer, Queen's Bangladeshi Student Association (QBSA) (2025 - 2026)</li>
         <li>Member of Sports Club, Metropolitan University (2017 - 2019)</li>
+        <li>Mobile App Development Trainer, Google Techmakers Bangladesh (2017)</li>
+        <li>Chairman's Scholarship, Metropolitan University (2016 - 2018)</li>
       </ul>
     </section>
 

styles.css

@@ -379,6 +379,57 @@ article.card {
   background: linear-gradient(180deg, var(--accent), var(--accent-2));
 }
 
+.teaching-grid {
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.teaching-card {
+  border-radius: 18px;
+  border: 1px solid rgba(19, 32, 51, 0.1);
+  background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(247, 252, 250, 0.88));
+  box-shadow: 0 12px 24px rgba(15, 40, 75, 0.08);
+}
+
+.teaching-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.65rem;
+  margin-bottom: 0.5rem;
+}
+
+.teaching-top h3 {
+  margin: 0;
+  font-size: 1.02rem;
+}
+
+.term-badge {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  font-size: 0.74rem;
+  font-weight: 700;
+  color: #0d5f5a;
+  background: rgba(15, 118, 110, 0.12);
+  border: 1px solid rgba(15, 118, 110, 0.22);
+  border-radius: 999px;
+  padding: 0.22rem 0.56rem;
+}
+
+.teaching-role {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  margin: 0.45rem 0 0.62rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #0e4f54;
+  background: rgba(17, 159, 93, 0.12);
+  border: 1px solid rgba(17, 159, 93, 0.22);
+  border-radius: 999px;
+  padding: 0.2rem 0.56rem;
+}
+
 .timeline {
   display: grid;
   gap: 0.85rem;
@@ -624,6 +675,11 @@ article.card {
     justify-self: center;
   }
 
+  .teaching-top {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   .timeline {
     padding-left: 0.8rem;
   }