Merge branch 'main' of ssh://gitlab.igem.org/2024/bielefeld-cebitec

src/App/mediarules.css

@@ -50,36 +50,8 @@
       .col-6 {
         width: 100%; /* Full width for smartphone */
       }
-      .sidebar {
-        position: fixed;
-        width: 100%;
-        height: auto;
-        bottom: 0;
-        left: 0;
-        background-color: #fff;
-        z-index: 1000;
-        overflow-x: hidden;
-        padding: 5px;
-        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
-    }
-
-    .sidebar a {
-        display: block;
-        padding: 10px;
-        text-align: center;
-        border-top: 1px solid #ddd;
-    }
-
-    .backtotop {
-        display: none;
-    }
-    .fadein-image {
-        width: 100% !important; /* Ensure images are fully responsive */
-        height: auto;
-      }
-}
     
-    /*.row-if-small{
+    .row-if-small{
         --bs-gutter-x: 1.5rem;
         --bs-gutter-y: 0;
         display: flex;
@@ -88,7 +60,7 @@
         margin-right: calc(-.5 * var(--bs-gutter-x));
         margin-left: calc(-.5 * var(--bs-gutter-x));
         width: 100% !important;
-    }*/
+    }
     .col-4, .col-3{
         margin-top: 10px !important;
         margin-bottom: 10px !important;
@@ -103,7 +75,6 @@
     }
     .panel-talk-gallery div img{
         max-width: 100% !important;
-        height: auto !important;
     }
     .panel-talk-gallery .col, .panel-talk-gallery .col:nth-child(5), 
     .panel-talk-gallery .col:nth-child(1), .panel-talk-gallery .col:nth-child(2), 
@@ -117,7 +88,6 @@
     .tag{
         width: min-content !important;
     }
-
     .timeline-item-content  time{
         width: fit-content !important;
         margin-top: 0 !important;
@@ -149,7 +119,7 @@
         margin: auto;
       }
 svg text{
-    font-size: 3vw !important;
+    font-size: 5vw !important;
     stroke-width:1px !important;
 }
 .village-style-button h3{
@@ -202,14 +172,13 @@ body {
 }
 .container {
     padding: 10px;
-    max-width: 100%;
   }
 
  .row{
     display: grid !important;
  }
 
-
+}
 /*For small Smartphones*/
 @media screen and (max-width: 750px){
     

src/components/AirbuddyAnim.tsx

+import { useEffect, useRef, useState } from "react";
+
+export function AirbuddyAnim(){
+    const [isVisible, setVisible] = useState(false);
+    const domRef = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible(entry.isIntersecting));
+        });
+        observer.observe(domRef.current!);
+    }, []);
+
+    const [isVisible2, setVisible2] = useState(false);
+    const domRef2 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible2(entry.isIntersecting));
+        });
+        observer.observe(domRef2.current!);
+    }, []);
+
+    const [isVisible3, setVisible3] = useState(false);
+    const domRef3 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible3(entry.isIntersecting));
+        });
+        observer.observe(domRef3.current!);
+    }, []);
+    
+    const [isVisible4, setVisible4] = useState(false);
+    const domRef4 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible4(entry.isIntersecting));
+        });
+        observer.observe(domRef4.current!);
+    }, []);
+
+    
+    const [isVisible5, setVisible5] = useState(false);
+    const domRef5 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible5(entry.isIntersecting));
+        });
+        observer.observe(domRef5.current!);
+    }, []);
+    
+    const [isVisible6, setVisible6] = useState(false);
+    const domRef6 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible6(entry.isIntersecting));
+        });
+        observer.observe(domRef6.current!);
+    }, []);
+    
+    const [isVisible7, setVisible7] = useState(false);
+    const domRef7 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible7(entry.isIntersecting));
+        });
+        observer.observe(domRef7.current!);
+    }, []);
+    
+    const [isVisible8, setVisible8] = useState(false);
+    const domRef8 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible8(entry.isIntersecting));
+        });
+        observer.observe(domRef8.current!);
+    }, []);
+
+    return (
+        <>
+            {/* One */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible ? '1' : '0'}`,
+                    'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
+                ref={domRef}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-0.webp">
+                    </img>
+            </div>
+            {/* Two */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible2 ? '1' : '0'}`,
+                    'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
+                ref={domRef2}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-1.webp">
+                    </img>
+            </div>
+            {/* Three */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible3 ? '1' : '0'}`,
+                    'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
+                ref={domRef3}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-2.webp">
+                    </img>
+            </div>
+            {/* Four */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible4 ? '1' : '0'}`,
+                    'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
+                ref={domRef4}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-3.webp">
+                    </img>
+            </div>
+            {/* Five */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible5 ? '1' : '0'}`,
+                    'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
+                ref={domRef5}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-4.webp">
+                    </img>
+            </div>
+            {/* Six */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible6 ? '1' : '0'}`,
+                    'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
+                ref={domRef6}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-5.webp">
+                    </img>
+            </div>
+            
+            {/* Seven */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible7 ? '1' : '0'}`,
+                    'visibility': `${isVisible7 ? 'visible' : 'hidden'}`}}
+                ref={domRef7}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-6.webp">
+                    </img>
+            </div>
+            
+            {/* Eight */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible8 ? '1' : '0'}`,
+                    'visibility': `${isVisible8 ? 'visible' : 'hidden'}`}}
+                ref={domRef8}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/airbuddy/airbuddy-7.webp">
+                    </img>
+            </div>
+            
+            </>
+    );
+}
\ No newline at end of file

