Difference between revisions of "Team:NUS Singapore-A/HP/shadow/IntegratedHP"

 
(26 intermediate revisions by 2 users not shown)
Line 3: Line 3:
  
 
<head>
 
<head>
 +
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">
 +
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js"></script>
 
<script src="https://rawgit.com/Wlada/vue-carousel-3d/master/dist/vue-carousel-3d.min.js"></script>
 
<script src="https://rawgit.com/Wlada/vue-carousel-3d/master/dist/vue-carousel-3d.min.js"></script>
 +
<script type="text/javascript" src="//use.typekit.net/kei2cfp.js"></script>
 +
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 
</head>
 
</head>
  
 
<style>
 
<style>
−
/****************************NEW CAROUSEL**********************************/
+
    /***********************************************CSS STARTS HERE*************************************************/
−
.carousel-3d-slide {
+
    /* The accordion is the class given to the drop-down menu thingy */
−
      height: auto !important;
+
    .accordion {
−
      background-color: rgba(0, 0, 0, 0.25) !important;
+
        background-color: #f2f2f2;
 +
        color: black;
 +
        cursor: pointer;
 +
        padding: 15px;
 +
        width: 90%;
 +
        text-align: left;
 +
        margin-left: 5%;
 +
        margin-right: 5%;
 +
        border: none;
 +
        outline: none;
 +
        /* I wanted to give a gradual change, but it's having some trouble reading the 'transition' property. I'll look into having it javascripted instead. */
 +
        /*transition: 0.4s ease;*/
 +
        font-family: "Montserrat", sans-serif;
 +
        font-weight: 300;
 +
        font-size: 20px;
 +
    }
 +
   
 +
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 +
    .active, .accordion:hover {
 +
        font: bold 20px "Montserrat", sans-serif;
 +
        background-color: #e6e6e6;
 +
    }
 +
   
 +
    /* Style the accordion panel. Note: hidden by default */
 +
    .panel {
 +
        background-color: white;
 +
        text-align: left;
 +
        margin-top: 10px;
 +
        max-height: 0;
 +
        overflow: hidden;
 +
        transition: max-height 0.2s ease-out;
 +
    }
 +
    .accordion:after {
 +
        content: '+';
 +
        font-size: 13px;
 +
        color: #777;
 +
        float: right;
 +
        margin-left: 5px;
 +
    }
 +
   
 +
    /* Not sure why this function does not work. Need to check */
 +
    .active:after {
 +
        content: "-";
 
     }
 
     }
−
/**************************END OF NEW CAROUSEL********************************/
 
  
−
* {box-sizing: border-box;}
+
    table, th, td {
−
body {font-family: Verdana, sans-serif;}
+
        border: none;
−
.mySlides {display: none;}
+
        border-collapse: collapse;
−
img {vertical-align: middle;}
+
    }
 +
    table {
 +
        font-family: "Lora";
 +
        font-size: 13px;
 +
        word-spacing: 0.5em;
 +
    }
  
−
/* Slideshow container */
+
    th, td {
−
.slideshow-container {
+
        text-align: left;
−
  max-width: 2000px;
+
        padding: 3px;
−
  position: relative;
+
    }
−
  margin: auto;
+
−
}
+
  
−
/* Caption text */
+
    table caption {
−
.text {
+
−
  color: #f2f2f2;
+
−
  font-size: 15px;
+
−
  padding: 8px 12px;
+
−
  position: absolute;
+
−
  bottom: 8px;
+
−
  width: 100%;
+
−
  text-align: center;
+
−
}
+
−
/* Number text (2/3 etc) */
+
−
.numbertext {
+
−
  color: #f2f2f2;
+
−
  font-size: 12px;
+
−
  padding: 8px 12px;
+
−
  position: absolute;
+
−
  top: 0;
+
−
}
+
  
−
/* The dots/bullets/indicators */
+
    }
