diff --git a/src/App/mediarules.css b/src/App/mediarules.css
index 9ccb33dfc9376c89d0fda579cc338db1d8e7b487..b74dfb49a85b248d921420046d693e1e1e8d455f 100644
--- a/src/App/mediarules.css
+++ b/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){
diff --git a/src/components/AirbuddyAnim.tsx b/src/components/AirbuddyAnim.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..764a26991b464da2f4d4ddf1e326cf212f8167b7
--- /dev/null
+++ b/src/components/AirbuddyAnim.tsx
@@ -0,0 +1,244 @@
+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
diff --git a/src/components/BFH-Timeline.tsx b/src/components/BFH-Timeline.tsx
index 8624342a0488aee775c15ae87d9bebead8da4ba8..9f818b1b3318631989bc2f09926b75501635850c 100644
--- a/src/components/BFH-Timeline.tsx
+++ b/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
diff --git a/src/components/PrimeGuide.tsx b/src/components/PrimeGuide.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca093cd1781cc824037bf6eeb4cdb390e6aceb3c
--- /dev/null
+++ b/src/components/PrimeGuide.tsx
@@ -0,0 +1,336 @@
+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
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index d2cdcd30365079da95891c3fe11ec982ec018550..f05940682e55db994bbf91239578b06a8ab7c2e8 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,9 +1,10 @@
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>
diff --git a/src/contents/Human Practices/Further Engagement/Education.tsx b/src/contents/Human Practices/Further Engagement/Education.tsx
index a7c4b771d27029dd89d6d7f3c9d91b5bb50eb7b5..6b57cd8bd411e5f287520b6faf1141d3f56c98fc 100644
--- a/src/contents/Human Practices/Further Engagement/Education.tsx
+++ b/src/contents/Human Practices/Further Engagement/Education.tsx
@@ -1,5 +1,6 @@
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
diff --git a/src/contents/Human Practices/Further Engagement/Outreach.tsx b/src/contents/Human Practices/Further Engagement/Outreach.tsx
index 00ba0e5cbce902714200ce8445aa51621365b99e..1c9cb23e9f50de9772e7ff53261308a1f083e0e7 100644
--- a/src/contents/Human Practices/Further Engagement/Outreach.tsx
+++ b/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
diff --git a/src/contents/Human Practices/HP-abstract.tsx b/src/contents/Human Practices/HP-abstract.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..58191a2a7c733aea0344b7b93d0426c181a956ba
--- /dev/null
+++ b/src/contents/Human Practices/HP-abstract.tsx
@@ -0,0 +1,11 @@
+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
diff --git a/src/contents/Human Practices/human-practices.tsx b/src/contents/Human Practices/human-practices.tsx
index fc0025993841e748deb1e3de84e04fa947573f4b..390fb2105d2f798431d9e6692d7c6b274eaa3d33 100644
--- a/src/contents/Human Practices/human-practices.tsx
+++ b/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/>
diff --git a/src/contents/description.tsx b/src/contents/description.tsx
index 3df8bbfaf8d0b76b63006d4e1d253b2db7c7c9ae..d73df70093dcd249ba878d9ccdb94a9244faa217 100644
--- a/src/contents/description.tsx
+++ b/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">
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index 0961fe4ae492b2d612c8e6554b71024c0a713d74..c6e5b423eb915eef3d9d2ade9d096d2b2a9986df 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -19,43 +19,72 @@ export const Safety: React.FC = () =>{
<div>
<p>
As part of our project to develop a prime-editing complex to correct the F508del mutation in cystic fibrosis, we place great emphasis on safety at all stages of research. Our final construct will be tested in primary cultures of epithelial cells obtained from nasal swabs, isolated from both patients and healthy individuals. from nasal swabs [link primär Kulturen]. To guarantee safety and ensure the highest level of precision and reliability of our results, we have introduced a series of carefully planned checkpoints during the experiments. These milestones allow for continuous monitoring, timely adjustments and validation at each critical stage. This ensures that potential issues are identified and addressed immediately, minimizing risk and improving the overall quality of the experimental results. [link zu den Experimenten] . iGEM places great emphasis on biosafety, ensuring that all projects adhere to strict safety standards. One of these measures is the iGEM White List, which includes organisms and parts that are pre-approved for use based on their safety profile. Any components or organisms not covered by this White List must be submitted as 'Check-ins' to the iGEM Safety Committee for approval. Check-ins are formal safety evaluations that allow the committee to assess the potential risks and ensure proper containment and handling procedures are in place. Although we used some parts and organisms that were not included on the White List, these were assessed as critical for our project and submitted as Check-ins to the iGEM Safety Committee. Furthermore, we were in active exchange with the committee throughout the process. The Check-ins provide a clear picture of the biosafety aspects of our project, reflecting our commitment to safety and compliance with iGEM standards.
- The main safety measures we have implemented include:
- <br/><strong>Compliance with S1 conditions:</strong> Working in S1 laboratories ensures that only organisms in the lowest risk group are used, minimizing the risk to humans and the environment.
- <br/><strong>Sterile working practices:</strong> To avoid contamination, we have implemented strict hygiene measures, including the disinfection of work surfaces and the correct disposal of biological waste.
- <br/><strong>Controlled access:</strong> Access to laboratories was strictly regulated to ensure that only trained personnel worked with the genetically modified organisms and cell lines.
- <br/><strong>Documentation:</strong> All work steps, materials used and cell lines were carefully documented to ensure traceability and safety.
- <br/><strong>Safe handling of cell lines:</strong> The cell lines used for experiments were handled in accordance with the applicable safety regulations. This included regular checks for contamination and the safe storage and disposal of cell cultures.
+ The main safety measures we have implemented include:
+ </p>
+ <p>
+ <strong>Compliance with S1 conditions:</strong> Working in S1 laboratories ensures that only organisms in the lowest risk group are used, minimizing the risk to humans and the environment.
+ </p>
+ <p>
+ <strong>Sterile working practices:</strong> To avoid contamination, we have implemented strict hygiene measures, including the disinfection of work surfaces and the correct disposal of biological waste.
+ </p>
+ <p>
+ <strong>Controlled access:</strong> Access to laboratories was strictly regulated to ensure that only trained personnel worked with the genetically modified organisms and cell lines.
+ </p>
+ <p>
+ <strong>Documentation:</strong> All work steps, materials used and cell lines were carefully documented to ensure traceability and safety.
+ </p>
+ <p>
+ <strong>Safe handling of cell lines:</strong> The cell lines used for experiments were handled in accordance with the applicable safety regulations. This included regular checks for contamination and the safe storage and disposal of cell cultures.
</p>
<H4 text="Checkin for the Prime-Editing Komplex "></H4>
<p>
<strong>Reverse transcriptase:</strong> Reverse transcriptase plays a central role in prime editing by specifically inserting the correction as DNA at the inserted nick using an RNA template provided by pegRNA. The correction of the complementary DNA strand then takes place via the natural cell repair mechanisms. This ensures an exact correction of the target sequence. We checked the reverse transcriptase to ensure it could perform precise genome editing without introducing unintended mutations. This was important to minimize the risk of off-target effects that could lead to unexpected or harmful consequences.
- <br/><strong>pegRNA (Prime Editing Guide RNA):</strong> The pegRNA is a multifunctional RNA molecule that fulfils two essential tasks. Firstly, it serves as a standard <strong>guide RNA (gRNA)</strong> that binds specifically to the target DNA and thus marks the site of editing. Secondly, it contains an RNA template that encodes the desired DNA modification. This enables the precise integration of the genetic modifications at the target site. We evaluated pegRNA for its ability to specifically target and modified the intended DNA sequence. Ensuring its specificity was crucial to avoid the potential disruption of other genes.
- <br/><strong>Nickase Cas9, CasX, Fanzor (SpuFz1):</strong> These modified nucleases are designed to cut only one strand of DNA. This leads to controlled and precise editing of the genome, as cutting only one strand minimizes the risk of unwanted double-strand breaks. CasX and Fanzor offer smaller alternatives to Cas9, which is particularly advantageous for use in cells or organisms where space and efficiency requirements in terms of the transport system are an issue. Fanzor, being a newly introduced endonuclease, was particularly scrutinized in our project to ensure its safety and effectiveness in different cellular contexts.
- <br/>This prime-editing complex thus represents a precise and efficient method for gene editing. By combining these components, genetic modifications can be performed with minimal side effects
+ </p>
+ <p>
+ <strong>pegRNA (Prime Editing Guide RNA):</strong> The pegRNA is a multifunctional RNA molecule that fulfils two essential tasks. Firstly, it serves as a standard <strong>guide RNA (gRNA)</strong> that binds specifically to the target DNA and thus marks the site of editing. Secondly, it contains an RNA template that encodes the desired DNA modification. This enables the precise integration of the genetic modifications at the target site. We evaluated pegRNA for its ability to specifically target and modified the intended DNA sequence. Ensuring its specificity was crucial to avoid the potential disruption of other genes.
+ </p>
+ <p>
+ <strong>Nickase Cas9, CasX, Fanzor (SpuFz1):</strong> These modified nucleases are designed to cut only one strand of DNA. This leads to controlled and precise editing of the genome, as cutting only one strand minimizes the risk of unwanted double-strand breaks. CasX and Fanzor offer smaller alternatives to Cas9, which is particularly advantageous for use in cells or organisms where space and efficiency requirements in terms of the transport system are an issue. Fanzor, being a newly introduced endonuclease, was particularly scrutinized in our project to ensure its safety and effectiveness in different cellular contexts.
+
+ This prime-editing complex thus represents a precise and efficient method for gene editing. By combining these components, genetic modifications can be performed with minimal side effects
</p>
<H4 text="Checkin for Cloning"></H4>
<p>
- For our cloning experiments and the development of our prime editing complexes, we have amplified various plasmids in <i>E. coli</i> K-12 strains (DH5α,10-Beta) When working with microbial strains such as E. coli K-12 strains, a it's important to consider potential risks associated with their use, even though they are generally regarded as safe in laboratory settings. All experiments were performed under strict S1 conditions, following all relevant safety protocols. Below you will find an overview of the E.coli K-12 strains for our cloning experiments, submitted by us as a checkin and the specific safety measures:
- <br/><i>E. coli K-12</i> strains (DH5α,10-Beta): Although these strains are non-pathogenic and have been modified to minimize the risk of spreading antibiotic resistance, there remains a low risk of horizontal gene transfer, where genetic material could be transferred to other microorganisms, potentially leading to the spread of resistance genes or other traits. If accidentally released into the environment, E. coli K-12 strains could potentially interact with native microbial communities. While they are typically outcompeted in natural environments, there's a remote possibility of ecological disruption, particularly in microenvironments where they could find a niche.While these strains are non-virulent, they still pose a minimal risk to humans, particularly immunocompromised individuals, through accidental ingestion or inhalation in a laboratory setting.
+ For our cloning experiments and the development of our prime editing complexes, we have amplified various plasmids in <i>E. coli</i> K-12 strains (DH5α,10-Beta) When working with microbial strains such as <i>E. coli</i> K-12 strains, a it's important to consider potential risks associated with their use, even though they are generally regarded as safe in laboratory settings. All experiments were performed under strict S1 conditions, following all relevant safety protocols. Below you will find an overview of the <i>E. coli</i> K-12 strains for our cloning experiments, submitted by us as a checkin and the specific safety measures:
+ </p>
+ <p>
+ <i>E. coli K-12</i> strains (DH5α,10-Beta): Although these strains are non-pathogenic and have been modified to minimize the risk of spreading antibiotic resistance, there remains a low risk of horizontal gene transfer, where genetic material could be transferred to other microorganisms, potentially leading to the spread of resistance genes or other traits. If accidentally released into the environment, <i>E. coli</i> K-12 strains could potentially interact with native microbial communities. While they are typically outcompeted in natural environments, there's a remote possibility of ecological disruption, particularly in microenvironments where they could find a niche.While these strains are non-virulent, they still pose a minimal risk to humans, particularly immunocompromised individuals, through accidental ingestion or inhalation in a laboratory setting.
+ </p>
+ <p>
We submitted the yeast strain <i>Pichia pastoris</i> (SMD1163) for the protein expression of Fanzor.
- <br/><i>Pichia pastoris</i> (SMD1163): <i>Pichia pastoris</i> (SMD1163) is a widely used yeast strain for the expression of recombinant proteins. It is characterized by a methanol-inducible expression system (AOX1 promoter) and high cell growth rates, which makes it ideal for industrial applications. The strain can be easily genetically manipulated and can perform post-translational modifications, which supports correct protein production.
- <br/>When working with <i>Pichia pastoris</i> (SMD1163), various safety-relevant aspects must be observed. Although the organism is considered non-pathogenic and biologically safe (S1), skin contact and aerosol formation should be avoided to minimize the risk of infection or allergic reactions. When using genetically modified strains, it is important to follow the relevant GMO guidelines to prevent uncontrolled release. In addition, handling chemicals such as methanol requires special precautions as they are toxic and highly flammable. The disposal of cell cultures and waste must also be carried out in accordance with biosafety regulations, especially in the case of genetically modified organisms.
+ </p>
+ <p>
+ <i>Pichia pastoris</i> (SMD1163): <i>Pichia pastoris</i> (SMD1163) is a widely used yeast strain for the expression of recombinant proteins. It is characterized by a methanol-inducible expression system (AOX1 promoter) and high cell growth rates, which makes it ideal for industrial applications. The strain can be easily genetically manipulated and can perform post-translational modifications, which supports correct protein production.
+ When working with <i>Pichia pastoris</i> (SMD1163), various safety-relevant aspects must be observed. Although the organism is considered non-pathogenic and biologically safe (S1), skin contact and aerosol formation should be avoided to minimize the risk of infection or allergic reactions. When using genetically modified strains, it is important to follow the relevant GMO guidelines to prevent uncontrolled release. In addition, handling chemicals such as methanol requires special precautions as they are toxic and highly flammable. The disposal of cell cultures and waste must also be carried out in accordance with biosafety regulations, especially in the case of genetically modified organisms.
</p>
<H4 text="Checkin for Testing in cell lines "></H4>
<p>
In our project, we paid attention to safety at every step, especially when working with specific cell lines [link Zellinien]. All experiments were performed under strict S1 conditions, following all relevant safety protocols. Given the sensitivity of the human cell lines we used, we placed great emphasis on controlled and well-designed workflows. All transfections were performed in our own transfection laboratory to ensure a high level of safety and compliance. Below you will find an overview of the cell lines submitted by us as a checkin and the specific safety measures:
HEK293T-3HA-CFTR.
The HEK293T-3HA-CFTR cell line is based on HEK293T cells expressing an additional tsA1609 allele of the SV40 large T antigen. This allele enables the replication of vectors containing the SV40 origin of replication. In addition to the native CFTR gene, which is not expressed in HEK cells, the HEK293T-3HA-CFTR cell line from Leuven carries another copy of the CFTR gene embedded in an expression cassette. This cassette contains a CMV promoter, which is derived from the human cytomegalovirus and is frequently used for the overexpression of genes in human cells. In addition, the cassette contains a puromycin resistance gene that is co-expressed with CFTR, allowing continuous selection of CFTR-expressing cells.
- <br/><br/><strong>HEK293T-3HA-F508del-CFTR cell line:</strong> The HEK293T-3HA-F508del-CFTR cell line is a modified HEK293T cell line that carries the F508del mutation in the CFTR gene, which is responsible for the most common mutation in cystic fibrosis. This mutation leads to a defective CFTR protein that impairs the normal function of the chloride channel. The cell line is therefore ideal for studying the effects of this mutation and for evaluating potential therapies for cystic fibrosis.
- <br/><strong>CFBE41o- cell line:</strong> The CFBE41o- cell line, derived from the bronchial epithelial cells of a cystic fibrosis patient, is homozygous for the ΔF508-CFTR mutation and was essential for our cystic fibrosis research. . A reduced CFTR expression level is present. The cell line carries the CFTR defect and can therefore represent a patient with CF. The cell line is used to test our mechanism. These cells were immortalized with a replication-defective plasmid that retains their physiological properties.
+ </p>
+ <p>
+ <strong>HEK293T-3HA-F508del-CFTR cell line:</strong> The HEK293T-3HA-F508del-CFTR cell line is a modified HEK293T cell line that carries the F508del mutation in the CFTR gene, which is responsible for the most common mutation in cystic fibrosis. This mutation leads to a defective CFTR protein that impairs the normal function of the chloride channel. The cell line is therefore ideal for studying the effects of this mutation and for evaluating potential therapies for cystic fibrosis.
+ </p>
+ <p>
+ <strong>CFBE41o- cell line:</strong> The CFBE41o- cell line, derived from the bronchial epithelial cells of a cystic fibrosis patient, is homozygous for the ΔF508-CFTR mutation and was essential for our cystic fibrosis research. . A reduced CFTR expression level is present. The cell line carries the CFTR defect and can therefore represent a patient with CF. The cell line is used to test our mechanism. These cells were immortalized with a replication-defective plasmid that retains their physiological properties.
When working with the HEK293T and CFBE41o- cell lines, it’s important to consider the minimal risks associated with their use. While not harmful on their own, the genetic modifications in HEK293T cells require careful handling to prevent accidental release or exposure. These cells, engineered to overexpress CFTR, including the F508del mutation, necessitate strict safety measures like regular monitoring and proper waste disposal to comply with S1 laboratory standards. Similarly, CFBE41o- cells, due to their genetic modifications and disease relevance, require careful handling to avoid cross-contamination and ensure biosafety.
+ </p>
+ <p>
<strong>Human nasal epithelial cells (hNECs):</strong> Human nasal epithelial cells (hNECs) were harvested using a nasal brush, a minimally invasive procedure, and cultured in air-liquid interface (ALI) cultures to model the airway epithelium. Human nasal epithelial cells (hNECs) were obtained using a nasal brush, a minimally invasive technique, and then cultured in air-liquid interface (ALI) cultures to model the airway epithelium. Using these primary cultures, derived from donors with airway diseases such as cystic fibrosis, we were able to simulate the in vivo conditions of such diseases.
- <br/>Due to the sensitive nature of these primary human cells, we performed all experiments with hNECs in our S2 laboratory, where increased safety precautions were taken. This included strict safety controls, safe handling of samples and proper disposal of materials after testing. In particular, the hNECs underwent HHH (Triple H: HIV, HCV and HBV) testing to ensure that no contamination occurred during sample collection or experimentation. These tests included sterility testing, viability assessments and contamination testing to ensure the safety and integrity of both the samples and the laboratory environment. After a negative HHH test, the primary cultures can be treated as S1. In addition, the nasal epithelial cells were handled with the utmost care during collection, ensuring that all procedures were performed under sterile conditions to avoid any risk of contaminationFor this purpose, the intensive examination of ethical questions was fundamental and a constant companion of our project. The numerous results from the interviews in the areas of: Ethics, storage and training in the handling of samples have been summarized in a guideline for patient consent for Germany and are intended to provide iGEM teams with the scope, critical examination and observance of iGEM rules, international and national guidelines. 
+ Due to the sensitive nature of these primary human cells, we performed all experiments with hNECs in our S2 laboratory, where increased safety precautions were taken. This included strict safety controls, safe handling of samples and proper disposal of materials after testing. In particular, the hNECs underwent HHH (Triple H: HIV, HCV and HBV) testing to ensure that no contamination occurred during sample collection or experimentation. These tests included sterility testing, viability assessments and contamination testing to ensure the safety and integrity of both the samples and the laboratory environment. After a negative HHH test, the primary cultures can be treated as S1. In addition, the nasal epithelial cells were handled with the utmost care during collection, ensuring that all procedures were performed under sterile conditions to avoid any risk of contaminationFor this purpose, the intensive examination of ethical questions was fundamental and a constant companion of our project. The numerous results from the interviews in the areas of: Ethics, storage and training in the handling of samples have been summarized in a guideline for patient consent for Germany and are intended to provide iGEM teams with the scope, critical examination and observance of iGEM rules, international and national guidelines. 
</p>
<H4 text="Checkin for Delivery "></H4>
<p>
Our finished construct is designed to be delivered into the lung via an inhaler using lipid nanoparticles (LNPs). To be more spezific a selective organ-targeting (SORT)- LNPs were developed to deliver mRNA specifically to the lung, with special measures taken to increase biocompatibility and safety. Since the LNP composition is very specific and also differs from other formulas, we submitted the LNP as a checkin:
- <br/><strong>LNP:</strong> These LNPs are then taken up by epithelial cells through endocytosis, releasing the construct into the cytosol. We carefully evaluated the potential risks, including unintended immune responses and the need for precise dosing to minimize side effects. In addition, we have conducted an in-depth analysis of the dual-use potential of our technology. Dual-use refers to the possibility that scientific advances can be used for both civilian and military purposes. Therefore, we have implemented strict safety protocols and ethical guidelines to ensure that our technology is used exclusively for peaceful and therapeutic applications.
+ </p>
+ <p>
+ <strong>LNP:</strong> These LNPs are then taken up by epithelial cells through endocytosis, releasing the construct into the cytosol. We carefully evaluated the potential risks, including unintended immune responses and the need for precise dosing to minimize side effects. In addition, we have conducted an in-depth analysis of the dual-use potential of our technology. Dual-use refers to the possibility that scientific advances can be used for both civilian and military purposes. Therefore, we have implemented strict safety protocols and ethical guidelines to ensure that our technology is used exclusively for peaceful and therapeutic applications.
</p>
</div>
</Section>
diff --git a/src/data/drug-data.tsx b/src/data/drug-data.tsx
index a3647f382727bf36c989b887011778d9c2aaaf31..15dd52a4eb4ca9da7f5771d8e20d87986dd03429 100644
--- a/src/data/drug-data.tsx
+++ b/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"]
},
]
}
diff --git a/src/data/steckbriefe.ts b/src/data/steckbriefe.ts
index bd7f4c248e405fa983a44d23227678170e4aa1c1..b82f3076429478f582330e2ce8fdf9aeeecc0a4f 100644
--- a/src/data/steckbriefe.ts
+++ b/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: []
diff --git a/src/data/symptom-data.tsx b/src/data/symptom-data.tsx
index a309eb4bb69f41e01eb8da93955b2ba44f3ba19a..cc46814c5485b0844ff35f09f686f6523c709830 100644
--- a/src/data/symptom-data.tsx
+++ b/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"]
},
]
}
diff --git a/src/sidebars/hpS.tsx b/src/sidebars/hpS.tsx
index 93019cda232e48fd6f2454f40c0f27ed1d31ee80..5168ec728d635011e481ae18864be2157b20fd47 100644
--- a/src/sidebars/hpS.tsx
+++ b/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"]},