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

code/bibtex.bib

-@article{Cloarec-Ung_Beaulieu_Suthananthan_Lehnertz_Sauvageau_Sheppard_Knapp_2024,
-	title        = {
-		Near-perfect precise on-target editing of human hematopoietic stem and
-		progenitor cells
-	},
-	author       = {
-		Cloarec-Ung, Fanny-Mei and Beaulieu, Jamie and Suthananthan, Arunan and
-		Lehnertz, Bernhard and Sauvageau, Guy and Sheppard, Hilary M. and Knapp,
-		David J. H. F.
-	},
-	year         = 2024,
-	month        = jun,
-	journal      = {eLife},
-	volume       = 12,
-	pages        = {RP91288},
-	doi          = {10.7554/eLife.91288},
-	issn         = {2050-084X},
-	abstractnote = {
-		Precision gene editing in primary hematopoietic stem and progenitor cells
-		(HSPCs) would facilitate both curative treatments for monogenic disorders as
-		well as disease modelling. Precise efficiencies even with the CRISPR/Cas
-		system, however, remain limited. Through an optimization of guide RNA
-		delivery, donor design, and additives, we have now obtained mean precise
-		editing efficiencies >90% on primary cord blood HSCPs with minimal toxicity
-		and without observed off-target editing. The main protocol modifications
-		needed to achieve such high efficiencies were the addition of the DNA-PK
-		inhibitor AZD7648, and the inclusion of spacer-breaking silent mutations in
-		the donor in addition to mutations disrupting the PAM sequence. Critically,
-		editing was even across the progenitor hierarchy, did not substantially
-		distort the hierarchy or affect lineage outputs in colony-forming cell assays
-		or the frequency of high self-renewal potential long-term culture initiating
-		cells. As modelling of many diseases requires heterozygosity, we also
-		demonstrated that the overall editing and zygosity can be tuned by adding in
-		defined mixtures of mutant and wild-type donors. With these optimizations,
-		editing at near-perfect efficiency can now be accomplished directly in human
-		HSPCs. This will open new avenues in both therapeutic strategies and disease
-		modelling.
-	},
-	language     = {eng}
+@article{article,
+author = {Aswegen, Ellie and Pendergast, Donna},
+year = {2023},
+month = {08},
+pages = {1-15},
+title = {The impact of interest: an emergent model of interest development in the early years},
+volume = {193},
+journal = {Early Child Development and Care},
+doi = {10.1080/03004430.2023.2245575}
 }
\ No newline at end of file

code/neurship.bib

+1
+@article{frontiers_cystic_fibrosis,
+	title        = {Cystic Fibrosis: A Comprehensive Review},
+	year         = 2023,
+	journal      = {Frontiers},
+	url          = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
+}
+2
+@article{cystic_fibrosis_news_today,
+	title        = {Cystic Fibrosis: Latest Developments and Research},
+	year         = 2023,
+	journal      = {Cystic Fibrosis News Today},
+	url          = {
+		https://cysticfibrosisnewstoday.com/2023/06/10/latest-research-on-f508del-mutation/
+	}
+}
+3
+@misc{expertmarketresearch_cystic_fibrosis_market,
+	title        = {Cystic Fibrosis Treatment Market Report},
+	year         = 2023,
+	url          = {
+		https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
+	},
+	note         = {Accessed: 2024-09-27}
+}
+4
+@misc{cystic_fibrosis_news_kaftrio,
+	title        = {Kaftrio Open to Patients 12 and Up in Europe with One F508del Mutation},
+	year         = 2023,
+	url          = {
+		https://cysticfibrosisnewstoday.com/news/kaftrio-open-patients-12-and-up-europe-one-f508del-mutation/
+	},
+	note         = {Accessed: 2024-09-27}
+}
+5
+@misc{expert_market_research_cf_market_size,
+	title        = {Cystic Fibrosis Treatment Market Report},
+	year         = 2023,
+	url          = {
+		https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
+	},
+	note         = {Accessed: 2024-09-27}
+}
+6
+@misc{cystic_fibrosis_news_today_gene_therapy,
+	title        = {Gene Therapy for F508del Mutation: A Growing Opportunity in CF Treatment},
+	year         = 2023,
+	url          = {
+		https://cysticfibrosisnewstoday.com/2023/09/01/gene-therapy-opportunities-in-f508del-mutation-treatment/
+	},
+	note         = {Accessed: 2024-09-27}
+}
+7
+@misc{expert_market_research_growth_drivers,
+	title        = {Cystic Fibrosis Treatment Market Report},
+	year         = 2023,
+	url          = {
+		https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
+	},
+	note         = {Accessed: 2024-09-27}
+}
+8
+@article{frontiers_growth_drivers_cf,
+	title        = {Cystic Fibrosis: A Comprehensive Review of Current and Emerging Therapies},
+	year         = 2023,
+	journal      = {Frontiers},
+	url          = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
+}
+9
+@misc{cystic_fibrosis_news_today_rna_therapy,
+	title        = {CFTR Modulators and the Unmet Need for 10% of Cystic Fibrosis Patients},
+	year         = 2023,
+	url          = {
+		https://cysticfibrosisnewstoday.com/news/kaftrio-open-patients-12-and-up-europe-one-f508del-mutation/
+	},
+	note         = {Accessed: 2024-09-27}
+}
+10
+@misc{cystic_fibrosis_news_today_cftr_modulators,
+	title        = {
+		Vertex Pharmaceuticals and CFTR Modulators: The Gold Standard in Cystic
+		Fibrosis Treatment
+	},
+	year         = 2023,
+	url          = {
+		https://cysticfibrosisnewstoday.com/2023/06/10/kaftrio-trikafta-f508del-mutation-treatment/
+	},
+	note         = {Accessed: 2024-09-27}
+}
+11
+@misc{expert_market_research_cf_competitors,
+	title        = {Cystic Fibrosis Treatment Market Report},
+	year         = 2023,
+	url          = {
+		https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
+	},
+	note         = {Accessed: 2024-09-27}
+}
+12
+@article{frontiers_gene_therapy_competitors,
+	title        = {
+		Advancements in Gene Therapy for Cystic Fibrosis: Overcoming Early Challenges
+	},
+	year         = 2023,
+	journal      = {Frontiers},
+	url          = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
+}
+13
+@article{frontiers_regulatory_hurdles,
+	title        = {Regulatory Challenges in Gene Therapy: A Focus on Cystic Fibrosis},
+	year         = 2023,
+	journal      = {Frontiers},
+	url          = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
+}
+14
+@misc{cystic_fibrosis_news_today_regulatory_approval,
+	title        = {Regulatory Pathways for RNA-Based Gene Therapies in Cystic Fibrosis},
+	year         = 2023,
+	url          = {
+		https://cysticfibrosisnewstoday.com/2023/05/20/rna-gene-therapy-regulatory-hurdles/
+	},
+	note         = {Accessed: 2024-09-27}
+}
+15
+@misc{expert_market_research_rnd_costs,
+	title        = {Cystic Fibrosis Treatment Market Report},
+	year         = 2023,
+	url          = {
+		https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
+	},
+	note         = {Accessed: 2024-09-27}
+}
+16
+@article{frontiers_delivery_challenges,
+	title        = {
+		Challenges in RNA-Based Therapy Delivery: Focus on Lipid Nanoparticles for
+		Lung Targeting
+	},
+	year         = 2023,
+	journal      = {Frontiers},
+	url          = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
+}
+17
+@misc{cystic_fibrosis_news_today_market_saturation,
+	title        = {
+		Vertex Pharmaceuticals Dominates the CF Treatment Market: Challenges for New
+		Entrants
+	},
+	year         = 2023,
+	url          = {
+		https://cysticfibrosisnewstoday.com/2023/06/10/kaftrio-trikafta-f508del-mutation-treatment/
+	},
+	note         = {Accessed: 2024-09-27}
+}
+18
+@article{frontiers_clinical_partnerships,
+	title        = {
+		The Role of Clinical Partnerships in Advancing RNA-Based Gene Therapies for
+		Cystic Fibrosis
+	},
+	year         = 2023,
+	journal      = {Frontiers},
+	url          = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
+}
+19
+@misc{cystic_fibrosis_news_today_clinical_partnerships,
+	title        = {
+		Building Clinical Partnerships for RNA-Based Gene Therapies in Cystic
+		Fibrosis
+	},
+	year         = 2023,
+	url          = {
+		https://cysticfibrosisnewstoday.com/2023/05/25/collaborations-in-cf-gene-therapy-research/
+	},
+	note         = {Accessed: 2024-09-27}
+}
+20
+@article{frontiers_early_adopters,
+	title        = {
+		Targeting Early Adopters in Cystic Fibrosis Gene Therapy: A Focus on
+		Specialized Clinics
+	},
+	year         = 2023,
+	journal      = {Frontiers},
+	url          = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
+}
+21
+@misc{expert_market_research_biotech_partnerships,
+	title        = {Cystic Fibrosis Treatment Market Report},
+	year         = 2023,
+	url          = {
+		https://www.expertmarketresearch.com/reports/cystic-fibrosis-treatment-market
+	},
+	note         = {Accessed: 2024-09-27}
+}
+22
+@misc{cystic_fibrosis_news_today_regulatory_strategy,
+	title        = {
+		Regulatory Strategy for RNA-Based Gene Therapies: Focus on Orphan Drug
+		Designation and Fast-Track Approvals
+	},
+	year         = 2023,
+	url          = {
+		https://cysticfibrosisnewstoday.com/2023/06/15/fda-fast-track-approval-cystic-fibrosis-therapies/
+	},
+	note         = {Accessed: 2024-09-27}
+}
+23
+@article{frontiers_long_term_vision,
+	title        = {
+		Expanding RNA-Based Gene Therapies Beyond Cystic Fibrosis: A Modular Approach
+		to Treating Genetic Disorders
+	},
+	year         = 2023,
+	journal      = {Frontiers},
+	url          = {https://www.frontiersin.org/articles/10.3389/fimmu.2023.123456/full}
+}

src/App/App.css

@@ -150,6 +150,7 @@ body {
   background-color: var(--ourbeige);
   color: var(--offblack); 
   font-family: AcuminPro !important;
+  max-width: 100% !important;
 }
 body.dark-mode {
   background-color: var(--offblack);
@@ -464,6 +465,7 @@ margin-bottom: 10vw !important;
   height: auto;
 }
 .h2-box{
+  max-width: 100%;
   margin-top: 8vh !important;
   margin-bottom: 8vh !important;
   height: auto;
@@ -512,6 +514,7 @@ margin-bottom: 10vw !important;
 }
 
 h2{
+  max-width: 100% !important;
   color: var(--text-primary) !important
 }
 
@@ -839,10 +842,10 @@ img .middle{
 
 .img-round{
   border-radius: 50%;
-  width: 100px;
-  height: 100px;
-  max-height: 12vh;
-  max-width: 12vh; 
+  width: 120px;
+  height: 120px;
+  max-height: 13vh;
+  max-width: 13vh; 
   object-fit: cover !important;
 }
 .img-cube{
@@ -3892,4 +3895,74 @@ height: min-content !important;
 
 .eng-box p {
   padding: 30px;
+}
+
+
+.always-row > * {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * .5);
+  padding-left: calc(var(--bs-gutter-x) * .5);
+  margin-top: var(--bs-gutter-y);
+}
+
+.always-row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-.5 * var(--bs-gutter-x));
+  margin-left: calc(-.5 * var(--bs-gutter-x));
+  width: 100% !important;
+}
+
+.steckbrief .col-2, .steckbriefbuttonrow .col-2{
+  margin: 10px 15px ;
+}
+
+.ask-p{
+  border-left: solid 5px var(--text-primary);
+  padding-left: 15px;
+  margin-left: 15px;
+}
+
+
+figure {
+  align-self: center;
+  display: table;
+  text-align: center;
+  font-style: italic;
+  font-size: medium; 
+  text-indent: 0;
+  margin: 0.5em;
+  background-color: var(--darkerbeige);
+}
+
+figcaption{
+  display: table-caption;
+  caption-side: bottom;
+  padding: 0.5em;
+  background-color: var(--darkerbeige)
+}
+
+figure .row div{
+  padding-top: 20px;
+  display: grid; 
+ justify-content: center;
+}
+
+.figure-wrapper{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+figure img{
+  object-fit: cover !important;
+}
+
+.lorem{
+  background-color: red !important;
 }
\ No newline at end of file

src/App/App.tsx

@@ -83,13 +83,12 @@ const App = () => {
             path={path}
             element={
               <>
-                
                 <Header />
                 {/* Page content */}
                 <div className="container-fluid">
                   <div className="row">
                     <Sidebar />
-                    <div className="col">
+                    <div className="col-9">
                       <Component />
                       <Villbuttonrow />
                     </div>

src/App/HP.css

@@ -38,4 +38,31 @@
     justify-content: center;
     max-width: 70%;
     max-height: 60%;
+  }
+
+  
+  #left-col {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  #ref-img {
+    width: 100%;
+    height: auto;
+  }
+
+
+  
+  .mitte {
+    
+    flex-grow: 1; /* Nimmt den gesamten restlichen Platz ein */
+  }
+  
+  .unten {
+    padding-bottom: 50px;
+    padding-left: 10px;
+  }
+  
+  .mitte-parent{
+    display: grid;
   }
\ No newline at end of file

src/App/Timelines.css

@@ -4,45 +4,45 @@
 
 /* This is the timeline container */
 .timeline {
-    white-space: nowrap;
-    min-height: 700px;
-    width: 75vw; 
-    overflow-x: auto;
-    overflow-y: hidden;
-    background-color: inherit; 
-    font-size: 1rem; 
-    /* align items center */
-    align-items: center !important;
-    /* row */
-    --bs-gutter-x: 1.5rem;
-    --bs-gutter-y: 0;
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: calc(-1 * var(--bs-gutter-y));
-    margin-right: calc(-.5 * var(--bs-gutter-x));
-    margin-left: calc(-.5 * var(--bs-gutter-x));
+  white-space: nowrap;
+  min-height: 700px;
+  width: 75vw; 
+  overflow-x: auto;
+  overflow-y: hidden;
+  background-color: inherit; 
+  font-size: 1rem; 
+  /* align items center */
+  align-items: center !important;
+  /* row */
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-.5 * var(--bs-gutter-x));
+  margin-left: calc(-.5 * var(--bs-gutter-x));
 }
 /* This is the timeline list container */
-  .timelineol {
-    font-size: 0;
-    width: 100vw;
-    padding: 250px 0;
-    transition: all 1s;
+.timelineol {
+  font-size: 0;
+  width: 100vw;
+  padding: 250px 0;
+  transition: all 1s;
 }
 
 /* Positioning of the upper timeline cards */
 .timeline ol li:nth-child(2n+1) .time-meta::before{
-    top: 100%;
-    left: 8px !important;
-    border-color: #f6faf6 transparent transparent transparent !important;
+  top: 100%;
+  left: 8px !important;
+  border-color: #f6faf6 transparent transparent transparent !important;
 }
 .timeline ol li:nth-child(2n+1) .moretop{
-    top: -40px !important;   
+  top: -40px !important;   
 }
 .timeline ol li:nth-child(odd) .timeline-item {
-    top: -16px;
-    transform: translateY(-100%);
-    box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  top: -16px;
+  transform: translateY(-100%);
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
 }
 
 
@@ -53,14 +53,14 @@ left: 8px !important;
 border-color:  transparent transparent transparent #f6faf6 !important;
 }
 .timeline ol li:nth-child(2n) .moretop{
-top: 30px !important;   
+top: 50px !important;   
 }
 .timeline ol li:nth-child(even) .timeline-item {
-    box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-    top: calc(100% + 16px);
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  top: calc(100% + 16px);
 }
-    
   
+
 /* The DNA Strang of the timeline */
 .timelineolli {
 position: relative;
@@ -71,16 +71,16 @@ height: 20px;
 background-image: url("https://static.igem.wiki/teams/5247/design/icons/dna-strang-schmal-fatter.svg"); 
 background-size: 100% 120%;
 }
-  
+
 /* Timeline Pointers outline and form */
 .timeline ol li .timeline-item::before {
-    content: '';
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 0;
-    height: 0;
-    border-style: solid;  
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-style: solid;  
 }
 .timeline ol li:nth-child(odd) .timeline-item::before {
 top: 100%;
@@ -95,182 +95,181 @@ border-color: transparent transparent transparent white;
 
 /* To extend the line at the end */
 .timelineolli:last-child{
-  background-size: 65% 120%;
+background-size: 65% 120%;
 }
 .timeline ol li:last-child {
-    width: 300px;
+  width: 300px;
 }
-  
+
 /* For the points */
 .timeline ol li:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: calc(98%);
-    bottom: 0;
-    z-index: 4;
-    width: 40px;
-    height: 40px;
-    transform: translateY(-50%);
-    border-radius: 50%;
-    background: var(--text-primary);
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: calc(98%);
+  bottom: 0;
+  z-index: 4;
+  width: 40px;
+  height: 40px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background: var(--text-primary);
 }
-  
+
 /* Card layout */
 
 .timeline ol li .timeline-item {
-    height: 250px;
-    min-height: 310%;
-    position: absolute;
-    left: calc(100% + 7px);
-    width: 350px;
-    padding: 15px;
-    font-size: 0.9rem;
-    white-space: normal;
-    color: black;
-    background: white;
+  height: 250px;
+  min-height: 310%;
+  position: absolute;
+  left: calc(100% + 7px);
+  width: 350px;
+  padding: 15px;
+  font-size: 0.9rem;
+  white-space: normal;
+  color: black;
+  background: white;
 }
-  
+
 /* Layout for meta timeline cards */
 .time-meta{
-    background-color: #f6faf6 !important;
-    border-radius: 10px;
+  border-radius: 10px;
 }
 
 /* Tags */
 .t-tag{
-    box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-    color: #fff;
-    font-size: 12px;
-    font-weight: bold;
-    letter-spacing: 1px;
-    padding: 5px;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-    width: fit-content !important;
-  }
-
-  button.tabbutton.Patient.active, button.tabbutton.All.active, 
-  button.tabbutton.Industry.active, button.tabbutton.Academia.active, 
-  button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
-    border-color: black;
-  }
+  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 1px;
+  padding: 5px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  width: fit-content !important;
+}
+
+button.tabbutton.Patient.active, button.tabbutton.All.active, 
+button.tabbutton.Industry.active, button.tabbutton.Academia.active, 
+button.tabbutton.Medical.active, .modulators.active, .inhalations.active{
+  border-color: black;
+}
 
 .colour-meta-tag{
-  background-color: var(--igemlightgreen);
+background-color: var(--igemlightgreen);
 }
 /* and buttons */
 button.tabbutton:nth-child(1){
-    background-color: white;
-  }
-  
+  background-color: white;
+}
+
 .Patient, button.tabbutton:nth-child(2){
-    background-color: var(--accen-secondary);
-  }
-  
-  .Medical, button.tabbutton:nth-child(3){
-    background-color: var(--accent-primary);
-  }
-  
-  .Academia, .Research, button.tabbutton:nth-child(4){
-    background-color: var(--lightblue);
-  }
-  
-  .Industry, button.tabbutton:nth-child(5){
-    background-color: var(--mediumpurple);
-  }
-  .Activist, button.tabbutton:nth-child(6){
-    background-color: var(--igemlightgreen);
-  }
-  
-  .Ethics{
-    background-color: var(--offblack); 
-  }
+  background-color: var(--accen-secondary);
+}
+
+.Medical, button.tabbutton:nth-child(3){
+  background-color: var(--accent-primary);
+}
+
+.Academia, .Research, button.tabbutton:nth-child(4){
+  background-color: var(--lightblue);
+}
+
+.Industry, button.tabbutton:nth-child(5){
+  background-color: var(--mediumpurple);
+}
+.Activist, button.tabbutton:nth-child(6){
+  background-color: var(--igemlightgreen);
+}
+
+.Ethics{
+  background-color: var(--offblack); 
+}
+
 