−
.dot {
+
−
  height: 15px;
+
−
  width: 15px;
+
−
  margin: 0 2px;
+
−
  background-color: #bbb;
+
−
  border-radius: 50%;
+
−
  display: inline-block;
+
−
  transition: background-color 0.6s ease;
+
−
}
+
  
−
.active {
+
    h1 {
−
  background-color: #717171;
+
        font-family: "MONTSERRAT", sans-serif;
−
}
+
        font-weight: bold;
 +
        font-size: 22px;
 +
        text-align: left;
 +
        color: black;
 +
        padding-left: 5%;
 +
        padding-top: 1.5%;
 +
        padding-bottom: 1%;
 +
        border: none;
 +
    }
 +
   
 +
    h2 {
 +
        font-family: "Lora", sans;
 +
        font-weight: 300;
 +
        text-align: left;
 +
        color: black;
 +
        margin-left: 5%;
 +
        margin-bottom: 15px; 
 +
    }
  
−
/* Fading animation */
+
    h3 {
−
.fade {
+
        font-family: "Lora", sans;
−
  -webkit-animation-name: fade;
+
        font-weight: 300;
−
  -webkit-animation-duration: 1.5s;
+
        text-align: left;
−
  animation-name: fade;
+
        color: black;
−
  animation-duration: 1.5s;
+
    }
−
}
+
  
−
@-webkit-keyframes fade {
 
−
  from {opacity: .4}
 
−
  to {opacity: 1}
 
−
}
 
  
−
@keyframes fade {
+
    p, ol li, ul li  {
−
  from {opacity: .4}
+
        font-family: "Lora", serif;
−
  to {opacity: 1}
+
        font-size: 14px;
−
}
+
        word-spacing: 0.5em;
 +
        text-align:justify;
 +
    }
  
−
/* On smaller screens, decrease text size */
+
    img {
−
@media only screen and (max-width: 300px) {
+
        display: block;
−
  .text {font-size: 11px}
+
        margin-left: auto;
−
}
+
        margin-right: auto;
−
.mySlides{
+
    }
−
  text-align: center;
+
−
}
+
−
</style>
+
  
 +
    .discussion_graph, .measurement_table{
 +
        width: 70%;
 +
        height: auto;
 +
        margin: auto;
 +
    }
  
−
<body>
 
  
−
<div class="inner-border" style="border-top:none;">
 
  
−
<div style="text-align: center; margin-bottom: -24px;">
+
    .ihp-header{
−
  <img src="https://static.igem.org/mediawiki/2018/f/fd/T--NUS_Singapore-A--IHP_header.png" alt="IHP Header" style="width:50%;">
+
        width: 47.5%;
−
</div>
+
        height: auto;
 +
        margin: auto;
 +
    }
 +
    .center-justified{
 +
      text-align: justify;
 +
      margin: 0 auto;
 +
      width: 70%;
 +
    }
  
−
<div id="carousel">
+
     /**********************
−
  <carousel-3d :autoplay="true" :autoplay-timeout="2400">
+
    Start of two columns */
−
     <slide :index="0"><img src="https://static.igem.org/mediawiki/2018/a/a6/T--NUS_Singapore-A--IHP_FooJeeLoon.jpg"/></slide>
+
     * {
−
    <slide :index="1"><img src="https://static.igem.org/mediawiki/2018/1/14/T--NUS_Singapore-A--IHP_HolgerSchlaefke.jpg"/></slide>
+
     box-sizing: border-box;
−
     <slide :index="2"><img src="https://static.igem.org/mediawiki/2018/f/f8/T--NUS_Singapore-A--IHP_Gerard_Talhoff.jpg"/></slide>
+
     }
−
     <slide :index="3"><img src="https://static.igem.org/mediawiki/2018/7/74/T--NUS_Singapore-A--IHP_LeongMinyi.jpg"/></slide>
+
−
    <slide :index="4"><img src="https://static.igem.org/mediawiki/2018/9/97/T--NUS_Singapore-A--IHP_VinodAgnihotri.jpg"/></slide>
