Feat: First Version

quasar.config.js

@@ -91,6 +91,7 @@ export default configure((ctx) => {
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
       config: {},
+      cssAddon: true,
 
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack

src/components/Footer.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="row justify-center text-white q-py-md bg-primary bgSection q-mt-md">
+    <span>Computation Biology - University of Macau</span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/LandHeader.vue

@@ -11,15 +11,30 @@
       <div>
       </div>
       <div class="flex items-end gt-sm q-mr-lg">
+        <q-btn flat to="/people"  label="People"/>
+        <q-btn flat to="/publications" label="Publications"/>
         <q-btn flat to="/vpatch" target="_blank" :label="$t('vpatch')"/>
         <q-btn flat  to="/github" target="_blank" :label="$t('github')"/>
-        <q-btn flat  to="/contact" target="_blank" :label="$t('contact')"/>
+        <q-btn flat  to="/chonloklei" target="_blank" :label="$t('contact')"/>
       </div>
 
       <div class="lt-md">
         <q-btn-dropdown dropdown-icon="change_history">
           <q-list class="bg-primary text-white">
 
+            <q-item clickable v-close-popup to="/people">
+              <q-item-section>
+                <q-item-label>People</q-item-label>
+              </q-item-section>
+            </q-item>
+
+            <q-item clickable v-close-popup to="/publications">
+              <q-item-section>
+                <q-item-label>Publications</q-item-label>
+              </q-item-section>
+            </q-item>
+
+
             <q-item clickable v-close-popup to="/vpatch">
               <q-item-section>
                 <q-item-label>{{ $t('vpatch') }}</q-item-label>

src/components/LandHome.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="wrapper">
+    <video autoplay muted loop class="background-video" v-if="!$q.platform.is.mobile">
+      <source src="~assets/video.mp4" type="video/mp4" >
+    </video>
+    <img src="~assets/video.png" class="background-video" v-else>
+
+    <div class="absolute-center full-width">
+      <div class="row justify-center text-center full-width">
+        <div class="border q-pa-md">
+          <h1 class="col-xs-12 feeling-passionate text-uppercase">Computational Biology</h1>
+          <h1 class="col-xs-12 feeling-passionate text-uppercase">University of Macau</h1>
+        </div>
+      </div>
+      <div class="row justify-center full-width">
+        <h5 class="q-mt-xl text-uppercase text-center">Understanding the human biology <br>through computational methods</h5>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.wrapper {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+}
+
+.background-video {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+  opacity: 0.3;
+}
+
+.border {
+  border-top: 4px solid white;
+  border-bottom: 4px solid white;
+}
+</style>

src/components/Mission.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="column bg-secondary q-py-xs-md q-py-md-xl items-center  text-center">
+    <h4 class="text-weight-bolder q-mb-xs-md q-mb-md-xl text-uppercase">Mission</h4>
+    <h6> We combine multimodal experimental data, physics-based modeling, <br> and machine learning to <i>understand</i>, <i>explore</i>, and <i>predict</i> <br>
+      the multiscale behavior of biological systems through computational methods. </h6>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/PeopleItem.vue

@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  people: Object,
+});
+</script>
+
+<template>
+  <div class="column col-xs-12 col-md-3 q-pa-sm">
+    <div class="q-card--bordered rounded-borders text-center bg-primary text-white col-grow">
+      <img :src="props.people.image" alt="" class="rounded-borders" style="max-width: 100%; height: auto">
+      <div class="q-py-sm">
+        <div class="text-h6">{{ props.people.name }}</div>
+        <div class="text-subtitle2">{{ props.people.affiliation }}</div>
+        <q-btn v-if="props.people.page" outline label="See More" color="white" class="q-mt-md col-6" :href="props.people.pageUrl" target="_blank"/>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/PeopleItemLarge.vue

@@ -0,0 +1,29 @@
+<script setup>
+const props = defineProps({
+  people: Object,
+});
+</script>
+
+<template>
+  <div class="column col-xs-12 col-md-6 q-pa-sm">
+  <div class="row q-card--bordered rounded-borders text-center bg-primary text-white">
+      <div class="col-xs-12 col-md-6 row items-center">
+        <img :src="props.people.image" alt="" class="rounded-borders" style="max-width: 100%; height: auto">
+      </div>
+      <div class="col-xs-12 col-md-6 q-py-md justify-evenly column">
+        <div>
+          <div class="text-h5">{{ props.people.name }}</div>
+          <div class="text-subtitle2">{{ props.people.affiliation }}</div>
+        </div>
+        <div class="row justify-center">
+          <q-btn v-if="props.people.page" outline label="See More" color="white" class="q-mt-md " :href="props.people.pageUrl" target="_blank"/>
+        </div>
+      </div>
+  </div>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/PublicationItem.vue

@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps({
+  article: Object,
+});
+
+</script>
+
+<template>
+  <div class="row q-mt-md rounded-borders full-width">
+    <div class="col-12 column q-gutter-y-sm q-pa-md">
+      <p class="small-text text-primary">{{ props.article.title }}, {{ props.article.year }}</p>
+      <p class="text-subtitle text-primary">{{ props.article.authors }}</p>
+    </div>
+  </div>
+
+
+</template>
+
+<style scoped>
+
+
+</style>

src/components/Sections.vue

