diff --git a/src/components/Breathe.tsx b/src/components/Breathe.tsx
index 817bb5d4b6b4149af79f1b4e255df0549c24b695..cd4e5b0ab33369539222dc28f147cebb973018a6 100644
--- a/src/components/Breathe.tsx
+++ b/src/components/Breathe.tsx
@@ -47,139 +47,188 @@ export function Breathe(){
observer.observe(domRef5.current!);
}, []);
- const Title1 = "Cystic Fibrosis";
- const Title2 = "makes life breathtaking";
- const Prob11 = "Thick mucus blocking airway and prevents"
- const Prob12 = "oxygen absorption, leading to bronchial"
- const Prob13 = "obstructions, organ failure an death";
- const Prob21 = "Chronic inflammation occurs periodically";
- const Prob22 = "due to a high vulnerability to";
- const Prob23 = "bacterial and viral infections";
- const Prob31 = "Heightened safety considerations and";
- const Prob32 = "emotional stress promote depression";
- const Prob33 = "and psychological issues";
+
+ 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 */}
+ {/* purple */}
<div
className='col'
- style={{
- 'height': '100vh',
- 'transition': 'opacity 0.6s ease-out',
- 'opacity': `${isVisible ? '1' : '0'}`,
- 'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
+ style={{ 'height': '700vh'}}
ref={domRef}>
<img
style={{
+ 'zIndex': '1',
'position': 'fixed',
'top': '20vh',
- 'left': '20vw',
+ 'left': '30vw',
'width': '60vw',
'height': '60vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible ? '1' : '0'}`,
+ 'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-1.webp">
+ src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.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={{
+ {/* Spacing Block */}
+ <div className='col' style={{ 'height': '100vh' }}></div>
+ <div style={{ 'height': '100vh'}} ref={domRef2}>
+ <p style={{'fontSize' : '2.5em'}}>Take a moment to</p>
+ <p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
+ <img style={{
'position': 'fixed',
'top': '20vh',
- 'left': '20vw',
+ 'left': '30vw',
'width': '60vw',
'height': '60vh',
+ 'transition': 'scale 2.0s ease-out',
+ 'scale': `${isVisible2 ? '1' : '0'}`,
+ 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
- </img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
- <p style={{'position': 'fixed','top': '22.5vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
- </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={{
+ src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
+ </div>
+ {/* Spacing Block */}
+ <div className='col' style={{ 'height': '95vh' }}></div>
+ <div style={{ 'height': '100vh'}} ref={domRef3}>
+ <p style={{'fontSize' : '2.5em'}}>and deeply.</p>
+ <p style={{'fontSize' : '2.5em'}}>breathe out...</p>
+ <img style={{
'position': 'fixed',
'top': '20vh',
- 'left': '20vw',
+ 'left': '30vw',
'width': '60vw',
'height': '60vh',
+ 'transition': 'scale 2.0s ease-out',
+ 'scale': `${isVisible3 ? '0' : '1'}`,
+ 'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
- </img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
- <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
+ src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
+ </div>
+ {/* Spacing Block */}
+ <div className='col' style={{ 'height': '100vh' }}></div>
+ <p style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
+ <p style={{'fontSize' : '2.5em'}}>Your body and mind</p>
+ <p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
+ {/* Spacing Block */}
+ <div className='col' style={{ 'height': '100vh' }}></div>
+ <p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
+ <p style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
+ <div style={{ 'height': '100vh'}} ref={domRef4}>
+ <img style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '30vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ 'transition': 'scale 2.0s ease-out',
+ 'scale': `${isVisible4 ? '1' : '0'}`,
+ 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
+ </div>
</div>
- {/* Four */}
+ {/* black */}
<div
- className='col'
- style={{
- 'height': '100vh',
- 'transition': 'opacity 0.6s ease-out',
- 'opacity': `${isVisible4 ? '1' : '0'}`,
- 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
- ref={domRef4}>
+ style={{ 'height': '300vh'}} ref={domRef5}>
<img
style={{
+ 'zIndex': '1',
'position': 'fixed',
'top': '20vh',
- 'left': '20vw',
+ 'left': '30vw',
'width': '60vw',
'height': '60vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible5 ? '1' : '0'}`,
+ 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
+ src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
- <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
+ <div style={{ 'height': '100vh'}} ref={domRef6}>
+ <img style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '30vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ 'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
+ </div>
+ <p style={{'fontSize' : '2.5em'}}>Not everyone </p>
+ <p style={{'fontSize' : '2.5em'}}>can breathe freely.</p>
+ {/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
+ <p style={{'fontSize' : '2.5em'}}>but many people </p>
+ <p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
+ <div style={{ 'height': '100vh'}} ref={domRef7}>
+ <img style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '30vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ 'scale': `${isVisible7 ? '1' : '0'}`,
+ 'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
+ </div>
+ {/* Spacing Block */}
+ <div className='col' style={{ 'height': '100vh' }}></div>
+ <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
+ <p style={{'fontSize' : '2.5em'}}>but many people </p>
+ <p style={{'fontSize' : '2.5em'}}>struggle with it.</p>
</div>
- {/* Five */}
+ {/* grey */}
<div
- className='col'
- style={{
- 'height': '100vh',
- 'transition': 'opacity 0.6s ease-out',
- 'opacity': `${isVisible5 ? '1' : '0'}`,
- 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
- ref={domRef5}>
+ style={{ 'height': '200vh'}} ref={domRef8}>
<img
style={{
+ 'zIndex': '1',
'position': 'fixed',
'top': '20vh',
- 'left': '20vw',
+ 'left': '30vw',
'width': '60vw',
'height': '60vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible8 ? '1' : '0'}`,
+ 'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}}
- src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
+ src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
- <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
- <p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p>
- </div>
-
+ </div>
+ <p style={{'fontSize' : '2.5em'}}>texttexttext</p>
+ <p style={{'fontSize' : '2.5em'}}>texttexttext,</p>
+ <p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p>
+ <p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p>
+
+ {/* Spacing Block */}
+ <div className='col' style={{ 'height': '100vh' }}></div>
</>
);
-}
\ No newline at end of file
+}
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index a2afabedb555e1058d7e76c80704b8178a6db5df..9a5e9f5fc8942bfd27abb2f0ec9d4f83a7431f03 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -25,7 +25,7 @@ export function Villagebutton({ title, source, page }: { title: string; source:
</Link>
)
}
-
+
export function Villbuttonrow(){
return(
<div className="small-row align-items-center bottom-buttons">
@@ -34,8 +34,8 @@ export function Villbuttonrow(){
<Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
<Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
<Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
- <Villagebutton page="/safety?tab=obeninsafety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
- <Villagebutton page="/results?tab=resultheading" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
+ <Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
+ <Villagebutton page="/results?tab=Abstract" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
</div>
)
}
diff --git a/src/components/Problems.tsx b/src/components/Problems.tsx
index 9f5510fef178d097f5b0ae146116982f64fd8e4f..e2dbcfe3ebc15ed149e1a9ab7719c1504031c95d 100644
--- a/src/components/Problems.tsx
+++ b/src/components/Problems.tsx
@@ -51,10 +51,10 @@ export function Problems(){
const Title2 = "makes life breathtaking";
const Prob11 = "Thick mucus blocking airway and prevents"
const Prob12 = "oxygen absorption, leading to bronchial"
- const Prob13 = "obstructions, organ failure an death";
+ const Prob13 = "obstructions, organ failue an death";
const Prob21 = "Chronic inflammation occurs periodically";
- const Prob22 = "due to a high vulnerability to";
- const Prob23 = "bacterial and viral infections";
+ const Prob22 = "due to a high vulnerability ";
+ const Prob23 = "to bacterial and viral infections";
const Prob31 = "Heightened safety considerations and";
const Prob32 = "emotional stress promote depression";
const Prob33 = "and psychological issues";
@@ -100,11 +100,9 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
- <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
- <p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
- <p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
+ <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
</div>
{/* Three */}
<div
@@ -125,14 +123,10 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
- <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
- <p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
- <p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
- <p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
- <p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
+ <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
</div>
{/* Four */}
<div
@@ -153,17 +147,11 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
- <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
- <p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
- <p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
- <p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
- <p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1'}}>{Prob31}</p>
- <p style={{'position': 'fixed','top': '70vh', 'left': '60vw', 'zIndex': '1'}}>{Prob32}</p>
- <p style={{'position': 'fixed','top': '75vh', 'left': '60vw', 'zIndex': '1'}}>{Prob33}</p>
+ <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
</div>
{/* Five */}
<div
@@ -184,17 +172,11 @@ export function Problems(){
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
</img>
- <p style={{'position': 'fixed','top': '20vh', 'left': '47vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title1}</p>
- <p style={{'position': 'fixed','top': '25vh', 'left': '45vw', 'zIndex': '1', 'fontWeight': 'bold'}}>{Title2}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1'}}>{Prob11}</p>
- <p style={{'position': 'fixed','top': '70vh', 'left': '20vw', 'zIndex': '1'}}>{Prob12}</p>
- <p style={{'position': 'fixed','top': '75vh', 'left': '20vw', 'zIndex': '1'}}>{Prob13}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1'}}>{Prob21}</p>
- <p style={{'position': 'fixed','top': '70vh', 'left': '40vw', 'zIndex': '1'}}>{Prob22}</p>
- <p style={{'position': 'fixed','top': '75vh', 'left': '40vw', 'zIndex': '1'}}>{Prob23}</p>
- <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1'}}>{Prob31}</p>
- <p style={{'position': 'fixed','top': '70vh', 'left': '60vw', 'zIndex': '1'}}>{Prob32}</p>
- <p style={{'position': 'fixed','top': '75vh', 'left': '60vw', 'zIndex': '1'}}>{Prob33}</p>
+ <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
+ <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
+ <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
<p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p>
</div>
diff --git a/src/contents/Human Practices/Further Engagement/Collaborations.tsx b/src/contents/Human Practices/Further Engagement/Collaborations.tsx
index 8bf8763c215fde25c2a49f85df42f6e1afd370b3..ec9083d11825569ed2c7778edd5c2f92290f47da 100644
--- a/src/contents/Human Practices/Further Engagement/Collaborations.tsx
+++ b/src/contents/Human Practices/Further Engagement/Collaborations.tsx
@@ -23,7 +23,7 @@ export function HPCollabs(){
<LoremMedium/>
</div>
<div id="colls2024" className="coll-cycletab" style={{display: "none"}}>
- <H4 id="student-academy-heading" text="Student academy on the topic of synthetic biology"/>
+ <H4 id="student-academy-heading" text="Collaboration with Lingköping"/>
<LoremMedium/>
</div>
<div id="Handbook" className="coll-cycletab" style={{display: "none"}}>
diff --git a/src/contents/safety.tsx b/src/contents/safety.tsx
index a8949a7b2350f60054e896769f6f1273237f7772..00848bca4550549a3965b37add8cf0593bb069ee 100644
--- a/src/contents/safety.tsx
+++ b/src/contents/safety.tsx
@@ -20,42 +20,42 @@ export const Safety: React.FC = () =>{
<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:
- <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.
- <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.
- <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.
- <strong>Documentation:</strong> All work steps, materials used and cell lines were carefully documented to ensure traceability and safety.
- <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.
+ <br></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></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></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></br><strong>Documentation:</strong> All work steps, materials used and cell lines were carefully documented to ensure traceability and safety.
+ <br></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.
</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.
- <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.
- <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
+ <br></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></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></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>
<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:
- <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.
+ <br></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.
We submitted the yeast strain <i>Pichia pastoris</i> (SMD1163) for the protein expression of Fanzor.
- <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.
+ <br></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></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>
<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.
- <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.
- <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.
+ <<br></br>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></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.
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.
<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.
- 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. 
+ <br></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. 
</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:
- <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.
+ <br></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>
</div>
</Section>
@@ -125,54 +125,136 @@ export const Safety: React.FC = () =>{
</Section>
<Section title="References" id="References">
<ol>
- {/*<!-- Citation num 1--> */}
-<li typeof="schema:WebPage" role="doc-biblioentry" property="schema:citation" id="desc-1">
- <span property="schema:author" typeof="schema:Organisation">
- <span property="schema:Name">Chadwick, Ruth F.</span>.
- </span>
- <span property="schema:name">Encyclopedia of applied ethics.</span>
- <i property="schema:publisher" typeof="schema:Organization">Academic Press</i>
- (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2012">2012</time>).
-</li>
-
-{/*<!-- Citation num 2--> */}
-<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-2">
- <span property="schema:author" typeof="schema:Person">
- <span property="schema:Name"> Rubeis, G.</span>;
- <span property="schema:Name"> Steger, F.</span>
- </span>
- <span property="schema:name"> Risks and benefits of human germline genome editing: An ethical analysis. </span>
- <i property="schema:publisher" typeof="schema:Organization"> Asian Bioethics Review</i>
- <b property="issueNumber" typeof="PublicationIssue"> 10</b>,
- <span property="schema:pageBegin">133–141</span>
- (<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2018">2018</time>).
- <a className="doi" href="https://doi.org/10.1007/s41649-018-0056-x"> doi: 10.1007/s41649-018-0056-x</a>
-</li>
-
-{/*<!-- Citation num 3--> */}
-<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-3">
- <span property="schema:author" typeof="schema:Person">
- <span property="schema:Name"> Ansah, E.</span>
- </span>
- <span property="schema:name"> Ethical Challenges and Controversies in the Practice and Advancement of Gene Therapy. </span>
- <i property="schema:publisher" typeof="schema:Organization"> Advances in Cell and Gene Therapy</i>
- <b property="issueNumber" typeof="PublicationIssue"> 2022</b>,
- <span property="schema:pageBegin">1–5</span>
- (<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2022">2022</time>).
- <a className="doi" href="https://doi.org/10.1155/2022/1015996"> doi: 10.1155/2022/1015996</a>
-</li>
-
-{/*<!-- Citation num 4--> */}
-<li typeof="schema:WebPage" role="doc-biblioentry" property="schema:citation" id="desc-4">
- <span property="schema:author" typeof="schema:Organisation">
- <span property="schema:Name">Pugh, Jonathan</span>.
- </span>
- <span property="schema:name">Autonomy, Rationality, and Contemporary Bioethics.</span>
- <i property="schema:publisher" typeof="schema:Organization">Oxford University PressOxford</i>
- (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
-</li>
-
-
+ {/* <!-- Citation num 1--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
+ {/* <!-- Citation num 2--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
+ {/* <!-- Citation num 3--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
+ {/* <!-- Citation num 4--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
+ {/* <!-- Citation num 5--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
+ {/* <!-- Citation num 6--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
+ {/* <!-- Citation num 7--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
+ {/* <!-- Citation num 8--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
+ {/* <!-- Citation num 9--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
+ {/* <!-- Citation num 10--> */}
+ <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-1">
+ <span property="schema:author" typeof="schema:Person">
+ <span property="schema:Name">Scotet, V.</span>,
+ <span property="schema:Name">Gutierrez, H.</span>,
+ <span property="schema:Name">Farrell, P. </span>
+ </span>
+ <span property="schema:name">Newborn Screening for CF across the Globe—Where Is It Worthwhile? </span>
+ <i property="schema:publisher" typeof="schema:Organization">Int J Neonatal Screen </i>
+ <b property="issueNumber" typeof="PublicationIssue">6</b>,
+ (<time property="schema:datePublished" datatype="xsd:gYear" dateTime="2020">2020</time>).
+ <a className="doi" href="https://doi.org/10.3390/ijn6010018"> doi: 10.3390/ijn6010018</a>
+ </li>
</ol>
</Section>
</>
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index 06999a35f26fe2020afd5d307a2a5d7599e1bad2..a3474904a2b8ed14963c41bed792c7f34708456d 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -7,8 +7,8 @@ import { Section } from "../components/sections";
export function Team() {
useTabNavigation();
let teambriefe = createSteckbriefe(teammembers);
- let advisorbriefe = createSteckbriefe(advisors);
- let sinan = createSteckbriefe(instructor);
+ let advisorbriefe = createPiSteckbriefe(advisors);
+ let sinan = createPiSteckbriefe(instructor);
let pibriefe = createPiSteckbriefe(pis)
return (
<>
@@ -108,7 +108,7 @@ function createSteckbriefe(data: Array<SteckbriefInterface>){
let facts = <div className={frontbriefclass}><div className=""> <b>Age:</b> {data[index].age} </div> <br/> {headof} <div> <b>Part of:</b> {jobs}</div> <br/> <div className=""> <b>Major:</b> {data[index].studiengang} </div> <br/> <div className=""> <b>Scientific interests:</b> {data[index].scientificinterests} </div> </div>;
let backbutton = <div className={backbriefclass} style={{display: "none"}}> <div className="parent-button"><button onClick={flipBack(thename)} className="frontbutton">Click me</button></div></div>
let funfactlist = <div className={backbriefclass} style={{display: "none"}}><b>Funfacts: </b><ul> {funfacts}</ul></div>
- let favmusic = <><h6>Favourite music:</h6><p>{data[index].favlabmusic}</p></>
+ let favmusic = <><h6>Favourite lab music:</h6><p>{data[index].favlabmusic}</p></>
let hobbielist = <><h6>Hobbies:</h6> <p> {hobbs} </p></>
let backparagraph = <div className={"row "+backbriefclass} style={{display: "none"}}>{favmusic}{hobbielist}</div>
let paragraphs = <div className="steckbody"> {frontparagraph} {backparagraph} </div>
@@ -203,7 +203,7 @@ function createPiSteckbriefe(data: Array<SteckbriefInterface>){
let facts = <div className={frontbriefclass}><div className=""> <b>Age:</b> {data[index].age} </div> <br/> {headof} <div> <b>Affiliation:</b> {jobs}</div> <br/> <div className=""> <b>Regular Job:</b> {data[index].studiengang} </div> <br/> <div className=""> <b>Scientific interests:</b> {data[index].scientificinterests} </div> </div>;
let backbutton = <div className={backbriefclass} style={{display: "none"}}> <div className="parent-button"><button onClick={flipBack(thename)} className="frontbutton">Click me</button></div></div>
let funfactlist = <div className={backbriefclass} style={{display: "none"}}><b>Funfacts: </b><ul> {funfacts}</ul></div>
- let favmusic = <><h6>Favourite music:</h6><p>{data[index].favlabmusic}</p></>
+ let favmusic = <><h6>Favourite lab music:</h6><p>{data[index].favlabmusic}</p></>
let hobbielist = <><h6>Hobbies:</h6> <p> {hobbs} </p></>
let backparagraph = <div className={"row "+backbriefclass} style={{display: "none"}}>{favmusic}{hobbielist}</div>
let paragraphs = <div className="steckbody"> {frontparagraph} {backparagraph} </div>
diff --git a/src/data/drug-data.tsx b/src/data/drug-data.tsx
index f390e6022c0e39058eb2df021995d0a012764549..28fd0ce0efef0b739c64ecfd60ecdaa9d6bf97ec 100644
--- a/src/data/drug-data.tsx
+++ b/src/data/drug-data.tsx
@@ -1,7 +1,7 @@
export interface DrugDatensatz {
name: string;
- picture: string;
+
introduction: string;
examples: Array<example>;
@@ -9,7 +9,7 @@ export interface DrugDatensatz {
interface example{
title: string,
- text: string
+ text: "ystic fibrosis therapy means inevitably a complex and customized treatment plan for each patient. It consists of a range of components. These include medication such as CFTR modulators and antibiotics as well as inhalation therapy and mucolytics, physiotherapy, nutritional therapy and sports therapy. It is therefore essential that CF patients receive treatment at a specialist centre [1]. "
}
export const drugdata: (Array<DrugDatensatz>) = [
@@ -20,7 +20,7 @@ export const drugdata: (Array<DrugDatensatz>) = [
examples: [
{
title: "",
- text: "string"
+ text: "test"
},
{
title: "",
diff --git a/src/sidebars/engS.tsx b/src/sidebars/engS.tsx
index 3e34a530ed4c840692ab2cb952ae1cf71201dc1f..1d174782f27b3af8967e3aeaa6962aa834863029 100644
--- a/src/sidebars/engS.tsx
+++ b/src/sidebars/engS.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
import { NewHighlight } from "../utils/Highlight-functions";
import { openThem } from "../utils/openThem";
import { BackUp } from "../components/Buttons";
+import { useNavigation } from "../utils";
export function EngSide(){
@@ -26,7 +27,7 @@ export function EngSide(){
}
console.log(nums)
-
+ const {goToPageWithTabAndScroll} = useNavigation();
return(
<div className="col-2 d-none d-lg-block" >
<br/>
@@ -51,23 +52,23 @@ export function EngSide(){
<summary>Proof Of Concept</summary>
<span id="proof-of-concept" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#cyc1">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc1"})}>
<span id="subtitle0" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#cyc2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc2"})}>
<span id="subtitle1" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#cyc3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc3"})}>
<span id="subtitle2" className='sideitem'>Iteration 3</span>
</a></li>
- <li><a href="#cyc4">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Proof of Concept", scrollToId: "cyc4"})}>
<span id="subtitle3" className='sideitem'>Iteration 4 </span>
</a></li>
</ul>
</span>
</div>
</div>
- </a>
+ </a>
</div>
<div>
<a onClick={openThem({it: "pe-systems", scrollToId: "PE Systems"})}>
@@ -76,13 +77,13 @@ export function EngSide(){
<summary>PE Systems</summary>
<span id="pe-systems" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#pe1">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
<span id="subtitle4" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#pe2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
<span id="subtitle5" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#pe3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
<span id="subtitle6" className='sideitem'>Iteration 3</span>
</a></li>
</ul>
@@ -98,22 +99,22 @@ export function EngSide(){
<summary>Nikase</summary>
<span id="nikase" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#nik1">
+ <li ><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik1"})}>
<span id="subtitle7" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#nik2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik2"})}>
<span id="subtitle8" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#nik3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik3"})}>
<span id="subtitle9" className='sideitem'>Iteration 3</span>
</a></li>
- <li><a href="#nik4">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik4"})}>
<span id="subtitle10" className='sideitem'>Iteration 4</span>
</a></li>
- <li><a href="#nik5">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik5"})}>
<span id="subtitle11" className='sideitem'>Iteration 5</span>
</a></li>
- <li><a href="#nik6">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "nikase", scrollToId: "nik6"})}>
<span id="subtitle12" className='sideitem'>Iteration 6</span>
</a></li>
</ul>
@@ -129,22 +130,22 @@ export function EngSide(){
<summary>pegRNA</summary>
<span id="pegrna" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#peg1">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg1"})}>
<span id="subtitle13" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#peg2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg2"})}>
<span id="subtitle14" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#peg3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg3"})}>
<span id="subtitle15" className='sideitem'>Iteration 3</span>
</a></li>
- <li><a href="#peg4">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg4"})}>
<span id="subtitle16" className='sideitem'>Iteration 4</span>
</a></li>
- <li><a href="#peg5">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg5"})}>
<span id="subtitle17" className='sideitem'>Iteration 6</span>
</a></li>
- <li><a href="#peg6">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "pegRNA", scrollToId: "peg6"})}>
<span id="subtitle18" className='sideitem'>Iteration 7</span>
</a></li>
</ul>
@@ -160,13 +161,13 @@ export function EngSide(){
<summary>Delivery</summary>
<span id="delivery" className="sidesubtab" style={{display: "none"}}>
<ul>
- <li><a href="#del2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del1"})}>
<span id="subtitle19" className='sideitem'>Iteration 1</span>
</a></li>
- <li><a href="#del2">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del2"})}>
<span id="subtitle20" className='sideitem'>Iteration 2</span>
</a></li>
- <li><a href="#del3">
+ <li><a onClick={() => goToPageWithTabAndScroll({path: "", tabId: "Delivery", scrollToId: "del3"})}>
<span id="subtitle21" className='sideitem'>Iteration 3</span>
</a></li>
</ul>