+
−
     <slide :index="5"><img src="https://static.igem.org/mediawiki/2018/c/c2/T--NUS_Singapore-A--IHP_AngeleneWong.jpg"/></slide>
+
−
    <slide :index="6"><img src="https://static.igem.org/mediawiki/2018/d/db/T--NUS_Singapore-A--IHP_NicLindley.jpg"/></slide>
+
−
    <slide :index="7"><img src="https://static.igem.org/mediawiki/2018/9/95/T--NUS_Singapore-A--IHP_YvonneChow.jpg"/></slide>
+
−
  </carousel-3d>
+
−
</div>
+
  
−
<div class="slideshow-container">
+
    /* Create two columns that floats next to each other */
 +
    .column {
 +
        float: left;
 +
        text-align: left;
 +
    }
 +
   
 +
    .left {
 +
        width: 50%;
 +
        padding-left: 5%;
 +
        padding-right: 2.5%;
 +
    }
  
−
<div class="mySlides fade">
+
    .right {
−
  <div class="numbertext">1 / 8</div>
+
        width: 50%;
−
  <img src="https://static.igem.org/mediawiki/2018/a/a6/T--NUS_Singapore-A--IHP_FooJeeLoon.jpg" style="width:50%">
+
        padding-left: 2.5%;
−
  <div class="text">Dr Foo Lee Joon</div>
+
        padding-right: 5%;
−
</div>
+
    }
  
−
<div class="mySlides fade">
+
    /* Clear floats after the columns */
−
  <div class="numbertext">2 / 8</div>
+
    .row:after {
−
  <img src="https://static.igem.org/mediawiki/2018/1/14/T--NUS_Singapore-A--IHP_HolgerSchlaefke.jpg" style="width:50%">
+
        content: "";
−
  <div class="text"> Mr Holger Schlaefke</div>
+
        display: table;
−
</div>
+
        clear: both;
 +
    }
  
−
<div class="mySlides fade">
+
    /********************
−
  <div class="numbertext">3 / 8</div>
+
    End of two columns */
−
  <img src="https://static.igem.org/mediawiki/2018/f/f8/T--NUS_Singapore-A--IHP_Gerard_Talhoff.jpg" style="width:50%">
+
   
−
  <div class="text">Mr Gerard Talhoff</div>
+
    .pictures{
−
</div>
+
    width: 50px;
 +
    height: 50px;
 +
    background-colour: grey;
 +
    }
 +
   
 +
    /***************************************************CSS ENDS HERE**********************************************************/
 +
</style>
  
−
<div class="mySlides fade">
 
−
  <div class="numbertext">4 / 8</div>
 
−
  <img src="https://static.igem.org/mediawiki/2018/7/74/T--NUS_Singapore-A--IHP_LeongMinyi.jpg" style="width:50%">
 
−
  <div class="text">Ms Leong Minyi</div>
 
−
</div>
 
  
−
<div class="mySlides fade">
+
<body>
−
  <div class="numbertext">5 / 8</div>
+
<div class="inner-border" style="border-top: none;">
−
  <img src="https://static.igem.org/mediawiki/2018/9/97/T--NUS_Singapore-A--IHP_VinodAgnihotri.jpg" style="width:50%">
+
−
  <div class="text">Mr Vinod Agnihotri</div>
+
−
</div>
+
  
−
<div class="mySlides fade">
+
<img src="https://static.igem.org/mediawiki/2018/2/29/T--NUS_Singapore-A--IHP_header_C.png" class="ihp-header">
−
  <div class="numbertext">6 / 8</div>
+
−
  <img src="https://static.igem.org/mediawiki/2018/c/c2/T--NUS_Singapore-A--IHP_AngeleneWong.jpg" style="width:50%">
+
−
  <div class="text">Ms Angelene Wong</div>
+
−
</div>
+
  