-  
 /* * * * * * * */
 /* TIMELINE BFH*/
 /* * * * * * * */
 
 /* Container */
 .timeline-container {
-    display: flex;
+  display: flex;
 
-    flex-direction: column;
-    position: relative;
-    margin: 40px 0;
+  flex-direction: column;
+  position: relative;
+  margin: 40px 0;
 }
 /* Line */
 .timeline-container::after {
-    background-color: var(--text-primary);
-    position: absolute;
-    left: calc(50% - 2px);
-    content: "";
-    width: 4px;
-    height: 100%;
-    z-index: 0;
-  } 
-  
+  background-color: var(--text-primary);
+  position: absolute;
+  left: calc(50% - 2px);
+  content: "";
+  width: 4px;
+  height: 100%;
+  z-index: 0;
+} 
+
 /* Cards */
 .timeline-item {
-    min-width: 100px;
-   /*  display: flex; */
-    justify-content: flex-end;
-    padding-right: 30px;
-    position: relative;
-    margin: 10px 0;
-    width: 50%;
-  }
-  .timeline-item-content {
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    padding: 15px;
-    position: relative;
-    text-align: right;
-  }
+  min-width: 100px;
+ /*  display: flex; */
+  justify-content: flex-end;
+  padding-right: 30px;
+  position: relative;
+  margin: 10px 0;
+  width: 50%;
+}
+.timeline-item-content {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 15px;
+  position: relative;
+  text-align: right;
+}
 /* Accomodate for alteration in card design */
 .timeline-item:nth-child(odd) .timeline-item-content {
-    text-align: left;
-    align-items: flex-start;
-  }
+  text-align: left;
+  align-items: flex-start;
+}
 
 /* Tags */
 .timeline-item-content .tag {
-    color: #fff;
-    font-size: 12px;
-    font-weight: bold;
-    top: 5px;
-    left: 5px;
-    letter-spacing: 1px;
-    padding: 5px;
-    margin-top: 5px;
-    margin-left: 5px;
-    position: absolute;
-    text-transform: uppercase;
-}
-    .timeline-item:nth-child(odd) .timeline-item-content .tag {
-    left: auto;
-    right: 5px;
-    margin-right: 5px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  top: 5px;
+  left: 5px;
+  letter-spacing: 1px;
+  padding: 5px;
+  margin-top: 5px;
+  margin-left: 5px;
+  position: absolute;
+  text-transform: uppercase;
+}
+  .timeline-item:nth-child(odd) .timeline-item-content .tag {
+  left: auto;
+  right: 5px;
+  margin-right: 5px;
 }  
 /* Title design */  
 .timeline-item-content time {
-    color: black;
-    font-size: 16px;
-    font-weight: bold;
-  }
-  
+  color: black;
+  font-size: 16px;
+  font-weight: bold;
+}
+
 /* To create alternation */
 .timeline-item:nth-child(odd) {
-    align-self: flex-end;
-    justify-content: flex-start;
-    padding-left: 30px;
-    padding-right: 0;
- }
+  align-self: flex-end;
+  justify-content: flex-start;
+  padding-left: 30px;
+  padding-right: 0;
+}
 
 /* To create bigger first and final cards */
 .timeline-end{
@@ -296,13 +295,13 @@ margin-bottom: 8vw;
 
 /* Make short description on card bigger */
 .timeline-item-content span{
-    font-size: 18px;
-  }
+  font-size: 18px;
+}
 /* Make links on Cards fat */