src/components/BFH-Timeline.tsx

@@ -116,7 +116,7 @@ export function BFHTimeline () {
                 vorname="Karla"
                 nachname="Wagner"
                 heading="Optimization of a DKR of a Tertiary Alcohol through Protein Engineering"
-                text=""
+                text="Karla Wagner shares groundbreaking strategies in optimizing dynamic kinetic resolution (DKR) of tertiary alcohols using protein engineering. Discover how enzyme catalysis drives sustainable advancements in the synthesis of chiral compounds for pharmaceuticals and other industries."
                  >
                     <div id="talktwo" style={{display: "none"}}>
                         <p>
@@ -374,7 +374,7 @@ export function BFHTimeline () {
                 vorname="Merel"
                 nachname="van der Bosch"
                 heading="How to Create the Perfect Part Characterization"
-                text=""
+                text="Discover the secrets to winning iGEM's Composite and New Basic Part awards with insights from Merel van den Bosch. Learn how to design simple yet impactful experiments, emphasize innovation, and effectively showcase your part's potential."
               >
                     <div id="tedtalk2" style={{display: "none"}}>
                         <p>Merel provided us with strategies based on her cELPro project at TU Eindhoven on how to approach winning the special awards 

src/components/PrimeGuide.tsx

+import { useEffect, useRef, useState } from "react";
+
+export function PrimeGuideAnimOne(){
+    const [isVisible, setVisible] = useState(false);
+    const domRef = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible(entry.isIntersecting));
+        });
+        observer.observe(domRef.current!);
+    }, []);
+
+    const [isVisible2, setVisible2] = useState(false);
+    const domRef2 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible2(entry.isIntersecting));
+        });
+        observer.observe(domRef2.current!);
+    }, []);
+
+    const [isVisible3, setVisible3] = useState(false);
+    const domRef3 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible3(entry.isIntersecting));
+        });
+        observer.observe(domRef3.current!);
+    }, []);
+    
+    const [isVisible4, setVisible4] = useState(false);
+    const domRef4 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible4(entry.isIntersecting));
+        });
+        observer.observe(domRef4.current!);
+    }, []);
+
+    
+    const [isVisible5, setVisible5] = useState(false);
+    const domRef5 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible5(entry.isIntersecting));
+        });
+        observer.observe(domRef5.current!);
+    }, []);
+    
+    return (
+        <>
+            {/* One */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible ? '1' : '0'}`,
+                    'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
+                ref={domRef}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone1.webp">
+                    </img>
+            </div>
+            {/* Two */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible2 ? '1' : '0'}`,
+                    'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
+                ref={domRef2}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone2.webp">
+                    </img>
+            </div>
+            {/* Three */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible3 ? '1' : '0'}`,
+                    'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
+                ref={domRef3}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone3.webp">
+                    </img>
+            </div>
+            {/* Four */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible4 ? '1' : '0'}`,
+                    'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
+                ref={domRef4}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone4.webp">
+                    </img>
+            </div>
+            {/* Five */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible5 ? '1' : '0'}`,
+                    'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
+                ref={domRef5}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone5.webp">
+                    </img>
+            </div>
+            </>
+    );
+}
+
+export function PrimeGuideAnimTwo(){
+    const [isVisible, setVisible] = useState(false);
+    const domRef = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible(entry.isIntersecting));
+        });
+        observer.observe(domRef.current!);
+    }, []);
+
+    const [isVisible2, setVisible2] = useState(false);
+    const domRef2 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible2(entry.isIntersecting));
+        });
+        observer.observe(domRef2.current!);
+    }, []);
+
+    const [isVisible3, setVisible3] = useState(false);
+    const domRef3 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible3(entry.isIntersecting));
+        });
+        observer.observe(domRef3.current!);
+    }, []);
+    
+    const [isVisible4, setVisible4] = useState(false);
+    const domRef4 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible4(entry.isIntersecting));
+        });
+        observer.observe(domRef4.current!);
+    }, []);
+
+    
+    const [isVisible5, setVisible5] = useState(false);
+    const domRef5 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible5(entry.isIntersecting));
+        });
+        observer.observe(domRef5.current!);
+    }, []);
+    
+    const [isVisible6, setVisible6] = useState(false);
+    const domRef6 = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible6(entry.isIntersecting));
+        });
+        observer.observe(domRef6.current!);
+    }, []);
+    
+    return (
+        <>
+            {/* One */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible ? '1' : '0'}`,
+                    'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
+                ref={domRef}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo1.webp">
+                    </img>
+            </div>
+            {/* Two */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible2 ? '1' : '0'}`,
+                    'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
+                ref={domRef2}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo2.webp">
+                    </img>
+            </div>
+            {/* Three */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible3 ? '1' : '0'}`,
+                    'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
+                ref={domRef3}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo3.webp">
+                    </img>
+            </div>
+            {/* Four */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible4 ? '1' : '0'}`,
+                    'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
+                ref={domRef4}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo4.webp">
+                    </img>
+            </div>
+            {/* Five */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible5 ? '1' : '0'}`,
+                    'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
+                ref={domRef5}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo5.webp">
+                    </img>
+            </div>
+            {/* Six */}
+            <div 
+                className='col'
+                style={{ 
+                    'height': '100vh',
+                    'transition': 'opacity 0.6s ease-out',
+                    'opacity': `${isVisible6 ? '1' : '0'}`,
+                    'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
+                ref={domRef6}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'top': '20vh',
+                            'left': '20vw',
+                            'width': '60vw',
+                            'height': '60vh',
+                        }}
+                        src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo6.webp">
+                    </img>
+            </div>
+            </>
+    );
+}
\ No newline at end of file