−
<div class="mySlides fade">
+
  <h1>Part I - Finding a Problem</h1>
−
   <div class="numbertext">7 / 8</div>
+
   <div class="row">
−
  <img src="https://static.igem.org/mediawiki/2018/d/db/T--NUS_Singapore-A--IHP_NicLindley.jpg" style="width:50%">
+
    <div class="column left" style="background-color:white;">
−
  <div class="text">Dr Nic Lindley</div>
+
      <p><i>Nurse Clinicians and Professors in NUH</i></p>
−
</div>
+
      <br>
 +
      <p>We hoped to find out if our idea for a better detector for CP-CRE was feasible, and if not, what else could we attempt in the three precious months before the Giant Jamboree. We found out that it was unlikely that our team would produce a solution to outperform current or developing ones, and this interview thus helped us eliminate CP-CRE as a project idea, letting us focus on dyes.</p>
  
−
<div class="mySlides fade">
+
    </div>
−
  <div class="numbertext">8 / 8</div>
+
    <div class="column right" style="background-color:white;">
−
  <img src="https://static.igem.org/mediawiki/2018/9/95/T--NUS_Singapore-A--IHP_YvonneChow.jpg" style="width:50%">
+
      <p><i>Pint of Science with Melissa Fernandez</i></p>
−
  <div class="text">Dr Yvonne Chow</div>
+
      <br>
−
  <p style="text-align: center"> Write up here </p>
+
      <p>What could be better than a problem close to home? Singapore is a hotspot for mosquito-borne diseases such as malaria and dengue. Past iGEM projects had focused on developing fast diagnosis kits for diseases such as gonorrhea, and it seemed that there was much work to be done for tropical diseases. We went down to an event organized by Pint of Science to interact with top researchers. They told us also that it would not be feasible for us to try to solve related problems.</p>
−
</div>
+
    </div>
 +
  </div>
  
−
</div>
+
  <br>
 +
  <hr>
 +
  <br>
  
 +
  <div>
 +
  <h1>Part II - Understanding the Problem</h1>
 +
  <div class="row">
 +
    <div class="column left" style="background-color:white;">
 +
      <p><i>Major Synthetic Dye Companies</i></p>
 +
      <br>
 +
      <p>Firstly, as consumers are getting more savvy, there is a growing demand for higher-quality, less pollutive dyes. Secondly, he pointed out that the educated layman, as a consumer, may be repulsed by the idea of bacteria having previously been in the dye, even if we claim that all the bacteria has been removed from the dye. This was valuable to us because our team initially believed that consumers and designers would be more interested in our dyes if they knew it had been made using synthetic biology. It indicates that our next step for Human Practices should be to find out how many other people share his opinion. Thirdly, eco-friendly dyes are something chemical companies would welcome, because the average consumer associates “chemical” with “harmful”. Lastly, he suggested that to become commercially successful, we could collaborate with prominent brands in the fashion industry who are willing to experiment with natural dye
 +
    </p>
 +
    <br>
 +
    <p><i>Designer - Miss Leong Minyi</i></p>
 +
    <br>
 +
    <p>Drawing on her experience of working with natural dyes, she taught us much about the different plants we could consider extracting dyes from and creative techniques such as infusing cellulose-based textiles with proteins or tannins to increase the the fabric ability to absorb dyes. We even touched on her deeply moving experience of meeting her idol, the late legendary experimental textile designer Junichi Arai. From this interview, we became aware of even more factors to consider when designing our dye, such as the ratio of water to dye to the weight of the fabric, or how much dye is required to get a specific intensity.
 +
        </p>
 +
    </div>
 +
      <div class="column right" style="background-color: white;">
 +
        <p><i>Consumer and Fashion Scholar – Miss Angelene Wong</i></p>
 +
        <ul>
 +
          <li>Current attempts to marry technology to fashion produces unwearable clothes</li>
 +
            <ul><li>“Creation of immaterial value” via marketing (e.g. current trend is to use parody and be tongue-in-cheek</li>)
 +
            <li>If you want to talk about technology being involved in fashion, technically that would include a sewing machine</li>
 +
            <li>Create the need in consumers to change</li>
 +
            <li>Once you know about unethical practices in fashion, it’s difficult to “un-know”</li>
 +
            </ul>
 +
          <li>Our solution must have:</li>
 +
          <ul><li>Accountability from producers</li>
 +
              <li>Accessibility</li>
 +
              <li>Value for money</li>
 +
              <li>Think about what the brand is about</li>
 +
              <li>What is the selling point</li>
 +
          </ul>
 +
          <li>Help the consumer understand why they ought to pay more for clothes</li>
 +
          <li>To sell to the consumer, make our instagram more fashionable and skip the science at first</li>
 +
        </ul>
 +
    </div>
 +
    <br>
 +
  </div>
 +
  </div>
  
 +
  <br>
 +
  <hr>
 +
  <br>
  
