Skip to content
Snippets Groups Projects
Commit 31b232af authored by Devyani Ravi's avatar Devyani Ravi
Browse files

makenormal

parent 385573e3
No related branches found
No related tags found
No related merge requests found
Pipeline #458906 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
docs/.vuepress/components/HumanPractices.vue
+ 169
− 122
View file @ 31b232af
<template>
<div class="contribution">
<h3 style="color: #396d7e;">Natronaut for People</h3> <!-- Added color here -->
<div class="contribution-container">
<img
src="https://static.igem.wiki/teams/5306/human-practices/untitled-artwork-2good.png"
alt="Human Practices Image"
width="300"
/>
<p>
This page highlights the many ways in which Natronaut has engaged with the scientific community, other iGEM teams, experts in related fields and the other stakeholders potentially affected directly or indirectly by the project, through outreach, dialogue and many collaborations.
</p>
</div>
<!-- Introduction Section -->
<div class="card mb-2" style="background-color: #e3f2fd;">
<div class="card-header" @click="toggleSection('introduction')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<h2 style="color: #396d7e;">Introduction to Natronaut’s Human Practices: </h2>
<span>{{ openSection === 'introduction' ? '▲' : '▼' }}</span>
</div>
<div v-if="openSection === 'introduction'" class="card-body" style="background-color: #e5efdf;">
<h3 style="color: #396d7e;">Designing the Natronaut Project: Values in Mind</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Consulting Resources and Communities Meaningful to Natronaut</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Evidence of Responsibility</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Impact of Natronaut</h3>
<p style="color: #333;">Write here...</p>
<div class="contribution">
<h3>Natronaut for People</h3>
<div class="contribution-container">
<img
src="https://static.igem.wiki/teams/5306/human-practices/untitled-artwork-2good.png"
alt="Human Practices Image"
width="300"
/>
<p>
Our team, MSP-Maastricht, is dedicated to being an active and ongoing contributor to the iGEM community. We believe that science and engineering bridge the past and future, as all research builds on the knowledge of those who came before us. A key part of this tradition is our Contributions page, which showcases the innovative solutions we are developing to tackle real-world challenges. By sharing our strategies, methodologies, and findings, we aim to enhance the accessibility and application of synthetic biology techniques. Through facilitating such knowledge transfer, we hope to benefit future iGEM teams and the broader SynBio community.
</p>
</div>
</div>
<!-- Implementation Section -->
<div class="card mb-2" style="background-color: #e3f2fd;">
<div class="card-header" @click="toggleSection('implementation')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<h2 style="color: #396d7e;">Implementation and Impact on Design: Natronaut Application Chamber System — 3D Model</h2>
<span>{{ openSection === 'implementation' ? '▲' : '▼' }}</span>
<!-- Introduction Section -->
<div class="card mb-2" style="background-color: #e3f2fd;">
<div class="card-header" @click="toggleSection('introduction')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<h2 style="color: #396d7e;">Introduction to Natronaut’s Human Practices: </h2>
<span>{{ openSection === 'introduction' ? '▲' : '▼' }}</span>
</div>
<div v-if="openSection === 'introduction'" class="card-body" style="background-color: #e5efdf;">
<h3 style="color: #396d7e;">Designing the Natronaut Project: Values in Mind</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Consulting Resources and Communities Meaningful to Natronaut</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Evidence of Responsibility</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Impact of Natronaut</h3>
<p style="color: #333;">Write here...</p>
</div>
</div>
<div v-if="openSection === 'implementation'" class="card-body" style="background-color: #e5efdf;">
<h3 style="color: #396d7e;">1. Intake Pump</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">2. Physical Filter</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">3. Interchangeable Filter Module</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">4. Vibrio natriegens Chamber</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">5. Drying Chamber for Single-Cell Proteins and Output Pipe</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">6. Output Pipe</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Considerations</h3>
<p style="color: #333;">Write here...</p>
<!-- Implementation Section -->
<div class="card mb-2" style="background-color: #e3f2fd;">
<div class="card-header" @click="toggleSection('implementation')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<h2 style="color: #396d7e;">Implementation and Impact on Design: Natronaut Application Chamber System — 3D Model</h2>
<span>{{ openSection === 'implementation' ? '▲' : '▼' }}</span>
</div>
<div v-if="openSection === 'implementation'" class="card-body" style="background-color: #e5efdf;">
<h3 style="color: #396d7e;">1. Intake Pump</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">2. Physical Filter</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">3. Interchangeable Filter Module</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">4. Vibrio natriegens Chamber</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">5. Drying Chamber for Single-Cell Proteins and Output Pipe</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">6. Output Pipe</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Considerations</h3>
<p style="color: #333;">Write here...</p>
</div>
</div>
</div>
<!-- Inclusivity Section -->
<div class="card mb-2" style="background-color: #e3f2fd;">
<div class="card-header" @click="toggleSection('inclusivity')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<h2 style="color: #396d7e;">Taking Initiative: Inclusivity and Participation</h2>
<span>{{ openSection === 'inclusivity' ? '▲' : '▼' }}</span>
</div>
<div v-if="openSection === 'inclusivity'" class="card-body" style="background-color: #e5efdf;">
<h3 style="color: #396d7e;">“Day In The Life of an iGEM Member”</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Introduction Days and Bachelor’s Open Day at Maastricht University</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Spotify Link</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Colour-blind Friendly Colour Palette</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Postcards</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Eindhoven Funding Event</h3>
<p style="color: #333;">Write here...</p>
</div>
</div>
<!-- Feedback Section -->
<div class="card mb-2" style="background-color: #e3f2fd;">
<div class="card-header" @click="toggleSection('feedback')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<h2 style="color: #396d7e;">Gaining More Feedback and Stakeholder Insight</h2>
<span>{{ openSection === 'feedback' ? '▲' : '▼' }}</span>
<!-- Inclusivity Section -->
<div class="card mb-2" style="background-color: #e3f2fd;">
<div class="card-header" @click="toggleSection('inclusivity')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<h2 style="color: #396d7e;">Taking Initiative: Inclusivity and Participation</h2>
<span>{{ openSection === 'inclusivity' ? '▲' : '▼' }}</span>
</div>
<div v-if="openSection === 'inclusivity'" class="card-body" style="background-color: #e5efdf;">
<h3 style="color: #396d7e;">“Day In The Life of an iGEM Member”</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Introduction Days and Bachelor’s Open Day at Maastricht University</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Spotify Link</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Colour-blind Friendly Colour Palette</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Postcards</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Eindhoven Funding Event</h3>
<p style="color: #333;">Write here...</p>
</div>
</div>
<div v-if="openSection === 'feedback'" class="card-body" style="background-color: #e5efdf;">
<h3 style="color: #396d7e;">Survey on GMOs</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Interview with Philosophy of Technology Expert</h3>
<p style="color: #333;">Introduction and Background: Write here...</p>
<p style="color: #333;">Intersection of Technology and Nature in Synthetic Biology: Write here...</p>
<p style="color: #333;">Ethical Challenges and Commodifying Life: Write here...</p>
<p style="color: #333;">Governance and Public Participation in Synthetic Biology: Write here...</p>
<p style="color: #333;">Philosophical Insights: Life as Technology: Write here...</p>
<p style="color: #333;">Societal Impact and Environmental Concerns: Write here...</p>
<p style="color: #333;">Ethical Frameworks and Global Impact: Write here...</p>
<p style="color: #333;">Main Takeaways and Incorporation into the Project: Write here...</p>
<h3 style="color: #396d7e;">Interview with Unimer: A Discussion on Organic Fertilizer</h3>
<p style="color: #333;">Introduction and Background: Write here...</p>
<h3 style="color: #396d7e;">Meeting with Promega's Marloes van der Zwalm</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Meeting with Cultivarium's Henry Lee and Lilan Ling</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Utrecht, NL: The Dutch iGEM 2024 Meet</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Wageningen, NL: SynBioNL event</h3>
<p style="color: #333;">Write here...</p>
<!-- Feedback Section -->
<div class="card mb-2" style="background-color: #e3f2fd;">
<div class="card-header" @click="toggleSection('feedback')" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
<h2 style="color: #396d7e;">Gaining More Feedback and Stakeholder Insight</h2>
<span>{{ openSection === 'feedback' ? '▲' : '▼' }}</span>
</div>
<div v-if="openSection === 'feedback'" class="card-body" style="background-color: #e5efdf;">
<h3 style="color: #396d7e;">Survey on GMOs</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Interview with Philosophy of Technology Expert</h3>
<p style="color: #333;">Introduction and Background: Write here...</p>
<p style="color: #333;">Intersection of Technology and Nature in Synthetic Biology: Write here...</p>
<p style="color: #333;">Ethical Challenges and Commodifying Life: Write here...</p>
<p style="color: #333;">Governance and Public Participation in Synthetic Biology: Write here...</p>
<p style="color: #333;">Philosophical Insights: Life as Technology: Write here...</p>
<p style="color: #333;">Societal Impact and Environmental Concerns: Write here...</p>
<p style="color: #333;">Ethical Frameworks and Global Impact: Write here...</p>
<p style="color: #333;">Main Takeaways and Incorporation into the Project: Write here...</p>
<h3 style="color: #396d7e;">Interview with Unimer: A Discussion on Organic Fertilizer</h3>
<p style="color: #333;">Introduction and Background: Write here...</p>
<h3 style="color: #396d7e;">Meeting with Promega's Marloes van der Zwalm</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Meeting with Cultivarium's Henry Lee and Lilan Ling</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Utrecht, NL: The Dutch iGEM 2024 Meet</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Wageningen, NL: SynBioNL event</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">Madrid, ESP: European iGEM 2024 MeetUp</h3>
<p style="color: #333;">Write here...</p>
<h3 style="color: #396d7e;">University of Michigan: Bioremediation Virtual Symposium</h3>
<p style="color: #333;">Write here...</p>
</div>
</div>
</div>
</div>
</template>
</template>
<script>
export default {
data() {
return {
openSection: null, // Track which section is open
};
},
methods: {
toggleSection(section) {
// Toggle the section, close others
this.openSection = this.openSection === section ? null : section;
},
},
};
</script>
<style scoped>
.mb-2 {
margin-bottom: 1rem;
}
.card {
border-radius: 0.25rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-header {
padding: 1rem;
font-size: 1.25rem;
}
.contribution {
padding: 20px;
}
.contribution-container {
display: flex;
align-items: center;
}
.card-body {
padding: 1rem;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment