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

src/App/mediarules.css

@@ -132,6 +132,11 @@
       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 */
+  }
     /***Biosafty***/
     #safehead {
       background-size: contain; /* Adjust the image to fit within the container */

src/components/Breathe.tsx

@@ -99,8 +99,8 @@ export function Breathe(){
                     {/* 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',
@@ -116,8 +116,8 @@ export function Breathe(){
                     {/* 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',
@@ -132,13 +132,13 @@ export function Breathe(){
                     </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',
@@ -181,8 +181,8 @@ export function Breathe(){
                         }}
                         src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
                     </div>
-                    <p style={{'fontSize' : '2.5em'}}>Breathing is  </p>
-                    <p style={{'fontSize' : '2.5em'}}>essential.</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> */}
@@ -200,9 +200,9 @@ export function Breathe(){
                     </div>
                     {/* Spacing Block */}
                     <div className='col' style={{ 'height': '100vh' }}></div>
-                    <p style={{'fontSize' : '2.5em'}}>That is why we </p>
-                    <p style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
-                    <p style={{'fontSize' : '2.5em'}}><b>cystic fibrosis.</b></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 
@@ -222,11 +222,11 @@ export function Breathe(){
                         src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
                     </img>
                 </div>
-                <p style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
-                <p style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
-                <p style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</p>
-                <p style={{'fontSize' : '2.5em'}}>can not properly function</p> {/*  on their own. */}
-                <p style={{'fontSize' : '2.5em'}}>on their own.</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

@@ -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="Methoods"></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>

src/contents/Contribution/Wiki/Wiki-downloads.tsx

+import { H4 } from "../../../components/Headings";
+import { PDF } from "../../../components/Pdfs";
+
+export function WikiDown(){
+
+    return(
+    <>
+        <div className="col cycletab" id="flyers" style={{display: "block"}}>
+            <div className='row align-items-center'>
+                <H4 text="Our Wiki Helper"/>
+                <PDF link='https://static.igem.wiki/teams/5247/pdfs/vokabelliste-wiki.pdf' name="vokabelliste-wiki.pdf"/>
+                <H4 text="svgs"/>
+                <div className="row">
+                    <div className="col">
+
+                    </div>
+                    <div className="col">
+                        
+                    </div>
+                    <div className="col">
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+    )
+}
\ No newline at end of file

src/contents/Contribution/Wiki/wiki-tabs.tsx

@@ -5,6 +5,7 @@ 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');
@@ -31,7 +32,7 @@ export function WikiTabs() {
           <TabPanel value="6"> <Started/>  </TabPanel>
           <TabPanel value="2"> <Troubleshooting/> </TabPanel>
           <TabPanel value="3">  </TabPanel>
-          <TabPanel value="4">   </TabPanel>
+          <TabPanel value="4"> <WikiDown/>  </TabPanel>
           <TabPanel value="5">  <Sources/> </TabPanel>
         </TabContext>
       </Box>

src/contents/Home.tsx

@@ -29,7 +29,7 @@ export function Home() {
                 <p>
                   &#8594; <a href="description?scrollTo=Abstract">What is <PreCyse/>? </a> <br/> <br/> 
                   &#8594; <a href="engineering?tab=tab-our-cycle&scrollTo=ourcycle">What is our strategy?</a> <br/> <br/>
-                  &#8594; <a href="/materials-methods?scrollTo=introduction">How did we do this?</a> <br/> <br/>
+                  &#8594; <a href="materials-methods?scrollTo=introduction">How did we do this?</a> <br/> <br/>
                   &#8594; <a href="results?scrollTo=experimental-design">What did we archieve?</a> <br/> <br/>
                   &#8594; <a href="parts?scrollTo=Parts Collection2">What parts are we contributing?</a> <br/> <br/>
                   &#8594; <a href="judging?scrollTo=OverviewH">What are our special awards?</a>
@@ -113,7 +113,9 @@ export function Home() {
 
 
 
-
+          <div className="row">
+          <iframe title="Bielefeld-CeBiTec: PreCyse - Redefining Cystic Fibrosis Gene Therapy with Next-G... (2024) - Project Promotion [English]" width="100%" height="600ßx" src="https://video.igem.org/videos/embed/74e7d2e6-044a-4e37-83eb-8a6d12626409?loop=1" frameBorder="0" allowFullScreen={true} sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+          </div>
 
 
          {/* 

src/contents/description.tsx

@@ -18,8 +18,8 @@ import DescSources from "../sources/description-sources";
 
 export function Description() { 
     useTabNavigation();
-    const {goToPagesAndOpenTab} = useNavigation();
-    const {goToPageAndScroll} = useNavigation();
+    const {goToPagesAndOpenTab, goToPageWithTabAndScroll} = useNavigation();
+    const {goToPageAndScroll, goToPageWithTabAndCollapsible} = useNavigation();
   return (
       <div className="row mt-4">
         <div className="col">
@@ -298,10 +298,10 @@ export function Description() {
                     </Collapsible>
                     <br/>
                     <div id="airbuddy-hook" className='row align-items-center'>
-                        <p>To optimize AirBuddy for pulmonary delivery, we collaborated extensively with several experts, including <a onClick={() => goToPagesAndOpenTab('weber', '/human-practices')}>Prof. Weber, Dr. Große-Onnebrink</a> and <a onClick={() => goToPagesAndOpenTab('kolonkofirst', '/human-practices')}>Dr. Kolonko</a> as medical experts, <a onClick={() => goToPagesAndOpenTab('kristian', '/human-practices')}>Prof. Dr. Müller</a>, <a onClick={() => goToPagesAndOpenTab('radukic', '/human-practices')}>Dr. Radukic</a>, <a onClick={() => goToPagesAndOpenTab('moorlach', '/human-practices')}>Benjamin Moorlach</a> and the <a onClick={() => goToPagesAndOpenTab('biophysik', '/human-practices')}>Physical and Biophysical Chemistry working group</a> as academic experts form Bielefeld University and FH Bielefeld as well as <a onClick={() => goToPagesAndOpenTab('corden', '/human-practices')}>Corden Pharma</a> and <a onClick={() => goToPagesAndOpenTab('rnhale', '/human-practices')}>RNhale</a> as industrial experts. Throughout the <a onClick={() => goToPagesAndOpenTab('delivery head', '/engineering')}>development process</a>, we tested two commercially available kits: the <strong>Cayman Chemical LNP Exploration Kit (LNP-102)</strong> and the <strong>Corden Pharma LNP Starter Kit #2</strong>. While the Cayman kit demonstrated limited transfection efficiency, the Corden Pharma formulation significantly enhanced cellular uptake in lung tissues. Building on this, we integrated the <strong>SORT LNP</strong> method based on Wang's research <SupScrollLink label="1"/> , making our nanoparticles lung-specific. Additionally, we employed the <strong>spray-drying technique</strong> in cooperation with RNhale <SupScrollLink label="2"/>  to improve the stability of our LNP, ensuring that it withstands the inhalation process without degradation. This stability is crucial for the efficient delivery of mRNA into lung epithelial cells, where PrimeGuide can effectively perform genome editing.</p>
+                        <p>To optimize AirBuddy for pulmonary delivery, we collaborated extensively with several experts, including <a onClick={() => goToPagesAndOpenTab('weber', '/human-practices')}>Prof. Weber, Dr. Große-Onnebrink</a> and <a onClick={() => goToPagesAndOpenTab('kolonkofirst', '/human-practices')}>Dr. Kolonko</a> as medical experts, <a onClick={() => goToPagesAndOpenTab('kristian', '/human-practices')}>Prof. Dr. Müller</a>, <a onClick={() => goToPagesAndOpenTab('radukic', '/human-practices')}>Dr. Radukic</a>, <a onClick={() => goToPagesAndOpenTab('moorlach', '/human-practices')}>Benjamin Moorlach</a> and the <a onClick={() => goToPagesAndOpenTab('biophysik', '/human-practices')}>Physical and Biophysical Chemistry working group</a> as academic experts form Bielefeld University and FH Bielefeld as well as <a onClick={() => goToPagesAndOpenTab('corden', '/human-practices')}>Corden Pharma</a> and <a onClick={() => goToPagesAndOpenTab('rnhale', '/human-practices')}>RNhale</a> as industrial experts. Throughout the <a onClick={() => goToPageWithTabAndScroll({tabId:'tab-delivery', path: '/engineering', scrollToId: "delivery-header"})}>development process</a>, we tested two commercially available kits: the <strong>Cayman Chemical LNP Exploration Kit (LNP-102)</strong> and the <strong>Corden Pharma LNP Starter Kit #2</strong>. While the Cayman kit demonstrated limited transfection efficiency, the Corden Pharma formulation significantly enhanced cellular uptake in lung tissues. Building on this, we integrated the <strong>SORT LNP</strong> method based on Wang's research <SupScrollLink label="1"/> , making our nanoparticles lung-specific. Additionally, we employed the <strong>spray-drying technique</strong> in cooperation with RNhale <SupScrollLink label="2"/>  to improve the stability of our LNP, ensuring that it withstands the inhalation process without degradation. This stability is crucial for the efficient delivery of mRNA into lung epithelial cells, where PrimeGuide can effectively perform genome editing.</p>
                         <img src="https://static.igem.wiki/teams/5247/delivery/big-plan-inhalation-teil-del.webp"/>  
                     </div>
-                   <p>To evaluate the <strong>delivery efficiency</strong>, we transfected HEK292 and CFBE41o- cells using fluorescent cargo and quantified the results through FACS analysis. We also ensured that AirBuddy meets the necessary standards for safety and efficacy since we conducted extensive <a onClick={() => goToPageAndScroll ('In-Depth Characterization of LNPsH', '/materials-methods')}> characterization of the LNPs </a>using techniques such as Zeta potential analysis, Dynamic Light Scattering (DLS), Scanning Electron Microscopy (SEM), and Cryogenic Electron Microscopy (cryo-EM). These methods confirmed the uniformity, stability, and optimal size distribution of the nanoparticles. Furthermore, <strong>cytotoxicity assessments</strong> including MTT and proliferation assays demonstrated that our LNPs are biocompatible and do not impede cell growth or function by the incorporation of <a onClick={() => goToPagesAndOpenTab('it4', '/engineering')}>PEG</a> and other ambivalent components. These findings reinforce AirBuddy's potential as a safe and effective tool for pulmonary delivery, with broad implications for gene therapies targeting lung diseases.</p>
+                   <p>To evaluate the <strong>delivery efficiency</strong>, we transfected HEK292 and CFBE41o- cells using fluorescent cargo and quantified the results through FACS analysis. We also ensured that AirBuddy meets the necessary standards for safety and efficacy since we conducted extensive <a onClick={() => goToPageAndScroll ('In-Depth Characterization of LNPsH', '/materials-methods')}> characterization of the LNPs </a>using techniques such as Zeta potential analysis, Dynamic Light Scattering (DLS), Scanning Electron Microscopy (SEM), and Cryogenic Electron Microscopy (cryo-EM). These methods confirmed the uniformity, stability, and optimal size distribution of the nanoparticles. Furthermore, <strong>cytotoxicity assessments</strong> including MTT and proliferation assays demonstrated that our LNPs are biocompatible and do not impede cell growth or function by the incorporation of <a onClick={() => goToPageWithTabAndCollapsible({tabId:'tab-delivery', path: '/engineering', collapseId: "Col1"})}>PEG</a> and other ambivalent components. These findings reinforce AirBuddy's potential as a safe and effective tool for pulmonary delivery, with broad implications for gene therapies targeting lung diseases.</p>
                 </Subesction>
             </Section>
             

src/contents/judging.tsx

@@ -29,6 +29,12 @@ export function Judging() {
               </div>
             </div>
         </Section>
+        <div className="row align-items-center">
+          <div className="col">
+          <iframe title="Bielefeld-CeBiTec: Introduction (2024) [English]" width="100%" height="600px" src="https://video.igem.org/videos/embed/9ffc5914-df86-4ba7-a0eb-f324694988ee" frameBorder="0" allowFullScreen={true} sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+       
+          </div>
+        </div>
         <Section title="Best Therapeutic Project" id="Best Therapeutic Project">
           <p>Our project is a dual therapeutic approach targeting cystic fibrosis (CF), specifically the most common mutation, F508del. We aim to develop a curative solution by correcting the genetic defect using Prime Editing Technology while enhancing the folding of the CFTR protein. Additionally, we developed a Lipid Nanoparticle for the cell-specific targeting of lung epithelial cells. This project directly addresses the unmet therapeutic needs of CF patients, providing a long-term and potentially curative solution. </p>
           <h4>Has the team clearly defined the therapeutic problem they are addressing? </h4>

src/contents/methods.tsx

@@ -90,8 +90,8 @@ export function Methods() {
           <H4 text="Proliferation Assay to Monitor Long-Term Safety"></H4>
             <p>In addition to assessing immediate cytotoxicity, we also evaluated the long-term safety of the LNPs by conducting a proliferation assay. This assay tracked cell division and growth over time to determine whether the LNPs impacted cellular function. Our results showed that LNP-treated cells had similar growth rates to untreated controls, indicating that the LNPs do not interfere with normal cell processes. This further confirms their biocompatibility and suitability for use in biological systems.</p>
           </Subesction>
-          <Subesction title="Flow cytometry" id="FACS">
-            <p>To assess the transfection efficiency of our LNPs, we used fluorescence-activated cell sorting (FACS). This method involved tagging the LNPs with fluorescent markers and measuring their ability to deliver genetic material into target cells. FACS provided quantitative insights into how effectively the LNPs transfected cells, helping us optimize their design for gene therapy applications. </p>
+          <Subesction title="Flow cytometry" id="flow cytometry">
+            <p>To assess the transfection efficiency of our LNPs, we used flow cytometry. This method involved tagging the LNPs with fluorescent markers and measuring their ability to deliver genetic material into target cells. The flow cytometry results provided quantitative insights into how effectively the LNPs transfected cells, helping us optimize their design for gene therapy applications. </p>
           </Subesction>
 
           <Subesction title="In-Depth Characterization of LNPs" id="In-Depth Characterization of LNPs">

src/contents/parts.tsx

@@ -7,7 +7,7 @@ import { BasicParts  } from "../data/parts";
 export function Parts() {
   useTabNavigation();
   let headcols = ["Part Name", "Registry Code", "Part Description", "length [bp]", "type"]
-    return (
+    return ( 
       <div className="col">
         <Section title="Introduction" id="Introduction">
           <Subesction title="Description" id="Introduction1">
@@ -29,6 +29,7 @@ export function Parts() {
           <Subesction title="Cloning" id="Experiments1">
             <LoremMedium/> 
           </Subesction>
+          
         </Section>
         <Section title="Parts Collection" id="Parts Collection">
           <Subesction title="Plasmids" id="Parts Collection1">

src/contents/results.tsx

@@ -271,9 +271,9 @@ export function Results() {
                 Description here
               </figcaption>
             </figure>
-        <H5 text="FACS"/>
+        <H5 text="Flow cytometry"/>
           <div className="row align-items-center">
-          <p>We performed FACS analysis 72 h post-transfection to evaluate the transfection efficiency of the SORT LNP in HEK293. The relative percentage of fluorescent cells was determined by measuring the percentage of FITC-A+ cells, followed by normalization to the negative control and fold change calculation.</p>
+          <p>We performed flow cytometries analysis 72 h post-transfection to evaluate the transfection efficiency of the SORT LNP in HEK293. The relative percentage of fluorescent cells was determined by measuring the percentage of FITC-A+ cells, followed by normalization to the negative control and fold change calculation.</p>
             <div className="col">
               <figure>
               <img src="https://static.igem.wiki/teams/5247/delivery/results/sortlnp-facs.png" alt="SORTFACS" style={{maxHeight: "200pt"}}/> 

src/pages.ts

@@ -473,27 +473,17 @@ export const NavPages: (Page | PageRef | Folder)[] = [
           {
             name: "BFH European MeetUp",
             title: "MeetUp",
-            path: "contribution/?scrollTo=BFH European MeetUp"
+            path: "contribution/?scrollTo=bfh-european-meetup"
           },
           {
-            name: "Safety Guideline",
-            title: "Safety Guideline",
-            path: "contribution/?scrollTo=primary-culture-safety-guideline"
+            name: "Our Contributions",
+            title: "Our Contributions",
+            path: "contribution/?scrollTo=our-contributions"
           },
           {
             name: "Collaborations",
             title: "Collaborations",
-            path: "contribution/?scrollTo=collaborations"
-          },
-          {
-            name: "Patient Matters",
-            title: "Patient Matters",
-            path: "contribution/?scrollTo=patient-matters"
-          },
-          {
-            name: "Wiki",
-            title: "Wiki",
-            path: "contribution/?scrollTo=wiki"
+            path: "contribution/?scrollTo=our-collaborations"
           },
           ]
     },

src/sidebars/prtS.tsx

@@ -13,6 +13,6 @@ export function PartSidebar(){
 const tabs = [
     { tab: "Introduction", subtabs: ["Description", "Characterization"]},
     { tab: "Process", subtabs: ["EC", "Design and Build"]},
-    {tab: "Experiments", subtabs: ["Cloning", "Nikase-Assay", "Activity Experiments"]},
+    {tab: "Experiments", subtabs: ["Cloning"]},
     {tab: "Parts Collection", subtabs: ["Plasmids", "Basic Parts", "Composite Parts"]},
   ];