−
<br>
+
  <div>
−
 
+
  <h1>Part III - Developing Our Solution</h1>
−
 
+
    <div class="row">
−
<div style="text-align:center">
+
      <div style="background-color:white; margin: 15px;">
−
  <span class="dot"></span>  
+
      <p><i>Dr Foo Lee Joon</i></p>
−
  <span class="dot"></span>  
+
        <p>We engineered a bacterium that could perform the second half of the pathway using one the intermediates as feedstock. At the same time, we designed an efficient and sensitive method to control the expression of key genes to influence the flux of intermediates.
−
  <span class="dot"></span>
+
        <br>
−
  <span class="dot"></span>  
+
Some of the other tips he gave us included the use of monoculture rather than polyculture due to better mass transfer characteristics. He also introduced us to the concept of bioremediation, which would further enhance the environmental impact of our project.
−
  <span class="dot"></span>
+
        </p>
−
  <span class="dot"></span>
+
      <br>
−
  <span class="dot"></span>  
+
      </div>
−
  <span class="dot"></span>
+
      </div>
−
</div>
+
    </div>
−
 
+
    <br>
−
</div>
+
    <hr>
 +
  </div>
  
 
</body>
 
</body>
  
 
<script>
 
<script>
−
 
−
/*
 
−
var slideIndex = 0;
 
−
showSlides();
 
−
 
−
function showSlides() {
 
−
    var i;
 
−
    var slides = document.getElementsByClassName("mySlides");
 
−
    var dots = document.getElementsByClassName("dot");
 
−
    for (i = 0; i < slides.length; i++) {
 
−
      slides[i].style.display = "none"; 
 
−
    }
 
−
    slideIndex++;
 
−
    if (slideIndex > slides.length) {slideIndex = 1}   
 
−
    for (i = 0; i < dots.length; i++) {
 
−
        dots[i].className = dots[i].className.replace(" active", "");
 
−
    }
 
−
    slides[slideIndex-1].style.display = "block"; 
 
−
    dots[slideIndex-1].className += " active";
 
−
    setTimeout(showSlides, 3000); // Change image every 2 seconds
 
−
}
 
−
 
−
*/
 
  
 
new Vue({
 
new Vue({
Line 219: Line 283:
 
   }
 
   }
 
})
 
})
 +
 +
function openSponsor(evt, sponsorName) {
 +
    var i, tabcontent, tablinks;
 +
    tabcontent = document.getElementsByClassName("tabcontent");
 +
    for (i = 0; i < tabcontent.length; i++) {
 +
        tabcontent[i].style.display = "none";
 +
    }
 +
    tablinks = document.getElementsByClassName("tablinks");
 +
    for (i = 0; i < tablinks.length; i++) {
 +
        tablinks[i].className = tablinks[i].className.replace(" active", "");
 +
    }
 +
    document.getElementById(sponsorName).style.display = "flex";
 +
    evt.currentTarget.className += " active";
 +
}
 