src/contents/Home.tsx

 import { FadeIn } from "../components/FadeIn";
 import { Breathe } from "../components/Breathe";
 import { Problems } from "../components/Problems";
+import { AirbuddyAnim } from "../components/AirbuddyAnim";
+import { PrimeGuideAnimOne, PrimeGuideAnimTwo } from "../components/PrimeGuide";
 import { useTabNavigation } from "../utils/TabNavigation";
 
-
 export function Home() {
   useTabNavigation();
   return (
@@ -33,9 +34,16 @@ export function Home() {
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/3k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-3-text.webp'></FadeIn>
           
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/treatment-2.gif" bg=''></FadeIn>
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif" bg=''></FadeIn>
+
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif" bg=''></FadeIn>
+          <AirbuddyAnim></AirbuddyAnim>
+
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/primeguide.webp" bg=''></FadeIn>
+          <PrimeGuideAnimOne></PrimeGuideAnimOne>
+          <PrimeGuideAnimTwo></PrimeGuideAnimTwo>
+
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif" bg=''></FadeIn>
+          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/proofofconcept.gif" bg=''></FadeIn>
           
           {/* Spacing Block */}
           <div className='col' style={{ 'height': '100vh' }}></div>

src/contents/Human Practices/Further Engagement/Education.tsx

 import { ButtonOne } from "../../../components/Buttons";
 import {  H4 } from "../../../components/Headings";
+import {  H2 } from "../../../components/Headings";
 import { LoremMedium } from "../../../components/Loremipsum";
 
 
@@ -16,7 +17,6 @@ export function HPEducation(){
                 <div className="col">
                     <ButtonOne openclass="edu-cycletab" text="Schüler*innen Akademie" open="akademie"></ButtonOne>
                 </div>
-            </div>
               
             <div id="edu-overview" className="edu-cycletab" style={{display: "block"}}>
             <H4 id="edu-heading" text="Our education and outreach"/>
@@ -26,9 +26,25 @@ export function HPEducation(){
             </div>
             <div id="akademie" className="edu-cycletab" style={{display: "none"}}>
                 <H4 id="student-academy-heading" text="Student academy on the topic of synthetic biology"/>
+                <H2 id="Scüler*innen Akademie" text="Teaching the Next Generation of SynBio Pioneers The Center for Biotechnology (CeBiTec) at Bielefeld University organizes the annual CeBiTec Student Academy for “Biotechnology and Biomedicine.” Supported by the Osthushenrich Foundation and the Detmold district government, the academy offers students a unique opportunity to deepen their understanding of biology, genetics, and molecular biology through hands-on experiments and expert lectures. Key topics include nanopore sequencing, tumor diagnostics, and the evolution of SARS-CoV-2. The program is especially valuable for students transitioning from school to potential studies in the natural sciences."/>
+                <p> 
+Due to our collaboration with the Student Academy, we conducted the nanopore sequencing experiment and served as teachers, assisting in experiment preparation, execution, offering guidance, and answering questions. This role allowed us to teach the students about laboratory work, the critical aspects of conducting experiments, and essential safety considerations. The experiment involved isolating bacterial DNA, preparing samples for sequencing, and performing both sequencing and data analysis. 
+Since we presented our iGEM project PreCyse to them as well, the students were introduced to study-related projects like iGEM. They learned about the daily tasks, challenges, and responsibilities involved in iGEM through project discussions. Many students were captivated by the iGEM concept and expressed interest in participating during their future studies. They were particularly fascinated by the opportunity to develop real research projects, work independently in the lab, learn extensively about synthetic biology, and implement creative ideas while collaborating with an international team.</p>
                 </div>
                 <div id="teutoruft" className="edu-cycletab" style={{display: "none"}}>
-                <H4 id="teuroruft-heading" text="Educational city tour for young and old"/>
+                    <H4 id="teuroruft-heading" text="Educational city tour for young and old"/>
+                    <H2 id="Der Teuto ruft!" text="What is “Der Teuto ruft!” and why did we participate?"/>
+                    <p> </p>
+                </div>
+                
+"Der Teuto ruft!" is an outreach event located all over the city of Bielefeld where various local companies and institutions engage with the public to inform them about their work. Since we wanted to raise awareness for cystic fibrosis and present our approach to developing an optimized gene therapy to combat this disease, our participation in the "Der Teuto ruft!" event in Bielefeld was the perfect opportunity to do so. 
+<H2 id="What was our strategy?" text="What is our strategy?"/>
+<p>Our goal was to educate children about the challenges faced by CF patients, especially the ones with lung problems. The knowledge which we gained at the Science Communication Workshop as part of the BFH Meetup was the optimal basis to plan our outreach to the public. We engaged the children with activities like coloring lung images and conducting experiments to experience and understand lung related symptoms.  
+One such experiment involved creating a lung model from balloons and straws, demonstrating the difficulty patients have in breathing by having the children blow into the straws. Additionally, we set up a tank with a mixture of starch and water to simulate mucus and placed a ball on top. The children tried to blow the ball across the surface, illustrating how hard it is for air to move through mucus compared to water, where the ball moved much more easily. 
+The very little ones could paint coloring pages which we designed and printed for them. For the adults, we provided information about our project and discussed the implications and potential of gene therapy for cystic fibrosis. These conversations made it abundantly clear that degrees of knowledge on this topic widely vary throughout the public and we were happy to fill in the existing gaps in people's knowledge and exchange points of view on gene therapy.  
+Moreover, we connected with other institutions and participants at the event. We shared our booth at Bielefeld’s “Skulpturenpark” on the outside with btS, the life science student initiative from Bielefeld University [LINK], with whose members we had stimulating discussions as well. We were more than delighted when the city of Bielefeld featured us on their Instagram, highlighting our presence during "Der Teuto ruft!". This collaboration helped us reach a wider audience and raise awareness about our research efforts.</p>
+<H2 id="conclusion? " text="What is our conclusion"/>
+<p>Despite the changeable weather, we could educate many people of Bielefeld's community about cystic fibrosis, our therapeutic approach and gene therapy in general and had the opportunity to improve our science communication for the future as well so it was a successful event! </p>
                 <div className="row align-items-center">
                     <div className="col">
                         <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-experminet.jpeg"></img>
@@ -39,5 +55,5 @@ export function HPEducation(){
                     </div>
         </div>
         </div>
-    )
+    );
 }
\ No newline at end of file

src/contents/Human Practices/Further Engagement/Outreach.tsx

@@ -18,6 +18,7 @@ export function HPOutreach(){
             <ButtonOne openclass="out-cycletab" text="waffel sale" open="waffel sale"></ButtonOne>
           </div>
         </div>
+        
 
         <div id="out-overview" className="out-cycletab" style={{display: "block"}}>
           <H4 id="out-heading" text="Our education and outreach"/>
@@ -26,7 +27,18 @@ export function HPOutreach(){
           <LoremMedium/>
         </div>
         
-        <div id="waffle sale" className="out-cycletab" style={{display: "none"}}></div>
+        <div id="waffle sale" className="out-cycletab" style={{display: "none"}}>
+        <H4 id="waffle sale" text="Waffle sale"/>
+         <div className="row">
+          <div className="full-small col3">
+          </div>
+          </div>
+          <div className="col">
+          <h3>Waffle sale</h3>
+          <p>To support our research project and raise funds for our iGEM team at Bielefeld University, we decided to organize a waffle sale in the main hall of the university. This initiative was aimed at raising awareness about our project and collecting funds for our research into cystic fibrosis. </p>
+          <p>The sale took place in cystic fibrosis awareness month May in the Great Hall of our University. As people passed by, we engaged them by introducing our research group and explaining our project’s objectives. We shared information about cystic fibrosis and why we are raising money. Our goal was to not only just to sell waffles, but also to educate the university community about our research and its’ potential impact. The response has been overwhelmingly positive. Many were genuinely interested in our work and asked for more details about our research and the goals of our project. This enthusiasm strengthened our commitment to the project and highlighted the importance of community involvement in scientific research. </p>
+          <p>The waffle sale was a great success, both in terms of raising funds and increasing awareness about our work within the university. It was a collaborative effort that brought our team closer together and demonstrated the power of community support in advancing scientific research. </p>
+        </div>
         <div id="mukomove" className="out-cycletab" style={{display: "none"}}>
         <H4 id="cf-month" text="Cystic fibrosis awareness month"/>
           <div className="row">
@@ -78,5 +90,6 @@ export function HPOutreach(){
           <p>The MUKOmove was therefore a complete success, and we take pride in having contributed to the goal while raising more awareness for cystic fibrosis in our region and Germany as a whole.</p>
           </div>
         </div>
-    )
+        </div>
+    );
 }
\ No newline at end of file

src/contents/Human Practices/HP-abstract.tsx

+import { LoremMedium } from "../../components/Loremipsum"
+import { Section } from "../../components/sections"
+
+export function HPAbstract(){
+
+    return(
+        <Section title="Abstract" id="Abstract">
+            <LoremMedium/>
+        </Section>
+    )
+}
\ No newline at end of file

src/contents/Human Practices/human-practices.tsx

@@ -55,6 +55,7 @@ import { HPIntegrated } from "./IHP";
 import { HPFurtherEngagement } from "./Further Engagement/FurtherEngagement";
 import { HPSupplement } from "./Further Engagement/SupMaterial";
 import { useTabNavigation } from "../../utils/TabNavigation";
+import { HPAbstract } from "./HP-abstract";
 
 export function HumanPractices() {
   useTabNavigation();
@@ -64,6 +65,7 @@ export function HumanPractices() {
 
   return (  
     <div className="col">
+      <HPAbstract/>
       <HPOverview/>
       <HPIntroduction/>
       <HPIntegrated/>

src/contents/description.tsx

@@ -524,6 +524,12 @@ let symptombuttonrowdata = [
 function createSymptomSteckbrief(data: SymptomDatensatz){
     let examplelist = []; 
     for (let index = 0; index < data.subsections.length; index++) {
+        let absaetze = []
+        for (let i = 0; i < data.subsections[index].text.length; i++) {
+            absaetze.push(
+                <p>{data.subsections[index].text[i]}</p>
+            )
+        }
         examplelist.push(
             <div className="drug">
                 <H4 text={data.subsections[index].title}/>
@@ -534,13 +540,20 @@ function createSymptomSteckbrief(data: SymptomDatensatz){
     return(
         <div>
             <H4 id={`${data.name}-btn`} text={stringToSlug(data.name)}/>
-            <div className="col-2">
-                <div className="symptom-img-wrapper">
-                    <img src={data.picture} className="symptom-img"/>
+            <div className="row">
+                <div className="col-2">
+                    <div className="symptom-img-wrapper">
+                        <img src={data.picture} className="symptom-img"/>
+                    </div>
+                </div>
+                <div className="col">
+                    {data.introduction}
                 </div>
             </div>
+            
             <div className="col">
-
+            
+            {examplelist}
             </div>
         </div>
     )
@@ -550,6 +563,13 @@ function createSymptomSteckbrief(data: SymptomDatensatz){
 function createDrugSteckbrief(data: DrugDatensatz){
     let examplelist = []; 
     for (let index = 0; index < data.examples.length; index++) {
+        let absaetze = []
+        for (let i = 0; i < data.examples[index].text.length; i++) {
+            absaetze.push(
+                <p>{data.examples[index].text[i]}</p>
+            )
+            
+        }
         examplelist.push(
             <div className="drug">
                 <H4 text={data.examples[index].title}/>
@@ -561,9 +581,14 @@ function createDrugSteckbrief(data: DrugDatensatz){
     return(
         <div>
             <H4 id={`${data.name}-btn`} text={stringToSlug(data.name)}/>
-            <div className="col-2">
-                <div className="symptom-img-wrapper">
-                    <img src={data.picture} className="symptom-img"/>
+            <div className="row">
+                <div className="col-2">
+                    <div className="symptom-img-wrapper">
+                        <img src={data.picture} className="symptom-img"/>
+                    </div>
+                </div>
+                <div className="col">
+                    {data.introduction}
                 </div>
             </div>
             <div className="col">

src/data/drug-data.tsx

@@ -9,7 +9,7 @@ export interface DrugDatensatz {
 
 interface example{
     title: string,
-    text: string
+    text: Array<string>; 
 }
 
 export const drugdata: (Array<DrugDatensatz>)  = [
@@ -20,11 +20,11 @@ export const drugdata: (Array<DrugDatensatz>)  = [
         examples: [
             {
                 title: "",
-                text: ""
+                text: [""]
             },
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
         ]
     },
@@ -35,11 +35,10 @@ export const drugdata: (Array<DrugDatensatz>)  = [
         examples: [
             {
                 title: "Trikafta",
-                text: "Active ingredient(s): Combination of elexacaftor/tezacaftor/ivacaftor \n Indications: For CF patients aged 2 years and older with at least one F508del mutation à 85 % of CF patients \n Mechanism: Elexacaftor and tezacaftor act as correctors on misfolded CFTR and permit delivery to the cell surface, thereby improving the channel density at the plasma membrane, while ivacaftor as a potentiator acts on CFTR channels that have reached the cell surface and increase the gating and conductance of ions [5]. \n Administration: Oral tablets \n Approval: Approved by the EMA in 2020 "
-            },
+                text: ["Active ingredient(s): Combination of elexacaftor/tezacaftor/ivacaftor \n Indications: For CF patients aged 2 years and older with at least one F508del mutation à 85 % of CF patients \n Mechanism: Elexacaftor and tezacaftor act as correctors on misfolded CFTR and permit delivery to the cell surface, thereby improving the channel density at the plasma membrane, while ivacaftor as a potentiator acts on CFTR channels that have reached the cell surface and increase the gating and conductance of ions [5]. \n Administration: Oral tablets \n Approval: Approved by the EMA in 2020 "] },
             {
                 title: "Symdeko",
-                text: "Active ingredient(s): Combination of tezacaftor and ivacaftor \n Indications: For CF patients aged 6 years and older with specific mutations in combination with F508del or with two copies of F508del mutation \n Mechanism: Tezacaftor acts as a corrector on misfolded CFTR and permit delivery to the cell surface, thereby improving the channel density at the plasma membrane, while ivacaftor as a potentiator acts on CFTR channels that have reached the cell surface and increase the gating and conductance of ions [5] \n Administration: Oral tablets \n Approval: Approved by the EMA in 2018"
+                text: ["Active ingredient(s): Combination of tezacaftor and ivacaftor \n Indications: For CF patients aged 6 years and older with specific mutations in combination with F508del or with two copies of F508del mutation \n Mechanism: Tezacaftor acts as a corrector on misfolded CFTR and permit delivery to the cell surface, thereby improving the channel density at the plasma membrane, while ivacaftor as a potentiator acts on CFTR channels that have reached the cell surface and increase the gating and conductance of ions [5] \n Administration: Oral tablets \n Approval: Approved by the EMA in 2018"]
             },
         ]
     },
@@ -50,11 +49,11 @@ export const drugdata: (Array<DrugDatensatz>)  = [
         examples: [
             {
                 title: "",
-                text: "test"
+                text: ["test"]
             },
             {
                 title: "",
-                text: "test2"
+                text: ["test2"]
             },
         ]
     }

src/data/steckbriefe.ts

@@ -917,7 +917,7 @@ export const pis: Array<SteckbriefInterface> = [
         pronouns: "he/him",
         studiengang: "Research Group Leader - Molecular and Cellular Biotechnology",
         headof: "Second Principle Investigator",
-        igemjob: ["Technical Facility of Bielefeld University"],
+        igemjob: ["Technical Faculty, Bielefeld University"],
         whyigem: [
             "The combination of fun and progress",
         ],
@@ -931,7 +931,7 @@ export const pis: Array<SteckbriefInterface> = [
             "iGEMmer since 2007 and keeping it rolling (any resemblance to Sisyphus is purely coincidental)",
         ],
         favlabmusic: "Sam Cooke - Wonderful World",
-        scientificinterests: "Genomcis, Cloning Strategies and Adeno Associated Viruses",
+        scientificinterests: "synthetic biology, gene and protein design, gene therapy, adeno-associated virus",
         islands: "",
         onechange: "",
         hobbies: []

src/data/symptom-data.tsx

@@ -9,7 +9,7 @@ export interface SymptomDatensatz {
 
 interface example{
     title: string,
-    text: string
+    text: Array<string>; 
 }
 export const symptomdata: (Array<SymptomDatensatz>)  = [
     {
@@ -19,11 +19,11 @@ export const symptomdata: (Array<SymptomDatensatz>)  = [
         subsections: [
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
         ]
     },
@@ -34,11 +34,11 @@ export const symptomdata: (Array<SymptomDatensatz>)  = [
         subsections: [
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
         ]
     },
@@ -49,11 +49,11 @@ export const symptomdata: (Array<SymptomDatensatz>)  = [
         subsections: [
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
         ]
     },
@@ -64,11 +64,11 @@ export const symptomdata: (Array<SymptomDatensatz>)  = [
         subsections: [
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
         ]
     },
@@ -79,11 +79,11 @@ export const symptomdata: (Array<SymptomDatensatz>)  = [
         subsections: [
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
         ]
     },
@@ -94,11 +94,11 @@ export const symptomdata: (Array<SymptomDatensatz>)  = [
         subsections: [
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
         ]
     },
@@ -109,11 +109,11 @@ export const symptomdata: (Array<SymptomDatensatz>)  = [
         subsections: [
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
         ]
     },
@@ -124,11 +124,11 @@ export const symptomdata: (Array<SymptomDatensatz>)  = [
         subsections: [
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
             {
                 title: "",
-                text: "string"
+                text: ["string"]
             },
         ]
     }

src/sidebars/hpS.tsx

@@ -12,6 +12,7 @@ export function HpSidebar(){
 }
 
 const tabs = [
+    {tab: "Abstract"}, 
     { tab: "Overview" },
     {tab: "Introduction"},
     {tab: "Integrated Human Practices", subtabs: ["Framework", "Timeline", "Implementation", "Feedback", "Conclusion"]},