Release version v1.0.3

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.0.3] - 2024-09-17
+
+### Added
+
+-   add background to header while scrolling down (#82)
+-   add GPL-3.0 license (#19)
+
+### Changed
+
+-   unify naming of the project to 'Green Ecolution' (#83)
+-   update current process step to release 1 (#81)
+
 ## [v1.0.2] - 2024-08-01
 
 ### Changed
@@ -51,7 +63,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Initial release
 -   Create "Page under construction" Page
 
-[Unreleased]: https://github.com/green-ecolution/project-website/compare/v1.0.2...HEAD
+[Unreleased]: https://github.com/green-ecolution/project-website/compare/v1.0.3...HEAD
+
+[v1.0.3]: https://github.com/green-ecolution/project-website/compare/v1.0.2...v1.0.3
 
 [v1.0.2]: https://github.com/green-ecolution/project-website/compare/v1.0.1...v1.0.2
 

k8s/values/develop.yaml

@@ -5,7 +5,7 @@ deployment:
   image:
     repository: ghcr.io/green-ecolution/project-website-dev
     pullPolicy: Always
-    tag: "d1b889b"
+    tag: "8c2ce56"
 ingress:
   enabled: true
   className: "traefik"

k8s/values/stage.yaml

@@ -5,7 +5,7 @@ deployment:
   image:
     repository: ghcr.io/green-ecolution/project-website-stage
     pullPolicy: Always
-    tag: 144b457
+    tag: 4cd7a81
 ingress:
   enabled: true
   className: "traefik"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "project-website",
   "private": true,
-  "version": "v1.0.2",
+  "version": "v1.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/data/processSteps.ts

@@ -8,13 +8,13 @@ export const steps = [
     {
         label: "MVP (Minimum Viable Product)",
         shortName: "MVP",
-        isCurrent: true,
+        isCurrent: false,
         description: "Der MVP dient der Umsetzung der konzeptualen Bestimmungen und soll ein erstes, funktionales Produkt darstellen. Anhand des Feedbacks aus der MVP-Vorstellung wird das Vorgehen weiter präzisiert."
     },
     {
         label: "Projektvorstellung 01",
         shortName: "Vorstellung 01",
-        isCurrent: false,
+        isCurrent: true,
         description: "Aufbauend auf den Erkenntnissen des MVP soll eine Fort- und Weiterentwicklung stattfinden. Die Projektvorstellung 01 stellt den ersten, offiziellen Release dar."
     },
     {

src/tsx/components/navigation/NavItem.tsx

@@ -12,7 +12,7 @@ const NavItem: React.FC<NavItemProps> = ({ label, url, isExternalLink = false })
             <a
                 href={url}
                 target={isExternalLink ? '_blank' : '_self'}
-                className="text-lg md:text-2xl font-bold flex justify-between items-center group lg:text-lg"
+                className="text-lg md:text-2xl font-bold flex justify-between items-center group lg:text-lg lg:leading-none lg:mb-2"
             >
                 <p className="transition-color ease-in-out duration-300 group-hover:text-green-light-900 lg:group-hover:text-green-middle-900">
                     {label}

src/tsx/components/sections/Faq.tsx

@@ -9,7 +9,7 @@ function Faq() {
             <ul className="flex flex-col gap-y-4 md:gap-y-6">
                 <Accordion label="Wer steckt hinter dem Projekt Green Ecolution?">
                     <p>
-                        Das Projekt "Green-Ecolution" wird von neun Studierenden
+                        Das Projekt "Green Ecolution" wird von neun Studierenden
                         des Masters "Angewandte Informatik" der&nbsp;
                         <a
                             href="https://hs-flensburg.de/"

src/tsx/layout/Footer.tsx

@@ -18,7 +18,7 @@ function Footer() {
                         />
                     </a>
                     <p className="max-w-sm">
-                        Das Forschungsprojekt Green-Ecolution ist aus einem
+                        Das Forschungsprojekt Green Ecolution ist aus einem
                         Master-Forschungsprojekt der Hochschule-Flensburg
                         hervorgegangen und beschäftigt sich mit der smarten
                         Bewässerung von Bäumen und Beeten.

src/tsx/layout/Header.tsx

@@ -1,16 +1,17 @@
-import * as React from 'react';
+import { useState, useEffect } from 'react';
 import Lottie from "lottie-react";
 import MainNavigation from '../components/navigation/MainNavigation';
 import logoAnimation from '../../json/logoAnimation.json'
 
 function Header() {
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = useState(false);
+    const [isScrolled, setIsScrolled] = useState(false);
 
     function toggleNavigation(state: boolean) {
         setOpen(state);
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
         function handleResize() {
             if (window.matchMedia('(min-width: 1024px)').matches) {
                 setOpen(false);
@@ -22,22 +23,36 @@ function Header() {
         return () => { window.removeEventListener('resize', handleResize) };
     }, []);
 
-    React.useEffect(() => {
+    useEffect(() => {
         open
         ? document.body.classList.add('overflow-hidden')
         : document.body.classList.remove('overflow-hidden');
 
         return () => { document.body.classList.remove('overflow-hidden') };
     }, [open]);
 
+    useEffect(() => {
+        const handleScroll = () => {
+          const scrollTop = window.scrollY;
+          scrollTop > 50 ? setIsScrolled(true) : setIsScrolled(false);
+        };
+
+        window.addEventListener("scroll", handleScroll);
+
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, []);
+
     return (
-        <header className={`fixed w-screen inset-x-0 top-0 z-50 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 lg:before:transition-none ${open ? 'before:visible before:opacity-60' : 'before:opacity-0 before:invisible'}`}>
+        <header className={`fixed w-screen inset-x-0 top-0 z-50 transition-all ease-in-out duration-300 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 lg:before:transition-none
+            ${open ? 'before:visible before:opacity-60' : 'before:opacity-0 before:invisible'}
+            ${isScrolled ? 'bg-white shadow-md' : 'bg-transparent'}`
+        }>
             <div className="relative px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 xl:max-w-screen-xl">
                 <a href="/" aria-label="Zur Startseite navigieren" className={`flex items-center gap-x-4 xl:gap-x-5 ${open ? 'opacity-0' : ''}`}>
                     <figure className="w-24 xl:w-28">
                         <Lottie animationData={logoAnimation} />
                     </figure>
-                    <p className="hidden text-green-dark-900 font-lato font-semibold text-xl md:block xl:text-3xl">
+                    <p className="hidden text-green-dark-900 font-lato font-semibold text-xl md:block xl:text-2xl">
                         Green Ecolution
                     </p>
                 </a>

src/tsx/pages/ProjectPage.tsx

@@ -23,7 +23,7 @@ function ProjectPage() {
 
     const heroHeadline = "Alles wissenswerte über das Projekt";
     const heroDescription =
-        "Das Projekt Green-Ecolution beschäftigt sich mit der Frage, wie man die Bewässerung von Bäumen und Beeten effizienter umsetzen kann. \
+        "Das Projekt Green Ecolution beschäftigt sich mit der Frage, wie man die Bewässerung von Bäumen und Beeten effizienter umsetzen kann. \
         In Zusammenarbeit mit dem TBZ-Flensburg werden mehrere Bäume an verschiedenen Standorten mit Sensorik ausgestattet, \
         um den Wasserbedarf von Bäumen zu ermitteln und entsprechend anhand der Daten Handlungsempfehlungen auszusprechen, um diese \
         in der Einsatzplanung mit zu berücksichtigen. Dabei beschränkt sich das Projekt nicht nur auf die Stadt, sondern auch auf die Bürger:innen. \