Fix homepage, blog, bioinformatics, and personnel pages to match original

- Hero: V-shaped cutout instead of curve, white page background
- Location: title above lab image, remove decorative SVG shapes
- Footer cityscape: remove white cutout overlay
- Blog posts: use per-post featured_image as header, remove duplicate title
- Blog feed: center cards, fix title spacing
- Bioinformatics: add icons to top cards and resource grid, match original layout
- Add What We Do page with full content, team photos, workflow diagram
- Personnel: replace incorrect staff photos with correct ones from original site
- Personnel: rectangular portrait photos instead of circular crops
- Nav: add Overview to Bioinformatics dropdown

Author: mohammedkhalfan

_data/nav.yml

@@ -33,6 +33,8 @@
 - title: Bioinformatics
   url: /bioinformatics/
   children:
+    - title: Overview
+      url: /bioinformatics/
     - title: Getting Started
       url: /bioinformatics/getting-started/
 

_includes/page-header.html

@@ -1,15 +1,22 @@
-{% assign header_img = page.header_image | default: '/assets/images/hero-bg.jpg' %}
+{% if page.layout == 'post' and page.featured_image %}
+  {% assign header_img = page.featured_image %}
+{% else %}
+  {% assign header_img = page.header_image | default: '/assets/images/hero-bg.jpg' %}
+{% endif %}
 <div class="page-header {% if page.layout == 'home' %}hero{% endif %}" style="background-image: url('{{ header_img | relative_url }}')">
   <div class="page-header-content">
     <h1>{{ page.header_title | default: page.title }}</h1>
     {% if page.subtitle %}
     <p class="page-subtitle">{{ page.subtitle }}</p>
     {% endif %}
+    {% if page.layout == 'post' %}
+    <p class="page-subtitle">Published by <strong>{{ page.author }}</strong> on {{ page.date | date: "%Y-%m-%d" }}</p>
+    {% endif %}
   </div>
   {% if page.layout == 'home' %}
   <div class="hero-curve">
     <svg viewBox="0 0 1000 100" preserveAspectRatio="none">
-      <path d="M0,0 C400,100 600,100 1000,0 L1000,100 L0,100 Z"></path>
+      <path d="M0,0 L500,100 L1000,0 L1000,100 L0,100 Z"></path>
     </svg>
   </div>
   {% endif %}

_layouts/post.html

@@ -5,13 +5,6 @@
 {% include page-header.html %}
 <div class="page-content">
   <article class="content-card post-article">
-    <div class="post-header">
-      <h1>{{ page.title }}</h1>
-      <p class="post-meta">
-        {{ page.date | date: "%B %-d, %Y" }}
-        {% if page.author %} &middot; by {{ page.author }}{% endif %}
-      </p>
-    </div>
     <div class="post-body">
       {{ content }}
     </div>

_sass/_content.scss

@@ -37,13 +37,12 @@
 }
 
 .team-card {
-  width: 180px;
+  width: 200px;
   text-align: center;
 
   img {
-    width: 140px;
-    height: 140px;
-    border-radius: 50%;
+    width: 200px;
+    height: 280px;
     object-fit: cover;
     filter: grayscale(100%);
     transition: filter 0.3s;
@@ -56,7 +55,8 @@
   h4 {
     margin: 0.5em 0 0.1em;
     font-size: 0.95rem;
-    color: $purple;
+    color: $text-color;
+    font-weight: 700;
   }
 
   .team-title {
@@ -94,8 +94,14 @@
     text-decoration: none;
   }
 
+  .resource-icon {
+    font-size: 2.5rem;
+    color: $purple;
+    margin-bottom: 0.2em;
+  }
+
   h4 {
-    margin: 0.5em 0 0.3em;
+    margin: 0.3em 0 0.3em;
     color: $purple;
   }
 
@@ -106,6 +112,38 @@
   }
 }
 
