Skip to content
Snippets Groups Projects
Commit 6234fbd9 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

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

parents 49d53cc1 a06e2e43
No related branches found
No related tags found
No related merge requests found
Pipeline #426646 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/Breathe.tsx
+ 5
− 3
View file @ 6234fbd9
......@@ -179,7 +179,8 @@ export function Breathe(){
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p>With every second, you feel more stressed.</p>
<p>Your body fights against it, and your mind begins to panic...</p>
<p>Your body fights against it, and</p>
<p>your mind begins to panic...</p>
<div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{
'position': 'fixed',
......@@ -214,8 +215,9 @@ export function Breathe(){
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
</div>
<p>Imagine yourself living in constant fear of suffocation, because breathing deeply is a <strong>privilage not everyone can enjoy</strong>.</p>
<p>Imagine yourself living in constant fear of</p>
<p>suffocation, because breathing deeply is a</p>
<p><strong>privilage not everyone can enjoy</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
......
src/components/FadeIn.tsx
+ 1
− 3
View file @ 6234fbd9
......@@ -6,8 +6,6 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
{/* debug */}
entries.forEach(entry => console.log(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
......@@ -46,7 +44,7 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
</img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '90vh' }}></div>
<div className='col' style={{ 'height': '95vh' }}></div>
</>
);
}
\ No newline at end of file
src/components/Footer.tsx
+ 1
− 1
View file @ 6234fbd9
......@@ -44,7 +44,7 @@ export function Footer() {
<div className="small-only col-6"></div>
<div className="col">
<a href="./partners">
<h6 className="alink">Spornsors and partners</h6>
<h6 className="alink">Sponsors and partners</h6>
</a>
</div>
<div className="small-none col" style={{paddingLeft: "20px"}}>
......
src/components/Problems.tsx 0 → 100644
+ 160
− 0
View file @ 6234fbd9
import { useEffect, useRef, useState } from "react";
export function Problems(){
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/problems/cyfib-1.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
</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/problems/cyfib-2.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</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': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</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': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
</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/problems/cyfib-5.webp">
</img>
<p style={{'position': 'fixed','top': '20vh', 'left': '20vw', 'zIndex': '1'}}>Text Here</p>
</div>
</>
);
}
\ No newline at end of file
src/contents/Home.tsx
+ 27
− 17
View file @ 6234fbd9
import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
import { Problems } from "../components/Problems";
export function Home() {
return (
......@@ -10,6 +11,8 @@ export function Home() {
<div className='col' style={{ 'height': '70vh' }}></div>
<Breathe></Breathe>
<Problems></Problems>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-1.webp" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-2.webp" bg=''></FadeIn>
......@@ -18,23 +21,30 @@ export function Home() {
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-5.webp" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-6.webp" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/200k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-1-text.webp'></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/oneintwenty.gif" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/2k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-2-text.webp'></FadeIn>
<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/treatmentnoloop.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/gifs/3d-animation.gif" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/primeguide.webp" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precysepoc.webp" bg=''></FadeIn>
{/* Spacing Block */}
<div className='col' style={{ 'height': '150vh' }}></div>
<div className='col'>
<img src="https://static.igem.wiki/teams/5247/landing/gifs/200k-anim-transparent-bg.gif"></img>
</div>
<div className='col'>
<img src="https://static.igem.wiki/teams/5247/landing/gifs/oneintwenty.gif"></img>
</div>
<div className='col'>
<img src="https://static.igem.wiki/teams/5247/landing/gifs/2k-anim-transparent-bg.gif"></img>
</div>
<div className='col'>
<img src="https://static.igem.wiki/teams/5247/landing/gifs/3k-anim-transparent-bg.gif"></img>
</div>
<div className='col'>
<img src="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif"></img>
</div>
<div className='col'>
<img src="https://static.igem.wiki/teams/5247/landing/precyse.gif"></img>
</div>
<div className='col'>
<img src="https://static.igem.wiki/teams/5247/landing/gifs/3d-animation.gif"></img>
</div>
<div className='col'>
<img src="https://static.igem.wiki/teams/5247/landing/gifs/proofofconcept.gif"></img>
</div>
</div>
</div>
</div>
......
src/contents/human-practices.tsx
+ 7
− 3
View file @ 6234fbd9
......@@ -206,7 +206,7 @@ export function HumanPractices() {
<ButtonOne text="Overview" open="overview"></ButtonOne>
</div>
<div className="col">
<ButtonOne text="MukoMove" open="mukomove"></ButtonOne>
<ButtonOne text="MUKOmove" open="mukomove"></ButtonOne>
</div>
<div className="col">
<ButtonOne text="Teuto ruft!" open="teutoruft"></ButtonOne>
......@@ -214,6 +214,9 @@ export function HumanPractices() {
<div className="col">
<ButtonOne text="Schüler*innen Akademie" open="akademie"></ButtonOne>
</div>
<div className="col">
<ButtonOne text="waffel sale" open="waffel sale"></ButtonOne>
</div>
</div>
<div id="overview" className="cycletab" style={{display: "block"}}>
<H2 id="edu-out-heading" text="Our education and outreach"/>
......@@ -234,14 +237,15 @@ export function HumanPractices() {
</div>
</div>
</div>
<div id="mukomove" className="cycletab" style={{display: "none"}}>
<div id="waffle sale" className="cycletab" style={{display: "none"}}></div>
<div id="MUKOmove" className="cycletab" style={{display: "none"}}>
<H2 id="cf-month" text="Cystic fibrosis awareness month"/>
<div className="row">
<div className="full-small col-3">
<img className="max400" src="https://static.igem.wiki/teams/5247/photos/for-wiki-texts/po-mukomove/wir-plakat-mukomove.jpeg"></img>
</div>
<div className="col">
<h3>What is MUKOMOVE?</h3>
<h3>What is MUKOmove?</h3>
<p>As part of the cystic fibrosis awareness month May, we took part in this year's <a href="https://www.muko.info/mukomove">MUKOmove</a> from May 8th to May
12th under the team name iGEM Bielefeld. MUKOmove is a participatory sports initiative organized by
<a href="https://www.muko.info/"> Mukoviszidose e.V.</a>, the German Cystic Fibrosis Association, aimed at raising awareness and funds
......
src/headers/safe-h.tsx
+ 1
− 1
View file @ 6234fbd9
export function SAFEH() {
return (
<HeaderBox title="Safety">
<HeaderBox title="Biosafety">
</HeaderBox>
);
......
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