Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • 2024/bielefeld-cebitec
  • l-sanfilippo/bielefeld-ce-bi-tec-temp
2 results
Show changes
Showing
with 960 additions and 1241 deletions
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
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!);
}, []);
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 failue an death" ;
const Prob21 = "Chronic inflammation occurs periodically";
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";
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>
</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': '17vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', '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': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-3.webp">
</img>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','left': '10vw','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', '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': '20vw',
'width': '60vw',
'height': '60vh',
}}
src="https://static.igem.wiki/teams/5247/landing/problems/cyfib-4.webp">
</img>
<p style={{'position': 'fixed','top': '17vh', 'width': '82vw','left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw','left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</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': '17vh', 'width': '82vw','left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
<p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'left': '10vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
<p id="breatht1"style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
<p id="breatht2"style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
<p id="breath3"style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
<p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}></p>
</div>
<div id="sciency"></div>
</>
);
}
\ No newline at end of file
import { HideSolution, ShowSolution } from "./Buttons";
interface QuizProps{
name: string;
front: string;
back: string
}
export function QuizQuestion({name, front, back}: QuizProps){
return(
<div className="quiz-wrapper">
<div className="col quiz-front" id={`front-${name}`}>
{QuizHeading}
<div className="row quiz-text">
<div className="col">
{front}
</div>
</div>
<br/>
<div className="row quiz-button-box">
<ShowSolution element={name}/>
</div>
</div>
<div className="col quiz-back" id={`back-${name}`} style={{display: "none"}}>
{QuizHeading}
<div className="row quiz-text">
<div className="col">
{back}
</div>
</div>
<br/>
<div className="row quiz-button-box">
<HideSolution element={name}/>
</div>
</div>
</div>
)
}
const QuizHeading = <div className="col"><div className="quiz-heading">Quiz Question!</div></div>
\ No newline at end of file
......@@ -4,10 +4,10 @@ export function BlockQuote({text, cite}: {text: string; cite: string}){
return(
<div className="blockquote-wrapper">
<div className="blockquote">
<h2>
<h2 className="block-h2">
{text}
</h2>
<h4><em>{cite}</em></h4>
<h4 className="block-h4"><em>{cite}</em></h4>
</div>
</div>
)
......@@ -19,10 +19,10 @@ export function BlockQuoteB({text, cite, id}: {text: string; cite: string, id?:
return(
<div className="blockquote-wrapper">
<div className="blockquotex">
<h2>
<h2 className="block-h2">
{text}
</h2>
<h4><em>{cite}</em> <a href={h}><sup>{id}</sup></a></h4>
<h4 className="block-h4"><em>{cite}</em> <a href={h}><sup>{id}</sup></a></h4>
</div>
</div>
)
......
......@@ -29,14 +29,15 @@ export const ScrollLink: React.FC<ScrollLinkProps> = ({ targetId, label }) => {
top: scrollOffset,
behavior: "smooth"
});
console.log(`Scrolled to ${targetId}`)
} else {
console.error(`Element with ID ${targetId} not found.`);
}
};
return (
<a href={`#${targetId}`} onClick={handleClick}>
{label}
<a className="scrolllink" href={`#${targetId}`} onClick={handleClick}>
<span>{label}</span>
</a>
);
};
......
......@@ -63,7 +63,7 @@ function Sidebar(){
console.log(nums)
let content = [];
let content: JSX.Element[] = [];
for(let idx in nums){
const item = nums[idx];
/* console.log("idx: " + idx);
......
......@@ -692,13 +692,13 @@ export function Complex(){
cy="641.6452"
r="9" />
<path
style={{fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 525.09492,662.08075 C 375.66161,714.42751 375.66161,714.42751 375.66161,714.42751"
id="path89" />
<ScrollLinkWithChild targetId="riboswitch">
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="ribotext"
......@@ -706,36 +706,36 @@ export function Complex(){
x="24.838236"
y="650.23364"
id="ribotext"><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="ribotext">Riboswitch</tspan></tspan></text>
</ScrollLinkWithChild>
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 714.57654,286.73782 C 603.08853,373.95263 603.08853,373.95263 603.08853,373.95263"
id="path90" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 1103.7358,196.5664 C 1273.6985,45.590255 1273.6985,45.590255 1273.6985,45.590255"
id="path91" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="m 1379.6899,405.17969 c 155.4063,-8.16843 155.4063,-8.16843 155.4063,-8.16843"
id="path92" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="m 1047.3061,690.69055 c 108.107,155.37789 108.107,155.37789 108.107,155.37789"
id="path93" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="m 440.96587,225.1945 c -203.4394,37.82614 -203.4394,37.82614 -203.4394,37.82614"
id="path94" />
<path
style={{fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"7",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
d="M 372.73265,118.88705 C 234.25926,81.796787 234.25926,81.796787 234.25926,81.796787"
id="path95" />
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="stemlooptext"
......@@ -743,11 +743,11 @@ export function Complex(){
x="24.838236"
y="650.23364"
id="stemlooptext"><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="stemlooptext">Stem Loop</tspan></tspan></text>
<a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/engineering?tab=')}>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="rnabindingtext"
......@@ -763,7 +763,7 @@ export function Complex(){
{/* pegRNA Text */}
<a onClick={() => goToPagesAndOpenTab('tab-pegrna', '/engineering?tab=')}>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial", whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial", whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="pegrnatext"
......@@ -771,7 +771,7 @@ export function Complex(){
x="24.838236"
y="650.23364"
id="pegrnatext"><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="pegrnatext">pegRNA</tspan></tspan></text>
</a>
<g
......@@ -780,7 +780,7 @@ export function Complex(){
<a onClick={() => goToPagesAndOpenTab('tab-nikase', '/engineering?tab=')}>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="nikasetext"
......@@ -792,7 +792,7 @@ export function Complex(){
</g>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"#000000",fillOpacity:"1",stroke:"#000000",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"var(--offblack)",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:0.326363,strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="linkertext"
......@@ -802,7 +802,7 @@ export function Complex(){
id="tspan12">Linker</tspan></text>
<text
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"#000000",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontStyle:"normal",fontVariant:"normal",fontWeight:"normal",fontStretch:"normal",fontSize:"15.6654px",fontFamily:"Arial",whiteSpace:"pre",inlineSize:"123.911",display:"inline",fill:"none",fillOpacity:"1",stroke:"var(--offblack)",strokeWidth:"0.326363",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
x="24.838236"
y="650.23364"
id="text89-49"
......@@ -810,11 +810,11 @@ export function Complex(){
x="24.838236"
y="650.23364"
id="PEtext"><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="PEtext">PE</tspan><tspan
style={{fontSize:"65%",baselineShift:"super"}}
id="PEtextlow">CO</tspan><tspan
style={{fill:"#000000"}}
style={{fill:"var(--offblack)"}}
id="PEtext">-Mini RT</tspan></tspan></text>
</svg>
</>
......@@ -865,7 +865,7 @@ export function EngineeringCycle(){
id="path25"
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text31"
transform="translate(5.6902194,-0.11551883)"><textPath
xlinkHref="#path25"
......@@ -891,7 +891,7 @@ export function EngineeringCycle(){
style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text28"
transform="translate(-0.03023506,-5.9602336)"><textPath
......@@ -915,7 +915,7 @@ export function EngineeringCycle(){
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text32"
transform="translate(-5.7110315,1.7453243)"><textPath
xlinkHref="#path24"
......@@ -930,7 +930,7 @@ export function EngineeringCycle(){
transform="matrix(2.8248588,0,0,2.8248588,-67.797781,-207.96977)" />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text29"
transform="translate(8.4052921,8.8553334)"><textPath
xlinkHref="#path22"
......@@ -985,7 +985,7 @@ export function EngineeringCycleZwei(){
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#850f78",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text31"
transform="translate(5.6902194,-0.11551883)"><textPath
id="textPath33">Learn<tspan
......@@ -1010,7 +1010,7 @@ export function EngineeringCycleZwei(){
style={{stroke:"#a0a7f3",strokeWidth:"15",strokeDasharray:"none",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text28"
transform="translate(-0.03023506,-5.9602336)"><textPath
id="textPath28">Test</textPath></text>
......@@ -1032,7 +1032,7 @@ export function EngineeringCycleZwei(){
style={{strokeWidth:"15",strokeDasharray:"none",stroke:"#f57d22",strokeOpacity:"1"}} />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text32"
transform="translate(-5.7110315,1.7453243)"><textPath
id="textPath32">Build<tspan
......@@ -1046,7 +1046,7 @@ export function EngineeringCycleZwei(){
transform="matrix(2.8248588,0,0,2.8248588,876.19464,131.34384)" />
<text
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"#000000",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
style={{fontSize:"17.3333px",lineHeight:"0",fontFamily:"Arial",fill:"var(--offblack)",fillOpacity:"1",stroke:"none",strokeWidth:"15",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"none",strokeOpacity:"1",paintOrder:"fill markers stroke"}}
id="text29"
transform="translate(952.39772,348.16894)"><textPath
id="textPath34">Design<tspan
......
import { Part } from "../data/parts";
import { Res } from "../data/results-table";
export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}){
let list: JSX.Element[] = [];
for (let index = 0; index < data.length; index++) {
list.push(
<tr>
<td>{data[index].partname}</td>
<td><a href={data[index].url}>{data[index].registrycode}</a></td>
<td>{data[index].description}</td>
<td>{data[index].length}</td>
<td>{data[index].type}</td>
</tr>
)
}
let heads: JSX.Element[] = [];
for (let index = 0; index < cols.length; index++) {
heads.push(<td><b>{cols[index]}</b></td>)
}
return(
<div className="flex flex-col">
<div className="min-w-full overflow-x-auto">
<div className="inline-block min-w-full">
<div className="overflow-hidden p-2">
<table className="text-center parttable">
<thead className="bg-d">
<tr>
{heads}
</tr>
</thead>
<tbody>
{list}
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
export function ResTable({data, cols}: {data: Array<Res>, cols: Array<string>}){
let list: JSX.Element[] = [];
for (let index = 0; index < data.length; index++) {
list.push(
<tr>
<td>{data[index].nr}</td>
<td>{data[index].silent}</td>
<td>{data[index].pbs}</td>
<td>{data[index].rtt}</td>
<td>{data[index].q1}</td>
</tr>
)
}
let heads: JSX.Element[] = [];
for (let index = 0; index < cols.length; index++) {
heads.push(<td><b>{cols[index]}</b></td>)
}
return(
<div className="flex flex-col">
<div className="min-w-full overflow-x-auto">
<div className="inline-block min-w-full">
<div className="overflow-hidden p-2">
<table className="text-center restable">
<thead className="bg-d">
<tr>
{heads}
</tr>
</thead>
<tbody>
{list}
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
\ No newline at end of file
// The main tab has to be given display: block; via id css or be given the id "First"
export function ButtonRowTabs({data, cla}: {data: Array<TabDatensatz>, cla: string}) {
let rows = []
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
rows.push(
<div id={data[i].cssname} className={cla}>
{data[i].node}
</div>
)
if(data[i].main == true){
rows.push(<div id={data[i].cssname} className={cla} style={{display: "block"}}>
{data[i].node}
</div>)
}
else{
rows.push(<div id={data[i].cssname} className={cla} style={{display: "none"}}>
{data[i].node}
</div>)
}
}
return rows;
}
import React from "react";
import { BlockQuoteB } from "./Quotes";
import { TimelineDatenpunkt } from "./data/hptimelinedata";
import { TimelineDatenpunkt } from "../data/hptimelinedata";
import Collapsible from "./Collapsible";
import { stringToSlug } from "../utils";
/* import { stringToSlug } from "../utils"; */
export function BFHStyleTabs({data, cla}: {data: Array<TimelineDatenpunkt>, cla: string}) {
let rows = []
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
var problem: Boolean = false;
var problem_desc: Array<string> = [];
......@@ -28,9 +37,18 @@ import { BlockQuoteB } from "./Quotes";
else if(data[i].language === "de"){
lang = "Original language: German"
}
else if(data[i].type != "meta"){
else{
lang = ""
}
/* else if(data[i].type != "meta"){
problem = true;
problem_desc.push("interview language");
} */
/* Expert on */
let expert = "";
if (data[i].experton) {
expert = `Expert on ${data[i].experton}`;
}
/* Aim/Goal */
......@@ -52,13 +70,72 @@ import { BlockQuoteB } from "./Quotes";
quoted = data[i].vorname + " " + data[i].nachnname;
}
}
else{
/* else{
problem = true;
problem_desc.push("quote missing");
} */
let inv_img: React.ReactNode = <></>;
let imp_img: React.ReactNode = <></>;
let aim_img: React.ReactNode = <></>;
// Restliche Logik der Schleife...
// Bildzuweisungen basierend auf den Daten
if (data[i].pictureurl_interview) {
inv_img = <div className="hti-box">
<img src={data[i].pictureurl_interview} className="hp-timeline-img hti-right" />
</div>;
}
if (data[i].pictureurl_implementation) {
imp_img = <div className="hti-box">
<img src={data[i].pictureurl_implementation} className="hp-timeline-img hti-left" />
</div>;
}
if (data[i].pictureurl_aim) {
aim_img = <div className="hti-box">
<img src={data[i].pictureurl_aim} className="hp-timeline-img hti-left" />
</div>;
}
/* textparts */
let aiM: JSX.Element = <></>
if(data[i].aimofcontact){
aiM = <>
<h4>{goalheading}</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].aimofcontact}</p>
{aim_img}
</div>
</>
}
/* textparts */
if(data[i].aimofcontact === ""){
let insighT: JSX.Element = <></>
if(data[i].insights){
insighT = <>
<h4>Insights</h4>
<div className="flexbox">
{inv_img}
<p className="hp-timeline-p">{data[i].insights}</p>
</div>
</>
}
let imP: JSX.Element = <></>
if(data[i].implementation){
imP = <>
<h4>Implementation</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].implementation}</p>
{imp_img}
</div>
</>
}
/* if(data[i].aimofcontact === ""){
problem = true;
problem_desc.push(" " + goalheading + " missing");
}
......@@ -69,7 +146,7 @@ import { BlockQuoteB } from "./Quotes";
if(data[i].implementation === ""){
problem = true;
problem_desc.push(" implementation missing");
}
} */
/* Clarification */
var clari: React.ReactNode = <></>
if(data[i].clarification){
......@@ -87,7 +164,7 @@ import { BlockQuoteB } from "./Quotes";
problem = true;
problem_desc.push(" cardtext missing");
} */
if(data[i].type !== "meta"){
/* if(data[i].type !== "meta"){
if(data[i].affiliation === undefined || data[i].affiliation === ""){
problem = true;
problem_desc.push(" affiliation missing");
......@@ -96,13 +173,13 @@ import { BlockQuoteB } from "./Quotes";
problem = true;
problem_desc.push(" job missing" );
}
}
if(data[i].type === "meta"){
} */
/* if(data[i].type === "meta"){
if(data[i].quoteVorname === undefined || data[i].quoteVorname === ""){
problem = true;
problem_desc.push(" who is the quote from?" );
}
}
} */
/* References */
var refs: React.ReactNode = <></>;
......@@ -111,69 +188,129 @@ import { BlockQuoteB } from "./Quotes";
}
/* Further pictures */
var inv_img: React.ReactNode = <></>;
/* var inv_img: React.ReactNode = <></>;
if (data[i].pictureurl_interview) {
inv_img = <> <div className="hti-box"> <img src={data[i].pictureurl_interview} className="hp-timeline-img hti-right"/> </div> <div className="hti-abstand"/> </>
console.info("before: inv_img is: " + inv_img)
console.info(data[i].vorname + " has pictureurl_interview")
inv_img = <> <div className="hti-box"> <img id={`${data[i].vorname}-inv-img`} src={data[i].pictureurl_interview} className="hp-timeline-img hti-right"/> </div> <div className="hti-abstand"/> </>
console.info("after: inv_img is: " + inv_img)
}
var imp_img: React.ReactNode = <></>;
if (data[i].pictureurl_implementation) {
imp_img = <> <div className="hti-abstand"/><div className="hti-box">
<img src={data[i].pictureurl_implementation} className="hp-timeline-img hti-right"/>
console.info(data[i].vorname + " has pictureurl_implementation")
console.info("before: imp_img is: " )
console.info(imp_img)
imp_img = <> <div className="hti-abstand"/><div className="hti-box">
<img id={`${data[i].vorname}-imp-img`} src={data[i].pictureurl_implementation} className="hp-timeline-img hti-right"/>
</div>
</>
console.info("after: imp_img is: " )
console.info(imp_img)
}
var aim_img: React.ReactNode = <></>;
if (data[i].pictureurl_aim) {
console.info(data[i].vorname + " has pictureurl_aim")
console.info("before: aim_img is: " )
console.info(aim_img)
aim_img = <> <div className="hti-abstand"/> <div className="hti-box">
<img src={data[i].pictureurl_aim} className="hp-timeline-img hti-left"/>
</div></>
<img id={`${data[i].vorname}-aim-img`} src={data[i].pictureurl_aim} className="hp-timeline-img hti-left"/>
</div></>
console.info("after: aim_img is: " )
console.info(aim_img)
} */
let int = <></>;
let int_id = stringToSlug(`${data[i].vorname}-inv-collapsible`)
if (data[i].interview) {
int = <div className="hp-collaps"><Collapsible title="Read full Interview here" id={int_id}>
{data[i].interview}
</Collapsible></div>
}
let morepics: JSX.Element[] = [];
let oldpics: string[] = [];
/* if(data[i].more_pictures){ */
if (!data[i].aimofcontact && data[i].pictureurl_aim) {
oldpics.push(data[i].pictureurl_aim!)
}
if (!data[i].insights && data[i].pictureurl_interview) {
oldpics.push(data[i].pictureurl_interview!)
}
if (!data[i].implementation && data[i].pictureurl_implementation) {
oldpics.push(data[i].pictureurl_implementation!)
}
let newlist = oldpics.concat(data[i].more_pictures!);
for (let ind = 0; ind < (newlist.length - 1); ind += 2) {
console.info(data[i].vorname)
console.info(ind + newlist[ind])
console.info(ind+1 + newlist[ind+1])
morepics.push(
<div className="row">
<div className="col">
<img src={newlist[ind]}/>
</div>
<div className="col">
<img src={newlist[ind+1]}/>
</div>
</div>
)
}
/* } */
let node = <>
<br/>
<h3>{data[i].vorname} {data[i].nachnname}</h3>
<h3 id={`${data[i].interviewtabid}-heading`}>{data[i].title} {data[i].vorname} {data[i].nachnname}</h3>
<hr/>
<div className="row">
<div className="col-6">
<div className={"t-tag " + data[i].tag}>
{data[i].job}
{data[i].job} - {data[i].affiliation}
</div>
</div>
<div className="col-3">{lang}</div>
<div className="col" style={{padding: "5px"}}>{expert}</div>
<div className="col" style={{width: "20%", flex: "1 0 0%", padding: "5px"}}>{lang}</div>
</div>
<div className="row">
<div className="row align-items-stretch">
<div className="col d-flex flex-column">
<div className="row flex-grow-1 mitte">
<h4 style={{paddingTop: "50px"}}>Summary:</h4>
<p>{data[i].summary}</p>
</div>
<div className="row unten" style={{fontSize: "large"}}>
</div>
</div>
<div className="col-3">
<img className="middle sechpro img-fluid" src={data[i].pictureurl} />
</div>
</div>
{/* <div className="row">
<div className="col">
<BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
<p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
<p>{data[i].summary}</p>
</div>
<div className="col-3">
<img className="middle sechpro" src={data[i].pictureurl}/>
</div>
</div>
</div> */}
<h4>{goalheading}</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].aimofcontact}</p>
{aim_img}
</div>
{aiM}
{insighT}
<h4>Insights</h4>
<div className="flexbox">
{inv_img}
<p className="hp-timeline-p">{data[i].insights}</p>
</div>
{clari}
<h4>Implementation</h4>
<div className="flexbox">
<p className="hp-timeline-p">{data[i].implementation}</p>
{imp_img}
{imP}
<div className="col">
<BlockQuoteB text={data[i].quote!} cite={quoted}></BlockQuoteB>
</div>
{data[i].text}
{morepics}
{int}
{refs}
</>
if(problem){
......@@ -188,14 +325,14 @@ import { BlockQuoteB } from "./Quotes";
else{
if (data[i].interviewtabid === "timeline"){
rows.push(
<div id={data[i].interviewtabid} className={cla} style={{display: "block"}}>
<div id={data[i].interviewtabid} className={`${cla} timelinetab bg-db`} style={{display: "block"}}>
{node}
</div>
)
}
else{
rows.push(
<div id={data[i].interviewtabid} className={cla}>
<div id={data[i].interviewtabid} className={`${cla} timelinetab bg-db`}>
{node}
</div>
)
......@@ -204,4 +341,27 @@ import { BlockQuoteB } from "./Quotes";
}
return rows;
}
\ No newline at end of file
}
/* Interview */
export function OLDBFHStyleTabs({data, cla}: {data: Array<NodeDatensatz>, cla: string}) {
let rows: JSX.Element[] = []
for ( let i = 0; i < data.length; i++ ){
if (data[i].cssname == "timeline"){
rows.push(
<div id={data[i].cssname} className={cla} style={{display: "block"}}>
{data[i].node}
</div>
)
}
else{
rows.push(
<div id={data[i].cssname} className={cla}>
{data[i].node}
</div>
)
}
}
return rows;
}
import { BFHMoreButton } from "./Buttons";
interface ItemProps {
text?: string;
......@@ -18,6 +18,20 @@ interface ItemProps {
url: string,
url2?: string
}
interface NoButtItemProps {
text?: string;
heading?: string;
vorname?: string,
vorname2?: string,
nachname?: string,
nachname2?: string,
date: string ,
children: React.ReactNode;
tag: string,
color: string,
url: string,
url2?: string
}
......@@ -107,6 +121,21 @@ export const TimelineItem = ({ date, tag, color, children, csstag }:ItemProps)
</div>
</div>
);
export const NoButtTimelineItem = ({ date, tag, color, children }:NoButtItemProps) => (
<div className="timeline-item">
<div className="timeline-item-content">
<span className="tag" style={{ background: color }}>
{tag}
</span>
<time>{date}</time>
<hr/>
{children}
<span className="circle" />
</div>
</div>
);
export const PanelTimelineItem = () => (
<div className="timeline-item">
......@@ -117,30 +146,30 @@ export const PanelTimelineItem = () => (
<time>Panel Discussion</time>
<div className="row align-items-center panel-talk-gallery">
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/traci.jpg" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/traci.jpg" alt="pr-sample1" />
<div className="small middle">Taci <br/> Haddock</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/anita-sifuantes.png" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/anita-sifuantes.png" alt="pr-sample1" />
<div className="small middle">Ana <br/> Sifuentes</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/olivia.png" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/olivia.png" alt="pr-sample1" />
<div className="small middle">Olivia <br/> Mozolewska</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/middendorf.jpeg" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/middendorf.jpeg" alt="pr-sample1" />
<div className="small middle">Lasse <br/> Middendorf</div>
</div>
<div className="col">
<img className="img-round" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/nemanja.jpg" alt="pr-sample1" />
<img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/nemanja.jpg" alt="pr-sample1" />
<div className="small middle">Nemanja <br/> Stijepovic</div>
</div>
</div>
<hr/>
<span>Panel Discussion</span>
<div id="panel" style={{display: "none"}}>
So much more
<p>During the panel discussion, participants shared their experiences with iGEM and synthetic biology. Leslie, an advisor for the University of Windsor's team, detailed her transition from team member to advisor and her recent involvement in synthetic biology organizations. Anna, a former iGEM participant, spoke about her background in design and her current role as a senior content strategist at Freelitics, emphasizing her passion for science communication. Tracy recounted her extensive journey within iGEM, starting as a team leader at Boston University and eventually becoming the director of the competition at iGEM headquarters. After transitioning to Asimov, she highlighted her efforts to strengthen partnerships between Asimov and iGEM, including manufacturing distribution kits for participating teams. The discussion showcased the diverse paths taken by individuals in the field and their ongoing commitment to advancing synthetic biology.</p>
</div>
<BFHMoreButton it="panel"></BFHMoreButton>
......
import {ScrollLinkWithChild } from "../ScrollLink";
export interface TimelineDatenpunkt {
title?: string; /* Prof. , Dr., ... */
vorname: string;
nachnname: string;
pictureurl: string;
tag: StakeholderTag;
heading: string;
interviewtabid: string;
type?: TypeTag; /* nur falls es ein meta tag ist */
affiliation?: string;
job?: string;
cardtext: string;
language?: Language;
quote: string;
quoteVorname?: string; /* Wenn die quote nicht von der Person ist über die der Text ist */
quoteNachname?: string;
aimofcontact: string | Array<string> | Array<React.ReactNode>; /* Sobald Zitierungen drin sind oder Links muss es HTML Code sein, ansonsten gehen strings */
insights: string | Array<string> | Array<React.ReactNode>; /* Sobald Zitierungen drin sind oder Links muss es HTML Code sein, ansonsten gehen strings */
clarification?: string | Array<string> | Array<React.ReactNode>; /* Sobald Zitierungen drin sind oder Links muss es HTML Code sein, ansonsten gehen strings */
implementation: string | Array<string> | Array<React.ReactNode>; /* Sobald Zitierungen drin sind oder Links muss es HTML Code sein, ansonsten gehen strings */
pictureurl_interview?: string; /* Picture that goes into the paragraph "Insights" */
pictureurl_aim?: string; /* Picture that goes into the paragraph "Aim of contact" */
pictureurl_implementation?: string; /* Picture that goes into the paragraph "Implementation" */
more_pictures?: Array<string> ;
references?: Array<React.ReactNode>; /* Muss HTML Code sein - Liliana erstellt den aus Bib dateien */
}
type StakeholderTag = 'Industry' | 'Academia' | 'Patient' | 'Medical Professional' | 'Milestone' | 'Other';
type TypeTag = 'meta' ;
type Language = 'en' | 'de';
const pics: { [key: string]: string } = {
placeholder: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
max: "https://static.igem.wiki/teams/5247/photos/hp/hp-max-portrait.jpg",
kristian: "https://static.igem.wiki/teams/5247/photos/hp/kristian.jpeg",
olariu: "https://static.igem.wiki/teams/5247/photos/hp/olariu-cristian.jpg",
westhoff: "https://static.igem.wiki/teams/5247/photos/hp/hp-katrin-portrait.jpg",
mattijs: "https://static.igem.wiki/teams/5247/photos/hp/mattijs.jpg",
julia: "https://static.igem.wiki/teams/5247/photos/hp/julia.jpg",
kolonko: "https://static.igem.wiki/teams/5247/photos/hp/kolonko-neu.jpg",
svenja: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
berens: "https://static.igem.wiki/teams/5247/photos/hp/berens.jpg",
draeger: "https://static.igem.wiki/teams/5247/photos/hp/oliver-draeger-patch-clamp.jpeg",
winkeljann: "https://static.igem.wiki/teams/5247/photos/hp/rnhale-winkeljann.jpg",
kuehnel: "https://static.igem.wiki/teams/5247/photos/hp/hp-philippk-hnel.jpeg ",
};
/* {
vorname: "",
nachnname: "",
pictureurl: pics['placeholder'],
tag: "",
heading: "",
interviewtabid: "",
cardtext: "",
language: "",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
} */
/* WICHTIG!
Fehlende Infos einfach leer lassen und keine Dummy-Texte einfügen!
*/
export const timelinedata: Array<TimelineDatenpunkt> = [
{
vorname: "Building the team",
nachnname: "",
pictureurl: pics['placeholder'],
tag: "Other",
heading: "Development of a multidisciplinary team structure",
interviewtabid: "recruiting",
cardtext: "",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
type: "meta"
},
{
vorname: "Pitching ideas",
nachnname: "",
pictureurl: pics['placeholder'],
tag: "Other",
heading: "Getting Acquainted with Cystic Fibrosis",
interviewtabid: "firstpresi",
cardtext: "",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
type: "meta"
},
{
vorname: "Ideation",
nachnname: "",
pictureurl: pics['placeholder'],
tag: "Other",
heading: "Brainstorming and selection of ideas and concepts",
interviewtabid: "ideas",
cardtext: "",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
type: "meta"
},
{
title: "Prof. Dr.",
vorname: "Kristian",
nachnname: "Müller",
job: "Research Group Cellular and Molecular Biotechnology",
pictureurl: pics['kristian'],
tag: "Academia",
heading: "",
interviewtabid: "kristian",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Max",
nachnname: "Beckmann",
job: "Bielefeld University",
pictureurl: pics['max'],
tag: "Patient",
heading: "Gathering valuable insights from the patient’s perspective",
interviewtabid: "maxfirst",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
title: "XXX",
vorname: "Christoph",
nachnname: "Weber",
job: "",
pictureurl: pics['placeholder'],
tag: "Academia",
heading: "Feedback Session with Expert",
interviewtabid: "weber",
cardtext: "",
language: "en",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Exploring new ideas",
nachnname: "",
pictureurl: pics['placeholder'],
tag: "Other",
affiliation: "",
heading: "Further brainstorming on approaches",
interviewtabid: "brainstorming",
cardtext: "",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
type: "meta"
},
{
title: "Dr.",
vorname: "Michaela",
nachnname: "Bienert",
job: " Scientific Sales Representative for Cell Culture Products",
affiliation: "Stemcell",
pictureurl: pics['placeholder'],
tag: "Industry",
heading: "Determining the optimal cell media for experimentation",
interviewtabid: "michaela",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Looking for expertise",
nachnname: "",
pictureurl: pics['placeholder'],
tag: "Other",
heading: "Identifying key experts in cystic fibrosis and prime editing",
interviewtabid: "experts",
cardtext: "",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
type: "meta"
},
{
vorname: "Documenting progress",
nachnname: "",
pictureurl: pics['placeholder'],
tag: "Other",
heading: "Tracking progress in expert search and idea development",
interviewtabid: "progress",
cardtext: "",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
type: "meta"
},
{
vorname: "Katrin",
nachnname: "Westhoff",
job: "Physiotherapist",
affiliation: "Independent",
pictureurl: pics['westhoff'],
tag: "Medical Professional",
heading: "Interview with a specialized physiotherapist regarding breathing therapy for cystic fibrosis patients",
interviewtabid: "westhoffinv",
cardtext: "",
language: "de",
quote: "The more we know, the more opportunities we have.",
aimofcontact: "The objective of the contact was to gain in-depth insights into the treatment and care of children with cystic fibrosis. The therapist's expertise was intended to help develop a better understanding of the challenges and necessary measures in the treatment of this chronic disease. In addition, the aim was to ascertain how the therapy is implemented in everyday life and which specific approaches and methods are particularly effective.",
insights: "The interview yielded valuable insights into the regular implementation of the therapy, the use of aids and the adaptation of exercises to the individual needs of the patients. It was notable that the therapy has improved considerably thanks to better medication and adapted exercises, with a concomitant increase in life expectancy for children affected by cystic fibrosis. Of particular interest was the emphasis on the importance of sport and exercise, which should not only be therapeutically effective, but also increase quality of life. ",
implementation: "The following statement by Katrin Westhoff had a particularly profound impact on our project: 'The more we know, the more opportunities we have.' We learned from the interview that the current medication is already helping many patients to a huge extent, but that there is still a significant opportunity for improvement. After all, successful gene therapy would markedly enhance the quality of life for those affected. The findings of this project will be disseminated to the relevant researchers in order to facilitate the rapid improvement of the quality of life of all cystic fibrosis patients, regardless of their mutation. ",
pictureurl_interview: "https://static.igem.wiki/teams/5247/photos/hp/katrin-westhoff-zoom.webp",
},
{
vorname: "Cristian-Gabriel",
nachnname: "Olariu",
job: "pediatrician",
affiliation: "OWL University Hospital",
pictureurl: pics['olariu'],
tag: "Medical Professional",
heading: "Discussion with a pediatrician and his former patient about treatment challenges and perspectives",
interviewtabid: "olariu",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Mattijs",
nachnname: "Bulcaen",
job: "PhD Researcher at Laboratory for Molecular Virology & Gene Therapy",
affiliation: "KU Leuven",
pictureurl: pics['mattijs'],
tag: "Academia",
heading: "Discussion with a Prime Editing Expert on Similar Approaches for Different Mutations",
interviewtabid: "mattijsinv",
cardtext: "",
language: "en",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Nicole",
nachnname: "Friedlein",
job: "Research group on fundamental rights",
affiliation: "Universität Potsdam",
pictureurl: pics['placeholder'],
tag: "Academia",
heading: "Discussion on how health insurance companies manage cystic fibrosis patients and gene therapy treatments",
interviewtabid: "nicole",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Katrin",
nachnname: "Westhoff",
job: "physiotherapist",
affiliation: "",
pictureurl: pics['westhoff'],
tag: "Medical Professional",
heading: "In-Depth Visit to Specialized Physiotherapist for CF Breathing Therapy",
interviewtabid: "westhoffvisit",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Jukia",
nachnname: "XXX",
job: "parent",
affiliation: "",
pictureurl: pics['julia'],
tag: "Patient",
heading: "Interview with a CF Parent About Their Experience and Treatment Needs",
interviewtabid: "julia",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Joshua",
nachnname: "Bauder",
job: "parent and activist",
affiliation: "CF vests worldwide",
pictureurl: pics['placeholder'],
tag: "Patient",
heading: "Interview with a CF Parent and Global Advocate on Worldwide Support and Perspectives",
interviewtabid: "joshua",
cardtext: "",
language: "en",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
pictureurl_interview: ""
},
{
title: "Prof. Dr.",
vorname: "Erhard",
nachnname: "Wischmeyer",
job: "Research Group Cellular Neurophysiology",
affiliation: "Universität Bielefeld",
pictureurl: pics['placeholder'],
tag: "Academia",
heading: "Discussion on Techniques for Measuring CFTR Channel Functionality",
interviewtabid: "patchclamp",
cardtext: "",
language: "de",
quoteNachname: "Guckes",
quoteVorname: "Isabell",
quote: "We hadn’t initially considered patch-clamp measurements in our set of downstream applications, but it’s proven to be an exceptionally sensitive method for assessing CFTR conductance.",
aimofcontact: [<p>As part of our project, we aimed to demonstrate the functionality of the CFTR ion channel, after restoring
it through our optimized Prime Editing, by using Patch-Clamp measurements. To ensure the optimal use of the
Patch-Clamp and to gain an insight into electrophysiology, we asked experts from the medical faculty at
Bielefeld University to critically examine our measurement planning. Prof. Dr. Erhard Wischmeyer, an
experienced scientist in this field who has worked at the Max Planck Institute for Biophysical Chemistry
in Göttingen, the development site of the Patch-Clamp technique<ScrollLinkWithChild targetId="desc-1"><sup>1</sup></ScrollLinkWithChild>, and currently leads the Cellular
Neurophysiology working group at Bielefeld University, seemed to be an ideal interviewee. His
knowledge and experience promised valuable insights and advice for conducting and optimizing our
experiments. </p>],
insights: [ <><p>Prof. Dr. Wischmeyer taught us about the workflow of the Patch-Clamp technique. He highlighted the need
for specialized electrodes and glass pipettes that must form a smooth surface devoid of the extracellular
matrix (ECM). Additionally, he pointed out that measuring CFTR conductivity with the Patch-Clamp technique
poses a technical challenge due to the low currents involved<ScrollLinkWithChild targetId="desc-2"><sup>2</sup></ScrollLinkWithChild>. He recommended using expression vectors
for overexpressing the CFTR gene in HEK cells instead of epithelial cells from a nasal swab to achieve
better results. Since Patch-Clamp measurements require a very sensitive testing environment, even
challenging for the most experienced scientists, Prof. Dr. Wischmeyer invited us to conduct the
measurements together with members of his group.
</p>
<p>In addition to the Patch-Clamp technique, Prof. Dr. Wischmeyer informed us about E-cis measurements as a
current electrophysiological measurement method alongside the Patch-Clamp technique. This method allows
the measurement of the membrane potential above and below a monolayer of confluent cells<ScrollLinkWithChild targetId="desc-3"><sup>3</sup></ScrollLinkWithChild>. Consequently,
it enables precise measurement of conductivity dependent on CFTR expression. </p>
</>],
implementation: [<> <p>We decided to use HEK293T cells lines from Mattijs Bulcaen from KU Leuven [Link] which do overexpress the
correct CFTR and those which express CFTR with F508del for the Patch-Clamp measurements. To conduct the
Patch-Clamp experiments, we contacted the Cellular Neurophysiology group to perform the necessary
measurements. It was a pleasure to work together with Dr. Oliver Dräger[Link], who is working as a post-doc for
the Cellular Neurophysiology working group at Bielefeld University. He taught us about the Patch-Clamp
method and spent his valuable time supporting our project by guiding our Patch-Clamp measurements. </p>
<p>In summary, through the interview with Prof. Dr. Wischmeyer and the collaboration with his employee
Oliver Dräger, we gained valuable insights and optimized our approach to effectively investigate and
measure the functionality of the CFTR ion channel, thereby determining the efficiency of our Prime
Editing strategy. </p></>],
pictureurl_implementation: "https://static.igem.wiki/teams/5247/photos/for-wiki-texts/hp-patch-clamp/bild-interssierte-wissenschaftler-oho.jpeg",
pictureurl_aim: "https://static.igem.wiki/teams/5247/photos/for-wiki-texts/hp-patch-clamp/20240625-184032.jpg",
references: [
<ol>
{/*<!-- Citation num 1--> */}
<li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="bielefeld-cebitec/human-practices#desc-1">
<span property="schema:author" typeof="schema:Person">
<span property="schema:Name"> Roth, F.</span>;
<span property="schema:Name"> Draguhn, A.</span>
</span>
<span property="schema:name">&nbsp;Die Entwicklung der Patch-Clamp-Technik. </span>
<i property="schema:publisher" typeof="schema:Organization"> Springer eBooks</i>
<b property="issueNumber" typeof="PublicationIssue"> </b>,&nbsp;
<span property="schema:pageBegin"> 1</span>-<span property="schema:pageEnd">14</span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
<a className="doi" href="https://doi.org/10.1007/978-3-662-66053-9_1"> doi: 10.1007/978-3-662-66053-9_1</a>
</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"> Mete, V.</span>
</span>
<span property="schema:name">&nbsp;Entwicklung und Validierung neuer nicht-invasiver Diagnosesysteme für Mucociliary Clearance Disorders (MCCD). </span>
<i property="schema:publisher" typeof="schema:Organization"> Dissertation, Westfälische Wilhelms-Universität Münster</i>
<b property="issueNumber" typeof="PublicationIssue"> </b>,&nbsp;
<span property="schema:pageBegin"> </span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
<a className="doi" href="https://doi.org/10.17879/98958441905"> doi: 10.17879/98958441905</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"> Giaever, I.</span>;
<span property="schema:Name"> Keese, C.</span>
</span>
<span property="schema:name">&nbsp;A morphological biosensor for mammalian cells. </span>
<i property="schema:publisher" typeof="schema:Organization"> Nature</i>
<b property="issueNumber" typeof="PublicationIssue"> 366</b>,&nbsp;
<span property="schema:pageBegin"> 591</span>-<span property="schema:pageEnd">592</span>
(<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 1993">1993</time>).
<a className="doi" href="https://doi.org/10.1038/366591a0"> doi: 10.1038/366591a0</a>
</li>
</ol>
],
},
{
title: "Prof. Dr.",
vorname: "Stefan",
nachnname: "Hammer",
job: "Junior Professor of Organic Chemistry and Biocatalysis",
affiliation: "Universität Bielefeld",
pictureurl: pics['placeholder'],
tag: "Academia",
heading: "Safety Briefing and Laboratory Practices Advice",
interviewtabid: "hammer",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
title: "Dr.",
vorname: "Katharina",
nachnname: "Kolonko",
job: "",
affiliation: "",
pictureurl: pics['kolonko'],
tag: "Academia",
heading: "First steps in LNPs",
interviewtabid: "kolonkofirst",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Svenja",
nachnname: "Vinke",
job: "PostDoc at Harvard Medical School",
affiliation: "Harvard Medical School",
pictureurl: pics['svenja'],
tag: "Academia",
heading: "",
interviewtabid: "svenja",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Max",
nachnname: "Beckmann",
job: "Bielefeld University",
pictureurl: pics['max'],
tag: "Patient",
heading: "Consultation on University Hygiene Risks and Improvement for Hygiene Concept",
interviewtabid: "maxhygiene",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
title: "Dr.",
vorname: "Eva-Maria",
nachnname: "Berens",
job: "Ethics Committee of Bielefeld University",
affiliation: "Bielefeld University",
pictureurl: pics['berens'],
tag: "Academia",
heading: "Bioethics: Best Practices for Handling Patient Data and Primary Cells", /* Guidance from Ethics Committee on Best Practices for Patient Data and Primary Cells */
interviewtabid: "berens",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "The aim of the interview was to get an answer to the question of whether we need an ethics vote for our project or not and to obtain guidelines for dealing with patient cells regarding ethical issues and data protection. ",
insights: "The discussion was very informative in terms of how we should approach this topic and focused primarily on the important factors that need to be considered when planning the handling of patient cells. These include which legal principles need to be observed, data protection, ethical considerations and, above all, detailed and specific information for the donor. It also made us look at the situation from many different angles and consider the risks of worst-case scenarios. Overall, this interview was very useful to us, and we were able to use the information we gained to develop a kind of guideline that allowed us to approach this sensitive topic, which was new to us, with a certain degree of confidence. ",
implementation: "Based on the knowledge we have gained, we have drawn up guidelines for our handling of the cells. We used this guide when handling the patient cells, to ensure they were handled in an ethically correct manner.",
},
{
vorname: "Collaboration",
nachnname: "",
job: "",
affiliation: "",
pictureurl: pics['placeholder'],
tag: "Academia",
heading: "LNP Handbook",
interviewtabid: "handbook",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Benjamin",
title: "Dr.",
nachnname: "Winkeljann",
job: "Co-Founder and CEO at RNhale",
affiliation: "RNhale",
pictureurl: pics['winkeljann'],
tag: "Industry",
heading: "Rnhale",
interviewtabid: "rnhale",
cardtext: "",
language: "de",
quote: "Spray-drying LNPs is a groundbreaking approach that enhances stability and enables efficient pulmonary delivery of mRNA, paving the way for innovative therapies for conditions like cystic fibrosis.",
aimofcontact: [<p>As part of our development process of an innovative, effective pulmonary delivery of therapeutic mRNA to fight cystic fibrosis,
we conducted an interview with Dr. Benjamin Winkeljann, who is the Co-Founder of <a href="https://rnhale.com/">RNhale</a>. Dr. Benjamin
Winkeljann has a wealth of experience in the field of RNA therapeutics and nanotechnology. His background includes extensive research in the
development of lipid-based delivery systems, focusing on optimizing stability and efficacy for therapeutic applications. Winkeljann’s work
is supported by cutting-edge research from academic institutions, including collaborations with Professor Olivia Merkel from the
Ludwig-Maximilians-Universität in Munich, Germany, since his doctoral thesis in her working group. The interview with Winkeljann promoted
our project, which aimed to utilize spray-dried lipid nanoparticles (LNPs) for efficient delivery to the lung. By engaging with RNhale, we
sought to understand the nuances of their nano-embedded microparticle technology and how it could enhance our delivery systems. </p>],
insights: [<p>RNhale's technology leverages advanced spray drying techniques to stabilize and deliver RNA therapeutics. During our interview,
Winkeljann detailed several crucial aspects. Firstly, the stability and shelf-life of spray-dried LNPs are remarkable. RNhale’s siRNA
formulations have maintained their integrity for up to 18 months at room temperature, and although specific data for mRNA is still pending,
this suggests a promising shelf-life for mRNA formulations under similar conditions. The spray drying process itself involves mixing an ethanol
phase containing lipids with an aqueous phase containing RNA. This mixture is then spray-dried, forming LNPs as tiny spherical particles.
Key parameters for this process include maintaining an internal drying temperature of around 100 °C and using excipients like lactose to
preserve the nanoparticles' structure and function​ [1]. </p>,
<p>Ensuring the integrity and efficiency of the LNPs involves various methods, including gel electrophoresis, blotting, and functional readouts through transfection assays.
After drying, the nanoparticles retain their spherical structure, which resembles that of "golf balls" under scanning electron microscopy (SEM)[1].
Moreover, RNhale employs artificial intelligence to optimize LNP formulations and predict the best drying conditions, reducing the need for
extensive wet lab work. This AI-driven approach enhances efficiency and reliability in developing therapeutic nanoparticles. </p>],
implementation: [
<p>The interview with Dr. Benjamin Winkeljann from RNhale provided invaluable insights that will significantly enhance our project
focused on mRNA delivery to the lungs using spray-dried LNPs. By seeking to integrate their proven techniques and innovative approach
to spray-dry LNPs, we are optimistic about achieving superior stability, efficacy, and scalability in our therapeutic delivery systems. </p>
],
pictureurl_aim: "https://static.igem.wiki/teams/5247/photos/hp/hp-rnhale-zoom.png",
pictureurl_interview: "https://static.igem.wiki/teams/5247/photos/for-wiki-texts/del-interview-rnhale/paper-overview.jpg",
pictureurl_implementation: "https://static.igem.wiki/teams/5247/photos/for-wiki-texts/del-interview-rnhale/paper-sem.jpg",
references: [<div>noch einfügen</div>]
},
{
title: "XXX",
vorname: "David",
nachnname: "Liu",
job: "",
affiliation: "",
pictureurl: pics['placeholder'],
tag: "Academia",
heading: "",
interviewtabid: "liu",
cardtext: "",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "",
nachnname: "",
job: "",
affiliation: "Corden Pharma",
pictureurl: pics['placeholder'],
tag: "Academia",
heading: "Corden",
interviewtabid: "corden",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
vorname: "Mattijs",
nachnname: "Bulcaen",
job: "PhD Researcher at Laboratory for Molecular Virology & Gene Therapy",
affiliation: "KU Leuven",
pictureurl: pics['mattijs'],
tag: "Academia",
heading: "",
interviewtabid: "mattijsvisit",
cardtext: "",
language: "en",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
{
title: "Dr.",
vorname: "Oliver",
nachnname: "Dräger",
job: "Bielefeld University",
affiliation: "Research Group Cellular Neurophysiology",
pictureurl: pics['draeger'],
tag: "Academia",
heading: "",
interviewtabid: "patchclamp",
cardtext: "",
language: "de",
quote: "",
aimofcontact: "",
insights: "",
implementation: "",
},
]
interface Steckbrief{
title?: string; /* Dr. oder Prof. oder so bei Jörn und so*/
vorname: string;
nachname: string;
age: number;
linkedinurl?: string;
hauptfoto: string;
zweitfoto?: string;
pronouns: string;
studiengang: string;
headof?: string; /* Nur Team angeben, nicht "Head of" dazuschreiben */
igemjob: string | Array<string>;
whyigem: string | Array<string>;
bestpart: string | Array<string>;
biggestchallenge: string | Array<string>;
funfacts:string | Array<string>;
favmusic: string;
sciencemedia: string; /* Is there a particular book, movie or series that has influenced your view of science? */
onechange: string; /* If you had the opportunity to change one thing in the world of science, what would it be and why? */
hobbies: Array<string>; /* Hobbies/interests outside of science */
scientificinterests: Array<string> ; /* Scientific interest/research focus [keywords] */
}
/*
Legende:
string -> Text in "" oder ''
Array<string> -> Liste von Text in der Form ["", ""] oder ['','']
string | Array<string> -> Text ODER Liste von Text
number -> eine Zahl, zb 22
Anmerkung:
Eine Liste darf auch nur ein Element haben, das ist okay. Also z.B. ["hallo"]
Und wenn du Daten noch nicht hast ist das vorgehen "XXX" einzutragen sehr gut, denn dann kann man später per
Textsuche die fehlenden Stellen heraussuchen (Daumen hoch).
*/
/*
Vorlage Datensatz:
title: "",
vorname: "",
nachname: "",
age: ,
linkedinurl: "",
hauptfoto: "",
zweitfoto?: "",
pronouns: "",
studiengang: "",
headof?: "",
igemjob: [ "", ""],
whyigem: [ "", ""],
bestpart: [ "", ""],
biggestchallenge: [ "", ""],
funfacts: [ "", ""],
favmusic: "",
sciencemedia: "",
onechange: "",
hobbies: [ "", ""],
scientificinterests: [ "", ""],
*/
export const teammembers: Array<Steckbrief> = [
{
vorname: "Anna",
nachname: "Baack",
linkedinurl: "www.linkedin.com/in/anna-lena-b-a488102a5",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "she/her",
studiengang: "M.Sc. Molecular Cell Biology",
headof: "Laboratory",
igemjob: ["Delivery", "Creativity","Sponsoring"],
whyigem: [
"To prove to myself what I am capable of",
"To be part of a dedicated team in which everyone understands when you are dead inside"
],
bestpart: [
"My Team",
"Chlorella x Kombucha",
"Expanding my skills in the lab",
],
biggestchallenge: [
">12-hour shift in the lab",
"Don't let anyone see your tears"
],
funfacts: "Proud Lab Mom - They see me rollin' with my E-Scooter",
favmusic: "The techno workout playlist from Lisa",
},
{
vorname: "Asal Sahami",
nachname: "Moghaddam",
linkedinurl: "www.linkedin.com/in/ asal-sahami-moghaddam-665302315",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "she/her",
studiengang: "M.Sc. Bioinformatics",
igemjob: "Wiki, Mechanism & Public Outreach",
whyigem: "As an international student, iGEM offers me a unique opportunity to not only expand and deepen my scientific experience by working with a research team but also to enhance my social communication skills within my scientific field. iGEM provides different perspectives; it is not just a research project, but also a social activity where one can engage with diverse social opportunities and activities. This allows me to recognize and explore various possibilities beyond the science, making it a well-rounded and enriching experience",
bestpart: "The competition format of that and as a group we have the same goal",
biggestchallenge: "A strong presentation of your work, showing what you've accomplished and the ideas you've contributed as part of the team",
favmusic: "The techno workout playlist from Lisa",
},
{
vorname: "Christian",
nachname: "Michalek",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "he/him",
studiengang: "M.Sc. Cellular Biochemistry",
igemjob: "Wet lab, PrimeGuide, Biosafety",
whyigem: "To get to know new people with the same interests from different disciplines and to work together on a great project",
bestpart: "To live up to the responsibility and to keep going even if nothing works out again",
biggestchallenge: "A strong presentation of your work, showing what you've accomplished and the ideas you've contributed as part of the team",
favmusic: "There's nothing better than a relaxed, groovy techno set in the morning when you're starting work",
},
{
vorname: "Isabell",
nachname: "Guckes",
hauptfoto: "https://www.linkedin.com/in/isabell-alexandra-guckes-5023a030b/",
pronouns: "she/her",
studiengang: "M.Sc. Molecular Cell Biology",
headof: "Sponsoring",
igemjob: "Wet lab, AirBuddy, Creativity",
whyigem: "It’s great to be part of a project from the formation of the idea until the final results, so you can contribute with your work but also gain new experiences",
bestpart: "Learning new techniques in the lab",
biggestchallenge: "Coordination of many people and their individual work styles to work as one",
funfacts: "Can't decide if I'm left- or right-handed",
favmusic: "Disney songs sung by Kaya",
},
{
vorname: "Kai",
nachname: "Kanthak",
hauptfoto: "https://www.linkedin.com/in/kai-kanthak-1715901b9/",
pronouns: "he/him",
studiengang: "B.Sc. Molecular Biotechnology",
igemjob: "PrimeGuide, Biosafety, Sponsoring",
whyigem: "The best way to apply theoretical knowledge is through hands-on projects. Taking part in IGem has allowed me to learn more than I ever would have in the same amount of time at university",
bestpart: "When something meticulously thought out and planned works as intended in the laboratory. And to experience this together with the team",
biggestchallenge: "Getting a team of very different people with different schedules and lifes to work together effectively and efficiently on something",
favmusic: "radio, techno",
},
{
vorname: "Kathleen",
nachname: "Susat",
hauptfoto: "https://www.linkedin.com/in/kathleen-susat-261979301?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app",
pronouns: "she/her",
studiengang: "M.Sc. Genome Based Systems Biologie",
igemjob: "Wet lab, PrimeGuide, Biosafety, Human Practices, Public Engagement",
whyigem: "I want to acquire new skills and develop my character. Moreover working on an exciting project alongside passionate researchers enables meaningful contributions to be made",
bestpart: "Lab time and of course our wonderful team",
biggestchallenge: "Not going crazy",
funfacts: [
"Passionate handball player",
"Food lover",
],
favmusic: "Musicals",
},
{
vorname: "Kaya",
nachname: "Lange",
hauptfoto: "https://www.linkedin.com/in/kaya-lange?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app",
pronouns: "she/her",
studiengang: "M.Sc. Molecular Biotechnology",
igemjob: "Wet lab, PrimeGuide, AirBuddy, Human Practices, Public Engagement",
whyigem: "I wanted to be part of an incredible team implementing a large and significant project together",
bestpart: "My favorite part of iGEM is learning a lot about scientific research, handling stress and working in a wonderful team on one page together to achieve our goal",
biggestchallenge: "The biggest challenge is time management. It is quite difficult to manage all the different aspects of the project",
funfacts: [
"I tend to say yes to everything",
"My friends are often impressed by how I squeeze so much into my life",
"I love travelling and have lived in South America, Sweden and Spain"
],
favmusic: "I like to listen to french café music to prepare for the grand jamboree in paris",
},
{
vorname: "Liliana",
nachname: "Sanfilippo",
hauptfoto: "https://www.linkedin.com/in/liliana-sanfilippo-425709231/",
pronouns: "she/her",
studiengang: "M.Sc. Bioinformatic and Genome Research",
headof: "Wiki",
igemjob: "Human Practices/ Public Engagement",
whyigem: "I am very curious and like projects",
bestpart: "Actually seeing results of what you are doing",
biggestchallenge: "The biggest challenge is time management. It is quite difficult to manage all the different aspects of the project",
},
{
vorname: "Lisa",
nachname: "Wiesner",
hauptfoto: "XXX",
pronouns: "she/her",
studiengang: "XXX",
igemjob: "XXX",
whyigem: "XXX",
bestpart: "XXX",
biggestchallenge: "XXX",
funfacts: [
"XXX"
],
favmusic: "XXX",
},
{
vorname: "Malte",
nachname: "Lenger",
hauptfoto: "www.linkedin.com/in/malte-lenger-08j2003",
pronouns: "he/him",
studiengang: "B.Sc. Molecular Biotechnology",
igemjob: "Wet lab, PrimeGuide, Biosafety",
whyigem: "I wanted to take part in a research project like this to network with industry and other enthusiastic students worldwide, to learn about new molecular biology methods and to experience what it is like to do research and work independently at such a level, while coordinating and working in a team",
bestpart: "My favourite part of iGEM was/is meeting new people as well as working and researching with them. It's also the new insights you gain: both into working methods, for example in the lab, and into the field of work in general",
biggestchallenge: "The biggest challenge at iGEM during the semester was balancing the project and my own university tasks. And in general, it was to remain self-confident, both with some setbacks and with activities where you had a lot of responsibility but had never done them yourself before",
funfacts: [
"I like meeting up with people, especially if you go out in the city in the evening and meet up for a drink or something like that",
"I also like travelling, although at the end of my life I would like to be able to say that I have seen most of the world",
"But last but not least I am very interested in sports, with my favourite sports being football, basketball, skiing and tennis. However, I am very broad-minded when it comes to sports, so I actually watch every sport if none of the above are on TV. For example, during the Olympic Games this year, I might spend a whole afternoon just watching the swimming competitions."
],
favmusic: "My favorite music in the lab is the music I usually listen to. This mainly includes hip-hop and American rap, especially artists like Travis Scott, Gunna, Metro Boomin and Reezy",
},
{
vorname: "Michael",
nachname: "Gröning",
hauptfoto: "https://www.linkedin.com/in/michael-gröning-671732191",
pronouns: "he/him",
studiengang: "M.Sc. Media Production",
headof: "Creativity",
igemjob: "Design, Public Engagement",
whyigem: "I like worldwide competitions, team spirit and realizing projects that help people living a better life",
bestpart: "Huge community and creative freedom",
biggestchallenge: "To decipher every second technical term in discussions",
funfacts: [
"I've never worked in the lab",
"I can speak with different professional sounding voices and have plans for a podcast",
"I'm not related to the creator of The Simpsons",
],
favmusic: "I would choose epic orchestras with choirs",
},
{
vorname: "Philip",
nachname: "Mundt",
hauptfoto: "linkedin.com/in/philip-mundt-3b1a53306",
pronouns: "he/him",
studiengang: "B.Sc. Molecular Biology",
headof: "Mechanism",
igemjob: "Wet lab, PrimeGuide, Wiki",
whyigem: "To learn, to work as a team and to experience research from the ground up",
bestpart: "I like that it brings people together to strive for a common goal",
biggestchallenge: "The biggest challenge definitely is to handle the neverending amount of tasks, most of which are completely new challenges you have to learn by yourself",
funfacts: [
"I've never worked in the lab",
"I can speak with different professional sounding voices and have plans for a podcast",
"I'm not related to the creator of The Simpsons",
],
favmusic: "Technoo",
},
{
vorname: "Vera",
nachname: "Köhler",
hauptfoto: "XXX",
pronouns: "she/her",
studiengang: "M.Sc. Genome Based Systems Biology",
headof: "Delivery",
igemjob: "Wet lab, AirBuddy, Human Practices/ Public Outreach, Creativity",
whyigem: "To test my limits and expand various laboratory and soft skills",
bestpart: "The amazing Team and the funny, but also frustrating moments we lived through",
biggestchallenge: "Completing ten different emergency tasks at the same time without losing your head",
funfacts: [
"As a child I thought I would be arrested if I ate in the car, so I hid my snack as soon as we passed another car. I wonder what my parents had drilled into me",
],
favmusic: "Upbeat fun songs like Unwritten, C'est la bourgeoisie or Feminenomenom to keep me motivated",
},
{
vorname: "Vincent Carl",
nachname: "Stöckl",
hauptfoto: "XXX",
pronouns: "he/him",
studiengang: "B.Sc. Molecular Biotechnology",
igemjob: "Wet lab, AirBuddy, Sponsoring",
whyigem: "A chance to work as a real scientist as well as being part of a team working at the cutting edge of biotechnology",
bestpart: "The challenge of trying new things and working as a real scientist",
biggestchallenge: "Balancing iGEM and university work ",
},
]
export const advisors: Array<Steckbrief> = [
{
vorname: "Felicitas",
nachname: "Zimmer",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "she/her",
studiengang: "M.Sc. Molecular Cell Biology",
headof: "XXX",
igemjob: "XXX",
whyigem: "XXX",
bestpart: "XXX",
biggestchallenge: "XXX",
funfacts: [
"XXX",
"XXX",
"XXX",
"XXX"
],
favmusic: "XXX",
},
{
title: "M.Sc.",
vorname: "Lucas",
nachname: "Krause",
linkedinurl: "XXX",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "he/him",
studiengang: "Molecular Biotechnology",
headof: "XXX",
igemjob: "XXX",
whyigem: "XXX",
bestpart: "XXX",
biggestchallenge: "XXX",
funfacts: [
"XXX",
"XXX",
"XXX",
"XXX"
],
favmusic: "XXX",
},
{
vorname: "Maximilian Leo",
nachname: "Huber",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "he/him",
studiengang: "M.Sc. Bioinformatics and Genome Research",
igemjob: "Wiki",
whyigem: "I am helping the current iGEM team as an advisor, because I competed last year and fell in love with the iGEM project",
bestpart: "Giving aspiring scientists the chance to do awesome research and connect with other science loving students all around the globe",
biggestchallenge: "Getting everything done in time",
funfacts: [
"I really like programming and have multiple personal programming projects",
"I love animals, most of all cats, dogs, reptiles, fish and more",
"I adore baking, especially sourdough bread and banana bread"
],
favmusic: "Pokémon OST",
},
{
title: "M.Sc.",
vorname: "Utkarsh Anil",
nachname: "Mahajan",
linkedinurl: "XXX",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "he/him",
studiengang: "Molecular Biotechnology",
headof: "XXX",
igemjob: "XXX",
whyigem: "XXX",
bestpart: "XXX",
biggestchallenge: "XXX",
funfacts: [
"XXX",
"XXX",
"XXX",
"XXX"
],
favmusic: "XXX",
}
]
export const instructor: Array<Steckbrief> = [
{
title: "M.Sc.",
vorname: "Sinan",
nachname: "Zimmermann",
linkedinurl: "https://www.linkedin.com/in/sinan-zimmermann-50977323b/",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "he/him",
studiengang: "Molecular Cell Biology",
headof: "I'm involved in nearly every subteam, just a bit here and there",
igemjob: "proud dad of my academic weapons",
whyigem: "Last year, I led the charge as Team Captain and Lab, and honestly… iGEM got me hooked for life! The experience pushed me past my limits and transformed both my personal growth and scientific journey. Now, it’s my turn to guide the next generation and watch them rise – that’s why I’m back as the instructor for iGEM Bielefeld and iGEM Judge of 2024!",
bestpart: "Connections and networks formed during your iGEM journey have a lasting impact. That’s why I’m excited to launch a new platform for socializing and networking: the 'BFH European Meet-Up' - a collaboration between Bielefeld, Frankfurt, and Hamburg",
biggestchallenge: "Whether it's during night shifts or endless team meetings. Staying awake can be a challenge. Sometimes I need to mediate between my kidz or try to help them out, but they grow up so fast and are ready to spread their wings. As a dad, it’s challenging for me to let them fly. But even then, I’m proud to see how they handle their challenges and come back stronger every time!",
funfacts: [
"I function perfectly well without sleep – but beware if anyone expects me to be in a good mood without my beauty rest!",
"Coffee and energy drinks are basically my life elixir. Without them, I'd probably be a walking zombi",
"My team has a special talent for making me “weak” - very effective",
"Some people says that I'm a walking stock image.. can't relate"
],
favmusic: "PCR and the Amplifiers – their hit single 'Heating Up the Room (Denaturation Blues)' really gets things going!",
}
]
export const pis: Array<Steckbrief> = [
{
title: "Prof. Dr.",
vorname: "Jörn",
nachname: "Kalinowski",
linkedinurl: "linkedin.com/in/jörn-kalinowski-b7033b1b",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "he/him",
studiengang: "Research Group Leader - Microbial Genomics and Biotechnology",
igemjob: "Center for Biotechnology of Bielefeld University",
whyigem: "Because it is the best complement to our regular life sciences studies in educating scientists",
bestpart: "The jamboree in which all participants get to know that they are not alone with their dreams but a huge worldwide community",
biggestchallenge: "To be on time",
funfacts: [
"As a scientist never had to change my working place (from studies to retirement). Started parallel educations in biology and computer sciences when these disciplines were worlds apart (starting in 1977)."],
favmusic: "Metal (e.g. System of a down)",
},
{
title: "Prof. Dr.",
vorname: "Kristian",
nachname: "Müller",
linkedinurl: "https://www.linkedin.com/in/kristian-mueller/",
hauptfoto: "https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg",
pronouns: "he/him",
studiengang: "Research Group Leader - Molecular and Cellular Biotechnology",
igemjob: "Technical Facility of Bielefeld University",
whyigem: "The combination of fun and progress",
bestpart: "Motivated coworkers",
biggestchallenge: "Exaggerated statements",
funfacts: [
"iGEMmer since 2007 and keeping it rolling (any resemblance to Sisyphus is purely coincidental)"],
favmusic: "Sam Cooke - Wonderful World",
}
]
\ No newline at end of file
<svg width="100" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40" stroke="#850F78" stroke-width="10"/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h100v64H0z"/>
</clipPath>
</defs>
</svg>
<svg width="1080" height="4000" fill="none" xmlns="test-namespace">
<path d="M 50 50 C 500 -50 1000 100 1870 50 C 1820 220 2024 528 1870 590 C 1351 678 118 451 54 561 C 3 672 12 985 55 985 C 586 1090 1342 898 1881 1038 C 1994 1194 1986 1568 1890 1681 C 1751 1803 281 1481 168 1646 C 81 1794 21 1977 168 2142 C 499 2246 1403 2325 1081 2142
" stroke="#850F78" stroke-width="10"/>
</svg>
export const timelinepersontabs = [
]
\ No newline at end of file
export interface Ourlink{
path: string,
text: string,
scrollToId?: string,
tabId?: string,
subTabId?: string,
collapseId?: string,
tabincolId?: string
}
\ No newline at end of file
function Airbuddy() {
return(
<div className="row col">
{
/* */
}
</div>
);
}
\ No newline at end of file
function Bacteria() {
return(
<div className="row col">
{
/* */
}
</div>
);
}
\ No newline at end of file
function BlackFadeCircle() {
return(
<div className="row col">
{
/* */
}
</div>
);
}
\ No newline at end of file
import React from 'react';
export function ContentBlock({file}:{file: string}) {
const [isVisible, setVisible] = React.useState(false);
const domRef = React.useRef(null)!;
React.useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current!);
}, []);
return(
<div className={`content-block${isVisible ? 'is-visible' : ''}`}
ref={domRef}>
{
<img src={file}></img>
}
</div>
);
}
\ No newline at end of file