Skip to content
Snippets Groups Projects
Commit fe5b7d7f authored by Maximilian Leo Huber's avatar Maximilian Leo Huber
Browse files

changed 'breathe' text

parent 7136dfc1
No related branches found
No related tags found
No related merge requests found
Pipeline #442423 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/Breathe.tsx
+ 90
− 139
View file @ fe5b7d7f
import { useEffect, useRef, useState } from "react";
export function Breathe(){
export function Problems(){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
......@@ -47,188 +47,139 @@ export function Breathe(){
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!);
}, []);
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";
return (
<>
{/* purple */}
{/* One */}
<div
className='col'
style={{ 'height': '700vh'}}
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
ref={domRef}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'left': '20vw',
'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/breath/textless/breath-only-1.webp">
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-1.webp">
</img>
{/* 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': '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/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': '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/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>
{/* black */}
{/* Two */}
<div
style={{ 'height': '300vh'}} ref={domRef5}>
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
ref={domRef2}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'left': '20vw',
'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/breath/textless/breath-only-2.webp">
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-2.webp">
</img>
<div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{
<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={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'left': '20vw',
'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={{
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>
</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': '30vw',
'left': '20vw',
'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>
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', '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>
{/* grey */}
{/* Five */}
<div
style={{ 'height': '200vh'}} ref={domRef8}>
className='col'
style={{
'height': '100vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
ref={domRef5}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'left': '20vw',
'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/breath/textless/breath-only-3.webp">
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-5.webp">
</img>
</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>
<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>
</>
);
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment