Populate homepage

THEME.md

@@ -28,7 +28,7 @@ The notebook text and bubble background colors can be accessed with the `noteboo
 
 ```html
 <div class="bg-notebookBg">
-    <p class="text-notebookText">Body</p>
+  <p class="text-notebookText">Body</p>
 </div>
 ```
 

src/components/LightButton.vue

@@ -2,7 +2,7 @@
 
 <template>
   <button
-    class="flex items-center gap-2 bg-none px-6 py-2 text-gold text-subtitle font-medium hover:opacity-80 active:opacity-60 transition-opacity duration-200"
+    class="flex items-center gap-2 bg-none py-2 text-gold text-subtitle font-medium hover:opacity-80 active:opacity-60 transition-opacity duration-200"
   >
     <slot></slot>
     <svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">

src/components/lab-notebook/Bubble.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 
-defineProps<{ alwaysDropdown: boolean, dark?: boolean, nested?: boolean }>()
+defineProps<{ alwaysDropdown: boolean; dark?: boolean; nested?: boolean }>()
 defineEmits<{ (e: 'toggleActivated', state: boolean): void }>()
 
 const title = ref()

src/components/lab-notebook/Section.vue

@@ -1,13 +1,12 @@
-
 <script setup lang="ts">
-  const sectionTitleStyle = 'text-subtitle-sm lg:text-subtitle text-white mb-4'
+const sectionTitleStyle = 'text-subtitle-sm lg:text-subtitle text-white mb-4'
 </script>
 
 <template>
-    <section>
-        <h3 :class="sectionTitleStyle">
-            <slot name="sub-title"></slot>
-        </h3>
-        <slot name="content"></slot>
-    </section>
-</template>
+  <section>
+    <h3 :class="sectionTitleStyle">
+      <slot name="sub-title"></slot>
+    </h3>
+    <slot name="content"></slot>
+  </section>
+</template>

src/components/lab-notebook/SingleColumn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Bubble from '@/components/lab-notebook/Bubble.vue'
 
-withDefaults(defineProps<{ alwaysDropdown?: boolean, dark?: boolean, nested?: boolean }>(), {
+withDefaults(defineProps<{ alwaysDropdown?: boolean; dark?: boolean; nested?: boolean }>(), {
   alwaysDropdown: false
 })
 </script>

src/components/navbar/Dropdown.vue

@@ -16,10 +16,22 @@ const handleClickOutside = () => {
   <div
     v-click-outside="handleClickOutside"
     class="flex flex-col items-center h-full"
-    @mouseenter="() => {if (!toggle) dropdown = true}"
-    @mouseleave="() => {if (!toggle) dropdown = false}"
+    @mouseenter="
+      () => {
+        if (!toggle) dropdown = true
+      }
+    "
+    @mouseleave="
+      () => {
+        if (!toggle) dropdown = false
+      }
+    "
   >
-    <div class="relative z-10 flex gap-2 w-full py-4 px-12 cursor-pointer" :class="{ 'opacity-80': dropdown || toggle }" @click="toggle = !toggle">
+    <div
+      class="relative z-10 flex gap-2 w-full py-4 px-12 cursor-pointer"
+      :class="{ 'opacity-80': dropdown || toggle }"
+      @click="toggle = !toggle"
+    >
       <slot name="text"></slot>
       <svg
         class="w-3 stroke-gold transition duration-100"
@@ -31,7 +43,15 @@ const handleClickOutside = () => {
       </svg>
     </div>
 
-    <div v-if="dropdown || toggle" class="fixed pt-2 mt-10" @click="() => {if (!toggle) toggle = true}">
+    <div
+      v-if="dropdown || toggle"
+      class="fixed pt-2 mt-10"
+      @click="
+        () => {
+          if (!toggle) toggle = true
+        }
+      "
+    >
       <div class="bg-slate py-4 shadow-[0_25px_25px_rgba(0,0,0,0.4)] rounded-b-3xl">
         <slot name="content"></slot>
       </div>

src/components/navbar/Dropside.vue

@@ -16,8 +16,16 @@ const handleClickOutside = () => {
   <div
     v-click-outside="handleClickOutside"
     class="flex items-center"
-    @mouseenter="() => { if (!toggle) dropdown = true }"
-    @mouseleave="() => { if (!toggle) dropdown = false }"
+    @mouseenter="
+      () => {
+        if (!toggle) dropdown = true
+      }
+    "
+    @mouseleave="
+      () => {
+        if (!toggle) dropdown = false
+      }
+    "
     @click="toggle = !toggle"
   >
     <div class="flex gap-2 py-4 px-8 hover:opacity-80 transition duration-200">

src/components/navbar/NavBar.vue

@@ -94,11 +94,15 @@ const tree: Tree[] = [
   <!-- Desktop Navbar -->
   <template v-if="$windowWidth >= 1024">
     <div
-      class="flex justify-center items-center bg-slate font-semibold text-gold py-4 gap-44 drop-shadow-lg"
+      class="z-20 flex justify-center items-center bg-slate font-semibold text-gold py-4 gap-44 drop-shadow-lg"
     >
       <div class="flex justify-center">
         <template v-for="(entry, i) in tree.slice(0, tree.length / 2)" :key="i">
-          <RouterLink v-show="entry.url" :to="entry.url ? entry.url : '#'" class="h-full py-4 px-12">
+          <RouterLink
+            v-show="entry.url"
+            :to="entry.url ? entry.url : '#'"
+            class="h-full py-4 px-12"
+          >
             {{ entry.name }}
           </RouterLink>
           <Dropdown v-show="entry.children" to="#">
@@ -143,7 +147,7 @@ const tree: Tree[] = [
   <!-- Mobile Navbar -->
   <template v-else>
     <div
-      class="fixed z-20 top-0 w-full flex justify-between items-center bg-slate py-7 drop-shadow-lg"
+      class="fixed z-30 top-0 w-full flex justify-between items-center bg-slate py-7 drop-shadow-lg"
     >
       <RouterLink to="/" class="flex items-center">
         <img class="ml-4 mr-4 w-12" src="../../assets/logo.svg" alt="Biomod Logo" />

src/main.ts

@@ -16,18 +16,18 @@ import vClickOutside from 'v-click-outside'
 
 addIcons(HiSolidArrowSmLeft, HiSolidArrowSmRight, RiArrowDropRightLine, RiArrowDropLeftLine)
 
-const { bind, unbind } = vClickOutside.directive;
+const { bind, unbind } = vClickOutside.directive
 
 const app = createApp(App)
 
 app.directive('click-outside', {
   mounted(el, bindling) {
-    bind(el, { value: bindling.value });
+    bind(el, { value: bindling.value })
   },
   beforeUnmount(el) {
-    unbind(el);
-  },
-});
+    unbind(el)
+  }
+})
 app.use(router)
 app.use(VueWindowSizePlugin)
 app.component('VIcon', OhVueIcon)

src/views/HomeView.vue

@@ -8,102 +8,108 @@ const scrollToTop = () => {
 
 <template>
   <div class="flex flex-col bg-slate">
-    <div class="px-6 flex flex-col justify-center min-h-[80vh] bg-dark">
-      <div class="w-full flex flex-col items-center">
-        <h1 class="font-title text-title-sm lg:text-title text-center mb-4">
-          Embrace the Nano Frontier
-        </h1>
-        <h2 class="text-subtitle-sm lg:text-subtitle w-3/4 lg:w-1/2 text-center">
-          Unleash the Nano Frontier, where a new era of technology begins. Pioneering advancements
-          redefine possibilities. Embrace the future with us.
-        </h2>
-        <button class="btn mt-20">Explore</button>
+    <div class="px-6 flex flex-col justify-center min-h-[100dvh] bg-gradient-to-b from-dark via-dark via-90% to-slate">
+      <div class="flex relative justify-center lg:justify-start lg:items-center h-full lg:mt-16 lg:mb-28">
+        <img src="../assets/homepage/title_graphic.png" alt=""
+          class="absolute top-[5dvw] md:top-[3dvw] lg:top-0 right-[4dvw] md:right-[7dvw] lg:right-0 w-[80dvw] lg:w-auto lg:h-full animate-breathe">
+        <div
+          class="z-10 lg:basis-4/6 h-full flex flex-col justify-center items-center mt-[2dvh] md:mt-20 lg:mt-0 bg-[url('../assets/homepage/title_background.svg')] bg-no-repeat bg-[50%_80dvh] lg:bg-[30%_50%]">
+          <h1 class="font-title text-title-sm lg:text-title text-center mb-4">
+            A BIOMODular Enzyme Delivery Vehicle to Target Biofilms
+          </h1>
+          <h2 class="text-subtitle-sm lg:text-subtitle w-3/4 lg:w-2/3 text-center">
+            Presented by the University of British Columbia 2023 Team
+          </h2>
+          <a href="#video" class="btn mt-8 lg:mt-16 hover:opacity-100">
+            Explore
+          </a>
+        </div>
       </div>
     </div>
 
     <div class="flex flex-col bg mb-8">
-      <span class="w-full h-28 lg:h-40 bg-gradient-to-b from-dark to-slate"></span>
-      <div class="p-4 flex flex-col gap-4 lg:gap-0 lg:flex-row mx-4 lg:mx-28 lg:mt-10">
+      <!-- <span class="w-full h-28 lg:h-40 bg-gradient-to-b from-dark to-slate"></span> -->
+      <div class="p-4 flex flex-col gap-4 lg:gap-0 lg:flex-row mx-4 lg:mx-16 xl:mx-28 lg:mt-10">
         <div class="lg:w-1/2">
           <h1 class="font-title font-semibold text-[2.5rem] lg:text-title text-gold">
             The smallest of beginnings
           </h1>
-          <div class="flex items-center mt-2 gap-4 lg:gap-28">
-            <svg
-              class="w-16 lg:w-32 stroke-[6] lg:stroke-[3]"
-              viewBox="0 0 127 4"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <line y1="2" x2="127" y2="2" stroke="#E2B764" />
-            </svg>
-            <LightButton>Learn More</LightButton>
-          </div>
+          <RouterLink to="/ideas">
+            <div class="flex items-center mt-2 gap-4 lg:gap-28">
+              <svg class="w-16 lg:w-32 stroke-[6] lg:stroke-[3]" viewBox="0 0 127 4" fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <line y1="2" x2="127" y2="2" stroke="#E2B764" />
+              </svg>
+              <LightButton>Learn More</LightButton>
+            </div>
+          </RouterLink>
         </div>
         <div class="lg:w-1/2">
           <p class="lg:mt-5 lg:text-subtitle lg:text-right">
-            Our submission to the biomolecular design competition is a testament to our team's
-            unwavering commitment to pushing the boundaries of what's possible in the field of
-            biomolecular engineering. Our project not only addresses a pressing global health
-            concern but also showcases the immense potential of biomolecular design to provide
-            innovative solutions to real-world problems.
+            In our project, numerous considerations had to be taken into account. From selecting the most effective
+            enzymes for degrading biofilm matrices to crafting precise liposomes using DNA origami templates, our research
+            journey explores innovative avenues in the battle against antibiotic-resistant bacterial biofilms.
+            Learn more about the factors that impacted our final design choices.
           </p>
         </div>
       </div>
     </div>
 
     <div
-      class="flex flex-col lg:flex-row items-center justify-around lg:py-20 px-10 lg:mt-10 lg:bg-[url('../assets/homepage/abstract_bg.png')] bg-no-repeat bg-[23%_3%]"
-    >
+      class="flex flex-col xl:flex-row items-center justify-around lg:pb-20 xl:py-20 px-10 lg:mt-10 xl:bg-[url('../assets/homepage/abstract_bg.png')] bg-no-repeat bg-[23%_3%]">
       <div
-        class="lg:basis-1/2 pb-12 lg:pb-32 md:mt-12 lg:mt-10 pt-32 lg:pt-36 h-full px-10 md:px-32 lg:px-20 bg-[url('../assets/homepage/abstract_image_bg.png')] bg-no-repeat bg-cover bg-[50%_50%] lg:bg-[45%_50%]"
-      >
+        class="xl:basis-1/2 pb-20 lg:pb-32 md:mt-12 lg:mt-0 xl:mt-10 pt-24 lg:pt-36 h-fit px-10 md:px-32 xl:px-20 bg-[url('../assets/homepage/abstract_image_bg.png')] bg-no-repeat bg-cover xl:bg-auto bg-[50%_50%] xl:bg-[45%_50%]">
         <div
-          class="m-auto w-64 h-64 lg:w-[30rem] lg:h-[30rem] bg-white rounded-full drop-shadow-[-40px_-10px_20px_rgba(0,0,0,1)]"
-        ></div>
+          class="m-auto w-64 h-64 md:w-80 md:h-80 lg:w-[30rem] lg:h-[30rem] drop-shadow-[-40px_-10px_20px_rgba(0,0,0,0.5)]">
+          <img src="../assets/homepage/abstract_graphic.gif" alt="Animated GIF showing construction of DNA Octahedron and Liposome"
+            class="rounded-full" />
+        </div>
       </div>
 
       <div
-        class="flex flex-col items-center lg:items-start lg:justify-center text-center lg:text-left w-full lg:max-w-[50%] lg:h-full gap-4 lg:gap-10 lg:mt-0 lg:pr-4 lg:bg-[url('../assets/homepage/abstract_title_bg.png')] bg-no-repeat bg-[10%_0%]"
-      >
+        class="flex flex-col items-center xl:items-start xl:justify-center text-center xl:text-left w-full xl:max-w-[50%] xl:h-full gap-4 xl:gap-10 lg:mt-0 xl:pr-4 xl:bg-[url('../assets/homepage/abstract_title_bg.png')] bg-no-repeat bg-[10%_0%]">
         <h1 class="font-title text-[4rem] lg:text-[5rem] text-gold">Abstract</h1>
-        <p class="text-subtitle-sm lg:text-subtitle">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </p>
+        <div class="flex flex-col gap-4 items-center xl:items-start">
+          <p class="text-subtitle-sm lg:text-subtitle">
+            Biofilms are layers of bacterial communities that can adhere to one another within a self-produced matrix. They
+            can attach to a variety of surfaces including human tissue, causing severe healthcare and environmental issues.
+            Traditional strategies for combating biofilms include the use of antibiotics and interference of bacterial layer
+            formation. However, removing biofilms using these methods can be challenging due to antibiotic resistance and
+            unexpected pathogenic features arising from interference strategies. To address this issue, we aim to create a
+            modular enzyme delivery vehicle. This structure consists of a DNA-templated liposome, conjugated with variable
+            enzymes, referred to as an “enzymosome”. By forming our liposomes around DNA-origami structures, which can be
+            altered to modify their size and shape, we can create a customizable platform. Among the DNA structures
+            developed – a trigonal bipyramid, pentagonal bipyramid, and octahedron – all three demonstrated high stability
+            in CanDo©. Future investigations include testing enzyme synergy with liposomes and validation of the platform in
+            vitro. The modularity of the enzymosome can address biofilms present in various environments such as in cystic
+            fibrosis patients, food facilities, and water systems. By changing the cargo type and liposome size, this
+            delivery vehicle provides potential to be used across a wide range of applications.
+          </p>
+          <RouterLink to="/computational-simulation/structure-design">
+            <LightButton>Start Reading</LightButton>
+          </RouterLink>
+        </div>
       </div>
     </div>
 
     <div
-      class="mask flex flex-col gap-2 pt-16 items-center bg-[url:url(../assets/homepage/video_bg.png),theme('backgroundImage.gradient-to-b')] from-slate via-dark via-10% to-dark bg-cover bg-no-repeat bg-center"
-    >
-      <div class="font-title text-title-sm lg:text-title text-center lg:-mb-4">Watch us Fold</div>
-      <svg
-        width="150"
-        height="3"
-        viewBox="0 0 150 3"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      class="mask flex flex-col gap-2 pt-16 items-center bg-[url:url(../assets/homepage/video_bg.png),theme('backgroundImage.gradient-to-b')] from-slate via-dark via-10% to-dark bg-cover bg-no-repeat bg-center">
+      <div id="video" class="font-title text-title-sm lg:text-title text-center lg:-mb-4">Watch us Fold</div>
+      <svg width="150" height="3" viewBox="0 0 150 3" fill="none" xmlns="http://www.w3.org/2000/svg">
         <line y1="1.5" x2="150" y2="1.5" stroke="#E2B764" stroke-width="3" />
       </svg>
 
-      <div class="bg-white w-5/6 lg:w-3/4 h-52 lg:h-[40rem] m-8"></div>
+      <iframe class="mt-4 w-4/5 lg:w-3/5 h-[40dvw] lg:h-[35dvw]"
+      src="https://www.youtube.com/embed/krcnwXdkRuU?si=3uzEiIuDTUkkHPDK"
+      title="YouTube video player" frameborder="0" allow="accelerometer;
+      autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;
+      web-share" allowfullscreen></iframe>
 
       <button class="btn !py-4 mt-2 mb-8 group" @click="scrollToTop">
-        <svg
-          class="w-5 lg:w-6 fill-gold group-hover:fill-black transition-all duration-200"
-          viewBox="0 0 24 36"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
+        <svg class="w-5 lg:w-6 fill-gold group-hover:fill-black transition-all duration-200" viewBox="0 0 24 36"
+          fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
-            d="M13.0607 0.939339C12.4749 0.353554 11.5251 0.353554 10.9393 0.939339L1.3934 10.4853C0.807611 11.0711 0.807611 12.0208 1.3934 12.6066C1.97919 13.1924 2.92893 13.1924 3.51472 12.6066L12 4.12132L20.4853 12.6066C21.0711 13.1924 22.0208 13.1924 22.6066 12.6066C23.1924 12.0208 23.1924 11.0711 22.6066 10.4853L13.0607 0.939339ZM13.5 36L13.5 2H10.5L10.5 36H13.5Z"
-          />
+            d="M13.0607 0.939339C12.4749 0.353554 11.5251 0.353554 10.9393 0.939339L1.3934 10.4853C0.807611 11.0711 0.807611 12.0208 1.3934 12.6066C1.97919 13.1924 2.92893 13.1924 3.51472 12.6066L12 4.12132L20.4853 12.6066C21.0711 13.1924 22.0208 13.1924 22.6066 12.6066C23.1924 12.0208 23.1924 11.0711 22.6066 10.4853L13.0607 0.939339ZM13.5 36L13.5 2H10.5L10.5 36H13.5Z" />
         </svg>
       </button>
     </div>
@@ -115,19 +121,15 @@ const scrollToTop = () => {
   @apply w-full bg-no-repeat;
   background-image: url('../assets/homepage/bg_rot_mobile_fade.png'),
     url('../assets/homepage/bg_top_mobile_fade.png');
-  background-position:
-    left 3em,
-    100% 5.5em;
+  background-position: left 3em, 100% 5.5em;
 }
 
 @media only screen and (min-width: 1024px) {
   .bg {
     @apply w-full bg-no-repeat;
     background-image: url('../assets/homepage/bg_rot_fade.png'),
       url('../assets/homepage/bg_top_fade.png');
-    background-position:
-      -2% 5%,
-      right 5%;
+    background-position: -2% 5%, right 5%;
   }
 }
 

tailwind.config.js

@@ -8,6 +8,15 @@ module.exports = {
       title: ['Fira Sans', ...defaultTheme.fontFamily.sans]
     },
     extend: {
+      keyframes: {
+        breathe: {
+          '0%, 100%': { transform: 'scale(1.01)'},
+          '50%': { transform: 'scale(1)'}
+        }
+      },
+      animation: {
+        breathe: 'breathe 3s ease-in-out infinite'
+      },  
       colors: {
         notebookBg: '#333333',
         notebookText: '#8F8F90',