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
Commits on Source (628)
528 additional commits have been omitted to prevent performance issues.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 624 additions and 639 deletions
.gitignore
View file @ 3fd292fd
......@@ -18,3 +18,5 @@ code/test.bib
.DS_Store
code/test file gitignore.txt
src/.DS_Store
vite.config.js.timestamp-1732367750130-6d00136194c2.mjs
vite.config.js.timestamp-1733161862061-488217339257e.mjs
src/.DS_Store
View file @ 3fd292fd
No preview for this file type
src/App/App.css
View file @ 3fd292fd
This diff is collapsed.
src/App/App.tsx
View file @ 3fd292fd
......@@ -81,10 +81,10 @@ const App = () => {
<>
<Header />
{/* Page content */}
<div className="container-fluid">
<div className="container-fluid" >
<div className="row">
<Sidebar />
<div className="full-col-phone col-9">
<Sidebar/>
<div className="full-col-phone col-9 max-1240">
<Component />
<Villbuttonrow />
</div>
......
src/App/LandingPage.css
View file @ 3fd292fd
......@@ -46,4 +46,27 @@
/* .header-button-row .h5 {
} */
\ No newline at end of file
} */
#landing-page-header-2{
margin-top: 5rem;
background-image: url("https://static.igem.wiki/teams/5247/landing-page/lp-1new-lung-two.svg") !important;
background-size: 100% auto;
background-repeat: no-repeat;
padding: 0 !important;
}
.button-x{
align-items: center;
display: flex;
align-self: center;
}
.button-x button{
margin: auto;
padding: 10px;
border-radius: 10px;
background-color: var(--text-primary);
color: var(--ourbeige)
}
\ No newline at end of file
src/App/Timelines.css
View file @ 3fd292fd
......@@ -7,10 +7,11 @@
white-space: nowrap;
min-height: 700px;
width: 75vw;
overflow-x: auto;
overflow-y: hidden;
overflow-x: auto !important;
max-width: inherit !important;
overflow-y: hidden !important;
width: 100%;
background-color: inherit;
font-size: 1rem;
/* align items center */
align-items: center !important;
/* row */
......@@ -184,7 +185,7 @@ button.tabbutton:nth-child(1), button.tabbutton:nth-child(6){
background-color: var(--igemlightgreen);
}
.Ethics{
.Other{
background-color: var(--offblack);
}
......
src/App/mediarules.css
View file @ 3fd292fd
......@@ -27,9 +27,6 @@
align-items: center;
}
h1 {
font-size: 2rem;
}
.col-6 {
width: 100%; /* Full width on tablets */
......@@ -132,6 +129,26 @@
max-width: 100%;
height: auto;
}
/***home***/
#breatht {
font-size: 1.5em !important; /* Adjust font size for smaller screens */
text-align: left; /* Optional: center text for mobile */
}
#breathf {
left: 48vw !important;
width: 65vw !important;
}
/*#breatht1 {
left: 0 !important;
position:initial!important;
font-size: 0.5em !important;
}*/
img[src*="200k-anim-transparent-bg.gif"] {
width: 100%;
height: auto;
}
/***Biosafty***/
#safehead {
background-size: contain; /* Adjust the image to fit within the container */
......@@ -139,7 +156,37 @@
height: 10px; /* Adjust the height for mobile screens */
}
/***contribution***/
.base {
.timeline-item{
padding-right: 0px !important;
padding-left: 5%;
width: 50% !important;
box-sizing: content-box;
text-align: left !important;
}
.timeline-item:nth-child(odd) {
align-self: flex-end !important;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
}
figure.snipp1113{
min-width: 0px !important ;
max-width: 120px ;
width: 100% ;
margin-left: 80px;
}
.timeline-item-content{
text-align:initial !important;
align-items: flex-end ;
padding-left: 30px;
font-display: initial !important;
display: flex;
position: inherit;
}
.timeline-item-content .tag{
padding: 0px !important;
}
/***engineering***/
......@@ -147,12 +194,6 @@
width: 50% !important;
}
/***Description***/
#Cystic\ Fibrosis6 h2 {
font-size: 1.5em !important;
}
#Our\ Vision h2 {
font-size: 1 em !important;
}
.pie-chart-container-small {
width: 300px !important; /* Make smaller for mobile */
height: 300px !important; /* Adjust height accordingly */
......@@ -232,9 +273,6 @@
.winner{
font-size: x-large;
}
/*h3{
margin-bottom: 4vw !important;
}*/
.small-only{
display: block !important;
}
......@@ -274,13 +312,6 @@ svg text{
padding-top: 10px;
padding-bottom: 5px;
}
h1 {
font-size: 1vw !important;
line-height: 1.0 !important;
}
h2, h3 {
font-size: 24px !important;
}
.bigtitle {
width: 450px !important;
height: 200px !important;
......@@ -293,12 +324,12 @@ h2, h3 {
body {
/* padding: 10px !important; */
width: 202% ;
overflow-x: hidden; /* Prevents horizontal scrolling */
width: 202% !important;
overflow-x: hidden ; /* Prevents horizontal scrolling */
margin: 0;
padding: 0;
background-size: cover; /* Ensures the background scales to cover the entire screen */
background-position: center; /* Keeps the background centered */
background-size: cover !important; /* Ensures the background scales to cover the entire screen */
background-position: center !important; /* Keeps the background centered */
background-repeat: no-repeat;
}
......@@ -315,36 +346,26 @@ body {
display: grid !important;
}
.h4{
margin-top: 5px;
color: var(--offblack) !important;
margin-top: 10px !important ;
font-size: medium !important;
color:#444;
word-spacing:1px;
font-weight:normal;
letter-spacing: 0px !important;
text-align: justify !important;
/* text-transform: uppercase; */
font-weight: 900 !important;
display: grid;
grid-template-columns:none;
grid-template-rows: 0px 0;
grid-gap: 20px;
align-items: center;
}
.h2{
font-size: large !important;
font-weight: 900 !important;
grid-template-columns: none;
}
.full-col-phone{
width: 100vw !important;
}
}
/*For small Smartphones*/
@media screen and (max-width: 750px){
/*For small Smartphones (iphone 13 or similars)*/
@media screen and (max-width: 400px){
.figure-wrapper:first-of-type img {
width: 100% !important; /* Full width on small screens */
height: 10% !important; /* Maintain aspect ratio */
max-width: 100% !important; /* Limit the image width to fit the screen */
margin: 0 auto; /* Center the image horizontally */
overflow: visible !important;
}
.figure-wrapper:first-of-type img{
text-align: center; /* Ensure the figure caption is centered */
}
}
/* Big computer screens */
......
src/components/.DS_Store
View file @ 3fd292fd
No preview for this file type
src/components/BFH-Timeline.tsx
View file @ 3fd292fd
......@@ -43,11 +43,13 @@ export function BFHTimeline () {
csstag="talkonek"
vorname="Kristian"
nachname="Müller"
heading=""
text=""
heading="Gene Therapy, AAVs and Innovations in Synthetic Biology"
text="Prof. Dr. Kristian Müller from Bielefeld University reflects on his long-term involvement with the iGEM competition, emphasizing advancements in gene therapy, particularly using adeno-associated viruses (AAVs) as viral vectors for gene delivery. He discusses innovations in virus production and targeting, while acknowledging ongoing challenges such as product purity, production efficiency, and side effects. Additionally, he addresses recent developments in nanopore sequencing for quality control and the use of non-natural nucleotides and methylation to improve therapeutic outcomes."
>
<div id="talkonek" style={{display: "none"}}>
Ask Sinan
<p>Prof. Dr. Kristian Müller from Research Group Cellular and Molecular Biotechnology at the Technical Faculty of Bielefeld University, delivered an insightful presentation on the integration of AI and advanced biotechnology, focusing on the production and refinement of AAV vectors. The presentation highlighted how AI-driven innovations are transforming research methodologies, especially in areas such as AAV production, genetic targeting, and quality control. Prof. Dr. Müller showcased practical applications of AI in optimizing these biotechnological processes, making them more efficient, scalable, and precise, particularly in therapeutic applications.</p>
<p>The speaker began by drawing parallels between technological advancements in fields like space exploration and breakthroughs in genetic research, emphasizing the rapid progression within a short span of time. This context set the stage for discussing recent developments in AAV technology, where the application of AI has been pivotal. A key takeaway was how AI is being used to enhance the stability of viral vectors and optimize gene delivery, allowing for the production of high-quality AAV vectors with improved precision. Real-world examples, such as the use of AI to monitor genetic purity during nanopore sequencing and to streamline plasmid engineering processes, showcased the tangible impact of these technologies on therapeutic research. The discussion also highlighted the importance of collaborations between academia and industry, drawing parallels to the historic partnership that sparked the recombinant DNA revolution.</p>
<p>The presentation provided attendees with a deeper understanding of how AI can significantly enhance lab work, particularly in scaling up AAV production and ensuring the quality of therapeutic vectors. Participants left with valuable insights on leveraging AI and advanced technologies to drive their own research projects forward, especially in fields like gene therapy, plasmid engineering, and synthetic biology.</p>
</div>
</TimelineItemPic>
......@@ -324,7 +326,7 @@ export function BFHTimeline () {
<p>
Afterwards, the attending iGEM teams talked about their science communication plans and how they could improve them
using the skills learned in this workshop. Our team revised their plans for explaining gene editing to
children and started developing experiments to help them better understand cystic fibrosis, which we
children and started developing experiments to help them better understand Cystic Fibrosis, which we
presented later onto the public at <a onClick={() => goToPagesAndOpenTab("teutoruft", "human-practices")}>“Der Teuto ruft!”</a>, an event in Bielefeld to connect the local
population with regional companies and institutes to inform them about their work - including our iGEM team!
</p>
......
src/components/Breathe.tsx
View file @ 3fd292fd
......@@ -94,13 +94,13 @@ export function Breathe(){
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
</img>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}>
<p style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
......@@ -111,13 +111,13 @@ export function Breathe(){
'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}>
<p style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p style={{'fontSize' : '2.5em'}}>breathe out...</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>breathe out...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
......@@ -128,17 +128,17 @@ export function Breathe(){
'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{
'position': 'fixed',
......@@ -150,7 +150,7 @@ export function Breathe(){
'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
</div>
{/* black */}
......@@ -168,7 +168,7 @@ export function Breathe(){
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img>
<div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{
......@@ -179,10 +179,10 @@ export function Breathe(){
'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
</div>
<p style={{'fontSize' : '2.5em'}}>Not everyone </p>
<p style={{'fontSize' : '2.5em'}}>can breathe freely.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>Breathing is </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>essential.</p>
{/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
......@@ -196,13 +196,13 @@ export function Breathe(){
'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>That is why we </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>Cystic Fibrosis.</b></p>
</div>
{/* grey */}
<div
......@@ -219,14 +219,14 @@ export function Breathe(){
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
</div>
<p style={{'fontSize' : '2.5em'}}>texttexttext</p>
<p style={{'fontSize' : '2.5em'}}>texttexttext,</p>
<p style={{'fontSize' : '2.5em'}}>because breathing deeply is a</p>
<p style={{'fontSize' : '2.5em'}}><strong>privilage not everyone can enjoy</strong></p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>can not properly function</p> {/* on their own. */}
<p id="breatht"style={{'fontSize' : '2.5em'}}>on their own.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
......
src/components/Buttons.tsx
View file @ 3fd292fd
......@@ -31,7 +31,7 @@ export function Villbuttonrow(){
<div className="small-row align-items-center bottom-buttons">
<Villagebutton page="/human-practices?tab=hp-quote" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
<Villagebutton page="/team?tab=members" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
<Villagebutton page="/experiments?tab=heading" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
<Villagebutton page="/materials-methods?scrollTo=introduction" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Methods"></Villagebutton>
<Villagebutton page="/description?tab=obenindescription" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
<Villagebutton page="/engineering?tab=tab-our-cycle&scrollTo=ourcycle" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
<Villagebutton page="/safety?tab=Role" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
......@@ -136,7 +136,7 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
if (!classy){
classy = ""
}
let classname = "tabbutton " + type + " " + classy;
let classname = "btn1 tabbutton " + type + " " + classy;
return(
<>
<button className={classname} onClick={openElement({elementToOpen: type, classToHide: opentype, classToClose: closing, buttonClass: "tabbutton" })}> {name}</button>
......@@ -144,16 +144,18 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
)
}
export function HPMoreButton({name}: {name: string}){
let c = "timelinepersontabs"
export function BFHMoreButton({it}: {it: string}){
return(
<button className="tablinks hp-more-button" onClick={openElement({elementToOpen: name, classToHide: c, buttonClass: "tabbutton"})}> More</button>
<button className="tablinks btn1" onClick={expandIt({it})}> More</button>
)
}
export function BFHMoreButton({it}: {it: string}){
export function NewHPMoreButton({tab, scroll}: {tab: string, scroll: string}){
const {goToPageWithTabAndScroll} = useNavigation();
return(
<button className="tablinks bfh-more-button" onClick={expandIt({it})}> More</button>
<button className="tablinks btn1" onClick={() => goToPageWithTabAndScroll({path: "", tabId: tab, scrollToId: scroll})}> More</button>
)
}
......@@ -173,48 +175,17 @@ function expandIt({it}: {it: string}){
export function ButtonThree(){
return(
<div className="boxy-3">
<div className="btn-new btn-three">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonTwo(){
return(
<div className="boxy-2">
<div className="btn-new btn-two">
<span typeof="button" onClick={openElement({elementToOpen: "about", classToHide: "tabcontent", buttonClass: "tablinks"})}>HOVER ME</span>
</div>
</div>
)
}
export function ButtonOne({text, open, openclass}: {text:string, open:string, openclass?: string}){
const { goToPagesAndOpenTab } = useNavigation();
if (openclass) {
return(
<div className="boxy-1">
<a onClick={() => goToPagesAndOpenTab(open, "")}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
<button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
)
}
else{
return(
<div className="boxy-1">
<span typeof="button" onClick={openFromOtherPage(open)}>
<div className="btn-new btn-one">
{text}
</div></span>
</div>
<button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
)
}
}
......@@ -223,13 +194,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
const { goToPageWithTabAndScroll } = useNavigation();
if (openclass) {
return(
<div className="boxy-1">
<a onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}>
<div className="btn-new btn-one">
{text}
</div>
</a>
</div>
<button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
)
}
else{
......@@ -247,12 +212,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
return(
<div className="boxy-1">
<span typeof="button" onClick={openThem({it: open, scrollToId})}>
<div className="btn-new btn-one">
{label}
</div></span>
</div>
<button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
)
}
......
src/components/Calendar/Calendar.tsx
View file @ 3fd292fd
......@@ -269,7 +269,7 @@ const May = <ul id="May-dates" className="days hideable" style={{display: "none"
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li><a onClick={showEntry("may22")}><span className="active">22</span></a></li>
<li>23</li>
<li>24</li>
<li>25</li>
......
src/components/Calendar/cal-content.tsx
View file @ 3fd292fd
......@@ -32,7 +32,7 @@ let tabs = [
<h2>Public Outreach</h2>
<p>Teams are to be established for various responsibilities, including a public outreach team with a minimum of five members focusing on social media and networking with other iGEM teams. Specific positions to fill include a deadline manager and teams for sponsoring, theme areas, and the Grand Jamboree presentations. Additional responsibilities include organizing the village booth, design team tasks, and ensuring the completion of safety, judging, and attribution forms.</p>
<h2>Jamboree & MeetUps</h2>
<p>The team plans a trip to Paris via train, which takes approximately 6 hours and 15 minutes. Travel costs will be covered, with team members only needing to pay for meals. Suggested travel dates are from October 21st to 31st, coinciding with the iGEM Jamboree from October 23rd to 26th, with accommodation to be determined based on team preferences.</p>
......@@ -171,7 +171,7 @@ let tabs = [
<p>Cyanobacteria blooms pose significant ecological threats, and current control methods are inadequate. The proposed solution involves using peptides from algae to prevent blooms while preserving ecosystems. Key pathways and targets were identified, emphasizing the need for conservation and biodiversity.</p>
<h3>Fourth Presentation: Cystic Fibrosis</h3>
<p>Cystic fibrosis affects a significant number of individuals and is diagnosed through sweat tests and genetic screening. Current treatments focus on managing symptoms, but the goal is to develop long-term cures by targeting the genetic basis of the disorder. The team is collaborating with various specialists and organizations to develop educational materials and optimize treatment strategies.</p>
<p>Cystic Fibrosis affects a significant number of individuals and is diagnosed through sweat tests and genetic screening. Current treatments focus on managing symptoms, but the goal is to develop long-term cures by targeting the genetic basis of the disorder. The team is collaborating with various specialists and organizations to develop educational materials and optimize treatment strategies.</p>
<h3>Further Presentations</h3>
<p>Discussions included the potential of phages as an alternative to antibiotics and future presentations on related topics.</p>
......@@ -285,7 +285,7 @@ let tabs = [
<p>Plans for the European Meet-Up include creating a list of snacks with names, dates, types, and quantities to ensure adequate preparation.</p>
<h2>Mechanism</h2>
<p>Findings were presented, highlighting a proof of concept using an existing prime editing system to target the five most common mutations in cystic fibrosis (CF). Optimization efforts involve a modified Cas12a for higher specificity and a new enzyme called Fanzor, which requires engineering for precise cuts. A debate on targeting oocytes versus lungs was held, with plans for parallel work on both approaches and suggestions for efficient lab concept designs.</p>
<p>Findings were presented, highlighting a proof of concept using an existing prime editing system to target the five most common mutations in Cystic Fibrosis (CF). Optimization efforts involve a modified Cas12a for higher specificity and a new enzyme called Fanzor, which requires engineering for precise cuts. A debate on targeting oocytes versus lungs was held, with plans for parallel work on both approaches and suggestions for efficient lab concept designs.</p>
<h2>Delivery</h2>
<p>Two main delivery possibilities were discussed: aerosolizing lipid nanoparticles (LNPs), which face stability issues and lung defense mechanisms, and intravenous delivery, which necessitates regular doctor visits due to the liver acting as a filter. Research on LNP production and cellular targeting, particularly of basal cells or erythrocytes, was also highlighted. The feasibility of a model system to ensure the drug's efficacy in reaching the target cells was considered advantageous.</p>
......@@ -447,7 +447,7 @@ let tabs = [
<p>Primer design is challenging due to inexperience, but the team aims to meet BioBrick standards once the vectors are available. Kai and Christian are selecting candidates for Fanzor mutations, and testing editing via GFP is planned, requiring adaptation of the plasmid for stable transfection into cells.</p>
<h2>Human Practices</h2>
<p>Details for the interview with Prof. Weber are under discussion, including presentation responsibilities and logistical arrangements. There is also a note on a patient interview request involving a young child with cystic fibrosis.</p>
<p>Details for the interview with Prof. Weber are under discussion, including presentation responsibilities and logistical arrangements. There is also a note on a patient interview request involving a young child with Cystic Fibrosis.</p>
<h2>Sponsoring</h2>
<p>A meeting with Stemcell is planned where the team must decide on the types and quantities of media needed as soon as possible.</p>
......
src/components/Complex-svg.tsx
View file @ 3fd292fd
......@@ -2,13 +2,15 @@ import { useNavigation } from "../utils";
export default function SVG(){
const { goToPageWithTabAndScroll /* , goToTextsAndOpenCollapsible */ } = useNavigation();
const { goToPageWithTabAndScroll/* , goToTextsAndOpenCollapsible */ } = useNavigation();
return(
<svg
viewBox="0 0 1000 500"
overflow="hidden"
version="1.1"
id="svg367"
width={"500"}
height={"100%"}
inkscape:export-ydpi="9.5955524"
xmlns="http://www.w3.org/2000/svg">
<defs
......@@ -1201,7 +1203,7 @@ export default function SVG(){
fillRule="evenodd"
id="path149" />
{/* nSpuFz1 */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-nickase', path: '/engineering', scrollToId: "nic1head"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2807,7 +2809,7 @@ export default function SVG(){
fillRule="evenodd"
id="path351" />
{/* MLH1dn */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2828,7 +2830,7 @@ export default function SVG(){
transform="matrix(1,0,0,-1,16740.5,9532.5)"
id="path352" />
{/* La(1-194) */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2859,7 +2861,7 @@ export default function SVG(){
fillRule="evenodd"
id="path354" />
{/* PE6c reverse transcriptase */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pe-systems', path: '/engineering', scrollToId: "pe-systems-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2885,14 +2887,14 @@ export default function SVG(){
transform="matrix(-1,0,0,1,10490.8,8509.5)"
id="path356" />
{/* PCS/RTT */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-pegrna', path: '/engineering', scrollToId: "pegrna-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
fontWeight="400"
fontSize="440px"
transform="translate(7802.59,8667)"
id="text357">PCS/RTT</text>
id="text357">PVS/RTT</text>
</a>
<path
d="M 0,0 4324.02,3.60892e-4"
......@@ -2931,7 +2933,7 @@ export default function SVG(){
transform="matrix(-1,0,0,1,13708.3,11011.5)"
id="spacerline" />
{/* Spacer */}
<a>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......@@ -2939,9 +2941,9 @@ export default function SVG(){
fontSize="440px"
transform="translate(8283.81,11166)"
id="text360">Spacer</text>
</a>
{/* nPlmCasX */}
<a>
<a onClick={() => goToPageWithTabAndScroll({tabId:'tab-nickase', path: '/engineering', scrollToId: "nickase-header"})}>
<text
fill="#32232c"
fontFamily="'Acumin Pro', 'Acumin Pro_MSFontService', sans-serif"
......
src/components/FadeIn.tsx
View file @ 3fd292fd
......@@ -47,4 +47,5 @@ export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
<div className='col' style={{ 'height': '95vh' }}></div>
</>
);
}
\ No newline at end of file
}
src/components/Figures.tsx 0 → 100644
View file @ 3fd292fd
interface FigureProps{
pic1: string,
pic2?: string,
pic3?: string,
pic4?: string,
pic5?: string,
pic6?: string,
alt1: string,
description: React.ReactNode | string,
description2?: React.ReactNode | string,
num: string |number;
num2?: string |number;
bg?: string;
}
export function ThreeVertical({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<img src={pic2} className="responsive-image"/>
<img src={pic3} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoVertical({description, num, pic1, pic2, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<img src={pic2} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoHorizontal({description, num, pic1, pic2, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} alt={alt1} className="responsive-image"/>
</div>
<div className="col">
<img src={pic2} className="responsive-image"/>
</div>
</div>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function ThreeHorizontal({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} alt={alt1} className="responsive-image"/>
</div>
<div className="col">
<img src={pic2}className="responsive-image"/>
</div>
<div className="col">
<img src={pic3} className="responsive-image"/>
</div>
</div>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function OneFigure({description, num, pic1, alt1, bg}:FigureProps){
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<img src={pic1} alt={alt1} className="responsive-image"/>
<figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
</figure>
</div>
)
}
export function TwoFigureRow({description,description2, num, num2, pic1, pic2, bg}:FigureProps) {
let background = "";
if (bg){
background = " bg-w"
}
return(
<div className={"figure-wrapper" + background}>
<figure>
<div className="row align-items-center">
<div className="col">
<img src={pic1} />
</div>
<div className="col">
<img src={pic2}/>
</div>
</div>
<figcaption>
<div className="row align-items-center">
<div className="col">
<b>Figure {num}:</b> {description}.
</div>
<div className="col">
<b>Figure {num2}:</b> {description2}.
</div>
</div>
</figcaption>
</figure>
</div>
)
}
src/components/Footer.tsx
View file @ 3fd292fd
......@@ -56,12 +56,12 @@ export function Footer() {
<div className="small-row align-items-center">
<div className="col-sm-4">
<div className="col">
info@igem-bielefeld.de
info[at]igem-bielefeld[dot]de
</div>
<div className="col"> </div>
<div className="col">
iGEM2024
Universitätsstraße 25, 33613 Bielefeld
Universitätsstraße 25, 33615 Bielefeld
Centrum für Biotechnologie (CeBiTec)
Universität Bielefeld
</div>
......@@ -70,37 +70,40 @@ export function Footer() {
<div className="col-4 footer-slider">
<SimpleSlider>
<a className="sponsor-container" href="https://www.plasmidfactory.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/plasmidfactory.png"/>
</a>
<a className="sponsor-container" href="https://bio.nrw.de/">
<img className="img-sponsor-partner-page side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bionrw-logo.png"/>
</a>
<a className="sponsor-container" href="http://www.zeiss.de/naturwissenschaften">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/zeiss.png" />
</a>
<a className="sponsor-container" href="https://www.jenabioscience.com/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/jbs-dunkelgruen-text.png"/>
</a>
<a className="sponsor-container" href="https://www.gip.com/home/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/gip.png" />
</a>
<a className="sponsor-container" href="https://www.integra-biosciences.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/integra-hinterlegt.jpeg" />
</a>
<a className="sponsor-container" href="https://www.uni-bielefeld.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/logos-team/uni-bielefeld-dunkel.png"/>
</a>
<a className="sponsor-container" href="www.snapgene.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/snapgene.png"/>
</a>
<a className="sponsor-container" href="https://bts-ev.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
</a>
<a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/>
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei.png"/>
</a>
<a className="sponsor-container" href="www.idtdna.com">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
</a>
<a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/">
<img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
<img className="img-sponsor side-margins-auto" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
</a>
</SimpleSlider>
</div>
......
src/components/Graph.tsx
View file @ 3fd292fd
......@@ -57,7 +57,7 @@ const PieChart: React.FC = () => {
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
display: true, // possible to blend out legend
position: 'bottom' as const, // Puts labels below the chart
labels: {
boxWidth: 20, // Controls the size of the color box next to the labels
......@@ -65,6 +65,10 @@ const PieChart: React.FC = () => {
usePointStyle: true,
},
},
title: {
display: true,
text: 'Types of mutations',
},
},
};
......@@ -173,7 +177,7 @@ export const WhoAffectedatients: React.FC = () => {
title: {
display: true,
text: [
'Are you affected by cystic fibrosis yourself ', 'or are you related to someone with cystic fibrosis?'
'Are you affected by Cystic Fibrosis yourself ', 'or are you related to someone with Cystic Fibrosis?'
],
},
}
......@@ -348,7 +352,7 @@ export const HowMuchDoesItAffectYouatients: React.FC = () => {
},
title: {
display: true,
text: ["How much does cystic fibrosis affect your or your relative's ", "daily life? (1 = Not at all, 5 = Very much)"]
text: ["How much does Cystic Fibrosis affect your or your relative's ", "daily life? (1 = Not at all, 5 = Very much)"]
},
},
scales: {
......@@ -543,7 +547,7 @@ export const AgeDiagnosisatients: React.FC = () => {
},
title: {
display: true,
text: 'At what age were you or your relative diagnosed with cystic fibrosis?',
text: 'At what age were you or your relative diagnosed with Cystic Fibrosis?',
},
},
scales: {
......@@ -675,7 +679,7 @@ export const HeardOfCFPublic: React.FC = () => {
plugins: {
title: {
display: true,
text: 'Have you heard of cystic fibrosis?',
text: 'Have you heard of Cystic Fibrosis?',
},
}
};
......@@ -751,7 +755,7 @@ export const HowDidYouLearnPublic: React.FC = () => {
},
title: {
display: true,
text: 'How did you mainly learn about cystic fibrosis? ',
text: 'How did you mainly learn about Cystic Fibrosis? ',
},
},
scales: {
......@@ -836,7 +840,7 @@ export const HowWellInformedAboutCFPublic: React.FC = () => {
maintainAspectRatio: false,
plugins: { title: {
display: true,
text: 'How well informed are you about cystic fibrosis?',
text: 'How well informed are you about Cystic Fibrosis?',
},
}
};
......@@ -913,7 +917,7 @@ export const WhatMeasuresPublic: React.FC = () => {
},
title: {
display: true,
text: 'What measures do you think could be taken to raise awareness of cystic fibrosis?',
text: 'What measures do you think could be taken to raise awareness of Cystic Fibrosis?',
},
},
scales: {
......
src/components/HP-timeline.tsx
View file @ 3fd292fd
......@@ -5,6 +5,7 @@ import { timelinedata } from "../data/hptimelinedata";
export function HPTimeline(){
return(
<section id="Timeline" className="section">
<p>Feel free to scroll trough our timeline and learn more about our extensive human-centric approach!</p>
<div className="center">
</div>
<TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
......
src/components/Headings.tsx
View file @ 3fd292fd
......@@ -72,8 +72,8 @@ export function H2({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text);
}
return(
<div className="h2-box">
<h2 className="h2" id={idtext}>{text}</h2>
<div>
<h1 id={idtext}>{text}</h1>
</div>
)
......@@ -89,7 +89,7 @@ export function H3({text, id}:{text: string, id?: string}){
}
return(
<div>
<h3 className="h3" id={idtext}> {text} </h3>
<h2 id={idtext}> {text} </h2>
</div>
)
......@@ -97,7 +97,7 @@ export function H3({text, id}:{text: string, id?: string}){
export function PhilipH3({children, id}:{children: JSX.Element , id: string}){
return(
<div>
<h3 className="h3" id={id}> {children} </h3>
<h2 id={id}> {children} </h2>
</div>
)
......@@ -112,7 +112,7 @@ export function H4({text, id}:{text: string, id?: string}){
}
return(
<div>
<h4 className="h4" id={idtext}> {text} </h4>
<h3 id={idtext}> {text} </h3>
</div>
)
......@@ -126,9 +126,7 @@ export function H5({text, id}:{text: string, id?: string}){
idtext = stringToSlug(text);
}
return(
<div className="h5-box">
<h5 className="h5" id={idtext}> {text} </h5>
</div>
<h4 id={idtext}> {text} </h4>
)
}
......