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
Hide whitespace changes
Inline Side-by-side
Showing
with 499 additions and 80 deletions
src/components/Problems.tsx
View file @ 3fd292fd
......@@ -51,7 +51,7 @@ export function Problems(){
const Title2 = "makes life breathtaking";
const Prob11 = "Thick mucus blocking airway and prevents"
const Prob12 = "oxygen absorption, leading to bronchial"
const Prob13 = "obstructions, organ failue an death";
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";
......@@ -174,9 +174,9 @@ export function Problems(){
</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>
<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>
......
src/components/Table.tsx
View file @ 3fd292fd
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[] = [];
......@@ -20,7 +21,7 @@ export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}
return(
<div className="flex flex-col">
<div className="min-w-full overflow-x-auto">
<div className="inline-block min-w-full py-4">
<div className="inline-block min-w-full">
<div className="overflow-hidden p-2">
<table className="text-center parttable">
<thead className="bg-d">
......@@ -37,4 +38,45 @@ export function PartTable({data, cols}: {data: Array<Part>, cols: Array<string>}
</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
src/components/Tabs.tsx
View file @ 3fd292fd
......@@ -87,7 +87,7 @@ import { stringToSlug } from "../utils";
}
if (data[i].pictureurl_implementation) {
imp_img = <div className="hti-box">
<img src={data[i].pictureurl_implementation} className="hp-timeline-img hti-right" />
<img src={data[i].pictureurl_implementation} className="hp-timeline-img hti-left" />
</div>;
}
if (data[i].pictureurl_aim) {
......@@ -279,7 +279,7 @@ import { stringToSlug } from "../utils";
<p>{data[i].summary}</p>
</div>
<div className="row unten" style={{fontSize: "large"}}>
See how this influenced our project at
</div>
</div>
<div className="col-3">
......
src/components/interfaces.tsx 0 → 100644
View file @ 3fd292fd
export interface Ourlink{
path: string,
text: string,
scrollToId?: string,
tabId?: string,
subTabId?: string,
collapseId?: string,
tabincolId?: string
}
\ No newline at end of file
src/components/makeSources.tsx
View file @ 3fd292fd
......@@ -15,7 +15,8 @@ interface BibEntry {
interface BibtexParserProps {
bibtexSources: string[]; // Accept an array of BibTeX strings
special?: string
special?: string,
start?: number
}
......@@ -54,12 +55,12 @@ function formatPages(pages: string | undefined): JSX.Element | null {
}
export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , special}) => {
export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , special, start}) => {
const [parsedEntries, setParsedEntries] = useState<BibEntry[]>([]);
// Parse BibTeX on component mount or when sources change
useEffect(() => {
console.log("Parsing BibTeX sources: ", bibtexSources);
//console.log("Parsing BibTeX sources: ", bibtexSources);
try {
const allEntries: BibEntry[] = [];
......@@ -79,7 +80,7 @@ export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , spec
// Helper function to render AUTHORS
const formatAuthors = (authors: string): string => {
console.log("Original input:", authors);
//console.log("Original input:", authors);
// Bereinigen des Eingabestrings und Ersetzen von "and" durch "|"
const cleanedAuthors = authors
......@@ -87,43 +88,43 @@ export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , spec
.replace(/\{|\}/g, "") // geschweifte Klammern entfernen
.trim();
console.log("Cleaned authors string:", cleanedAuthors);
//console.log("Cleaned authors string:", cleanedAuthors);
// Autoren in ein Array aufteilen
const authorList = cleanedAuthors.split("|").map(author => author.trim());
console.log("Split author list:", authorList);
//console.log("Split author list:", authorList);
// Maximale Anzahl der anzuzeigenden Autoren
const maxAuthors = 7;
// Formatiere jeden Autor
const formattedAuthors = authorList.map((author, index) => {
console.log(`Processing author #${index + 1}:`, author);
const formattedAuthors = authorList.map((author, _index) => {
//console.log(`Processing author #${index + 1}:`, author);
// Nachname und Vornamen aufteilen
const [last, firstNames] = author.includes(",") ?
author.split(",").map(part => part.trim()) :
['', author]; // Wenn kein Komma vorhanden ist, wird der gesamte Name als Vorname behandelt
console.log(`Last name: "${last}", First names: "${firstNames}"`);
// console.log(`Last name: "${last}", First names: "${firstNames}"`);
// Initialen für Vornamen erstellen
const initials = firstNames.split(' ').map(n => n[0] + '.').join(' ');
console.log(`Initials for "${firstNames}": "${initials}"`);
//console.log(`Initials for "${firstNames}": "${initials}"`);
const formattedName = `${last}, ${initials}`.trim(); // Rückgabe des formatierten Namens
console.log(`Formatted name: "${formattedName}"`);
//console.log(`Formatted name: "${formattedName}"`);
return formattedName;
});
console.log("Formatted authors before adding et al.:", formattedAuthors);
//console.log("Formatted authors before adding et al.:", formattedAuthors);
// Kombiniere die formatierten Autoren mit korrekter Interpunktion
const output = formattedAuthors.slice(0, maxAuthors).join('; ') +
(formattedAuthors.length > maxAuthors ? ' et al.' : '');
console.log("Final output:", output);
//console.log("Final output:", output);
return output;
};
......@@ -138,7 +139,10 @@ export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , spec
// console.log(`Rendering citation for entry #${index + 1}: `, entry);
// Use the index as citation number
const citationNumber = index + 1;
let citationNumber = index +1;
if(start){
citationNumber += start -1;
}
const entryType = entry.entryType.toLowerCase(); // Convert to lowercase for consistent comparison
const entryTags = entry.entryTags; // Adjust based on your data structure
// console.log("Entry Tags: ", entryTags);
......@@ -240,13 +244,16 @@ export const BibtexParser: React.FC<BibtexParserProps> = ({ bibtexSources , spec
return <li key={index}>Unknown entry type: {entryType}</li>;
}
};
let startnumber = 1;
if(start) {
startnumber = start;
}
return (
<div>
{parsedEntries.length === 0 ? (
<p>No citations available.</p>
) : (
<ol>
<ol start={startnumber}>
{parsedEntries.map((entry, index) => renderCitation(entry, index))}
</ol>
)}
......
src/components/precyse.tsx
View file @ 3fd292fd
export default function PreCyse() {
return (<span className="underline--magical precyse"> PreCyse </span>
return (<span className="underline--magical precyse">PreCyse</span>
)}
\ No newline at end of file
src/contents/.DS_Store
View file @ 3fd292fd
No preview for this file type
src/contents/Contribution/.DS_Store
View file @ 3fd292fd
No preview for this file type
src/contents/Contribution/BFH/bfh-about.tsx
View file @ 3fd292fd
......@@ -17,6 +17,33 @@ export function About(){
<H4 text="About Our Cooperation"/>
<p> The cooperation between Bielefeld, Frankfurt, and Hamburg is rooted in the friendships and networks formed during the iGEM competition 2023. Our mission is to promote future projects and bring teams together. By alternating the location of the BFH European Meet-Up each year, we aim to provide diverse networking opportunities and foster a strong sense of community among iGEM participants. </p>
<H4 text="Head of BFH Committee"/>
<div className="row">
<div className="row align-items-center">
<div className="col">
</div>
<div className="col">
</div>
<div className="col">
</div>
</div>
<div className="row align-items-center">
<div className="col">
<p>Sinan Zimmermann</p>
<p><i>Instructor of iGEM Bielefeld </i></p>
</div>
<div className="col">
<p>Olivia Mozolewska</p>
<p><i>Advisor of iGEM Frankfurt</i></p>
</div>
<div className="col">
<p>Lisa Siemers</p>
<p><i>Advisor of iGEM Hamburg </i></p>
</div>
</div>
</div>
<H4 text="What Were Our Goals?"/>
<ul className="haken-liste">
<li> {haken} Unite iGEM teams from across Europe and foster a sense of community and collaboration. </li>
......@@ -203,10 +230,10 @@ export function About(){
<p>The BFH European Meet-Up 2024 was a resounding success, uniting over 20 teams and 150 participants in a celebration of science, innovation, and collaboration. As we look forward to future events, we remain committed to our mission of igniting, innovating, and inspiring the next generation of scientists. Here's to many more great moments and an unforgettable time for every participant – cheers! </p>
<div className="small-row">
<div className="col right">
<a href="https://bfheuropeanmeetup.mobirisesite.com/page6.html"><button className="tablinks bfh-more-button Medical">Visit the Website</button></a>
<a href="https://bfheuropeanmeetup.mobirisesite.com/page6.html"><button className="tablinks btn1 Medical">Visit the Website</button></a>
</div>
<div className="col button-left">
<a href="https://www.instagram.com/bfh_euromeet/"><button className="left-button tablinks bfh-more-button Medical" >Stay in Touch</button></a>
<a href="https://www.instagram.com/bfh_euromeet/"><button className="left-button tablinks btn1 Medical" >Stay in Touch</button></a>
</div>
</div>
</div>
......
src/contents/Contribution/BFH/bfh.tsx
View file @ 3fd292fd
import { BFHTimeline } from "../../../components/BFH-Timeline";
import BFHpdf, { GuidePDF } from "../../../components/Pdfs";
import BFHpdf from "../../../components/Pdfs";
import BFHGallery from "../../../components/Photo-grid";
import { Section, Subesction } from "../../../components/sections";
import { About } from "./bfh-about";
......@@ -24,13 +24,10 @@ export function MeetUP(){
<Subesction title="Virtual Poster Exhibition" id="BFH European MeetUp4">
<PosterGallery/>
</Subesction>
<Subesction title="Guideline" id="BFH European MeetUp5">
<GuidePDF/>
</Subesction>
<Subesction title="Gallery" id="BFH European MeetUp6">
<Subesction title="Gallery" id="BFH European MeetUp5">
<BFHGallery/>
</Subesction>
<Subesction title="Downloads" id="BFH European MeetUp7">
<Subesction title="Downloads" id="BFH European MeetUp6">
<BFHpdf/>
</Subesction>
</div>
......
src/contents/Contribution/PartCon.tsx 0 → 100644
View file @ 3fd292fd
import { H4 } from "../../components/Headings";
import { PDF } from "../../components/Pdfs";
import { Subesction } from "../../components/sections";
export function PartContribution(){
return(
<Subesction title="Parts" id="Our Contributions2">
<H4 text="Our Protocol Collection"/>
<PDF link="https://static.igem.wiki/teams/5247/pdfs/protocol-collection-igem-2024.pdf" name="protocol-collection-igem-2024.pdf"/>
<p>ShapeOur contribution includes an extensive collection of optimized protocols designed to provide future iGEM teams with easy-to-use starting materials. We've refined these protocols and compiled them into comprehensive summaries, incorporating our experiences, tips, and tricks to make synthetic biology more accessible and enjoyable, especially for newer iGEM teams. Additionally, we have integrated safety and security standards into the protocols, making it easier to introduce the handling of human biomaterials in the iGEM competition while ensuring compliance with necessary regulations. This collection is intended to streamline the workflow and empower teams to approach their projects with greater confidence. </p>
<H4 text="Our Reporter System PreCL"/>
<p>To effectively test different Prime Editing systems and pegRNAs targeting the CF-specific genomic mutation (delF508), we developed a highly sensitive reporter system called PreCL (Prime Editing Conceptualizable Light). This system is designed to detect fluorescence signals across a variety of devices, offering flexibility in measurement and ensuring reliable, high-quality results. </p>
<p>PreCL is characterized by its high sensitivity, with minimal background noise, allowing for precise and accurate detection. Additionally, it closely mimics the CF genomic context, making it highly relevant for CF-specific research. The system features an easy-to-read output, simplifying the interpretation of experimental data, and is designed for constitutive performance, ensuring consistency across tests. </p>
<p>One of the standout features of PreCL is its modular design, which allows it to be adapted to different genomic contexts, extending its utility beyond CF research. While it is optimized for Prime Editing, it also has potential applications for broader genetic approaches such as CRISPR/Cas and base editing. With these advantages, PreCL offers a powerful and versatile tool that facilitates testing and enhances the precision and efficiency of genetic research. </p>
<img src="https://static.igem.wiki/teams/5247/engineering-cycle/precl.svg"/>
<H4 text="Our pegRNA Architecture"/>
<p>In our research, we optimized the structure of pegRNAs to develop a stable and efficient variant with enhanced sensitivity. By incorporating the novel RNA structural motif TevoPreQ1, we improved the stability and complex formation of the pegRNA, ensuring higher Prime Editing throughput. Additionally, we introduced silent edits to promote mismatch repair, further boosting Prime Editing efficiency. By fine-tuning the length of the Reverse Transcriptase Template and Primer Binding Sequence, we ensured optimal pegRNA performance, maximizing editing efficiency. </p>
<p><small>5‘TCTGTATCTATATTCATCATGTTTTAGAGCTAGAAATAGCAAGTTAAAATAAGGCTAGTCCGTTATCAACTTGAAAAAGTGGCACCGAGTCGGTGCGATATGTTCAGGTAAGTGTGTCATACGATGAATATAGATACAGCGCGGTTCTATCTAGTTACGCGTTAAACCAACTAGAATTTTTTT3‘ </small></p>
<H4 text="Our Prime Editing Technology PrimeGuide "/>
<div className="row">
<div className="col">
<img src="https://static.igem.wiki/teams/5247/engineering-cycle/pecomplex.svg"/>
</div>
<div className="col">
<p>We developed a groundbreaking Prime Editing system designed to overcome current limitations in genome editing. As part of this innovation, we introduced a novel eukaryotic RNA-binding DNA-nickase protein, created through enzyme engineering. This protein serves as a much smaller alternative to the traditional Cas9, making it easier to use in Prime Editing and other genetic applications. </p>
</div>
</div>
<p>Additionally, we implemented significant improvements, such as a more efficient Reverse Transcriptase and optimized RNA-binding proteins, which together enhance the overall efficiency of the Prime Editing complex while minimizing off-target effects. </p>
<div className="row">
<div className="col">
<img src="https://static.igem.wiki/teams/5247/engineering-cycle/primeguide-logo.svg"/>
</div>
<div className="col">
<p>By contributing this advancement, we enable safer and more precise Prime Editing for correcting genetic mutations. Our composite part is versatile and can be applied to various contexts, offering immense value to the synthetic biology community. This contribution not only enhances Prime Editing technologies but also provides future researchers with more robust tools for their genetic engineering endeavors. </p>
</div>
</div>
<H4 text="Our Lipid Nanoparticle AirBuddy "/>
<img src="https://static.igem.wiki/teams/5247/engineering-cycle/airbuddy-overview.svg"/>
<p>Our innovative delivery system enables the lung-specific transport of RNA and DNA molecules into eukaryotic cells, offering a significant advancement for gene therapies targeting lung diseases. This formulation overcomes the limitations of current delivery strategies by providing an advanced dry powder inhalation technology designed for controlled monthly use and cost-effective long-term storage, making it highly practical for sustained treatments. </p>
<p>The delivery system stands out for its low cytotoxicity compared to traditional methods like DEMPEG, ensuring a safer application. Its positively charged formulation is optimized for the efficient binding and transport of negatively charged lung cells, enhancing cargo delivery. The system's ideal size distribution further promotes efficient cellular uptake, resulting in significantly higher transfection rates compared to standard reagents like Lipofectamine. </p>
<p>Moreover, its lung-specific design makes it particularly suitable for treating various lung-specific diseases, while its sphere-like structures ensure excellent stability for use in dry powder inhalation therapies. This breakthrough in delivery technology provides a safer, more efficient, and cost-effective solution for delivering genetic material to target cells, with the potential to revolutionize lung disease treatments. </p>
</Subesction>
)
}
\ No newline at end of file
src/contents/Contribution/Wiki/Wiki-downloads.tsx 0 → 100644
View file @ 3fd292fd
import { H4 } from "../../../components/Headings";
import { TwoLinePDF } from "../../../components/Pdfs";
export function WikiDown(){
return(
<>
<div className="col cycletab" id="flyers" style={{display: "block"}}>
<div className='row align-items-center'>
<p>Please note that due to the freezing of the wiki we will not be able to continously update the guide. To obtain the current version, email the current iGEM team Bielefeld (info[at]igem-bielefeld[dot]de) or the Head of Wiki from 2024 (liliana.sanfilippo[at]uni-bielefeld[dot]de). </p>
<div className="row">
<div className="col">
<H4 text="Our Wiki Guide"/>
<TwoLinePDF link='https://static.igem.wiki/teams/5247/pdfs/wiki-broschure-v1-2.pdf' name="wiki-broschure-v1-2.pdf" />
</div>
<div className="col">
<H4 text="Our Wiki Helper"/>
<TwoLinePDF link='https://static.igem.wiki/teams/5247/pdfs/vokabelliste-wiki.pdf' name="vokabelliste-wiki.pdf" />
</div>
</div>
<H4 text="SVGs"/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/albuterol.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler-with-capsules.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-inhaler.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/hypertonic-saline-triple.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/orkambi.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fat.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}}src="https://static.igem.wiki/teams/5247/scientific-figures/trikafta-beide.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/hypertonic-saline-single.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/cough.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/cold.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mask.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/gibbsreflection.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}}src="https://static.igem.wiki/teams/5247/scientific-figures/feedbackcycle.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mendelow-1-aktuell.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mendelow-2.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mendelow-3-1.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mendelow-4.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/first-place.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/second-place.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/third-place.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/box.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/certificate.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/kit.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/new-box.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/tickets.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/trophy.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/download.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/justice.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/talking-bubbles.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/design/icons/test-tube.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/bones.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/brain.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/glands.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/heart.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/largeintestine.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/liver.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/lungs.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/nose.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/pancreas.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/pregnancy.svg"/>
</div>
</div>
<br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/skin.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/stomach.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/diet.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/modulators.svg"/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src="https://static.igem.wiki/teams/5247/scientific-figures/mucolytics.svg"/>
</div>
</div>
{/* <br/>
<hr/>
<br/>
<div className="row" style={{maxHeight: "100px", marginBottom: "20px", marginTop: "20px", paddingTop: "20px", paddingBottom: "20px"}}>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
<div className="col">
<img style={{maxHeight: "80px"}} src=""/>
</div>
</div> */}
</div>
</div>
</>
)
}
\ No newline at end of file
src/contents/Contribution/Wiki/wiki-overview.tsx
View file @ 3fd292fd
......@@ -3,6 +3,7 @@ export function WikiOverview(){
return(
<div>
<p>This content is not yet finished and will be reworked after the Jamboree.</p>
<p>To help teams get started, we wrote down what we wished we would have easily found while building our wiki with React.</p>
<p><b>Getting startet</b> explains some basics that are important to know. This especially concerns the differences between using plain HTML and React, but the structure of the wiki, too. </p>
<p><b>Troubleshooting</b> is an iteractive search for problems that may arise and how we solved them. </p>
......
src/contents/Contribution/Wiki/wiki-sources.tsx
View file @ 3fd292fd
......@@ -16,20 +16,41 @@ export function Sources(){
<li> <a href="https://biologicalicons.com/en">https://biologicalicons.com/en</a> </li>
<li> <a href="https://www.svgrepo.com/">https://www.svgrepo.com/</a> </li>
<li> <a href="https://www.humanbiomedia.org/">https://www.humanbiomedia.org/</a> </li>
<li><a href="https://smart.servier.com/">https://smart.servier.com/</a></li>
</ul>
<ul>
<li><a href="https://superdesigner.co/tools/svg-backgrounds">https://superdesigner.co/tools/svg-backgrounds</a></li>
</ul>
</Collapsible>
<Collapsible id="wiki-colors" title="Colours" >
Need a slightly lighter version of one of your colors or a mix of two colours?
<ul>
<li><a href="https://www.w3schools.com/colors/colors_mixer.asp"> https://www.w3schools.com/colors/colors_mixer.asp</a></li>
<li><a href="https://www.w3schools.com/colors/colors_mixer.asp"> Color Mixer</a></li>
<li><a href="https://redketchup.io/color-picker">Image Color Picker</a></li>
<li><a href="https://coolors.co/">Color Palette Creator</a></li>
<li><a href="https://rgbcolorcode.com/color/converter/"> HEX to RGB and back</a></li>
<li><a href="https://cssgradient.io/"> CSS gradient picker</a></li>
</ul>
{/* <li><a href=""></a></li> */}
</Collapsible>
<Collapsible id="wiki-tools" title="Coding Tools">
Generators
<Collapsible id="wiki-tools" title="Coding">
<ul>
<li><a href="https://www.cssportal.com/">https://www.cssportal.com/</a></li>
<li><a href="https://www.cssportal.com/">CSS resources</a></li>
<ul>
<li><a href="https://www.cssportal.com/scss-to-css/">SCSS to CSS</a></li>
<li><a href=" https://www.cssportal.com/css-clip-path-generator/">CSS Clip Path generator</a></li>
</ul>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS flexbox guide</a></li>
<li><a href="https://transform.tools/html-to-jsx">HTML to JSX</a></li>
<li><a href="https://nikitahl.github.io/svg-2-code/">Turn SVGs into HTML code</a></li>
<li><a href="https://www.svgviewer.dev/svg-to-react-jsx">Turn SVGs into JSX code</a></li>
<li><a href="https://www.prettifycss.com/">Prettify CSS</a></li>
<li><a href="https://htmlcss.tools/">https://htmlcss.tools/</a></li>
<li><a href="https://beautifytools.com/javascript-beautifier.php">Prettify JS</a></li>
<li><a href="https://tympanus.net/Development/ClickEffects/">Click effects</a></li>
<li><a href="https://michalsnik.github.io/aos/">AOS</a></li>
<li><a href="https://flamingtempura.github.io/bibtex-tidy">Tidy bibtex</a></li>
<li><a href="https://www.toptal.com/designers/htmlarrows/arrows/">HTML entity codes</a></li>
</ul>
</Collapsible>
......@@ -39,11 +60,6 @@ export function Sources(){
</ul>
</Collapsible>
<Collapsible id="wiki-svgs" title="SVGs">
<ul>
<li><a href="https://superdesigner.co/tools/svg-backgrounds">https://superdesigner.co/tools/svg-backgrounds</a></li>
</ul>
</Collapsible>
<Collapsible id="wiki-accessibility" title="Accessibility">
<ul>
......
src/contents/Contribution/Wiki/wiki-tabs.tsx
View file @ 3fd292fd
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Tab } from "@mui/material";
import React from "react";
import { Started } from "./wiki-start";
import { Sources } from "./wiki-sources";
import { Troubleshooting } from "./troubleshooting";
import { WikiOverview } from "./wiki-overview";
import { WikiDown } from "./Wiki-downloads";
export function WikiTabs() {
const [value, setValue] = React.useState('1');
......@@ -18,21 +16,15 @@ export function WikiTabs() {
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label="Overview" value="1" />
<Tab label="Getting started" value="6" />
<Tab label="Troubleshooting" value="2" />
<Tab label="Components" value="3" />
<Tab label="Downloads" value="4" />
<Tab label="Resources" value="5" />
<Tab label="Wiki Guide & Downloads" value="1" />
<Tab label="Other Resources" value="2" />
</TabList>
</Box>
<TabPanel value="1"> <WikiOverview/> </TabPanel>
<TabPanel value="6"> <Started/> </TabPanel>
<TabPanel value="2"> <Troubleshooting/> </TabPanel>
<TabPanel value="3"> </TabPanel>
<TabPanel value="4"> </TabPanel>
<TabPanel value="5"> <Sources/> </TabPanel>
<TabPanel value="1"> <WikiDown/> </TabPanel>
<TabPanel value="2"> <Sources/> </TabPanel>
</TabContext>
</Box>
);
......
src/contents/Contribution/Wiki/wiki.tsx
View file @ 3fd292fd
import { Section } from "../../../components/sections";
import { Subesction } from "../../../components/sections";
import { WikiTabs } from "./wiki-tabs";
export function Wiki () {
return (
<Section title="Wiki" id="Wiki">
<Subesction title="Wiki Developement" id="Our Contributions2">
<WikiTabs></WikiTabs>
</Section>
</Subesction>
);
}
\ No newline at end of file
src/contents/Contribution/collabs.tsx
View file @ 3fd292fd
import { H4 } from "../../components/Headings";
import { PDF } from "../../components/Pdfs";
import { Section } from "../../components/sections";
import { Subesction } from "../../components/sections";
import { useNavigation } from "../../utils";
......@@ -8,12 +8,11 @@ export function CollabContribution(){
const {goToPagesAndOpenTab} = useNavigation();
return(
<Section title="Collaborations" id="Collaborations">
<H4 id="Handbook-heading" text="Hanbook for download"/>
<Subesction title="LNP Handbook" id="Our Collaborations2">
<p>In collaboration with the iGEM teams <a href="https://2024.igem.wiki/linkoping/">Linkoping</a>, <a href="https://2024.igem.wiki/patras/">Patras</a>, <a href="https://2024.igem.wiki/radboud-university/team">Radboud University</a> and <a href="https://2024.igem.wiki/termosz-selye-hun/">TERMOSZ-Selye-HUN</a>, we contributed a comprehensive overview of lipid-based delivery systems. Our contribution to the handbook aims to provide future iGEM teams with a deeper understanding of LNP (Lipid Nanoparticle) development. By bringing together diverse teams and innovative solutions, we strive to make a positive impact on the emerging field of LNP design. Our goal is to enhance the accessibility of various LNP formulations and adapt this promising technology for a wide range of therapeutic applications. </p>
<p>Download our LNP Hanbook that was created in <a onClick={() => goToPagesAndOpenTab('colls2024', '/human-practices')}>cooperation</a> with the team <a href="https://2024.igem.wiki/linkoping/">Linköping</a>.</p>
<PDF link="https://static.igem.wiki/teams/5247/pdfs/liposomes-handbook.pdf" name="liposomes-handbook.pdf"/>
</Section>
</Subesction>
)
}
\ No newline at end of file
src/contents/Contribution/contribution.tsx
View file @ 3fd292fd
import { GuidePDF } from "../../components/Pdfs";
import { Section, Subesction } from "../../components/sections";
import { useTabNavigation } from "../../utils/TabNavigation";
import { MeetUP } from "./BFH/bfh";
import { CollabContribution } from "./collabs";
import { PatientContribution } from "./patient-contribution";
import { SafetyContribution } from "./safety-contribution";
import { Wiki } from "./Wiki/wiki";
......@@ -9,11 +10,38 @@ export function Contribution() {
useTabNavigation();
return (
<>
<Section title="Abstract" id="Abstract">
<p>The BFH European Meet-Up showcased significant contributions to the iGEM community through extensive collaborations and innovative advancements. Our key contributions include the development of the BFH Guideline in partnership with iGEM teams Hamburg and Frankfurt, providing a blueprint for future Meet Ups, and a collaborative video podcast with iGEM Münster, offering insights into team growth. </p>
<p>Additionally, we contributed to the LNP Handbook with teams from <a href="https://2024.igem.wiki/linkoping/">Linkoping</a>, <a href="https://2024.igem.wiki/patras/">Patras</a>, <a href="https://2024.igem.wiki/radboud-university/team">Radboud University</a>, and <a href="https://2024.igem.wiki/termosz-selye-hun/">TERMOSZ-Selye-HUN</a>, advancing lipid-based delivery systems for therapeutic use. </p>
<p>On the scientific front, we developed practical tools like a collection of optimized protocols, the PreCL reporter system for Prime Editing, and the innovative PrimeGuide Prime Editing technology, enhancing research efficiency and precision. Our AirBuddy lipid nanoparticle system represents a breakthrough in gene therapy, offering a safer and more effective method for lung-specific RNA and DNA delivery. These collaborations and innovations will have a lasting impact, supporting future iGEM teams and driving forward synthetic biology research. </p>
</Section>
<MeetUP/>
<SafetyContribution/>
<CollabContribution/>
<PatientContribution/>
<Wiki/>
<Section title="Our Collaborations" id="Our Collaborations">
<Subesction title="MeetUp Guideline" id="Our Collaborations1">
<GuidePDF/>
<p>In cooperation with the iGEM teams Hamburg and Frankfurt, we have developed a comprehensive guideline for the organization of a meet-up. This guideline serves as a template for other iGEM teams and provides a complete overview of all essential aspects that should be considered when planning and organizing a successful meet-up. It covers all the necessary content, from initial brainstorming to practical implementation, and is designed to help teams organize their own events smoothly. </p>
<p>Additionally, in collaboration with iGEM Münster, we created a video podcast that summarizes the developments and feedback from the participating teams and reflects on both Meet-ups. It was particularly interesting to observe the growth of the team members and the progress of their projects. The video podcast will be featured on the Wiki page of Team Münster and will also be included here after the Wiki freeze. </p>
</Subesction>
<CollabContribution/>
</Section>
<Section title="Our Contributions" id="Our Contributions">
<SafetyContribution/>
<Wiki/>
</Section>
<Section title="Conclusion" id="Conclusion">
<p>Throughout the BFH European Meet-Up, we actively engaged in meaningful collaborations and made significant contributions to the iGEM community. In partnership with iGEM teams Hamburg and Frankfurt, we developed the BFH Guideline, a comprehensive resource designed to help future teams successfully organize Meet Ups. Our collaboration with iGEM Münster resulted in a video podcast that reflects on the growth and progress of participating teams, providing valuable insights for future competitions. </p>
<p>Additionally, we worked alongside teams from <a href="https://2024.igem.wiki/linkoping/">Linkoping</a>, <a href="https://2024.igem.wiki/patras/">Patras</a>, <a href="https://2024.igem.wiki/radboud-university/team">Radboud University</a>, and <a href="https://2024.igem.wiki/termosz-selye-hun/">TERMOSZ-Selye-HUN</a> to contribute to the LNP Handbook, advancing knowledge in lipid-based delivery systems for therapeutic applications. </p>
<p>On the scientific front, we created a collection of protocols, the PreCL reporter system, and the innovative PrimeGuide Prime Editing technology, all of which aim to enhance research efficiency and precision. Our AirBuddy nanoparticle system for lung-specific delivery further exemplifies our commitment to advancing gene therapy solutions. These collaborations and contributions not only enriched the event but will continue to have a lasting impact on future iGEM teams and synthetic biology research. </p>
</Section>
</>
);
}
......
src/contents/Contribution/patient-contribution.tsx
View file @ 3fd292fd
import { TwoLinePDF } from "../../components/Pdfs";
import { Section } from "../../components/sections";
import { H4 } from "../../components/Headings";
import { PDF, TwoLinePDF } from "../../components/Pdfs";
export function PatientContribution(){
return(
<>
<Section title="Patient Matters" id="Patient Matters" >
<div className='row align-items-center'>
<div className='col '>
<H4 text="Patient consent form"/>
<TwoLinePDF link="https://static.igem.wiki/teams/5247/pdfs/patienteneinwilligung-mustervorlage-igem-2.pdf" name="patienteneinwilligung-mustervorlage-igem-2.pdf"/>
</div>
<div className='seperator-2 col-2'>
</div>
<div className='col '>
<TwoLinePDF link="https://static.igem.wiki/teams/5247/pdfs/final-hygiene-concept.pdf" name="final-hygiene-concept.pdf"/>
</div>
<H4 text="Questionnaire for sample collection "/>
<TwoLinePDF link="https://static.igem.wiki/teams/5247/pdfs/translated-questionnaire-cf-patients.pdf" name="translated-questionnaire-cf-patients.pdf"/>
</div>
<p>When working with primary cultures, it is extremely important to consider the bioethical aspects of the project. To address this, we sat down with the Ethics Officer at Bielefeld University, Dr. Berens, and discussed the matter with her. As a result, we created a patient consent form for the donors of primary cells, which we also want to present as a template for future German iGEM teams. <b>However, we want to emphasize that it is not guaranteed to be comprehensive, nor does it have any legal approval.</b></p>
<H4 text="Hygiene Concept"/>
<PDF link="https://static.igem.wiki/teams/5247/pdfs/final-hygiene-concept.pdf" name="final-hygiene-concept.pdf"/>
</div>
</Section>
</>
......
src/contents/Contribution/safety-contribution.tsx
View file @ 3fd292fd
import { H4 } from "../../components/Headings";
import { PDF } from "../../components/Pdfs";
import { Section } from "../../components/sections";
import { Subesction } from "../../components/sections";
import { PatientContribution } from "./patient-contribution";
export function SafetyContribution(){
return(
<>
<Section title="Primary Culture Safety Guideline" id="Safety Guideline" >
<Subesction title="Biosafety & Security" id="Our Contributions1" >
<H4 text="Primary Culture Safety Guideline"/>
<p>In the early phases of our project, we encountered several challenges while working to bring it together. We quickly decided to focus on human biomaterials, specifically cultivating primary human nasal epithelial cells from both Cystic Fibrosis (CF) patients and wild-type controls. To ensure compliance, we carefully evaluated the safety regulations of our institution and government. Our contribution includes three key elements: </p>
<ol>
<li> A guideline outlining the proper handling of biomaterials according to BSL2 standards, along with additional safety measures to ensure secure experimental design. </li>
<li> A clinical trial-style questionnaire designed to assess the medical history of participants donating nasal epithelial cells. </li>
<li> A hygiene protocol aimed at improving safety and cleanliness standards in various institutions and sanitary facilities. </li>
</ol>
<PDF link="https://static.igem.wiki/teams/5247/pdfs/primary-culture-guideline.pdf" name="primary-culture-guideline.pdf"/>
</Section>
<PatientContribution/>
<p>By contributing these frameworks, we enable future iGEM teams to overcome potential limitations that may arise during project development. These resources provide clear guidelines and tools to ensure safety, regulatory compliance, and efficient workflow, allowing teams to focus on advancing their research without facing similar challenges. </p>
</Subesction>
</>
)
......