Merge pull request #18 from AhmadAlkhan/main

new edits for lab website with smooth scrolling

Author: AhmadAlkhan

Diff for: _quarto.yml

@@ -8,11 +8,11 @@ website:
     location: navbar
     type: overlay
   reader-mode: true
-  favicon:  contents/logo/helix/favicon.ico
+  favicon: contents/logo/helix/favicon.ico
   site-url: https://componco.github.io/lab_website.github.io/
 
   navbar:
-    background: primary
+    background: dark
     logo: contents/logo/helix/DNA_scaled.png
     search: true
     right:
@@ -22,23 +22,39 @@ website:
       - icon: github
         href: https://github.com/CompOnco/lab_website/
         aria-label: GitHub
+      - icon: envelope
+        href: mailto:Aedin.Culhane@ul.ie
+        aria-label: Email
 
-        
     left:
       - text: "Home"
         file: index.qmd
       - text: "Research"
-        file: projects.qmd
+        menu:
+          - text: "Overview"
+            file: projects.qmd
+          - text: "eHealth Hub for Cancer"
+            file: Projects/eHealthHub.qmd
+          - text: "GDI - Genomic Data Infrastructure"
+            file: Projects/GDI.qmd
+          - text: "Single-Cell Methods" 
+            file: Projects/scMethods.qmd
+          - text: "Bioconductor"
+            file: Projects/bioconductor.qmd
+          - text: "Kidney Cancer"
+            file: Projects/kidneyCancer.qmd
       - text: "People"
-        file:  people.qmd
+        file: people.qmd
       - text: "Collaborate"
-        file:  Collaborate.qmd
-      - text: "News"
-        file: news.qmd
-      - text: "Publications"
+        file: Collaborate.qmd
+      - text: "Publications & News"
         menu:
-          - publications.qmd         
-          - talks.qmd
+          - text: "Publications"
+            file: publications.qmd         
+          - text: "Talks"
+            file: talks.qmd
+          - text: "News"
+            file: news.qmd
       - text: "Software"
         file: software.qmd
       - text: "Join Us"
@@ -57,30 +73,24 @@ website:
       - icon: github
         menu:
           - text: Report a Bug
-            url:  https://github.com/CompOnco/lab_website/issues
+            url: https://github.com/CompOnco/lab_website/issues
 
 
   page-footer:
     left: 
-      - text: "@Culhane Lab"
+      - text: "© 2023 Culhane Lab | University of Limerick"
     center: |
       ![](/contents/logo/LDCRC_Logo_fixed.jpg "Limerick Digital Cancer Research Center"){height="40"}
       ![](/contents/logo/bioconductor_logo_cmyk.png "Bioconductor"){height="40"}
       ![](/contents/logo/eHealthHub_logo.png "eHealthHub For Cancer"){height="40"}
       ![](/contents/logo/Elixir_logo-3927606181.png "ELIXIR"){height="40"}
       ![](/contents/logo/OHDSI.jpeg "OHDSI Real World Data"){height="40"}
-      ![](/contents/logo/NasPro.png "National Spatial Tissue Profiling Platform"){height="40"}
-      ![](/contents/logo/NSRP_Logo.png){height="40"}
     right: |
