diff --git a/static/style.css b/static/style.css index 02dbbad346901a7160b55529b11050ae523115af..d424de25adbcf1636742e991d8c508c359783065 100644 --- a/static/style.css +++ b/static/style.css @@ -17,6 +17,22 @@ body { color: white; } +.image-effect-slide { + position: relative; + left: -100%; + opacity: 0; + transition: left 2s ease-in-out, opacity 2s ease-in-out; } +.image-g-out { overflow: hidden; } +.image-effect-slide.animate { left: 0; opacity: 1; } +.image-effect-slide:hover { transform: scale(1.05); } + +.microorganisms-list { background-color: #19d3a5; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } +.microorganisms-list ul { list-style-type: none; padding: 0; margin: 0; } +.micro organisms-list li { font-size: 18px; font-weight: 500; color: #fff; padding: 10px; transition: background-color 0.3s; border-bottom: 1px solid #7ae4d2; } +.microorganisms-list li:last-child { border-bottom: none; } +.microorganisms-list li:hover { background-color: #17b59b; margin: 5px 0; } + + /*CABEÇALHOS*/ h1 { font-family: 'Sarina', sans-serif; text-shadow: 4px 4px 1px #19d3a5; @@ -39,6 +55,25 @@ h4 { position: absolute; /* Permite o posicionamento relativo à página */ } +.img-stacked { + display: block; + margin: 20px auto; /* Centraliza as imagens com um espaçamento entre elas */ + width: 50%; /* Define o mesmo tamanho para as imagens, você pode ajustar para um valor fixo como 300px */ + max-width: 300px; /* Tamanho máximo das imagens para evitar que fiquem muito grandes */ + opacity: 0; /* Inicialmente invisÃvel */ + transform: translateY(20px); /* Inicialmente deslocada para baixo */ + animation: fadeInUp 8s ease forwards; /* Aplica a animação */ +} + @keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(20px); /* Ponto de inÃcio da animação */ + } + 100% { + opacity: 1; + transform: translateY(0); /* Ponto final da animação */ + } +} @@ -461,7 +496,7 @@ footer a i:hover { height: 100px; /* Altura menor para telas menores, se necessário */ } - .logo { width: 200px; + .logo { width: auto; } } diff --git a/wiki/layout.html b/wiki/layout.html index c7dd0523fff0e82c348457931392fd6a6f92b6ce..ac35914764258a3c3222ff883fe9de18a92093b0 100644 --- a/wiki/layout.html +++ b/wiki/layout.html @@ -51,6 +51,14 @@ <!-- Bootstrap Bundle with Popper --> <script src="{{ url_for('static', filename = 'bootstrap.bundle.min.js') }}"></script> + <script> + window.addEventListener('load', function() { + const image = document.querySelector('.image-effect-slide'); + if (image) { + image.classList.add('animate'); + } + }); + </script> </body> </html> diff --git a/wiki/pages/education.html b/wiki/pages/education.html index ce0d23173b9732d5381b45238751c5693255d223..c5815265b580f2da09b849d33296053068b6f0be 100644 --- a/wiki/pages/education.html +++ b/wiki/pages/education.html @@ -6,31 +6,81 @@ {% block page_content %} <div class="row mt-4 justify-content-center"> - <div class="col-lg-8 mx-auto"> - <h4>Best Education</h4> + <div class="col-lg-10 mx-auto text-center"> + <h4>Scientific Immersion Workshop: Nurturing Future Synthetic Biologists in Brazil</h4> <div class="bd-callout bd-callout-info"> - <p>How have you developed new opportunities to include more people in shaping synthetic biology? Innovative educational tools and outreach activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology. Document your approach and what was learned by everyone involved to compete for this award.</p> - <p>To compete for the Best Education prize, select the prize on the <a href="https://competition.igem.org/deliverables/judging-form">judging form</a> and describe your work on this page.</p> - <hr> - <p>Please see the <a href="https://competition.igem.org/judging/awards">2024 Awards Page</a> for more information.</p> + <p>Building on the remarkable success of the Brazilian Synthetic Biology Olympiad (OBBS), we have deepened our commitment to advancing synthetic biology education across the nation. Recognizing the importance of reaching a wider audience, we proudly transitioned OBBS to the Brazilian Synthetic Biology Association (SynBioBR), a dedicated non-profit organization that supports the scientific community in this field. This transition ensures that OBBS will continue to grow and inspire more students, fostering a stronger connection between young minds and the exciting world of synthetic biology.</p> + <img src="https://static.igem.wiki/teams/5428/obbs.webp" alt="OBBS Image"> </div> </div> </div> +<div class="row mt-4 justify-content-center"> + <div class="col-lg-10 mx-auto"> + <h4>Celebrating Excellence with an Exclusive Immersion Experience</h4> + <div class="bd-callout bd-callout-info"> + <p>To honor the top five participants from the 2023 OBBS - selected from over 4.000 high school students nationwide - we organized an exclusive Scientific Immersion Workshop at the University of São Paulo (USP). Held from January 31st to February 2nd, 2024, this event offered these exceptional students a unique opportunity to experience cutting-edge research and explore synthetic biology in an inspiring academic environment.</p> + </div> + </div> +</div> <div class="row mt-4 justify-content-center"> - <div class="col-lg-8 mx-auto"> - <h4>Inspirations</h4> + <div class="col-lg-10 mx-auto"> + <h4>Program Highlights</h4> + <div class="bd-callout bd-callout-info"> + <img src="https://static.igem.wiki/teams/5428/obbs4.webp" alt="OBBS4 Image"class="img-stacked fade-in"> + <img src="https://static.igem.wiki/teams/5428/obbs5.webp" alt="OBBS5 Image"class="img-stacked fade-in"> + <img src="https://static.igem.wiki/teams/5428/obbs6.webp" alt="OBBS6 Image"class="img-stacked fade-in"> + <img src="https://static.igem.wiki/teams/5428/obbs7.webp" alt="OBBS7 Image"class="img-stacked fade-in"> + <img src="https://static.igem.wiki/teams/5428/obbs8.webp" alt="OBBS8 Image"class="img-stacked fade-in"> + </div> + </div> +</div> +<div class="row mt-4 justify-content-center"> + <div class="col-lg-10 mx-auto"> + <h4>Day 1: Introduction and Inspiration</h4> + <div class="bd-callout bd-callout-info"> + <p>The workshop began with a warm welcome and an introductory presentation by our iGEM-USP BR team. We provided a comprehensive overview of synthetic biology and shared insights into our international projects. Experts from SynBioBR delivered an enlightening lecture on the future of synthetic biology in Brazil, highlighting its transformative potential in addressing global challenges. + The students were then guided through various research laboratories at USP, where they observed active projects and engaged with leading researchers. This firsthand exposure to real-world applications ignited their curiosity and set the tone for the immersive experience ahead.</p> + </div> + </div> +</div> +<div class="row mt-4 justify-content-center"> + <div class="col-lg-10 mx-auto"> + <h4>Day 2: Hands-On Laboratory Experience</h4> + <div class="bd-callout bd-callout-info"> + <p>The second day was dedicated to practical engagement. Participants conducted a reporter gene assay by transforming bacteria with plasmids containing the red fluorescent protein (RFP) gene. This experiment allowed them to directly apply molecular biology techniques and observe gene expression firsthand through the fluorescence emitted by the reporter protein. Witnessing the results of their work reinforced their understanding of genetic transformation and the principles of gene expression. + They also visited specialized laboratories focusing on molecular biology and biotechnology. In these labs, they saw how biotechnology is driving advancements in health and environmental sciences, providing a broader perspective on the field's impact. This exposure highlighted the real-world applications of the techniques they practiced and inspired them to consider future contributions to the field.</p> + </div> + </div> +</div> +<div class="row mt-4 justify-content-center"> + <div class="col-lg-10 mx-auto"> + <h4>Day 3: Expanding Horizons and Reflecting on the Journey</h4> + <div class="bd-callout bd-callout-info"> + <p>On the final day, the students explored the biotechnological applications of biotechnology in wildlife and environmental preservation during a visit to the São Paulo Zoo’s research center. This experience underscored the interdisciplinary nature of synthetic biology and its relevance to conservation efforts. + The workshop concluded with presentations from the students, where they shared their findings from the lab experiments and reflected on their experiences. This session fostered open dialogue, allowing them to discuss future possibilities in synthetic biology and how they might contribute to the field.</p> + <img src="https://static.igem.wiki/teams/5428/obbs2.webp" alt="OBBS2 Image"> + </div> + </div> +</div> +<div class="row mt-4 justify-content-center"> + <div class="col-lg-10 mx-auto"> + <h4>Inspiring the Next Generation</h4> + <div class="bd-callout bd-callout-info"> + <p>The immersive nature of the workshop left a lasting impact on the participants. Many expressed a newfound passion for synthetic biology, with some already considering forming iGEM teams or synthetic biology clubs at their future universities. Their enthusiasm illustrates the transformative power of hands-on learning and personal engagement with scientific research. + By providing this platform, we encouraged these talented students not just to absorb new ideas but to actively shape their future academic and career paths. Their reflections and feedback affirmed our commitment to fostering the next generation of scientists and innovators in Brazil. + </p> + </div> + </div> +</div> +<div class="row mt-4 justify-content-center"> + <div class="col-lg-10 mx-auto"> + <h4>Conclusion: Continuing Our Educational Mission</h4> <div class="bd-callout bd-callout-info"> - <hr> - <ul> - <li><a href="https://2020.igem.org/Team:CCA_San_Diego/Education">2020 CCA San Diego</a></li> - <li><a href="https://2020.igem.org/Team:Lambert_GA/Education">2020 Lambert GA</a></li> - <li><a href="https://2020.igem.org/Team:Stanford/Education">2020 Stanford</a></li> - <li><a href="https://2020.igem.org/Team:Waseda/Education">2020 Waseda</a></li> - <li><a href="https://2020.igem.org/Team:Fudan/Education">2020 Fudan</a></li> - <li><a href="https://2020.igem.org/Team:Toulouse_INSA-UPS/Education">2020 Toulouse INSA UPS</a></li> - </ul> + <p>The Scientific Immersion Workshop represents a significant milestone in our educational outreach efforts. By offering high school students an unparalleled experience at one of Brazil's leading research institutions, we have taken a meaningful step toward making synthetic biology more accessible and inspiring. + By transitioning the OBBS to SynBioBR and focusing on immersive experiences like the Scientific Immersion Workshop, we have laid a strong foundation for the future of synthetic biology education in Brazil. We remain committed to inspiring young minds, cultivating their skills, and fueling their passion for innovation. Together, we are shaping a vibrant community poised to contribute significantly to the field of synthetic biology and address the challenges of tomorrow. + </p> </div> </div> </div> diff --git a/wiki/pages/home.html b/wiki/pages/home.html index a2c9bf16ddd6db9b106a92da485782a12baa3b96..7fe8be8a8a225acc852014ef8f20d59a1dd80555 100644 --- a/wiki/pages/home.html +++ b/wiki/pages/home.html @@ -15,7 +15,9 @@ {% block page_content %} <div style = "text-align: center;"> - <img src = "https://static.igem.wiki/teams/5428/glicoinsidecentralizado.webp" style = "width: 70%;"> + <div class="image-g-out"> + <img src = "https://static.igem.wiki/teams/5428/glicoinsidecentralizado.webp" style = "width: 70%;" class="image-effect-slide"> + </div> </div> <div class = background-space-menor></div><!--pulando espaço --> diff --git a/wiki/pages/human-practices.html b/wiki/pages/human-practices.html index 7048bc8b29173baae834ef64b14ff1ff93247849..1cd0d997e2292932241f70a67f5dfe8182520825 100644 --- a/wiki/pages/human-practices.html +++ b/wiki/pages/human-practices.html @@ -6,54 +6,46 @@ {% block page_content %} <div class="row mt-4 justify-content-center"> - <div class="col-lg-8 mx-auto"> - <h4>Silver Medal Criterion #2</h4> + <div class="col-lg-10 mx-auto"> + <h4>Comunication: Podcast Synteticast</h4> <div class="bd-callout bd-callout-info"> - <p>Explain how you have determined your work is responsible and good for the world.</p> + <p>The idea of creating the podcast came from an initial discussion within the group about effective ways to promote our project and connect it with society on a broader scale. In addition to the existing platforms (Instagram and YouTube), we realized that a podcast could amplify the dissemination of information in an accessible and engaging way. Thus, Synteticast was born. + Our project is based on conducting interviews with experts in the fields of health, academia, and industry. Each interview was divided into three parts, allowing the thematic content of each episode to be structured in an organized and understandable manner. Additionally, short explanatory episodes will be created to address scientific terms discussed during the interviews. + To start our channel, we chose the theme "Health Heroes", where we conducted interviews with scientists with disabilities in order to increase the visibility of these professionals' careers and encourage young people and children with disabilities to pursue such careers if they wish. + For the first episode, we had the opportunity to interview Dr. Nuccia de Cicco, a scientist who shared her story about how her life changed when she was diagnosed with a tumor, which resulted in Bilateral Profound Deafness in 2007. Since then, Nuccia has been working as a coordinator, developing accessibility and education projects for the deaf in science, such as coordinating the Didactic Laboratory of Science for the Deaf (LaDiCS). <a href="https://open.spotify.com/episode/6HSz7CicwoZYXKtX30nTiM">02. Entrevista - Nuccia de Cicco - Synteticast | Podcast on Spotify</a></p> + <img src="https://static.igem.wiki/teams/5428/nuccia.webp" alt="podcast Image"></p> + </p><br>In the second episode, we interviewed Professor Dr. José Otávio Pompeu, who was diagnosed with Autism Spectrum Disorder. He shared with us a bit about his academic journey, the challenges he faced throughout his career, and the importance of the diagnosis for his profession.<a href="https://open.spotify.com/episode/3qoTSc3mx0OhIVeadaElD0">03. Entrevista - José Otávio - Synteticast | Podcast on Spotify</a> + </p> + <img src="https://static.igem.wiki/teams/5428/jos-otavio.webp" alt="podcast Image"> <hr> - <p>Please see the <a href="https://competition.igem.org/judging/medals">2024 Medals Page</a> for more information.</p> + </div> </div> </div> <div class="row mt-4 justify-content-center"> - <div class="col-lg-8 mx-auto"> - <h4>Best Integrated Human Practices</h4> + <div class="col-lg-10 mx-auto"> + <h4>How to get inside out the mind of a scientist - The promotion video’s making-of </h4> <div class="bd-callout bd-callout-info"> - <p>How does your project affect society and how does society influence the direction of your project? How might ethical considerations and stakeholder input guide your project purpose and design and the experiments you conduct in the lab? How does this feedback enter into the process of your work all through the iGEM competition? Document a thoughtful and creative approach to exploring these questions and how your project evolved in the process to compete for this award!</p> - <p>To compete for the Best Integrated Human Practices prize, select the prize on the <a href="https://competition.igem.org/deliverables/judging-form">judging form</a> and describe your work on this page.</p> + <p>To create the promotional video for our group, we first outlined our goals, which are to promote IGEM's activities to a less specialized audience, playfully working with the scientific concepts used in our scientific proposal. Additionally, aiming to connect with the current cinematic landscape and reduce the hostility that academic content can sometimes generate, we decided to make a parody of the movie Inside Out 2. + In our story, we have a scientist trying to solve glycosylation problems of a protein in yeast and bacteria. At first, she struggles to resolve these issues and decides to rest her head on the lab bench to avoid feeling overwhelmed. While she rests, we take a journey inside her mind, where chaos reigns, until a new emotion appears: Scientific Thought. This new character calms everyone down and takes us to the Island of Science, where solutions to the problems the scientist encountered in her project are presented, which is our team's scientific proposal. With these new ideas, the scientist gets up excited and continues her experiments. + With this script, we gathered the team, provided costumes for the emotions and other characters, thought of real-life settings that could compose our story, and filmed the scenes with lightness and fun. Finally, the raw footage was edited, and voilà , our promotional video is ready! </p> + <img src="https://static.igem.wiki/teams/5428/img-2921.webp" alt="promotion Image"> + <img src="https://static.igem.wiki/teams/5428/img-2904.webp" alt="promotion Image"> <hr> - <p>Please see the <a href="https://competition.igem.org/judging/awards">2024 Awards Page</a> for more information.</p> + </div> </div> </div> <div class="row mt-4 justify-content-center"> - <div class="col-lg-8 mx-auto"> - <h4>Overview</h4> - <div class="bd-callout bd-callout-info"> - <hr> - <p>At iGEM we believe societal considerations should be upfront and integrated throughout the design and execution of synthetic biology projects. “Human Practices†refers to iGEM teams' efforts to actively consider how the world affects their work and their work affects the world. Through your Human Practices activities, your team should demonstrate how you have thought carefully and creatively about whether your project is responsible and good for the world. We invite you to explore issues relating (but not limited) to the ethics, safety, security, and sustainability of your project, and to show how this exploration feeds back into your project purpose, design, and execution.</p> - <p>Please note you can compete for the Silver Medal criterion #2 and the Best Integrated Human Practices prize with this page.</p> - <p>For more information, please see the <a href="https://responsibility.igem.org/human-practices/what-is-human-practices">Human Practices Hub</a>.</p> - <p>On this page, your team should document all of your Human Practices work and activities. You should write about the Human Practices topics you considered in your project, document any activities you conducted to explore these topics (such as engaging with experts and stakeholders), describe why you took a particular approach (including referencing any work you built upon), and explain if and how you integrated takeaways from your Human Practices work back into your project purpose, design and/or execution.</p> - </div> - </div> -</div> -<div class="row mt-4 justify-content-center"> - <div class="col-lg-8 mx-auto"> - <h4>Inspirations</h4> + <div class="col-lg-10 mx-auto"> + <h4>Bridging Science and Collaborations: Our Seminar at CEPID-B3</h4> <div class="bd-callout bd-callout-info"> <hr> - <ul> - <li><a href="https://2019.igem.org/Team:Thessaly/Human_Practices">2019 Thessaly</a></li> - <li><a href="https://2019.igem.org/Team:Linkoping_Sweden/Human_Practices">2019 Linkoping Sweden</a></li> - <li><a href="https://2019.igem.org/Team:FDR-HB_Peru/Human_Practices">2019 FDR HB Peru</a></li> - <li><a href="https://2020.igem.org/Team:William_and_Mary/Human_Practices">2020 William and Mary</a></li> - <li><a href="https://2020.igem.org/Team:Rochester/Human_Practices">2020 Rochester</a></li> - <li><a href="https://2020.igem.org/Team:Leiden/Human_Practices">2020 Leiden</a></li> - <li><a href="https://2020.igem.org/Team:Baltimore_BioCrew/Human_Practices">2020 Baltimore BioCrew</a></li> - </ul> + <p>On September 19, 2024, we held a seminar at the Institute of Chemistry at the University of São Paulo (IQ-USP) for the Center for Research in Biology and Bacteriophages (CEPID-B3). CEPID-B3 is composed of researchers funded by FAPESP (São Paulo Research Foundation), whose research areas range from gene expression to synthetic biology. + The main goal of our presentation was to showcase our project, receive feedback to improve our scientific activities, and build partnerships for future collaborations. Additionally, we highlighted how the IGEM USP BR team can collaborate with CEPID-B3, emphasizing the use of IGEM distribution kits, which offer a variety of valuable tools for studies in Molecular Biology and Microorganism Biochemistry.</p> + <img src="https://static.igem.wiki/teams/5428/seminar-cepid.webp" alt="promotion Image"> </div> </div> </div> diff --git a/wiki/pages/safety.html b/wiki/pages/safety.html index af5d89587409450bcabdd5be0f8ba32170452344..29b28a79d917427e70eaaa3c2cf169e66b03aa5c 100644 --- a/wiki/pages/safety.html +++ b/wiki/pages/safety.html @@ -7,52 +7,42 @@ <div class="row mt-4 justify-content-center"> <div class="col-lg-8 mx-auto"> - <h4>Safety and Security Award</h4> + <h4 class="text-center mb-4">Types of organisms used in our project and their potential risks</h4> <div class="bd-callout bd-callout-info"> - - <p>Synthetic biology will need to be used safely and securely if local people are to solve local problems all around the world. The Safety and Security Committee is challenging teams to apply biological engineering approaches to manage risks associated with synthetic biology. Can you take the next step in incremental progress towards knowledge, understanding, and tools that will make the use of synthetic biology safer and more secure?</p> - <p>To compete for the Safety and Security award, please describe your work on this page and also fill out the description on the <a href="https://competition.igem.org/deliverables/judging-form">judging form</a>.</p> - <hr> - <p>Please see the <a href="https://competition.igem.org/judging/awards">2024 Awards Page</a> for more information.</p> + <div class="microorganisms-list custom-list"> + <ul> + <li><i>E. coli</i> DH5-alpha</li> + <li><i>E. coli</i> BL21 (DE3)</li> + <li><i>E. coli</i> RR1</li> + <li><i>S. cerevisiae</i> W303-1A</li> + <li><i>S. cerevisiae</i> @303-1B</li> + </ul> + </div> + <p class="mt-3">As the main organisms used are non-pathogenic bacteria, or induce very mild symptoms, if these microorganisms are ingested, they do not pose any real risk to the environment, if correct disposal is carried out, or to the members of the team who carried out the experiments. + </p> </div> </div> </div> <div class="row mt-4 justify-content-center"> <div class="col-lg-8 mx-auto"> - <h4>What should this page contain?</h4> + <h4>Biosecurity</h4> <div class="bd-callout bd-callout-info"> - <hr> - <p>On this page of your wiki, you should write about how you are addressing any safety issues in your project. The wiki is a place where you can go beyond the questions on the safety forms, and write about whatever safety topics are most interesting in your project. (You do not need to copy your safety forms onto this wiki page.)</p> - - <p>Please visit the <a href="https://responsibility.igem.org/safety-policies/introduction">Safety Policies page</a> to find this year's safety requirements & deadlines, and to learn about safe & responsible research in iGEM.</p> + <p>Because the work as a whole was developed in laboratories on the premises of the University of São Paulo (USP), the biosafety standards pre-established by institutions, such as the Institute of Biomedical Sciences (ICB) were respected. All the wet lab member already did an biosafety course of Microbiology department to work on our labs , as well as the biosafety guidelines established by federal agencies in Brazil, such as CTNBio (Comissão Técnica Nacional de Biossegurança), such as appropriate hygiene measures and correct use of personal protective equipment (PPE). + It is also important to highlight that during the experiments, the biosafety level adopted was 1, due to the classification of the laboratories used. During our experiments, none of the compounds or tools used were high risk, and the genetic sequences, such as plasmids, were all produced by companies, through iGEM partnerships, or were provided through the laboratory itself or collaborators.</p> </div> </div> </div> <div class="row mt-4 justify-content-center"> <div class="col-lg-8 mx-auto"> - <h4>Safe Project Design</h4> - <div class="bd-callout bd-callout-info"> - <hr> - <p>Does your project include any safety features? Have you made certain decisions about the design to reduce risks? Write about them here! For example:</p> - <ul> - <li>Choosing a non-pathogenic chassis</li> - <li>Choosing parts that will not harm humans / animals / plants</li> - <li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li> - <li>Including an "induced lethality" or "kill-switch" device</li> - </ul> - </div> - </div> -</div> -<div class="row mt-4 justify-content-center"> - <div class="col-lg-8 mx-auto"> - <h4>Safe Lab Work</h4> + <h4>Ethics</h4> <div class="bd-callout bd-callout-info"> - <hr> - <p>What safety procedures do you use every day in the lab? Did you perform any unusual experiments, or face any unusual safety issues? Write about them here!</p> + <p>Our study is solely related to the editing of bacteria, expression of compounds of interest and the use of computational techniques, such as genomic and protein analysis. Therefore, no approval from the ethics committee was required, as it did not involve vertebrate animals. + </p> </div> </div> </div> + {% endblock %}