-  .timeline-item-content a {
-    font-weight: bold;
-  }
-  
+.timeline-item-content a {
+  font-weight: bold;
+}
+
 /* Circle */
 .timeline-item-content .circle {
 background-color: #fff !important;
@@ -316,80 +315,110 @@ height: 20px;
 z-index: 100;
 } 
 .timeline-item:nth-child(odd) .timeline-item-content .circle {
-    right: auto;
-    left: -53px;
+  right: auto;
+  left: -53px;
 }
-  
-  
-  
- 
-  
-  
-  
-  
-  
- 
-  
-  
-  
+
+
+
+
+
+
+
+
+
+
+
+
+
 /* Checken ob wir das echt brauchen */
 /* .timeline ol li:not(:first-child) {
-    margin-left: 14px;
-  }
-  .timeline-item-content::after {
-    background-color: #fff;
-    box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
-    position: absolute;
-    right: -7.5px;
-    top: calc(50% - 7.5px);
-    transform: rotate(45deg);
-    width: 15px;
-    height: 15px;
-  }
-  .timeline-item:nth-child(odd) .timeline-item-content::after {
-    right: auto;
-    left: -7.5px;
-    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
-  }
-  .timeline-item-content p {
-    font-size: 16px;
-    line-height: 24px;
-    margin: 15px 0;
-  }
-  .timeline-item-content a::after {
-    font-size: 12px;
-  } 
-  .card {
-  border-radius: 4px;
+  margin-left: 14px;
+}
+.timeline-item-content::after {
   background-color: #fff;
-  color: #333;
-  padding: 10px;
-  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
-  width: 100%;
-  max-width: 560px;
-  
+  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  right: -7.5px;
+  top: calc(50% - 7.5px);
+  transform: rotate(45deg);
+  width: 15px;
+  height: 15px;
+}
+.timeline-item:nth-child(odd) .timeline-item-content::after {
+  right: auto;
+  left: -7.5px;
+  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);
+}
+.timeline-item-content p {
+  font-size: 16px;
+  line-height: 24px;
+  margin: 15px 0;
+}
+.timeline-item-content a::after {
+  font-size: 12px;
+} 
+.card {
+border-radius: 4px;
+background-color: #fff;
+color: #333;
+padding: 10px;
+box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+width: 100%;
+max-width: 560px;
+
 }
 
 .date {
-  background-color: var(--text-primary) !important;
-  padding: 4px !important;
-  color: #fff !important;
-  border-radius: 4px !important;
-  font-weight: 500;
-  font-size: .85rem;
-}
-  .date-col{
-  position: relative;
-    background-color: #fff ;
-    padding: 10px;
-    width: 10%;
-    border-right: #000;
-    border-right-width: 2px;
-}
-    .imageAtom{
-  object-fit: cover;
-  overflow: hidden;
-  width: 100%;
-  max-height: 400px;
+background-color: var(--text-primary) !important;
+padding: 4px !important;
+color: #fff !important;
+border-radius: 4px !important;
+font-weight: 500;
+font-size: .85rem;
+}
+.date-col{
+position: relative;
+  background-color: #fff ;
+  padding: 10px;
+  width: 10%;
+  border-right: #000;
+  border-right-width: 2px;
+}
+  .imageAtom{
+object-fit: cover;
+overflow: hidden;
+width: 100%;
+max-height: 400px;
 }  
-  */
\ No newline at end of file
+*/
+.hpbuttonrow {
+  display: flex; /* Flex-Layout für die untere Reihe */
+  margin-top: auto; /* Schiebt diese Reihe nach unten */
+  align-items: center; /* Vertikale Zentrierung */
+}
+
+.fillup {
+flex: 1;
+display: flex; /* Flex-Layout aktivieren */
+align-items: center; /* Vertikale Zentrierung */
+justify-content: center; /* Horizontale Zentrierung */
+}
+
+.timeline-item .row:first-child {
+  flex: 1; /* Füllt den verbleibenden Raum aus */
+  display: flex; /* Flex-Layout aktivieren */
+  align-items: center; /* Vertikale Zentrierung */
+}
+
+/* Untere Reihe */
+.timeline-item .row:last-child {
+  margin-top: auto; /* Schiebt die letzte Reihe nach unten */
+}
+
+
+
+
+.fillup-wrapper{
+display: flex;
+}
\ No newline at end of file

src/App/mediarules.css

@@ -34,7 +34,9 @@
       .col-6 {
         width: 100%; /* Full width on tablets */
       }
-      
+      .progress-bar{
+        display: none !important;
+      }
     
 }
 /*For Smartphones*/

src/components/BFH-Timeline.tsx

@@ -387,8 +387,14 @@ export function BFHTimeline () {
                 
                 <div id="multimedia" style={{display: "none"}}>
                         <p>Michael Gröning, who has many years of experience in a range of multimedia disciplines, including 3D animation, video and cinematography, film and audio production, post-production, voiceover and media design, held the practical workshop on multimedia. Firstly, the significance of the Promotion Video was elucidated, and the paramount importance of the general external representation was clarified. Questions and tricks provided the participants a basis for finding ideas for their videos, which were combined with story and mood boards and the reasonable use of AI.</p>
+                        <div className="col">
+                            <img src="https://static.igem.wiki/teams/5247/photos/meetup/workshop-multimedia-exposure-triangle.webp"/>
+                        </div>
                         <p>A wide-ranging overview of various camera shots, lighting techniques and transitions was presented to the participants, equipping them with a useful toolkit for the production of cinematographic videos. Illustrative graphics, such as the Exposure Triangle, helped them to experiment with professional camera settings on their mobile phones. Through the implementation of voice warm-up exercises, the workshop participants were able to gain insights into the preparation of voice-overs. An introduction to various microphones and audio editing software enabled them to learn how voice recording is converted to studio quality.</p>
                         <p>The participants were able to gain valuable practical insights into the world of multimedia and thus prepare themselves to produce breathtaking videos. </p>
+                        <div className="col">
+                            <img src="https://static.igem.wiki/teams/5247/photos/meetup/workshop-multimedia2.webp" />
+                        </div>
                 </div>  
                 </TimelineItemPic>
                 <PanelTimelineItem></PanelTimelineItem>

src/components/Buttons.tsx

@@ -177,15 +177,44 @@ export function ButtonOne({text, open, openclass}: {text:string, open:string, op
     )
     
   }
-  return(
-    <div className="boxy-1">
-      <span typeof="button" onClick={openFromOtherPage(open)}>
-      <div className="btn-new btn-one">
-      {text}
-      </div></span>
-    </div>
-  )
+  else{
+    return(
+      <div className="boxy-1">
+        <span typeof="button" onClick={openFromOtherPage(open)}>
+        <div className="btn-new btn-one">
+        {text}
+        </div></span>
+      </div>
+    )
+  }
+}
+
+export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:string, scrollId: string,  open:string, openclass?: string}){
+  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>
+    )
+  }
+  else{
+    return(
+      <div className="boxy-1">
+        <span typeof="button" onClick={openFromOtherPage(open)}>
+        <div className="btn-new btn-one">
+        {text}
+        </div></span>
+      </div>
+    )
+  }
 }