-     ![](contents/logo/LDCRC_Logo_fixed.jpg){fig-alt="LDCRC" width=150px}
-
-
+      [Privacy Policy](#) | [Terms of Use](#)
     
 repo-url: https://github.com/CompOnco
 repo-actions: [edit, issue]
 
-
-  
 twitter-card: 
   creator: "@AedinCulhane"
   site: "@CulhaneLab"
@@ -89,10 +99,16 @@ open-graph: true
 
 format:
   html:
-    theme: flatly
-    css: styles.css
+    theme: 
+      light: [flatly, styles.css]
+      dark: [darkly, styles.css]
     toc: true
-
+    css: styles.css
+    include-in-header:
+      text: |
+        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
+        <script src="https://unpkg.com/@barba/core"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
+        <script src="site.js" defer></script>
 
 editor: visual
-

Diff for: index.qmd

@@ -1,17 +1,116 @@
 ---
 title: "Culhane Computational Oncology & Cancer Genomics Lab"
+page-layout: full
+format:
+  html:
+    html-math-method: katex
+    include-in-header:
+      text: |
+        <style>
+          /* Add any custom styles for this page */
+        </style>
 ---
 
-Data is revolutionizing how we diagnose and treat cancer. Advances in sequencing allow us to spatially map and measure and the genome, transcriptome and other multi-omics of each individual single cell in a tumor. These data allow us to build a map of tumor architecture, profile the cells within the tumor and its microenviroment, understand cell-cell interactions and identify new targets for diagnosis and treatment.
+---
+title: "Culhane Computational Oncology & Cancer Genomics Lab"
+page-layout: full
+format:
+  html:
+    html-math-method: katex
+---
+
+::: {.hero-section .fade-in}
+# Computational Oncology & Cancer Genomics
+
+We develop computational tools and algorithms to understand cancer biology and improve treatment outcomes.
+:::
+
+:::::::::::::::::::::: container
+:::::::::::: row
+::::: {.col-md-4 .mb-4 .fade-in}
+:::: {.card .h-100}
+::: card-body
+### Our Research
+
+We specialize in developing algorithms for multi-modal analysis of cancer omics data, creating tools to discover insights into tumor evolution and treatment efficacy.
+
+[Explore Projects](projects.html){.btn .btn-primary}
+:::
+::::
+:::::
+
+::::: {.col-md-4 .mb-4 .fade-in}
+:::: {.card .h-100}
+::: card-body
+### Connected Data
+
+We lead initiatives in federated cancer data infrastructure, working with global consortiums to build frameworks that improve cancer research and care.
+
+[Learn More](Projects/eHealthHub.html){.btn .btn-primary}
+:::
+::::
+:::::
+
+::::: {.col-md-4 .mb-4 .fade-in}
+:::: {.card .h-100}
+::: card-body
+### Open Science
+
+We embrace open science principles, contributing to Bioconductor and sharing tools with the research community to accelerate cancer research globally.
+
+[See Our Software](software.html){.btn .btn-primary}
+:::
+::::
+:::::
+::::::::::::
+
+::::::::::: {.row .mt-5 .fade-in}
+::::: col-md-6
+## Recent Publications
+
+::: publication
+#### Correspondence analysis for dimension reduction, batch integration, and visualization of single-cell RNA-seq data
+
+**Hsu LL, Culhane AC** (2023) Scientific Reports
+
+[Read Paper](https://doi.org/10.1038/s41598-022-26434-1){.btn .btn-sm .btn-outline-secondary}
+:::
+
+::: publication
+#### Anti-CAIX BBζ CAR4/8 T cells exhibit superior efficacy in a ccRCC mouse model
+
+**Wang Y, Buck A, Grimaud M, Culhane AC,** et al. (2022) Molecular Therapy Oncolytics
+
+[Read Paper](https://doi.org/10.1016/j.omto.2021.12.019){.btn .btn-sm .btn-outline-secondary}
+:::
+
+[View All Publications](publications.html){.btn .btn-primary .mt-3}
+:::::
+
+::::::: col-md-6
+## Latest News
+
+:::: {.card .mb-3}
+::: card-body
+### New Grant Award
 
-## Algorithms for multi-modal analysis of cancer 'omics
+Our lab has received funding for all-island eHealth research in cancer.
 
-Our computational oncology lab specializes in using bioinformatics, data science and artificial intelligence to analyze clincal cancer genomics data. We develop algorithms to discover new insights into how different types of tumors evolve over time, or the treatments that may be more effective against specific types of cancers. By combining these powerful analytical techniques with medical knowledge about disease progression patterns or drug efficacy rates, our labs can develop algorithms to that researchers understand disease and clinical decision support tools that help clinical teams improve patient outcomes.
+[Read More](News/22-04-04_LimerickPost.html){.btn .btn-sm .btn-outline-secondary}
+:::
+::::
 
-## Federated Connected Cancer Data
+:::: {.card .mb-3}
+::: card-body
+### RTE Brainstorm Article
 
-Working with national, EU and global consortium including the European 1+ Million Genomics Data Infastructure [GDI](https://gdi.onemilliongenomes.eu) and [OHDSI](https://www.ohdsi.org) we are connecting cancer data to develop more comprehensive understanding of cancer. During the pandemic we learned the value of connecting world-wide digital health data to quickly identify trends and develop strategies to improve care. Real word data including electronic health records data compliments data from cancer clinical trial research, which typically study fixed term outcomes. Our lab lead the [eHealth Hub for Cancer]() a Higher Education Authority funded all-island program to build frameworks and computational tools to connect clinical cancer data. In connecting data we can study population level data and support the design of clinical research into new treatments or combinations of treatments that may be more effective than existing ones.
+Prof Aedin Culhane and Prof Mark Lawler spoke with RTE Brainstorm about the pressing need for harmonization of clinical cancer health data.
 
-## Open Science and Open Source Software
+[Read More](News/22_05_19_BrainStorm.html){.btn .btn-sm .btn-outline-secondary}
+:::
+::::
 
-We are an open science, open development, open source software lab who values diversity and inclusion. We share our tools to the benefit of the research community, and we benefit from those who share with us. We are in active in [Bioconductor](www.bioconductor.org), a global open source software suite which supports collaboration and sharing of bioinformatics code, data and workflows. It used by over 1 million researchrs worldwide in the analysis and interpretation of genomic data.
+[View All News](news.html){.btn .btn-primary}
+:::::::
+:::::::::::
+::::::::::::::::::::::

Diff for: people.qmd

@@ -1,73 +1,100 @@
 ---
-title: "Culhane Lab"
+title: "Our Team"
 listing:
   - id: PI
     contents: "People/PI/*.qmd"
     type: grid
+    grid-columns: 1
 
   - id: Team
     contents: "People/Team/*.qmd"
     type: grid
+    grid-columns: 3
 
   - id: Mentoring
     contents: "People/Mentoring/*.qmd"
     type: grid
-    
     grid-columns: 3
+    
+    image-height: 250px
     categories: true
-    feed: true
-    sort-ui: [Name]
-    filter-ui: [title, Name, date, description, categories, tag]
+    filter-ui: [title, Name, categories, tag]
 
-grid-columns: 3
-image-height: 350px
-  
 page-layout: full
 bibliography: references.bib
 ---
 
-## Principal Investigator
+:::::::::::::::: team-section
+## Principal Investigator {.section-title}
 
+:::: fade-in
 ::: {#PI}
 :::
+::::
 
-## Team
+## Core Team {.section-title}
 
+:::: fade-in
 ::: {#Team}
 :::
+::::
 
-## Team (Extended)
+## Extended Team {.section-title}
 
+:::: fade-in
 ::: {#Mentoring}
 :::
+::::
 
-## Alumni
-
-::: {#Alumni}
-:::
+## Alumni {.section-title}
 
+::::::::: {.alumni-grid .fade-in}
+::: alumni-card
+#### [Lauren Hsu](https://www.linkedin.com/in/lauren-hsu-155a282a/)
 
+PhD Candidate in Biostatistics at Harvard
 
-[Lauren Hsu](https://www.linkedin.com/in/lauren-hsu-155a282a/)\
-PhD Candidate in Biostatistics at Harvard\
 Publications: [@hsu2020; @Lê2021; @Hsu2023]
+:::
+
+::: alumni-card
+#### [Azfar Basunia](https://www.pennmedicine.org/departments-and-centers/department-of-radiology/education-and-training/residency-programs/current-residents/diagnostic-radiology-residents)
+
+Diagnostic Radiology Resident at Penn Medicine. Department of Radiology
 
-[Azfar Basunia](https://www.pennmedicine.org/departments-and-centers/department-of-radiology/education-and-training/residency-programs/current-residents/diagnostic-radiology-residents)\
-Diagnostic Radiology Resident at Penn Medicine. Department of Radiology \
 Publications: [@Ramos2017; @Meng2019; @Schwede2020]
+:::
+
+::: alumni-card
+#### [Chen Meng](https://www.linkedin.com/in/chen-meng-0422b226/)
+
+Center Leader Bioinformatics at the Bavarian Center for Biomolecular Mass Spectrometry (BayBioMS)
 
-[Chen Meng](https://www.linkedin.com/in/chen-meng-0422b226/)\
-Center Leader Bioinformatics at the Bavarian Center for Biomolecular Mass Spectrometry (BayBioMS)\
 Publications: [@Meng2016; @Lê2021; @Meng2019; @Meng2014; @Meng2016a; @Thorsson2019]
+:::
+
+::: alumni-card
+#### [Daniel Gusenleitner](https://www.linkedin.com/in/daniel-gusenleitner-2b295188/)
+
+Head of Computational Biology at Mercy BioAnalytics, Inc.
+
+Publications: [@gusenleitner2012; @Schröder2013; @Culhane2012]
+:::
 
-[Daniel Gusenleitner](https://www.linkedin.com/in/daniel-gusenleitner-2b295188/)\
-Head of Computational Biology at Mercy BioAnalytics, Inc.\
-Publications:[@gusenleitner2012; @Schröder2013; @Culhane2012]
+::: alumni-card
+#### [Matthew Schwede](https://www.linkedin.com/in/matthew-schwede-9a051415/)
+
+Hematology Oncology Fellow at Stanford University School of Medicine
 
-[Matthew Schwede](https://www.linkedin.com/in/matthew-schwede-9a051415/)\
-Hematology Oncology Fellow at Stanford University School of Medicine\
 Publications: [@Wang2012; @Schwede2013; @Santagata2014; @Schwede2020; @Chittenden2010]
+:::
+
+::: alumni-card
+#### [Oana Zeleznik](https://www.linkedin.com/in/oanazeleznik/)
+
+Instructor in Medicine, Harvard Medical School and Associate Epidemiologist, Brigham and Women's Hospital
 
-[Oana Zeleznik](https://www.linkedin.com/in/oanazeleznik/)\
-Instructor in Medicine, Harvard Medical School and Associate Epidemiologist, Brigham and Women's Hospital\
 Publications: [@Meng2016]
+:::
+:::::::::
+::::::::::::::::

Diff for: site.js

@@ -0,0 +1,100 @@
+// site.js - Custom JavaScript for Culhane Lab Website
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Enable smooth scrolling for the entire page
+  document.documentElement.style.scrollBehavior = 'smooth';
+  
+  // Enhanced smooth scrolling for anchor links
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+      e.preventDefault();
+      
+      const targetId = this.getAttribute('href');
+      if (targetId === '#') return;
+      
+      const targetElement = document.querySelector(targetId);
+      if (!targetElement) return;
+      
+      // Smooth scroll with animation
+      const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
+      const startPosition = window.pageYOffset;
+      const distance = targetPosition - startPosition;
+      const duration = 1000; // ms
+      let start = null;
+      
+      function animation(currentTime) {
+        if (start === null) start = currentTime;
+        const timeElapsed = currentTime - start;
+        const progress = Math.min(timeElapsed / duration, 1);
+        const ease = easeInOutCubic(progress);
+        
+        window.scrollTo(0, startPosition + distance * ease);
+        
+        if (timeElapsed < duration) {
+          requestAnimationFrame(animation);
+        }
+      }
+      
+      // Easing function for smooth acceleration/deceleration
+      function easeInOutCubic(t) {
+        return t < 0.5 
+          ? 4 * t * t * t 
+          : 1 - Math.pow(-2 * t + 2, 3) / 2;
+      }
+      
+      requestAnimationFrame(animation);
+    });
+  });
+  
+  // Add fade-in animation to elements
+  const fadeElements = document.querySelectorAll('.fade-in');
+  
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible');
+        observer.unobserve(entry.target);
+      }
+    });
+  }, {
+    threshold: 0.1,
+    rootMargin: '0px 0px -100px 0px' // Triggers slightly before element comes into view
+  });
+  
+  fadeElements.forEach(element => {
+    observer.observe(element);
+  });
+  
+  // Also observe slide-in animations
+  const slideLeftElements = document.querySelectorAll('.slide-in-left');
+  const slideRightElements = document.querySelectorAll('.slide-in-right');
+  
+  slideLeftElements.forEach(element => {
+    observer.observe(element);
+  });
+  
+  slideRightElements.forEach(element => {
+    observer.observe(element);
+  });
+  
+  // Parallax scrolling effect for hero section
+  const heroSection = document.querySelector('.hero-section');
+  if (heroSection) {
+    window.addEventListener('scroll', () => {
+      const scrollPosition = window.pageYOffset;
+      heroSection.style.backgroundPositionY = `${scrollPosition * 0.5}px`;
+    });
+  }
+  
+  // Add sticky navigation behavior
+  window.addEventListener('scroll', function() {
+    const navbar = document.querySelector('.navbar');
+    if (navbar) {
+      if (window.scrollY > 50) {
+        navbar.classList.add('scrolled');
+      } else {
+        navbar.classList.remove('scrolled');
+      }
+    }
+  });
+});

Diff for: software.qmd

@@ -4,42 +4,142 @@ bibliography: references.bib
 csl: publications/csl/elife.csl
 ---
 
-# Bioconductor Packages
+::::::::::::::::::::::::::::::::: software-container
+# Our Computational Tools {.page-title}
 
+::: {.lead .text-center .mb-5}
+We develop open-source software for genomic data analysis, with a focus on cancer research and single-cell methods.
+:::
+
+::::::::::::::::::::::: software-grid
+::::::: {.software-card .fade-in}
+::: software-icon
+![Corral Package](contents/hexstickers/corral_sticker.png)
+:::
+
+::::: software-info
 ## Corral
 
-![](contents/hexstickers/corral_sticker.png){width="200"}
+Single-cell RNA-seq dimension reduction, batch integration, and visualization with correspondence analysis.
+
+::: software-links
+[Bioconductor](https://bioconductor.org/){.btn .btn-primary .btn-sm} [GitHub](https://github.com/){.btn .btn-secondary .btn-sm}
+:::
+
+::: software-publications
+#### Publications
 
-Publications include [@Hsu2023; @Lê2021; @hsu2020]
+-   [@Hsu2023]
+-   [@Lê2021]
+-   [@hsu2020]
+:::
+:::::
+:::::::
 
+::::::: {.software-card .fade-in}
+::: software-icon
+![MOGSA Package](contents/hexstickers/mogsa_sticker.png)
+:::
+
+::::: software-info
 ## MOGSA
 
-![](contents/hexstickers/mogsa_sticker.png){width="200"}
+Multi-Omics Gene Set Analysis: Integrative analysis of multiple experimental and molecular data types.
+
+::: software-links
+[Bioconductor](https://bioconductor.org/){.btn .btn-primary .btn-sm} [GitHub](https://github.com/){.btn .btn-secondary .btn-sm}
+:::
+
+::: software-publications
+#### Publications
+
+-   [@Meng2016]
+-   [@Meng2019]
+-   [@Meng2014]
+-   [@Meng2016a]
+-   [@Lê2021]
+:::
+:::::
+:::::::
+
+::::::: {.software-card .fade-in}
+::: software-icon
+![iBBiG Package](https://raw.githubusercontent.com/Bioconductor/BiocStickers/master/iBBiG/iBBiG.png)
+:::
+
+::::: software-info
+## iBBiG
+
+Iterative Binary Bi-clustering of Gene Sets for biclustering and pattern discovery in gene expression data.
+
+::: software-links
+[Bioconductor](https://bioconductor.org/){.btn .btn-primary .btn-sm} [GitHub](https://github.com/){.btn .btn-secondary .btn-sm}
+:::
+
+::: software-publications
+#### Publications
+
+-   [@gusenleitner2012]
+:::
+:::::
+:::::::
+
+::::::: {.software-card .fade-in}
+::: software-icon
+![made4 Package](https://raw.githubusercontent.com/Bioconductor/BiocStickers/master/made4/made4.png)
+:::
+
+::::: software-info
+## made4
 
-Publications [@Meng2016; @Meng2019; @Meng2014; @Meng2016a; @Lê2021]
+Multivariate Analysis of Microarray Data using ADE4 for visualization and analysis of microarray data.
 
-### iBBiG
+::: software-links
+[Bioconductor](https://bioconductor.org/){.btn .btn-primary .btn-sm} [GitHub](https://github.com/){.btn .btn-secondary .btn-sm}
+:::
 
-@gusenleitner2012; @gusenleitner2012
+::: software-publications
+#### Publications
 
-### Omicade4
+-   [@Culhane2005]
+:::
+:::::
+:::::::
+:::::::::::::::::::::::
 
-@Meng2014
+:::::::::: {.mt-5 .workshops-section .fade-in}
+## Workshops & Training Materials
 
-### made4
+::::::::: card-deck
+:::: card
+::: card-body
+### Hitchhiker's Guide to PCA
 
-@Culhane2005
+A comprehensive tutorial on Principal Component Analysis for genomic data.
 
-# Hackathon
+[View Workshop](#){.btn .btn-primary}
+:::
+::::
 
-BIRSBiointegration.
+:::: card
+::: card-body
+### Quick Guide to scRNAseq
 
--   Datasets and code (link)
+Introduction to single-cell RNA sequencing analysis methods.
 
--   The hackathon is described in @Lê2021
+[View Workshop](#){.btn .btn-primary}
+:::
+::::
 
-# Workshops
+:::: card
+::: card-body
+### BIRSBiointegration Hackathon
 
-Hitchhikers Guide to PCA
+Datasets and code from our multi-omics integration hackathon.
 
-Quick guide to scRNAseq
+[Explore Hackathon](#){.btn .btn-primary}
+:::
+::::
+:::::::::
+::::::::::
+:::::::::::::::::::::::::::::::::

Diff for: styles.css

@@ -1 +1,178 @@
-/* css styles */
+/*-- scss:defaults --*/
+
+/*-- scss:rules --*/
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Fade-in animation */
+.fade-in {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+}
+
+.fade-in.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Slide-in animations */
+.slide-in-left {
+  opacity: 0;
+  transform: translateX(-50px);
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+}
+
+.slide-in-right {
+  opacity: 0;
+  transform: translateX(50px);
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+}
+
+.slide-in-left.visible,
+.slide-in-right.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Subtle parallax effect */
+.hero-section {
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  transition: background-position 0.1s ease-out;
+}
+
+/* Sticky navigation with smooth transition */
+.navbar {
+  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
+}
+
+.navbar.scrolled {
+  background-color: rgba(255, 255, 255, 0.95) !important;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+/* Modern styling for the Culhane Lab website */
+
+/* General styling */
+:root {
+  --primary-color: #2c3e50;
+  --secondary-color: #3498db;
+  --accent-color: #e74c3c;
+  --light-color: #ecf0f1;
+  --dark-color: #2c3e50;
+  --text-color: #333;
+  --font-main: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+body {
+  font-family: var(--font-main);
+  color: var(--text-color);
+  line-height: 1.6;
+}
+
+/* Hero section styling - using a gradient instead of an image */
+.hero-section {
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  color: white;
+  padding: 6rem 2rem;
+  margin-bottom: 2rem;
+  text-align: center;
+  border-radius: 5px;
+}
+
+.hero-section h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.hero-section p {
+  font-size: 1.3rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* Rest of your CSS... */
+
+/* Card styling */
+.card {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
+}
+
+.card-body {
+  padding: 1.5rem;
+}
+
+/* Person cards */
+.person-card {
+  text-align: center;
+}
+
+.person-card img {
+  width: 140px;
+  height: 140px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin: 0 auto 1rem;
+  border: 3px solid var(--secondary-color);
+  transition: transform 0.3s ease;
+}
+
+.person-card:hover img {
+  transform: scale(1.05);
+}
+
+/* Project cards */
+.project-card {
+  height: 100%;
+}
+
+.project-card .card-img-top {
+  height: 200px;
+  object-fit: cover;
+}
+
+/* Publication styling */
+.publication {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #eee;
+}
+
+.publication:last-child {
+  border-bottom: none;
+}
+
+/* Animation classes */
+.fade-in {
+  animation: fadeIn 0.8s ease-in-out;
+}
+
+@keyframes fadeIn {
+  0% { opacity: 0; transform: translateY(20px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .hero-section {
+    padding: 4rem 1rem;
+  }
+  
+  .hero-section h1 {
+    font-size: 2.5rem;
+  }
+}