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

src/App/mediarules.css

@@ -133,12 +133,9 @@
       height: auto; 
     }
     /***home***/
-   #take-a-moment-text, 
-   #deeply-breathe-text, 
-   #breathe-out-text, 
-   #breathe-in-out-text {
-    font-size: 1.5em; /* Adjust font size for smaller screens */
-    text-align: center; /* Optional: center text for mobile */
+   #breatht  {
+    font-size: 1.5em !important; /* Adjust font size for smaller screens */
+    text-align: left; /* Optional: center text for mobile */
   }
     /***Biosafty***/
     #safehead {

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/contents/description.tsx

@@ -19,7 +19,7 @@ import DescSources from "../sources/description-sources";
 export function Description() { 
     useTabNavigation();
     const {goToPagesAndOpenTab, goToPageWithTabAndScroll} = useNavigation();
-    const {goToPageAndScroll} = useNavigation();
+    const {goToPageAndScroll, goToPageWithTabAndCollapsible} = useNavigation();
   return (
       <div className="row mt-4">
         <div className="col">
@@ -301,7 +301,7 @@ export function Description() {
                         <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/methods.tsx

@@ -91,7 +91,7 @@ export function Methods() {
             <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="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. FACS provided quantitative insights into how effectively the LNPs transfected cells, helping us optimize their design for gene therapy applications. </p>
+            <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 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">