+// Bioinformatics team grid (What We Do page)
+.bio-team-grid {
+  display: flex;
+  justify-content: center;
+  gap: 3em;
+  flex-wrap: wrap;
+  margin: 1.5em 0;
+}
+
+.bio-team-member {
+  text-align: center;
+  width: 180px;
+
+  img {
+    width: 150px;
+    height: 150px;
+    object-fit: contain;
+  }
+
+  h4 {
+    margin: 0.5em 0 0.1em;
+    font-size: 0.95rem;
+    color: $text-color;
+  }
+
+  p {
+    font-size: 0.8rem;
+    color: $text-muted;
+    margin: 0;
+  }
+}
+
 // Equipment sections
 .equipment-section {
   margin-bottom: 2.5em;
@@ -228,7 +266,7 @@
 .top-cards-dark {
   background: $topbar-bg;
   border-radius: $border-radius;
-  padding: 1em;
+  padding: 1.5em;
   margin-bottom: 1.5em;
 }
 
@@ -253,15 +291,22 @@
     text-decoration: none;
   }
 
+  .top-card-icon {
+    font-size: 2.5rem;
+    margin-bottom: 0.3em;
+  }
+
   h3 {
-    margin-top: 0.5em;
+    margin-top: 0.3em;
+    margin-bottom: 0.3em;
   }
 
   p {
     font-size: 0.9rem;
   }
 
   .top-cards-dark & {
+    .top-card-icon { color: $purple; }
     h3 { color: $text-light; }
     p { color: rgba(255, 255, 255, 0.7); }
   }

_sass/_homepage.scss

@@ -75,17 +75,17 @@
   font-family: $font-alt;
   font-size: 3rem;
   font-weight: 700;
-  line-height: 2.8em;
+  line-height: 1.2;
   color: #424242;
   text-align: center;
-  margin: 0;
+  margin: 0 0 1em;
 }
 
 // Blog cards on homepage
 .home-blog-grid {
   display: flex;
+  justify-content: center;
   gap: 30px;
-  margin-top: -25px;
 
   @media (max-width: 800px) {
     flex-direction: column;
@@ -165,44 +165,12 @@
   z-index: 1;
 }
 
-.location-banner-shape-top {
-  position: relative;
-  z-index: 2;
-
-  svg {
-    display: block;
-    width: 149%;
-    height: 33px;
-  }
-}
-
-.location-banner-shape-bottom {
-  position: relative;
-  z-index: 2;
-
-  svg {
-    display: block;
-    width: 100%;
-    height: 45px;
-  }
-}
-
 .location-banner-content {
   position: relative;
   z-index: 3;
   max-width: 1062px;
   margin: 0 auto;
-  padding: 0 20px;
-
-  h2 {
-    font-family: $font-alt;
-    font-size: 3rem;
-    font-weight: 700;
-    color: #fff;
-    text-align: center;
-    line-height: 2.8em;
-    margin: 0;
-  }
+  padding: 40px 20px;
 
   h3 {
     font-family: $font-alt;
@@ -276,31 +244,18 @@
   position: relative;
   background-size: cover;
   background-position: bottom center;
-  margin-top: -14px;
   margin-bottom: -5px;
 }
 
 .bottom-banner-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.16);
-  opacity: 0.9;
+  background: rgba(0, 0, 0, 0.3);
   z-index: 1;
 }
 
-.bottom-banner-shape-top {
-  position: relative;
-  z-index: 2;
-
-  svg {
-    display: block;
-    width: 200%;
-    height: 150px;
-  }
-}
-
 .bottom-banner-spacer {
-  height: 200px;
+  height: 250px;
   position: relative;
   z-index: 2;
 }

_sass/_variables.scss

@@ -3,7 +3,7 @@ $accent: #e91e63;
 $purple: #6f42b7;
 $topbar-bg: #363537;
 $footer-bg: #323437;
-$page-bg: #E5E5E5;
+$page-bg: #ffffff;
 $card-bg: #fff;
 $text-color: #000;
 $text-light: #fff;