Skip to content

Commit

Permalink
Refactor home page (#31)
Browse files Browse the repository at this point in the history 
* Refactor research aims on Home Page

* Fix underline color
  • Loading branch information
@WillHannon-MCB
WillHannon-MCB authored Aug 13, 2024
1 parent 6328f5d commit d96a89c
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 214 deletions.
266 changes: 52 additions & 214 deletions .vitepress/theme/Home.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<script>
import { data as aimsData } from './research.data.js'
export default {
data() {
return {
aims: aimsData,
viruses: ["Influenza", "SARS-CoV-2", "Lassa", "Nipah", "Rabies", "HIV", "Chikungunya", "CoV-229E", "Proteins"],
currentVirus: 'Viruses',
virusIndex: -1,
Expand All @@ -10,15 +13,11 @@ export default {
useOpacity: true, // Toggle to apply opacity to background color
opacityLevel: 0.1, // Background color opacity level
currentColor: '#000000', // default color
show: false
}
};
},
mounted() {
this.intervalId = setInterval(this.updateVirus, 4000); // Update virus every 5 seconds
this.disableScroll();
setTimeout(() => {
this.show = true;
}, 2000);
},
beforeUnmount() {
this.enableScroll();
Expand All @@ -43,15 +42,20 @@ export default {
disableScroll() {
document.body.style.overflow = 'hidden';
},
},
computed: {
sortedAims() {
return this.aims.sort((a, b) => a.order - b.order);
}
}
}
</script>

<template>
<div
class="carousel hide-scrollbar snap-y snap-mandatory overflow-y-scroll overscroll-contain h-screen flex-grow z-0">
<div class="hide-scrollbar snap-y snap-mandatory overflow-y-scroll overscroll-contain h-screen">
<!-- Welcome to the Bloom Lab content -->
<div
class="carousel-item w-full h-full snap-always snap-start mx-auto max-w-4xl px-4 text-left flex flex-col justify-between">
class="hide-scrollbar snap-always snap-start mx-auto max-w-4xl px-4 text-left flex flex-col justify-between h-screen overflow-scroll ">
<div class="flex-grow">
<h1 class="text-4xl sm:text-5xl md:text-7xl lg:text-8xl text-gray-800 select-none">
Welcome to the <span class="block font-bold">Bloom Lab</span>
Expand All @@ -61,7 +65,7 @@ export default {
<transition name="fade" mode="out-in">
<span :key="currentVirus" class="italic"
:style="{ color: currentColor, backgroundColor: getBackgroundWithOpacity(currentColor) }">{{
currentVirus }}</span>
currentVirus }}</span>
</transition>
</p>
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-4 md:mt-6 lg:mt-12">
Expand All @@ -70,8 +74,8 @@ export default {
the molecular constraints on viral proteins, and how these constraints shape
the capacity of viruses to evolve to escape antibodies, erode pre-existing immunity,
and adapt to new hosts.

<br><br>
</p>
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-6">
Our lab is part of the
<a href="https://www.fredhutch.org/en/research/divisions/basic-sciences-division.html">Basic
Sciences Divison</a>
Expand All @@ -87,221 +91,43 @@ export default {
Jesse Bloom is an Investigator of the
<a href="https://www.hhmi.org/research">Howard Hughes Medical Institute</a>.
</p>
</div>
<div class="scroll-button pb-60 sm:pb-72 md:pb-72 lg:pb-60">
<Transition>
<div v-if="show">
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-10 md:mt-6 lg:mt-12 text-center">
Scroll down to learn more
</p>
<div class="flex justify-center">
<i
class="bi bi-chevron-down text-gray-500 mt-1 animate-bounce text-lg md:text-xl lg:text-2xl"></i>
<!-- Scroll arrow -->
<div class="scroll-button pt-2">
<Transition>
<div>
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-10 md:mt-6 lg:mt-12 text-center">
Scroll down to learn more
</p>
<div class="flex justify-center">
<i
class="bi bi-chevron-down text-gray-500 mt-1 animate-bounce text-lg md:text-xl lg:text-2xl"></i>
</div>
</div>
</div>
</Transition>
</div>
</div>
<!-- Research Aims -->
<div
class="carousel-item w-full h-full snap-always snap-start mx-auto max-w-4xl px-4 text-left flex flex-col justify-between">
<div class="flex-grow">
<h2 class="text-2xl md:text-3xl lg:text-4xl text-gray-600 mt-2 lg:mt-4 font-normal select-none">
<span class="underline decoration-sky-500 font-semibold">Deep Mutational Scanning</span>
</h2>
<div class="description">
<div class="">
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-12">
Our lab uses deep mutational scanning to
experimentally measure how tens-of-thousands of mutations to viral proteins
affect key properties including function, immune escape, and receptor binding.
</p>
<img src="/assets/research/dms.png" alt="Example of deep mutational scanning"
class="float-left mr-4 my-4 w-107 h-64">
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-8">
We primarily perform these experiments using a
<a href="https://www.sciencedirect.com/science/article/pii/S0092867423001034">pseudovirus
system</a>
that allows us to safely characterize mutants of entry proteins from a wide range
of viruses, including
<a href="https://www.nature.com/articles/s41586-024-07636-1">SARS-CoV-2 spike</a>,
<a href="https://doi.org/10.1101/2024.05.23.595634">influenza hemagglutinin</a>,
<a href="https://www.sciencedirect.com/science/article/pii/S1074761324003194">Lassa virus
GPC</a>,
<a href="https://www.sciencedirect.com/science/article/pii/S1931312823002184">HIV
envelope</a>, and
<a href="https://doi.org/10.1101/2024.04.17.589977">Nipah virus RBP</a>.
</p>
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-8">
Deep mutational scanning can inform efforts to
<a href="https://www.nature.com/articles/s41586-024-07636-1">forecast the evolution of human
seasonal viruses</a>
and
<a href="https://doi.org/10.1101/2024.05.23.595634">surveil the evolution of potential
pandemic viruses</a>.
To facilitate the use of deep mutational scanning for these important goals,
we develop <a href="https://dms-viz.github.io/">interactive visualization tools</a>
and <a href="https://github.com/dms-vep/dms-vep-pipeline-3">data analysis pipelines</a>.
See <a
href="https://dms-vep.org/Flu_H5_American-Wigeon_South-Carolina_2021-H5N1_DMS/">here</a>
for an example of how we analyze and visualize large datasets to
inform the study of viral evolution.
</p>
</div>
</Transition>
</div>
</div>
<div class="scroll-button pb-60 sm:pb-72 md:pb-72 lg:pb-60">
<Transition>
<div v-if="show">
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-10 md:mt-6 lg:mt-12 text-center">
Scroll down to learn more
</p>
<div class="flex justify-center">
<i
class="bi bi-chevron-down text-gray-500 mt-1 animate-bounce text-lg md:text-xl lg:text-2xl"></i>
</div>
</div>
</Transition>
</div>
</div>
<!-- Research Aims -->
<div
class="carousel-item w-full h-full snap-always snap-start mx-auto max-w-4xl px-4 text-left flex flex-col justify-between">
<div class="flex-grow">
<h2 class="text-2xl md:text-3xl lg:text-4xl text-gray-600 mt-2 lg:mt-4 font-normal select-none">
<span class="underline decoration-indigo-500 font-semibold">Interplay of Immunity and Viral
Evolution</span>
<div class="research-aims pb-40">
<div class="mx-auto max-w-4xl px-4 text-left flex flex-col justify-between"
v-for="(aim, index) in sortedAims" :key="index">
<h2 class="snap-always snap-start text-2xl md:text-3xl lg:text-4xl text-gray-600 mt-4 md:mt-6 lg:mt-12 mb-2 select-none underline font-semibold"
:class="`${aim.color}`">
{{ aim.title }}
</h2>
<div class="description">
<div class="">
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-12">
We study immunity and viral evolution at both the population and single-cell
levels.
</p>
<img src="/assets/research/seqneut.jpg" alt="Description"
class="float-left mr-4 my-4 w-80 h-134">
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-8">
At the population level, differences in exposure history and immune imprinting lead
human individuals to make antibody responses that target different regions
of rapidly evolving viruses like influenza and SARS-CoV-2.
This population heterogeneity has profound implications for viral evolution and disease
susceptibility, as
it causes viral mutations to impact the immunity of different individuals
differently. We are characterizing this population heterogeneity using both
<a href="https://www.sciencedirect.com/science/article/pii/S1931312824002336">deep
mutational scanning</a>
and a <a href="https://doi.org/10.1101/2024.03.08.584176">sequencing based-neutralization
assay</a>
we developed that increases the throughput of traditional neutralization assays by several
orders of magnitude (see schematic at left).

</p>
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-8">
At the single-cell level, we developed approaches to
<a href="https://journals.asm.org/doi/10.1128/jvi.00500-19">sequence viruses in single
cells</a>
and <a href="https://elifesciences.org/articles/86852">quantify how many progeny each
infected cell produces</a>.
We use these approaches to understand how viral variation impacts the
outcome of infection in individual cells.
</p>
</div>
</div>
</div>
<div class="scroll-button pb-60 sm:pb-72 md:pb-72 lg:pb-60">
<Transition>
<div v-if="show">
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-10 md:mt-6 lg:mt-12 text-center">
Scroll down to learn more
</p>
<div class="flex justify-center">
<i
class="bi bi-chevron-down text-gray-500 mt-1 animate-bounce text-lg md:text-xl lg:text-2xl"></i>
</div>
</div>
</Transition>
</div>
</div>
<!-- Research Aim -->
<div
class="carousel-item w-full h-full snap-always snap-start mx-auto max-w-4xl px-4 text-left flex flex-col justify-between">
<div class="flex-grow">
<h2 class="text-2xl md:text-3xl lg:text-4xl text-gray-600 mt-2 lg:mt-4 font-normal select-none">
<span class="underline decoration-pink-500 font-semibold">Big Datasets and Viral Evolution</span>
</h2>
<div class="description">
<div class="">
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-12">
We also develop new ways to leverage large datasets to better understand viral evolution.
</p>
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-8">
We have come up with a way to leverage the millions of publicly available
SARS-CoV-2 sequences to estimate the effect of individual mutations on viral fitness
(see <a href="https://academic.oup.com/ve/article/9/2/vead055/7265011">this paper</a>
and <a href="https://slides.com/jbloom/sars2-mut-fitness/">these slides</a>).
We've also created a platform to
<a href="https://jbloomlab.github.io/SARS2-mut-fitness/">visualize the mutational
effects</a>
to aid in interpretation of viral evolution.
</p>
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-8">
We have also integrated thousands of deep mutational scanning measurements
into an <a href="https://jbloomlab.github.io/SARS2-RBD-escape-calc/">antibody-escape
calculator</a>
that was <a href="https://slides.com/jbloom/sars2-rbd-escape-calc#/12">widely used</a>
during the SARS-CoV-2 pandemic to understand
the antigenic effects of viral mutations.
</p>
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-8">
We also have projects that involve analyzing the evolution of viruses
<a href="https://elifesciences.org/articles/26875">within individual infected humans</a>,
and developing models
to <a href="https://academic.oup.com/ve/article/8/2/veac110/6889254">understand epistasis
among viral mutations</a>.
</p>
</div>
</div>
</div>
<div class="scroll-button pb-60 sm:pb-72 md:pb-72 lg:pb-60">
<Transition>
<div v-if="show">
<p class="text-sm md:text-base lg:text-lg text-gray-500 mt-10 md:mt-6 lg:mt-12 text-center">
Scroll up to learn more
</p>
<div class="flex justify-center">
<i
class="bi bi-chevron-up text-gray-500 mt-1 animate-bounce text-lg md:text-xl lg:text-2xl"></i>
</div>
</div>
</Transition>
<div class="aim-content" v-html="aim.html"></div>
</div>
</div>
</div>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.8s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
<style>
.aim-content p {
@apply text-sm md:text-base lg:text-lg text-gray-500 mt-2 md:mt-4 lg:mt-6;
}
.v-enter-active,
.v-leave-active {
transition: opacity 1s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
a {
text-decoration: underline;
.aim-content img {
@apply mx-auto md:float-left md:mr-4 my-4 max-w-sm md:max-w-md;
}
.hide-scrollbar {
Expand All @@ -315,4 +141,16 @@ a {
display: none;
/* Chrome, Safari, Opera */
}
</style>
.sky {
@apply decoration-sky-500;
}
.pink {
@apply decoration-pink-500;
}
.indigo {
@apply decoration-indigo-500;
}
</style>
13 changes: 13 additions & 0 deletions .vitepress/theme/research.data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { createContentLoader } from "vitepress";

export default createContentLoader("research/*.md", {
render: true,
transform: (raw) => {
return raw.map((page) => ({
title: page.frontmatter.title,
color: page.frontmatter.color,
order: page.frontmatter.order,
html: page.html,
}));
},
});
13 changes: 13 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,8 +223,21 @@ An interactive web tool for visualizing site-level data on a protein structure w
```

### Editing the home page and section home pages

While the individual posts can be edited by just editing the Markdown, to edit the homepage and the top text for each section (*Blog*, *Team*, *Papers*, *Software*) you will need to edit the corresponding `*.vue` file at [.vitepress/theme](.vitepress/theme) (eg, [.vitepress/theme/Home.vue](.vitepress/theme/Home.vue) for the home page).

However, you can edit the research aims that appear on the Home Page ([.vitepress/theme/Home.vue](.vitepress/theme/Home.vue)) using markdown files located in [research/*.md](/research/). These research aims will automatically populate the Home Page.

```md
---
title: Big Datasets and Viral Evolution # Title of the aim
color: pink # Color of the underline
order: 3 # Order of the research aim
---
```

The frontmatter above specifies the title of the aim, the color of the title's underline, and the order of the aim.

## Deployment

The deployment is handled by GitHub Actions. A workflow script located at [`.github/workflows/deploy.yml`](.github/workflows/deploy.yml) is run on **pushes** or **pull requests** to the `main` branch. The workflow script builds the website using `npm run build` and copies the contents of the resulting `.dist/` directory to a branch called `gh-pages`. The website is automatically deployed from the root of this branch by GitHub Pages.
Loading

0 comments on commit d96a89c

Please sign in to comment.