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

 
(4 intermediate revisions by the same user not shown)
Line 16: Line 16:
 
/**************************END OF NEW CAROUSEL********************************/
 
/**************************END OF NEW CAROUSEL********************************/
  
−
* {box-sizing: border-box;}
 
−
body {font-family: Verdana, sans-serif;}
 
−
.mySlides {display: none;}
 
−
img {vertical-align: middle;}
 
  
 
.outreach-header{
 
.outreach-header{
Line 27: Line 23:
  
  
−
.active {
 
−
  background-color: #717171;
 
−
}
 
−
 
−
/* Fading animation */
 
−
 
−
@-webkit-keyframes fade {
 
−
  from {opacity: .4}
 
−
  to {opacity: 1}
 
−
}
 
−
 
−
@keyframes fade {
 
−
  from {opacity: .4}
 
−
  to {opacity: 1}
 
−
}
 
−
 
−
/* On smaller screens, decrease text size */
 
−
@media only screen and (max-width: 300px) {
 
−
  .text {font-size: 11px}
 
−
}
 
 
/****************ANYTHING ONWARDS IS THE STYLE FROM INTERLAB********************************************/
 
/****************ANYTHING ONWARDS IS THE STYLE FROM INTERLAB********************************************/
  
Line 202: Line 178:
 
     /********************
 
     /********************
 
     End of two columns */
 
     End of two columns */
 +
/* Style the img inside the buttons */
 +
.sponsors-overview-rows button img{
 +
  max-height:100%;
 +
  max-width:100%;
 +
}
 +
/* Create an active/current tablink class */
 +
.sponsors-overview-rows button.active {
 +
    background-color: #ccc;
 +
}
 +
 +
.tabcontent-wrapper{
 +
  text-align: center;
 +
}
 +
/* Style the tab content */
 +
.tabcontent {
 +
    display: none;
 +
    max-width: 85%;
 +
    margin: auto auto;
 +
    padding: 6px 12px;
 +
    border-radius: 12px;
 +
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    flex-direction: row;
 +
    justify-content: flex-start;
 +
    align-items: center;
 +
}
 +
.sponsor-pic{
 +
  display: flex;
 +
  width: 235px;
 +
  max-width: 235px;
 +
  min-width: 235px;
 +
  height: auto;
 +
}
 
      
 
      
 
</style>
 
</style>
Line 216: Line 226:
 
<div id="carousel">
 
<div id="carousel">
 
   <carousel-3d :autoplay="true" :autoplay-timeout="2400">
 
   <carousel-3d :autoplay="true" :autoplay-timeout="2400">
−
     <slide :index="0"><img src="https://static.igem.org/mediawiki/2018/7/7e/T--NUS_Singapore-A--Collabration1.jpg"/></slide>
+
     <slide :index="0"><button class="sponsor-boxes tablinks" onclick="openSponsor(event, 'IHP1')"><img src="https://static.igem.org/mediawiki/2018/7/7e/T--NUS_Singapore-A--Collabration1.jpg"/></button></slide>
−
     <slide :index="1"><img src="https://static.igem.org/mediawiki/2018/6/62/T--NUS_Singapore-A--Collabration2.jpg"/></slide>
+
 
−
     <slide :index="2"><img src="https://static.igem.org/mediawiki/2018/3/3b/T--NUS_Singapore-A--Collabration3.jpg"/></slide>
+
     <slide :index="1"><button class="sponsor-boxes tablinks" onclick="openSponsor(event, 'IHP2')"><img src="https://static.igem.org/mediawiki/2018/6/62/T--NUS_Singapore-A--Collabration2.jpg"/></button></slide>
−
     <slide :index="3"><img src="https://static.igem.org/mediawiki/2018/b/b7/T--NUS_Singapore-A--Collabration4.jpg"/></slide>
+
 
−
     <slide :index="4"><img src="https://static.igem.org/mediawiki/2018/3/37/T--NUS_Singapore-A--Collabration5.jpg"/></slide>
+
     <slide :index="2"><button class="sponsor-boxes tablinks" onclick="openSponsor(event, 'IHP3')"><img src="https://static.igem.org/mediawiki/2018/3/3b/T--NUS_Singapore-A--Collabration3.jpg"/></button></slide>
 +
 
 +
     <slide :index="3"><button class="sponsor-boxes tablinks" onclick="openSponsor(event, 'IHP4')"><img src="https://static.igem.org/mediawiki/2018/b/b7/T--NUS_Singapore-A--Collabration4.jpg"/></button></slide>
 +
 
 +
     <slide :index="4"><button class="sponsor-boxes tablinks" onclick="openSponsor(event, 'IHP5')"><img src="https://static.igem.org/mediawiki/2018/3/37/T--NUS_Singapore-A--Collabration5.jpg"/></button></slide>
 +
 
 
   </carousel-3d>
 
   </carousel-3d>
 
</div>
 
</div>
  
 +
<div class="tabcontent-wrapper">
  
  
−
<!--
+
<!-- YOU CAN COPY PASTE FROM HERE TO THE NEXT WARNING -->
−
<div style="text-align: center; margin-bottom: -24px;">
+
−
  <img src="https://static.igem.org/mediawiki/2018/8/8e/T--NUS_Singapore-A--Collabration_header.png" alt="Collaboration Header" style="width:50%;">
+
−
</div>
+
  
−
<div class="slideshow-container">
 
  
−
<div class="mySlides fade">
 
−
  <div class="numbertext">1 / 5</div>
 
−
  <img src="https://static.igem.org/mediawiki/2018/7/7e/T--NUS_Singapore-A--Collabration1.jpg" style="width:50%">
 
−
  <div class="text">Caption Text</div>
 
−
</div>
 
  
−
<div class="mySlides fade">
+
<!-- HELLO BELOW HERE IS THE DIV TAG YOU SHOULD CHANGE. REMEMBER TO RELATE THE ID TO THE CORRECT ID AT CAROUSEL UP ABOVE -->
−
  <div class="numbertext">2 / 5</div>
+
−
  <img src="https://static.igem.org/mediawiki/2018/6/62/T--NUS_Singapore-A--Collabration2.jpg" style="width:50%">
+
−
  <div class="text">Caption Two</div>
+
−
</div>
+
  
−
<div class="mySlides fade">
+
<div id="IHP1" class="tabcontent">
−
  <div class="numbertext">3 / 5</div>
+
−
  <img src="https://static.igem.org/mediawiki/2018/3/3b/T--NUS_Singapore-A--Collabration3.jpg" style="width:50%">
+
−
  <div class="text">Caption Three</div>
+
−
</div>
+
  
−
<div class="mySlides fade">
+
<!-- HELLO ABOVE HERE IS THE DIV TAG YOU SHOULD CHANGE. REMEMBER TO RELATE THE ID TO THE CORRECT ID AT THE CAROUSEL UP ABOVE -->
−
  <div class="numbertext">4 / 5</div>
+
−
  <img src="https://static.igem.org/mediawiki/2018/b/b7/T--NUS_Singapore-A--Collabration4.jpg" style="width:50%">
+
−
  <div class="text">Caption Four</div>
+
−
</div>
+
  
−
<div class="mySlides fade">
+
    <img src="https://static.igem.org/mediawiki/2018/a/a6/T--NUS_Singapore-A--IHP_FooJeeLoon.jpg" class="sponsor-pic" alt="Dr Foo Jee Loon"></a>
−
  <div class="numbertext">5 / 5</div>
+
    <div class="row">  
−
  <img src="https://static.igem.org/mediawiki/2018/3/37/T--NUS_Singapore-A--Collabration5.jpg" style="width:50%">
+
      <div class="column left" style="background-color: white;">
−
  <div class="text">Caption Five</div>
+
        <p>HELLO TVARITA I WANT YOU TO WRITE HERE. REMEMBER FOR EVERY NEW PICTURE YOU WANNA ADD. MAKE SURE YOU LOOK AT THE onclick="openSponsor(event, 'INSERT CORRECT NUMBER HERE')" THEN REMEMBER TO CHANGE THE DIV ID FOR THIS SPECIFIC WRITEUP </p>
−
</div>
+
  
−
</div>
+
        <br>
  
−
-->
+
        <p>HELLO TVARITA I WANT YOU TO WRITE HERE. REMEMBER FOR EVERY NEW PICTURE YOU WANNA ADD. MAKE SURE YOU LOOK AT THE onclick="openSponsor(event, 'INSERT CORRECT NUMBER HERE')" THEN REMEMBER TO CHANGE THE DIV ID FOR THIS SPECIFIC WRITEUP </p>
  
 +
        <br>
 +
      </div>
 +
      <div class="column right" style="background-color: white;">
 +
        <p><i>Use Italics for mini titles</i></p>
 +
        <p>ALWAYS REMEMBER TO OPEN AND CLOSE YOUR P TAGS OR THE LAYOUT WILL BE SCREWED BIG TIME</p>
  
−
<br>
+
      <br>
 +
    </div>
 +
    </div>
  
 +
  </div>
 +
 +
 +
<!-- HERE IS WHERE YOU SHOULD STOP YOUR COPYING. TRY TO SHOW PREVIEW BEFORE SAVING THE PAGE. ALSO DON'T USE GOOGLE CHROME WHEN SHOWING PREVIEW CAUSE IT'LL ALL BE GONE -->
 +
 +
 +
<div id="IHP2" class="tabcontent">
 +
    <img src="https://static.igem.org/mediawiki/2018/d/d3/T--NUS_Singapore-A--IHP_HolgerSchlaefkeSolo.jpg" class="sponsor-pic" alt="Mr. Holger Schlaefke"></a>
 +
    <span class="sponsor-description"> [2/8] - Mr. Holger Schlaefke
 +
<br> <br>
 +
Mr Holger Schlaefke is the Global Marketing Manager for Cellulosic Dyes at Huntsman Textiles Effects. With an impressive 21 years of experience in the dyeing and textile industry under his belt, he was well equipped for us to approach to find out more about what we should consider when designing a dye. It helped that Mr Schlaefke was warmly hospitable and accommodating, and extremely forthcoming with his knowledge about dyes.
 +
<br> <br>
 +
The interview validated the need for more sustainable dyeing technologies to reduce the water pollution caused by the textile industry, and helped us affirm the key aspects of the problem. We also found the answers we sought! From an industry perspective, we now know that we should take into account how dye manufacturers need to be agile in response to the fashion industry’s ever-changing demands for the trendiest colours of the season, and the requirements our dye must fulfill to be considered eco-friendly, among others.
 +
<br> <br>
 +
On the topic of natural versus sustainable dyes, we learned that the industry is keener on using synthetic dyes rather than natural dyes even though natural dyes are considered more environmentally friendly. This is because of the industry’s perception that firstly, synthetic dyes are superior to natural dyes in terms of wear resistance, secondly, producing synthetic dyes is less complicated and time consuming, and finally, companies producing synthetic dyes would have to completely change their machinery and infrastructure. This was why he foresees that it will be difficult to persuade textile producers and other major stakeholders to adopt new, potentially industry-disrupting solutions involving natural dyes.
 +
<br> <br>
 +
We then shared our vision of producing natural dyes biosynthetically, to which he listed important challenges and obstacles to anticipate and overcome should we decide to continue on this path. Furthermore, he suggested that producing primary colours or brighter and bolder colours would be more impressive and would make our solution more attractive to our stakeholders.
 +
<br> <br>
 +
At the end of the interview, Mr Holger encouraged us to never give up, and even jestingly reminded us that whatever we do, there was one thing we should never forget - to get a patent for our project!
 +
 +
    </span>
 +
  </div>
 +
 
 +
 
 +
<div id="IHP3" class="tabcontent">
 +
    <img src="https://static.igem.org/mediawiki/2018/b/b9/T--NUS_Singapore-A--IHP_Gerard_TalhoffSolo.jpg" class="sponsor-pic" alt="Mr. Gerard Talhoff "></a>
 +
    <span class="sponsor-description"> [3/8] - Mr. Gerard Talhoff
 +
<br> <br>
 +
Mr Gerald is the Global Manufacturing and Supply Chain Vice President of the DyStar Group.  His current responsibilities range from managing global manufacturing footprint to supply chain management and even to corporate sustainability. With more than 20 years of experience in the dye industry under his belt, Mr. Gerald was able to impart pearls of wisdom gleaned from his many years of experience to our inquisitive young minds.
 +
<br> <br>
 +
During our interview with Mr Gerald, he introduced to us the core tenets driving DyStar’s sustainability initiatives. Central to their thrust was a three-fold approach - reducing the production carbon footprint, ensuring consumer safety by keeping hazardous chemicals out of textiles and dyes used, and striving for biodegradable textiles and materials used for dyeing.
 +
<br> <br>
 +
Mr Gerald validated our proposed design, pointing out that balancing environmental friendliness and commercial feasibility would no longer be unfeasible. Instead, co-opting sustainable practices in textile dyeing would become a competitive advantage; governmental agencies around the world are taking tougher actions against environmentally-unfriendly practices and pollution.
 +
<br> <br>
 +
When discussing our potential solutions, he anticipated a critical hurdle we would have to overcome: our solution must attain significant yield for it to have a significant impact on the dye market. From his experience, past attempts at producing bio-engineered dyes have failed to become commercially-viable due to their failure to achieve significant yield. This is a potentially disastrous pitfall that we must seek to circumvent.
 +
<br> <br>
 +
Besides our solution of producing microbial dyes, Mr Gerald warned us against the production of natural dyes using agricultural biomass as feedstock. The resulting competition between food production and natural dye production would indeed be very unfavourable for. In addition, disposal of used biomass would exacerbate the problem of resource wastage. Adding to his previous point, Mr Gerald taught us that it was imperative to evaluate the entire production process for its eco-friendliness, taking into account energy and water consumption, waste generation, to name a few.
 +
<br> <br>
 +
An interesting twist to the end of the interview, Mr Gerald raised the possibility for the obsolescence of dyes in future, as textiles could coloured by virtue of its physical properties, or perhaps the invention of new materials that are not amenable to current dyeing methods. To tie the interview up, before continuing on our journey with synthetic biology, he encouraged us to evaluate bioengineered products around the world critically.
 +
    </span>
 +
  </div>
 +
 +
<div id="IHP4" class="tabcontent">
 +
    <img src="https://static.igem.org/mediawiki/2018/b/b9/T--NUS_Singapore-A--IHP_Gerard_TalhoffSolo.jpg" class="sponsor-pic" alt="Mr. Gerard Talhoff "></a>
 +
    <span class="sponsor-description"> [4/8] - Mr. Gerard Talhoff
 +
<br> <br>
 +
Mr Gerald is the Global Manufacturing and Supply Chain Vice President of the DyStar Group.  His current responsibilities range from managing global manufacturing footprint to supply chain management and even to corporate sustainability. With more than 20 years of experience in the dye industry under his belt, Mr. Gerald was able to impart pearls of wisdom gleaned from his many years of experience to our inquisitive young minds.
 +
<br> <br>
 +
During our interview with Mr Gerald, he introduced to us the core tenets driving DyStar’s sustainability initiatives. Central to their thrust was a three-fold approach - reducing the production carbon footprint, ensuring consumer safety by keeping hazardous chemicals out of textiles and dyes used, and striving for biodegradable textiles and materials used for dyeing.
 +
<br> <br>
 +
Mr Gerald validated our proposed design, pointing out that balancing environmental friendliness and commercial feasibility would no longer be unfeasible. Instead, co-opting sustainable practices in textile dyeing would become a competitive advantage; governmental agencies around the world are taking tougher actions against environmentally-unfriendly practices and pollution.
 +
<br> <br>
 +
When discussing our potential solutions, he anticipated a critical hurdle we would have to overcome: our solution must attain significant yield for it to have a significant impact on the dye market. From his experience, past attempts at producing bio-engineered dyes have failed to become commercially-viable due to their failure to achieve significant yield. This is a potentially disastrous pitfall that we must seek to circumvent.
 +
<br> <br>
 +
Besides our solution of producing microbial dyes, Mr Gerald warned us against the production of natural dyes using agricultural biomass as feedstock. The resulting competition between food production and natural dye production would indeed be very unfavourable for. In addition, disposal of used biomass would exacerbate the problem of resource wastage. Adding to his previous point, Mr Gerald taught us that it was imperative to evaluate the entire production process for its eco-friendliness, taking into account energy and water consumption, waste generation, to name a few.
 +
<br> <br>
 +
An interesting twist to the end of the interview, Mr Gerald raised the possibility for the obsolescence of dyes in future, as textiles could coloured by virtue of its physical properties, or perhaps the invention of new materials that are not amenable to current dyeing methods. To tie the interview up, before continuing on our journey with synthetic biology, he encouraged us to evaluate bioengineered products around the world critically.
 +
    </span>
 +
  </div>
  
−
<!--
 
−
<div style="text-align:center">
 
−
  <span class="dot"></span>
 
−
  <span class="dot"></span>
 
−
  <span class="dot"></span>
 
−
  <span class="dot"></span>
 
−
  <span class="dot"></span> 
 
−
</div>
 
−
-->
 
  
  
Line 289: Line 340:
 
     </div>
 
     </div>
  
−
 
+
</div>
−
 
+
</div>
 +
</div>
 
</body>
 
</body>
  
Line 318: Line 370:
  
 
*/
 
*/
−
 
+
/*********************************HEY RITA REMEMBER TO CHANGE THE SLIDES TO n-1 OF THE NUMBER OF IMAGES YOU WANT TO SHOW. LOOK AT (slides: <change me>) *************************************/
 
new Vue({
 
new Vue({
 
   el: '#carousel',
 
   el: '#carousel',
Line 330: Line 382:
 
})
 
})
 
/******************************************CAROUSEL SCRIPT ENDS HERE **********************************************/
 
/******************************************CAROUSEL SCRIPT ENDS HERE **********************************************/
 +
 +
/*************************************************THIS IS THE ONE TO OPEN TABS IN PICTURES*****************************************************************************/
 +
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";
 +
}
  
  

Latest revision as of 12:35, 28 September 2018

CONNECT WITH US
Outreach Header

HELLO TVARITA I WANT YOU TO WRITE HERE. REMEMBER FOR EVERY NEW PICTURE YOU WANNA ADD. MAKE SURE YOU LOOK AT THE onclick="openSponsor(event, 'INSERT CORRECT NUMBER HERE')" THEN REMEMBER TO CHANGE THE DIV ID FOR THIS SPECIFIC WRITEUP


HELLO TVARITA I WANT YOU TO WRITE HERE. REMEMBER FOR EVERY NEW PICTURE YOU WANNA ADD. MAKE SURE YOU LOOK AT THE onclick="openSponsor(event, 'INSERT CORRECT NUMBER HERE')" THEN REMEMBER TO CHANGE THE DIV ID FOR THIS SPECIFIC WRITEUP


Use Italics for mini titles

ALWAYS REMEMBER TO OPEN AND CLOSE YOUR P TAGS OR THE LAYOUT WILL BE SCREWED BIG TIME


OVERVIEW

Through outreach, NUSGEM aimed to raise more awareness about synthetic biology, iGEM and our project to the public focusing greatly on high school and university students. Although synthetic biology research and development is growing in Singapore, it is not being emphasized to students. We feel it is important that students are exposed to the basics of synthetic biology early on to help them open to newer career options.



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