@@ -0,0 +1,82 @@
+<script setup>
+</script>
+
+<template>
+  <div class="bg-primary">
+    <div class="row full-width items-center q-pb-xs-md q-py-md-md">
+      <q-img
+        src="~assets/vpatch.png"
+        fit="contain"
+        class="col-xs-12 col-md-5"
+        style="max-height: 300px"
+      ></q-img>
+      <div class="col-xs-12 col-md-7 q-px-xs-md q-px-md-xl column q-mt-xs-md">
+        <h4 class="text-weight-bolder q-mb-xs-md q-mb-md-xl text-uppercase">Virtual Patch Clamp</h4>
+        <h6 class="q-pb-xs">A virtual platform to simulate and unbox the patch-clamp amplifier and its measurements, the best way to understand what could go wrong in the
+          experiments.</h6>
+        <div class="row">
+          <q-btn outline label="Online Platform" color="white" class="q-mt-xs-md q-mt-md-xl col-6" to="/vpatch"/>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="row reverse full-width items-center bgSection q-pb-xs-md q-py-md-md">
+      <q-img
+        src="~assets/umLogo.png"
+        fit="contain"
+        class="col-xs-12 col-md-5"
+        style="max-height: 300px"
+      ></q-img>
+      <div class="col-xs-12 col-md-7 q-px-xs-md q-px-md-xl column q-mt-xs-md">
+        <h4 class="text-weight-bolder q-mb-xs-md q-mb-md-xl text-uppercase">Our People</h4>
+        <h6 class="q-pb-xs">Chon Lok Lei led our team pushing the boundaries about computational biology and machine learning.</h6>
+        <h6 class="q-pb-xs">We are passionate about the field and we are always looking for new challenges to explore.</h6>
+        <div class="row">
+          <q-btn outline label="Access Now" color="white" class="q-mt-xs-md q-mt-md-xl col-6" to="/people"/>
+        </div>
+      </div>
+    </div>
+
+
+    <div class="row full-width items-center q-pb-xs-md q-py-md-md">
+      <q-img
+        src="~assets/chonLokLei.png"
+        fit="contain"
+        class="col-xs-12 col-md-5"
+        style="max-height: 300px"
+      ></q-img>
+      <div class="col-xs-12 col-md-7 q-px-xs-md q-px-md-xl column q-mt-xs-md">
+        <h4 class="text-weight-bolder q-mb-xs-md q-mb-md-xl text-uppercase">Chon Lok Lei</h4>
+        <h6 class="q-pb-xs">Chon Lok Lei is an Assistant Professor in the Faculty of Health Sciences at the University of Macau. He holds a doctorate in Computational Biology from
+          the University of Oxford, where he was a Clarendon Scholar.</h6>
+        <div class="row">
+          <q-btn outline label="See More" color="white" class="q-mt-xs-md q-mt-md-xl col-6" to="/chonloklei"/>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row reverse full-width items-center bgSection q-pb-xs-md q-py-md-md">
+    <q-img
+      src="~assets/publications.png"
+      fit="contain"
+      class="col-xs-12 col-md-5"
+      style="max-height: 300px"
+    ></q-img>
+    <div class="col-xs-12 col-md-7 q-px-xs-md q-px-md-xl column q-mt-xs-md">
+      <h4 class="text-weight-bolder q-mb-xs-md q-mb-md-xl text-uppercase">Our Pulications</h4>
+      <h6 class="q-pb-xs">Chon Lok Lei led our team pushing the boundaries about computational biology and machine learning.</h6>
+      <h6 class="q-pb-xs">We are passionate about the field and we are always looking for new challenges to explore.</h6>
+      <div class="row">
+        <q-btn outline label="Access Now" color="white" class="q-mt-xs-md q-mt-md-xl col-6" to="/publications"/>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+
+
+</style>

src/css/app.scss

@@ -2,6 +2,7 @@
 h1,h2,h3,h4,h5,h6, p{
   margin: 0;
   padding: 0;
+  color: rgb(255 255 255);
 }
 
 .margins{
@@ -12,3 +13,7 @@ a{
   text-decoration: none;
   color: inherit;
 }
+.bgSection {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+

src/css/quasar.variables.scss

@@ -14,7 +14,7 @@
 @import "rfs/scss";
 
 $primary   : #002147;
-$secondary : #26A69A;
+$secondary : #106292;
 $accent    : #9C27B0;
 
 $dark      : #1D1D1D;
@@ -26,7 +26,6 @@ $info      : #31CCEC;
 $warning   : #F2C037;
 $shadow-color: $primary;
 
-$stepColor: #E6F7FF50;
 
 
 .text-stepColor {
@@ -38,7 +37,7 @@ $stepColor: #E6F7FF50;
 
 
 .font-h1, h1{
-  @include font-size(5rem);
+  @include font-size(3.5rem);
   line-height: 1.2em;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
@@ -49,15 +48,21 @@ $stepColor: #E6F7FF50;
 }
 .font-h3, h3{
   @include font-size(4rem);
+  line-height: 1.2em;
 }
 .font-h4, h4{
   @include font-size(3rem);
 }
 .font-h5, h5{
   @include font-size(2rem);
+  line-height: 1.5em;
 }
 .font-h6, h6{
   @include font-size(1.5rem);
+  line-height: 1.8em;
+}
+.small-text{
+  @include font-size(1.0rem);
 }
 
 .q-stepper__tab--active{