</script>
 
</script>
  
 
</html>
 
</html>
 
{{:Team:NUS_Singapore-A/Templates/Footer}}
 
{{:Team:NUS_Singapore-A/Templates/Footer}}

Latest revision as of 11:14, 28 September 2018

CONNECT WITH US

Part I - Finding a Problem

Nurse Clinicians and Professors in NUH


We hoped to find out if our idea for a better detector for CP-CRE was feasible, and if not, what else could we attempt in the three precious months before the Giant Jamboree. We found out that it was unlikely that our team would produce a solution to outperform current or developing ones, and this interview thus helped us eliminate CP-CRE as a project idea, letting us focus on dyes.

Pint of Science with Melissa Fernandez


What could be better than a problem close to home? Singapore is a hotspot for mosquito-borne diseases such as malaria and dengue. Past iGEM projects had focused on developing fast diagnosis kits for diseases such as gonorrhea, and it seemed that there was much work to be done for tropical diseases. We went down to an event organized by Pint of Science to interact with top researchers. They told us also that it would not be feasible for us to try to solve related problems.



Part II - Understanding the Problem

Major Synthetic Dye Companies


Firstly, as consumers are getting more savvy, there is a growing demand for higher-quality, less pollutive dyes. Secondly, he pointed out that the educated layman, as a consumer, may be repulsed by the idea of bacteria having previously been in the dye, even if we claim that all the bacteria has been removed from the dye. This was valuable to us because our team initially believed that consumers and designers would be more interested in our dyes if they knew it had been made using synthetic biology. It indicates that our next step for Human Practices should be to find out how many other people share his opinion. Thirdly, eco-friendly dyes are something chemical companies would welcome, because the average consumer associates “chemical” with “harmful”. Lastly, he suggested that to become commercially successful, we could collaborate with prominent brands in the fashion industry who are willing to experiment with natural dye


Designer - Miss Leong Minyi


Drawing on her experience of working with natural dyes, she taught us much about the different plants we could consider extracting dyes from and creative techniques such as infusing cellulose-based textiles with proteins or tannins to increase the the fabric ability to absorb dyes. We even touched on her deeply moving experience of meeting her idol, the late legendary experimental textile designer Junichi Arai. From this interview, we became aware of even more factors to consider when designing our dye, such as the ratio of water to dye to the weight of the fabric, or how much dye is required to get a specific intensity.

Consumer and Fashion Scholar – Miss Angelene Wong

  • Current attempts to marry technology to fashion produces unwearable clothes
    • “Creation of immaterial value” via marketing (e.g. current trend is to use parody and be tongue-in-cheek
      • )
    • If you want to talk about technology being involved in fashion, technically that would include a sewing machine
    • Create the need in consumers to change
    • Once you know about unethical practices in fashion, it’s difficult to “un-know”
  • Our solution must have:
    • Accountability from producers
    • Accessibility
    • Value for money
    • Think about what the brand is about
    • What is the selling point
  • Help the consumer understand why they ought to pay more for clothes
  • To sell to the consumer, make our instagram more fashionable and skip the science at first



Part III - Developing Our Solution

Dr Foo Lee Joon

We engineered a bacterium that could perform the second half of the pathway using one the intermediates as feedstock. At the same time, we designed an efficient and sensitive method to control the expression of key genes to influence the flux of intermediates.
Some of the other tips he gave us included the use of monoculture rather than polyculture due to better mass transfer characteristics. He also introduced us to the concept of bioremediation, which would further enhance the environmental impact of our project.





HEAR OUR STORY

We’re using synthetic biology to change the way the world thinks and functions.

We’re a little disruptive, dangerous and maybe a tad too bold. But the world needs some shaking up every now and then, and we think we’re just the right people for that.

Together we’re going to engineer biology and create something awesome.

CONTACT US

nusigem@gmail.com

21 Lower Kent Ridge Rd, Singapore 119077