Merge pull request #41 from codeuniversity/text-and-figures

Add content and main styling to website

frontend/src/App.vue

@@ -1,25 +1,28 @@
 <template>
-  <h1 id="app">
+  <div id="app">
     <Header />
     <IntroSection />
     <MainSection />
+    <AboutSection />
     <Footer />
-  </h1>
+  </div>
 </template>
 
 <script>
   import Header from "./components/Header.vue"
   import IntroSection from "./components/IntroSection.vue"
   import MainSection from "./components/MainSection.vue"
   import Footer from "./components/Footer.vue"
+  import AboutSection from "./components/AboutSection.vue"
 
   export default {
     name: 'App',
     components: {
       Header,
       IntroSection,
       MainSection,
-      Footer
+      Footer,
+      AboutSection
     }
   }
 </script>

frontend/src/components/AboutSection.vue

@@ -0,0 +1,68 @@
+<template>
+    <v-container id="about-section" class="about-section pt-16" fluid>
+      <v-row justify="center">
+        <v-col cols="12" md="10">
+          <h3>A CODE University Professor-led Project </h3>
+          <p class="about-text pt-4">
+            This project was conducted as part of a professor-led semester Project at CODE University of Applied Sciences. Our team aimed to explore the unique urban ecosystem of Tempelhofer Feld and its response to changing climatic conditions. The findings presented on this site are only a fraction of the work we carried out.
+          </p>
+          <p class="about-text pt-4">
+            In addition to analyzing NDVI, we explored other vegetation indices like MSAVI and GNDVI, as well as in-vitro measurements such as air humidity and soil moisture. We also explored data from other remote sensing sources, including SAR imagery.
+          </p>
+          <p class="about-text pt-4">
+            To manage and query these insights in real time, we developed a robust infrastructure supported by caching strategies to ensure optimal performance. This system enables dynamic exploration of the data and supports future scalability.
+          </p>
+          <p class="about-text pt-4">
+            The success of this project was made possible by the collaborative efforts of our team members:
+          </p>
+          <ul class="pt-4">
+              <li>Essam Ali</li>
+              <li>Abdul Sanni</li>
+              <li>Till Ermold</li>
+              <li>Tom Lustig</li>
+              <li>Jules Morley</li>
+              <li>Péter T. Winkler</li>
+          </ul>
+          <p class="about-text pt-4 pb-6">
+            And, of course, a huge thank you goes out to Prof. Dr. Adam Roe for coming up with the idea for the project and guiding us along the way.
+          </p>
+          <p class="about-text pt-4 pb-6">
+            Looking ahead, we hope this work inspires further studies and applications in urban climate resilience.
+          </p>
+          <p class="about-text pt-4">
+            Github Repository:
+            <br/>
+            <a href="https://github.com/codeuniversity/thf-climate">https://github.com/codeuniversity/thf-climate</a>
+          </p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </template>
+
+  <script>
+  export default {
+    name: 'AboutSection',
+    data() {
+      return {
+        //
+      }
+    }
+  }
+  </script>
+
+  <style scoped>
+  .about-section {
+    text-align: center;
+    background-color: #e8fae6;
+  }
+  
+  .about-text {
+    font-size: 1.2rem;
+    font-weight: 300;
+  }
+
+  li {
+    list-style-type: none;
+  }
+  </style>
+

frontend/src/components/CorrelationGraphs/TemperatureNdviBarAndLine.vue

@@ -1,6 +1,5 @@
 <template>
 <v-container>
-  <h2 class="pb-10">Temperature vs. NDVI</h2>
   <v-row justify="center">
     <div
       id="plotlyGraphTemperatureNdvi"

frontend/src/components/CorrelationGraphs/YearlyTemperatureNdviCorrelation.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <h2 class="pb-10">Yearly NDVI vs. Temperature</h2>
+    <!-- <h2 class="pb-10">Yearly NDVI vs. Temperature</h2> -->
     <v-row justify="center">
       <div ref="plotContainer" style="width: 100%; height: 400px" class="d-flex justify-center"></div>
     </v-row>

frontend/src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="footer-container" fluid>
+  <v-container class="footer-container pt-10" fluid>
     <p class="footer-text">CODE University of Applied Sciences, 2024</p>
   </v-container>
 </template>
@@ -10,8 +10,8 @@
 
 <style scoped>
 .footer-container {
-  margin: 50px 0 0 0;
   text-align: center;
+  background-color: #e8fae6;
 }
 
 .footer-text {

frontend/src/components/Header.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-container class="header-container pa-0" fluid>
+  <v-container class="header-container pa-0 mb-0" fluid>
     <img src="@/assets/images/Berlin_Tempelhofer_Feld_UAV_05-2017.jpg" class="header-image">
       <div class="overlay">
         <h1 class="title">Climates of Tempelhofer Feld</h1>
-        <h2 class="subtitle">A data visualization project</h2>
-        <v-btn icon density="comfortable">
+        <h2 class="subtitle">An Earth Observation Project</h2>
+        <v-btn icon density="comfortable" @click="scrollToIntro">
           <v-icon>mdi-chevron-down</v-icon>
         </v-btn>
       </div>
@@ -15,9 +15,29 @@
 <script>
 export default {
   name: 'Header',
-  data() {
-    return {
-      //
+  methods: {
+    scrollToIntro() {
+      const introSection = document.getElementById('introduction-section')
+      if (introSection) {
+        introSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+    }
+  },
+  mounted() {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          this.scrollToIntro()
+        }
+      },
+      {
+        threshold: 0.5,
+      }
+    );
+    
+    const introSection = document.getElementById('introduction-section')
+    if (introSection) {
+      observer.observe(introSection)
     }
   }
 }
@@ -26,13 +46,17 @@ export default {
 <style scoped>
 .header-container {
   position: relative;
+  padding: 0;
+  margin: 0;
+  height: 100vh;
 }
 
 .header-image {
-  height: 100vh;
+  height: 100%;
   width: 100%;
   object-fit: cover;
   object-position: center;
+  display: block;
 }
 
 .overlay {
@@ -46,6 +70,7 @@ export default {
 
 .title {
   font-weight: bold;
+  font-size: 3.5rem;
 }
 
 .subtitle {

frontend/src/components/Images.vue

@@ -3,23 +3,25 @@
       <v-row justify="center">
         <v-col class="text-center">
           <img src="@/assets/images/sentinel-2-l2a-thf-2022-03-22.png" alt="">
-          <p>Sentinel-2 image of Tempelhofer Feld taken on 2022-03-22.</p>
         </v-col>
         <v-col class="text-center">
           <img src="@/assets/images/sentinel-2-l2a-thf-2023-05-08.png" alt="">
-          <p>Sentinel-2 image of Tempelhofer Feld taken on 2023-05-08.</p>
         </v-col>
       </v-row>
+      <p class="py-6">
+        Sentinel-2 images of Tempelhofer Feld before the growing season (22.03.2022, left) and during the growing season (08.05.2023, right) with very healthy vegetation.
+      </p>
       <v-row justify="center">
         <v-col class="text-center">
           <img src="@/assets/images/ndvi-thf-2022-05-08.png" alt="">
-          <p>NDVI of Tempelhofer Feld on 2022-05-08.</p>
         </v-col>
         <v-col class="text-center">
           <img src="@/assets/images/ndvi-thf-2023-05-08.png" alt="">
-          <p>NDVI of Tempelhofer Feld on 2023-05-08.</p>
         </v-col>
       </v-row>
+      <p class="py-6">
+        NDVI of Tempelhofer Feld for the same satellite images above (22.03.2022, left; 08.05.2023, right). Lighter shades of green indicate low NDVI, while darker shades indicate higher NDVI.
+      </p>
     </v-container>
   </template>
 
@@ -29,15 +31,14 @@
 
   <style scoped>
   img {
-    width: 450px;
+    width: 100%;
     padding: 15px;
   }
 
   p {
     margin: 0;
-    font-size: 12px;
+    font-size: 0.8rem;
     font-weight: 300;
-    color: #555;
   }
   </style>