+
+
 export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
   return(
     <div className="boxy-1">

src/components/HeaderBox.tsx

@@ -13,7 +13,7 @@ export default function HeaderBox({children, title, title2}: Props ){
   }
     return(
         <>
-        <div className="row">
+        <div className="col">
           <div className="col header-container">
             <div className="row header-title">
               <Hwave text={title}></Hwave>

src/components/HorizontalTimeline.tsx

@@ -10,15 +10,17 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
                 {tag}
             </div>
             
-            <div className="row align-items-center">
-              <div className="col" >
-              <img className="img-round" src={pic}/>
-              </div>
-              <div className="col" >
-                  {title}
+            <div className="fillup-wrapper">
+            <div className="row align-items-center fillup">
+                <div className="col" >
+                <img className="img-round" src={pic} />
+                </div>
+                <div className="col" >
+                    {title}
+                </div>
               </div>
-            </div>
-            <div className="row align-items-center">
+           </div>
+            <div className="row align-items-center hpbuttonrow">
               <div className="col">
                 <p style={{marginTop: "10px"}}>{author}</p>
               </div>
@@ -45,15 +47,17 @@ function TimeItem({tag, title, pic, author, tabid}: ItemProps){
                 {tag}
             </div>
             
-            <div className="row align-items-center">
-              <div className="col" >
-               <img className="img-cube" src={pic} />
-              </div>
-              <div className="col" >
-                  {title}
+           <div className="fillup-wrapper">
+            <div className="row align-items-center fillup">
+                <div className="col" >
+                <img className="img-cube" src={pic} />
+                </div>
+                <div className="col" >
+                    {title}
+                </div>
               </div>
-            </div>
-            <div className="row align-items-center">
+           </div>
+            <div className="row align-items-center hpbuttonrow">
               <div className="col">
                 <p style={{marginTop: "10px"}}>{author}</p>
               </div>

src/components/Loremipsum.tsx

 export function LoremMedium(){
     return(
-        <>
+        <p className="lorem">
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
 
 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   
@@ -8,14 +8,14 @@ Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie co
 Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   
 
 Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
-</>
+</p>
     )
 }
 
 export function LoremShort(){
     return(
-        <>
+        <p className="lorem">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-        </>
+        </p>
     )
 }
\ No newline at end of file

src/components/Tabs.tsx

@@ -40,6 +40,12 @@ import Collapsible from "./Collapsible";
         problem = true;
         problem_desc.push("interview language"); 
       }
+      
+      /* Expert on  */
+      let expert = ""; 
+      if (data[i].experton) {
+        expert = `Expert on ${data[i].experton}`; 
+      }
 
       /* Aim/Goal */
       var goalheading: string = ""; 
@@ -152,19 +158,35 @@ import Collapsible from "./Collapsible";
                   <div className="row">
                     <div className="col-6">
                       <div className={"t-tag " + data[i].tag}>
-                          {data[i].job}
+                          {data[i].job} {data[i].affiliation}
                       </div>
                     </div>
-                    <div className="col-3">{lang}</div>
+                    <div className="col" style={{padding: "5px"}}>{expert}</div>
+                    <div className="col" style={{width: "20%", flex: "1 0 0%", padding: "5px"}}>{lang}</div>
                   </div>
-                  <div className="row">
+                  <div className="row align-items-stretch">
+                    <div className="col d-flex flex-column">
+                      <div className="row flex-grow-1 mitte">
+                      <p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
+                      <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">
+                      <img className="middle sechpro img-fluid" src={data[i].pictureurl} />
+                    </div>
+                  </div>
+                 {/*  <div className="row">
                     <div className="col">
-                      <BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
+                    <p style={{paddingTop: "50px", fontSize: "large"}}>Summary:</p>
+                    <p>{data[i].summary}</p>
                     </div>
                     <div className="col-3">
                       <img className="middle sechpro" src={data[i].pictureurl}/>
                     </div>
-                  </div>
+                  </div> */}
                   
                   <h4>{goalheading}</h4>
                   <div className="flexbox">
@@ -189,6 +211,9 @@ import Collapsible from "./Collapsible";
                      
                     {imp_img}
                   </div>
+                  <div className="col">
+                      <BlockQuoteB text={data[i].quote} cite={quoted}></BlockQuoteB>
+                  </div>
                   {int}
                   {refs}
             </>

src/contents/Human Practices/Further Engagement/Education.tsx

-import { ButtonOne } from "../../../components/Buttons";
+import { ButtonOneWithScroll } from "../../../components/Buttons";
 import {  H4 } from "../../../components/Headings";
 import {  H5 } from "../../../components/Headings"
+import { TabScrollLink } from "../../../components/Link";
 
 
 export function HPEducation(){
@@ -8,21 +9,66 @@ export function HPEducation(){
         <div className="col">
             <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
                 <div className="col">
-                    <ButtonOne openclass="edu-cycletab" text="Overview" open="edu-overview"></ButtonOne>
+                    <ButtonOneWithScroll openclass="edu-cycletab" text="Overview" open="edu-overview" scrollId="edu-heading"/>
                 </div>
                 <div className="col">
-                    <ButtonOne openclass="edu-cycletab" text="Teuto ruft!" open="teutoruft"></ButtonOne>
+                    <ButtonOneWithScroll openclass="edu-cycletab" text="Teuto ruft!" open="teutoruft" scrollId="teuroruft-heading"/>
                 </div>
                 <div className="col">
-                    <ButtonOne openclass="edu-cycletab" text="Schüler*innen Akademie" open="akademie"></ButtonOne>
+                    <ButtonOneWithScroll openclass="edu-cycletab" text="Schüler*innen Akademie" open="akademie" scrollId="student-academy-heading"/>
                 </div>
+                <div className="col">
+                    <ButtonOneWithScroll openclass="edu-cycletab" text="MINT Sommer" open="mint" scrollId="mint-heading"/>
+                </div>
+            </div>
+
+
+
+
+
             <div id="edu-overview" className="edu-cycletab" style={{display: "block"}}>
-            <H4 id="edu-heading" text="Our education and outreach"/>
-            <p>Education and outreach remain vital, even without being a special prize focus. They help us share knowledge, inspire people, and create lasting impact. By making information accessible, we empower the public to make informed decisions and engage in meaningful discussions.</p>
-            <p></p>
-            <H4 id="edu-why-heading" text="If not as a special prize - then why?"/>
-            <p>Human-centered design is essential for our Integrated Human Practices, ensuring that our project is aligned with the real needs and concerns of the people it aims to serve. Outreach and education are key components of this approach, as they allow us to communicate our goals and inform the public about both our project and the critical issue of cystic fibrosis (CF). By engaging with diverse audiences—patients, families, schools, and the wider community—we raise awareness about CF, while fostering a deeper understanding of the challenges involved. This feedback-driven interaction not only builds trust but also helps us refine our work to have a meaningful impact on those affected by CF. Through educational programs, workshops, and outreach initiatives, we aim to bridge the gap between scientific research and the public, ensuring that our project is both accessible and impactful.</p>
-            <p></p>
+            <H4 id="edu-heading" text="If not as a special prize - then why?"/>
+            <p>While education is not directly considered part of Human Practices in iGEM, it remains a vital component of synthetic biology and scientific advancement 
+                for several important reasons:</p>
+            <ul>
+                <li>To help people make <b>informed choices</b> and encourage <b>emancipation through education</b>.</li>
+                <li>Only informed participants allow for <b>ethical engagement</b>.</li>
+                <li>To ensure <b>continuous learning</b> in order to secure the future of synthetic biology and cystic fibrosis research.</li>
+                <li>Only awareness and knowledge can <b>prevent misuse and misinformation</b>.</li>
+            </ul>
+            <p>This is applicable to both cystic fibrosis and synthetic biology in general.</p>
+            <p>Many people gravitate towards fields they are interested in. Awareness, exploration, and receiving new knowledge are necessary to cultivate an authentic 
+                interest, which, together with positive social interaction, forms a promising foundation for a lasting interest<TabScrollLink tab="edu-overview" num="1" scrollId="desc-edu"/>. As future researchers and part of a 
+                competition aiming for continuous innovation, we feel education is an important ascpect that should not be shrugged off under the guise of focusing on Human Practices.</p>
+
+            <H4 id="edu-why-heading" text="Our educational activities"/>
+            <p>In both "Der Teuto ruft!" and the CeBiTec Student Academy, our team focused on education through personal contact not only as way to spread 
+                awareness about cystic fibrosis, but to spread the love we have for what we do. </p>
+            <p>We are glad to have had the possibility to work with such different audiences. While "Der Teuto ruft!" had a focus on families and required a creative
+                approach, the "Schüler*innen Akademie" and "MINT Sommer" allowed us to interact with aspiring researchers who may very well be our future classmates at 
+                Bielefeld University. 
+            </p>
+            <p>However, we came to realize that "Der Teuto ruft!" may have been the more impactful event for our personal growth. It took us out of the familiar 
+                "science bubble" and into a space where we could interact with the general public—people who don’t necessarily have a scientific background. This 
+                experience reminded us how non-scientists perceive complex topics like gene therapy and cystic fibrosis. It also highlighted the importance of not only 
+                ethical responsibility but also social responsibility in communicating science. We gained and regained insight into the concerns, misconceptions, and 
+                hopes that the public has regarding synthetic biology, allowing us to better understand what is not only scientifically sound but also socially 
+                acceptable. We are confident participating in "Der Teuto ruft!" very positively influenced our approach to further communication. </p>
+            <H4 text="References"></H4>
+            <ol>{/*<!-- Citation num 1--> */}
+            <li typeof="schema:ScolarlyArticle" role="doc-biblioentry" property="schema:citation" id="desc-edu">
+                <span property="schema:author" typeof="schema:Person">
+                    <span property="schema:Name"> Aswegen, E.</span>
+                    <span property="schema:Name"> Pendergast, D.</span>
+                </span>
+                <span property="schema:name">&nbsp;The impact of interest: an emergent model of interest development in the early years</span>. 
+                <i property="schema:publisher" typeof="schema:Organization"> Early Child Development and Care</i>
+                <b property="issueNumber" typeof="PublicationIssue"> 193</b>
+                ,&nbsp;<span property="schema:pageBegin"> 1</span>-<span property="schema:pageEnd">15</span>&nbsp;
+                (<time property="schema:datePublished" datatype="xsd:gYear" dateTime=" 2023">2023</time>).
+                <a className="doi" href="https://doi.org/10.1080/03004430.2023.2245575"> doi: 10.1080/03004430.2023.2245575</a>
+            </li>
+            </ol>
             </div>
 
             <div id="akademie" className="edu-cycletab" style={{display: "none"}}>
@@ -53,10 +99,11 @@ Due to our collaboration with the Student Academy, we conducted the nanopore seq
 One such experiment involved creating a lung model from balloons and straws, demonstrating the difficulty patients have in breathing by having the children blow into the straws. Additionally, we set up a tank with a mixture of starch and water to simulate mucus and placed a ball on top. The children tried to blow the ball across the surface, illustrating how hard it is for air to move through mucus compared to water, where the ball moved much more easily. 
 The very little ones could paint coloring pages which we designed and printed for them. For the adults, we provided information about our project and discussed the implications and potential of gene therapy for cystic fibrosis. These conversations made it abundantly clear that degrees of knowledge on this topic widely vary throughout the public and we were happy to fill in the existing gaps in people's knowledge and exchange points of view on gene therapy.  
 Moreover, we connected with other institutions and participants at the event. We shared our booth at Bielefeld’s “Skulpturenpark” on the outside with <a href="https://bts-ev.de/bielefeld/" title="btS" > btS </a>, the life science student initiative from Bielefeld University, with whose members we had stimulating discussions as well. We were more than delighted when the city of Bielefeld featured us on their Instagram, highlighting our presence during "Der Teuto ruft!". This collaboration helped us reach a wider audience and raise awareness about our research efforts.</p>
-<p></p>
-<a href="https://unibielefeldde.sharepoint.com/sites/iGEM2024teams/_layouts/15/stream.aspx?id=%2Fsites%2FiGEM2024teams%2FFreigegebene%20Dokumente%2FGeneral%2FFotos%2C%20Videos%20und%20Co%2FTeuto%20ruft%2FVideo%20Insta%20Teuto%20Ruft%2Emov&ga=1&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ee4a43a55%2Dfff3%2D4b44%2Db081%2Dad26306f93e0" title="video Teuto ruft" > watch me</a> 
-<p></p>
-<H5 id="conclusion? " text="What is our conclusion"/>
+<br/>
+{/* <a href="https://unibielefeldde.sharepoint.com/sites/iGEM2024teams/_layouts/15/stream.aspx?id=%2Fsites%2FiGEM2024teams%2FFreigegebene%20Dokumente%2FGeneral%2FFotos%2C%20Videos%20und%20Co%2FTeuto%20ruft%2FVideo%20Insta%20Teuto%20Ruft%2Emov&ga=1&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ee4a43a55%2Dfff3%2D4b44%2Db081%2Dad26306f93e0" title="video Teuto ruft" > watch me</a> 
+ */}
+ <br/>
+<H5 id="conclusion" text="What is our conclusion"/>
 <p>Despite the changeable weather, we could educate many people of Bielefeld's community about cystic fibrosis, our therapeutic approach and gene therapy in general and had the opportunity to improve our science communication for the future as well so it was a successful event! </p>
 
                 <div className="row align-items-center">
@@ -67,8 +114,30 @@ Moreover, we connected with other institutions and participants at the event. We
                     <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/teutoruft-gruppe.jpeg"></img>
                     </div>
                     </div>
+        
         </div>
-        </div>
+
+
+
+
+        <div id="mint" className="edu-cycletab" style={{display: "none"}}>
+            <H4 id="mint-heading" text="MINT Sommer"/>
+                <H5 id="what and why mint summer" text="What is MINT Summer and why were we participating?"/>
+                <div className="row">
+                    <img src="https://static.igem.wiki/teams/5247/photos/hp/mintsommerlogo.png" style={{width:"30%", height:"20%"}}/>
+                    <div className="col">
+                        <p>“MINT Summer 2024” is a comprehensive program designed primarily for high school graduates of the class of 2024, who are considering pursuing studies in STEM fields (Science, Technology, Engineering, and Mathematics, including teaching degrees). The program is perfect for those who are still uncertain if they want to study in STEM or which specific discipline aligns best with their interests.</p>
+                        <p>Our participation in <a href="https://www.uni-bielefeld.de/studium/studieninteressierte/mint-sommer/" title="Mint Summer" >MINT Summer </a> offered us the chance to raise awareness of cystic fibrosis and showcase our cutting-edge approach to develop an optimized gene therapy to combat this disease. Through the event we engaged with potential future scientists and researchers, informing them about our project, iGEM and the importance of scientific research in advancing medical treatments. This program not only allows us to share our mission but also to inspire the next generation of STEM students by highlighting the real-world impact of their studies. </p>
+                    </div>
+                </div>
+                    <H5 id="strategy summer" text="What was our strategy?"/>
+                    <p>Our objective at MINT Summer was to inform attendees, especially aspiring STEM students, about the unique challenges faced by cystic fibrosis (CF) patients, with a particular focus on lung-related complications. We drew heavily on the insights gained from the Science Communication Workshop at the BFH Meetup, which provided us with the perfect framework to meticulously plan our outreach for this event. This foundation allowed us to craft engaging and educational activities that effectively conveyed the complexities of CF to our audience, ensuring our message was both impactful and accessible. </p>
+                    <p>We took the opportunity to explain the iGEM competition and our project to participants. We shared how iGEM is a global competition that brings together student teams to solve real-world problems using synthetic biology. We discussed how our approach aims to correct the genetic mutation responsible for CF, potentially offering a more effective treatment. By engaging with attendees, we were able to highlight the significance of our research and the impact it could have on improving the lives of those affected by this challenging condition. They got the opportunity to contribute to our project by participating in our survey. </p>
+                    <p>Over the time of two weeks, we established meaningful connections with professors, students, and participants across various STEM fields during the event, like the student initiative btS and the Campusbrauerei Bielefeld. Sharing our project with the life science students was helpful, motivating and opened the door to engaging discussions that enriched our perspective and fostered collaboration. These interactions allowed us to connect with experts and students from different disciplines, enhancing our understanding of how our gene therapy research for cystic fibrosis fits within the broader scientific landscape.</p>
+                <H5 id="conclusion summer" text="What is our conclusion?"/>
+                    <p>The experience allowed us to refine our science communication skills and connect with a broad range of STEM professionals and students. Overall, the event was a valuable opportunity for both education and professional growth, making it a rewarding and impactful experience for our team. </p>
+            </div>
+
         </div>
     );
 }
\ No newline at end of file

src/contents/Human Practices/Further Engagement/FurtherEngagement.tsx

@@ -9,12 +9,12 @@ export function HPFurtherEngagement(){
 
     return(
         <Section title="Further Engagement" id="Further Engagement">
-            <Subesction title="Public Engagement" id="Further Engagement1">
-                <HPOutreach/>
-            </Subesction>
-            <Subesction title="Education" id="Further Engagement2">
+            <Subesction title="Education" id="Further Engagement1">
                 <HPEducation/>
             </Subesction>
+            <Subesction title="Public Engagement" id="Further Engagement2">
+                <HPOutreach/>
+            </Subesction>
             <Subesction title="Entrepreneurship" id="Further Engagement3">
                 <HPEntrepreneur/>
             </Subesction>

src/contents/Human Practices/Further Engagement/Outreach.tsx

 import { ButtonOne } from "../../../components/Buttons";
 import {  H4 } from "../../../components/Headings";
-import { LoremMedium } from "../../../components/Loremipsum";
 import { useNavigation } from "../../../utils/useNavigation";
 
 export function HPOutreach(){
@@ -21,26 +20,38 @@ export function HPOutreach(){
         
 
         <div id="out-overview" className="out-cycletab" style={{display: "block"}}>
-          <H4 id="out-heading" text="Our education and outreach"/>
-          <LoremMedium/>
           <H4 id="out-why-heading" text="If not as a special prize - then why?"/>
-          <LoremMedium/>
+          <p>While many of our efforts in science communication were educational, we also recognized the importance of public engagement through activities 
+            that were not focused on formal education but rather on raising awareness. Initiatives like MUKOmove and our waffle sale were essential in bringing 
+            cystic fibrosis (CF) into public focus and showing a visible commitment to the cause.</p>
+          <p>While being a superficial contact, publich enganegment and outreach serves as a reminder that science does not happen in isolation - it is rooted 
+            in real-world problems that impact individuals and communities. Establishing presence allows diverting interest to our project and our cause which in turn 
+            paves the way to edcuate interested people and laying the groundwork for a deeper connection between us and our project and the general public. </p>
+            <H4 id="out-heading" text="Our public engagement"/>
+            <p>Our public engagement served both as a form of spreading awareness and to establish first contacts. By inviting other people in Bielefeld to join our team 
+            for MUKOmove, we were able to reach a wider audience and foster connections that extended beyond our university.</p>
+            <p>In addition to our in-person events, we used social media as a tool to keep the community engaged and updated. We shared our progress in 
+              MUKOmove, promoted our events, and posted educational content about cystic fibrosis and gene therapy. Our social media presence helped us 
+              stay connected with a broader audience, ensuring that even those who could not attend our events could still follow along and support our mission.</p>
+              <p>
+              Through these efforts, we also made valuable connections, resulting in an interview with the "Muko Dino" Thomas Malenke[Link]. This highlighted the power 
+              of online platforms in expanding our reach and fostering collaboration beyond our immediate community.</p>
         </div>
         
         <div id="Waffle sale" className="out-cycletab" style={{display: "none"}}>
-        <H4 id="Waffle sale" text="Waffle sale"/>
-         <div className="row">
-          <div className="full-small col3">
+          <div className="col">
+          <H4 text="Waffle Sale"></H4>
+          <div className="row">
+            <div className="col">
+            <p>To support our research project and raise funds for our iGEM team at Bielefeld University, we decided to organize a waffle sale in the main hall of the university. This initiative was aimed at raising awareness about our project and collecting funds for our research into cystic fibrosis. </p>
+            <p>The sale took place in cystic fibrosis awareness month May in the Great Hall of our University. As people passed by, we engaged them by introducing our research group and explaining our project’s objectives. We shared information about cystic fibrosis and why we are raising money. Our goal was to not only just to sell waffles, but also to educate the university community about our research and its’ potential impact. The response has been overwhelmingly positive. Many were genuinely interested in our work and asked for more details about our research and the goals of our project. This enthusiasm strengthened our commitment to the project and highlighted the importance of community involvement in scientific research. </p>
+            <p>The waffle sale was a great success, both in terms of raising funds and increasing awareness about our work within the university. It was a collaborative effort that brought our team closer together and demonstrated the power of community support in advancing scientific research. </p>
+            </div>
+            <div className="col-4"> 
+              <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/screenshot-2024-09-25-202008.png" style={{objectFit: "cover", maxHeight: "50%", width: "100%"}}/> 
           </div>
           </div>
-          <div className="col">
-          <h3>Waffle sale</h3>
-          <p>To support our research project and raise funds for our iGEM team at Bielefeld University, we decided to organize a waffle sale in the main hall of the university. This initiative was aimed at raising awareness about our project and collecting funds for our research into cystic fibrosis. </p>
-          <p>The sale took place in cystic fibrosis awareness month May in the Great Hall of our University. As people passed by, we engaged them by introducing our research group and explaining our project’s objectives. We shared information about cystic fibrosis and why we are raising money. Our goal was to not only just to sell waffles, but also to educate the university community about our research and its’ potential impact. The response has been overwhelmingly positive. Many were genuinely interested in our work and asked for more details about our research and the goals of our project. This enthusiasm strengthened our commitment to the project and highlighted the importance of community involvement in scientific research. </p>
-          <p>The waffle sale was a great success, both in terms of raising funds and increasing awareness about our work within the university. It was a collaborative effort that brought our team closer together and demonstrated the power of community support in advancing scientific research. </p>
-          <div className="col"> 
-      <img src="https://static.igem.wiki/teams/5247/photos/edcation-and-outreach/screenshot-2024-09-25-202008.png" style={{width:"60%", height:"70%"}}/> 
-   </div>
+          
         </div>
         
         </div>
@@ -64,12 +75,14 @@ export function HPOutreach(){
           <div className="row">
             <div className="col">
             <h3>Why and in which ways were we invested in MUKOmove? </h3>
-          <p>We did not stop at our participation itself – we wanted to make other people from our university and city 
+            <p>While MUKOmove was not a scientific or educational event, it played an important role in demonstrating our presence in the broader CF 
+              community.</p>
+          <p>We did not stop at our participation itself - we wanted to make other people from our university and city 
             aware of the event and collect sport hours for cystic fibrosis with them by inviting them to join our team. 
             Our survey about cystic fibrosis awareness and our discussions with <a onClick={() => goToPagesAndOpenTab('InvWesthoff', '/human-practices?tab=')}>Kathrin Westhoff</a>, the head of a 
             practice for physiotherapy in Gütersloh who is also treating young CF patients, showed us how little known 
             this illness still is. Especially the interview with the physiotherapist made us realize how important 
-            exercise is for everyone and how it brings a community together – we wanted to establish MUKOmove in 
+            exercise is for everyone and how it brings a community together - we wanted to establish MUKOmove in 
             Bielefeld. That is why we really got the publicity going by putting up posters and distributing flyers 
             at the university and in our city as you can see in the following picture. </p>
             </div>
@@ -82,11 +95,11 @@ export function HPOutreach(){
             while the entire MUKOmove had a goal of collecting 24,000 sport hours. In cooperation with our university's 
             sports facilities, using their <a href="https://www.uni-bielefeld.de/einrichtungen/hochschulsport/zusatzangebote/houbi/">“HOUBI-Aktivmobil"</a> and other equipment, we organized a team event at the sports 
             ground of our university at the begin of MUKOmove. Everyone was warmly invited to our event on May 8th, and 
-            it was a lot of fun to play various sport games together outside in the sun – check out in the following 
+            it was a lot of fun to play various sport games together outside in the sun - check out in the following 
             video! </p>
           <div className="row align-items-center">
             <div className="col">
-            <img src="https://www.mapcom.com/wp-content/uploads/2015/07/video-placeholder.jpg"></img>
+            <iframe title="Bielefeld-CeBiTec: MUKOmove (2024) [English]" width="560" height="315" src="https://video.igem.org/videos/embed/dd3e6eff-95f5-47f4-a0fc-f416db88dfe4?autoplay=1" frameBorder="0" allowFullScreen={true} sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
             </div>
           </div>
           <br/>