Difference between revisions of "Team:BostonU HW/US temp"

Line 10: Line 10:
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
  
−
#sideMenu, #top_title {display:none;}
+
  #sideMenu, #top_title {display:none;}
−
#content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
+
  #content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
−
body {background-color:white; }
+
  body {background-color:white; }
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
  
Line 145: Line 145:
  
  
 +
 +
 +
 +
 +
.timeline{list-style:none;padding:0;position:relative}
 +
.timeline:before{top:0;bottom:0;position:absolute;content:"";width:2px;background-color:#f1f1f1;left:40px;margin-left:-1.5px}
 +
.timeline>li{margin-bottom:50px;position:relative;min-height:50px}
 +
.timeline>li:before,.timeline>li:after{content:" ";display:table}
 +
.timeline>li:after{clear:both}
 +
.timeline>li .timeline-panel{width:100%;float:right;padding:0 20px 0 100px;position:relative;text-align:left}
 +
.timeline>li .timeline-panel:before{border-left-width:0;border-right-width:15px;left:-15px;right:auto}
 +
.timeline>li .timeline-panel:after{border-left-width:0;border-right-width:14px;left:-14px;right:auto}
 +
.timeline>li .timeline-image{left:0;margin-left:0;width:80px;height:80px;position:absolute;z-index:100;background-color:#fed136;color:#fff;border-radius:100%;border:7px solid #f1f1f1;text-align:center}
 +
.timeline>li .timeline-image h4{font-size:10px;margin-top:12px;line-height:14px}
 +
.timeline>li.timeline-inverted>.timeline-panel{float:right;text-align:left;padding:0 20px 0 100px}
 +
.timeline>li.timeline-inverted>.timeline-panel:before{border-left-width:0;border-right-width:15px;left:-15px;right:auto}
 +
.timeline>li.timeline-inverted>.timeline-panel:after{border-left-width:0;border-right-width:14px;left:-14px;right:auto}
 +
.timeline>li:last-child{margin-bottom:0}.timeline .timeline-heading h4{margin-top:0;color:inherit}
 +
.timeline .timeline-heading h4.subheading{text-transform:none}
 +
.timeline .timeline-body>p,.timeline .timeline-body>ul{margin-bottom:0}
 +
@media (min-width:768px){.timeline:before{left:50%}
 +
    .timeline>li{margin-bottom:100px;min-height:100px}
 +
    .timeline>li .timeline-panel{width:41%;float:left;padding:0 20px 20px 30px;text-align:right}
 +
    .timeline>li .timeline-image{width:100px;height:100px;left:50%;margin-left:-50px}
 +
    .timeline>li .timeline-image h4{font-size:13px;margin-top:16px;line-height:18px}
 +
    .timeline>li.timeline-inverted>.timeline-panel{float:right;text-align:left;padding:0 30px 20px 20px}
 +
}
 +
@media (min-width:992px){
 +
    .timeline>li{min-height:150px}
 +
    .timeline>li .timeline-panel{padding:0 20px 20px}
 +
    .timeline>li .timeline-image{width:150px;height:150px;margin-left:-75px}
 +
    .timeline>li .timeline-image h4{font-size:18px;margin-top:30px;line-height:26px}
 +
    .timeline>li.timeline-inverted>.timeline-panel{padding:0 20px 20px}
 +
}
 +
@media (min-width:1200px){
 +
    .timeline>li{min-height:170px}
 +
    .timeline>li .timeline-panel{padding:0 20px 20px 100px}
 +
    .timeline>li .timeline-image{width:170px;height:170px;margin-left:-85px}
 +
    .timeline>li .timeline-image h4{margin-top:40px}
 +
    .timeline>li.timeline-inverted>.timeline-panel{padding:0 100px 20px 20px}
 +
}
  
  
Line 183: Line 224:
 
         <li class="sliding-middle-out dropdown">
 
         <li class="sliding-middle-out dropdown">
 
             <a href="#" class="dropbtn">TEAM </a>
 
             <a href="#" class="dropbtn">TEAM </a>
−
            <img src="https://static.igem.org/mediawiki/2016/5/58/T--BostonU_HW--indexTriangle_rcwolf.png" width="36" height="18" style="margin-bottom: 0 !important; margin-top: 0; padding-bottom: 0 !important; border: none; display: block; margin: 0 auto;">
 
 
             <div class="dropdown-content">
 
             <div class="dropdown-content">
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Team">Meet the Team </a>
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Team">Meet the Team </a>
Line 192: Line 232:
 
         <li class="sliding-middle-out dropdown">
 
         <li class="sliding-middle-out dropdown">
 
             <a href="#" class="dropbtn">PROJECT</a>
 
             <a href="#" class="dropbtn">PROJECT</a>
 +
            <img src="https://static.igem.org/mediawiki/2016/5/58/T--BostonU_HW--indexTriangle_rcwolf.png" width="36" height="18" style="margin-bottom: 0 !important; margin-top: 0; padding-bottom: 0 !important; border: none; display: block; margin: 0 auto;">
 
             <div class="dropdown-content">
 
             <div class="dropdown-content">
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Results">Results</a>
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Results">Results</a>
−
                   <a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate">Project Build</a>
+
                   <a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate">Demonstration</a>
−
                   <a href="https://2016.igem.org/Team:BostonU_HW/Proof">Application</a>
+
                   <a href="https://2016.igem.org/Team:BostonU_HW/Proof">Proof</a>
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Design">Documentation</a>
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Design">Documentation</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Parts">Parts</a>
 
             </div>
 
             </div>
 
         </li>
 
         </li>
Line 221: Line 263:
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Hardware">Hardware</a>
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Hardware">Hardware</a>
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Software">Software</a>
 
                   <a href="https://2016.igem.org/Team:BostonU_HW/Software">Software</a>
−
                  <a href="https://2016.igem.org/Team:BostonU_HW/Measurement">Measurement</a>
 
−
                  <a href="https://2016.igem.org/Team:BostonU_HW/Model">Model</a>
 
 
             </div>
 
             </div>
 
         </li>
 
         </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">MEDAL CRITERIA </a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Bronze">Bronze</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Silver">Silver</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Gold">Gold</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/AboveAndBeyond">Above & Beyond</a>
 +
            </div>
 +
        </li>
 +
       
 +
 
       </ul>
 
       </ul>
 
     </div><!-- /.navbar-collapse -->
 
     </div><!-- /.navbar-collapse -->
Line 256: Line 307:
 
     background-color: #D2D2D2;
 
     background-color: #D2D2D2;
 
   }
 
   }
−
+
 
−
#greyWrapper {
+
  #greyWrapper {
 
     padding-top: 120px;
 
     padding-top: 120px;
−
background-color: #D2D2D2;
+
    background-color: #D2D2D2;
−
margin: 0px 0px 40px 0px;
+
    margin: 0px 0px 40px 0px;
−
min-height: 1000px;
+
    min-height: 1000px;
−
}
+
  }
−
#pageTitle {
+
  #pageTitle {
−
margin-left: 25px;
+
    margin-left: 25px;
−
padding-bottom: 16px;
+
    padding-bottom: 16px;
−
}
+
  }
−
.pageBanner {
+
  .pageBanner {
 
     position: fixed;
 
     position: fixed;
−
color:black;
+
    color:black;
−
background-color:white;
+
    background-color:white;
−
width:100%;
+
    width:100%;
−
top:70px;
+
    top:70px;
 
     z-index: 1;
 
     z-index: 1;
−
}
+
  }
−
.densmoreCard {
+
  .densmoreCard {
−
background-color: white;
+
    background-color: white;
−
padding:0;
+
    padding:0;
−
}
+
  }
−
.advisorCard {
+
  .advisorCard {
−
background-color: white;
+
    background-color: white;
−
}
+
  }
 
   .miniBio {
 
   .miniBio {
 
     padding-left: 20px;
 
     padding-left: 20px;
Line 295: Line 346:
 
     margin-right: auto;
 
     margin-right: auto;
 
   }
 
   }
 +
 +
 +
 +
 +
 +
.btn {
 +
    padding: 14px 24px;
 +
    border: 0 none;
 +
    border-radius: 0;
 +
    font-weight: 700;
 +
    font-size: 15px;
 +
    letter-spacing: 0.5px;
 +
    text-transform: uppercase;
 +
    -webkit-box-shadow: 5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    -moz-box-shadow:    5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    box-shadow:        5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    outline: #545454 solid 2px;
 +
   
 +
}
 +
 +
.btn:focus, .btn:active:focus, .btn.active:focus {
 +
    outline: 0 none;
 +
}
 +
 +
.btn-primary {
 +
    background: #ffffff;
 +
    color: #000000;
 +
}
 +
 +
.btn-primary:active, .btn-primary.active {
 +
    background: #ffffff;
 +
    color: #000000;
 +
}
 +
 +
 +
 +
.btn-primary:focus {
 +
    background: #ffffff;
 +
    color: #000000;
 +
}
 +
 +
 +
.btn:active:focus {
 +
    background: #545454 !important;
 +
    color: white;
 +
    box-shadow: none;
 +
}
 +
.btn-primary:hover{
 +
    background: #545454;
 +
    color: white;
 +
}
 +
 +
 
</style>
 
</style>
  
Line 301: Line 405:
 
<body>
 
<body>
 
<!-- PAGE TITLE BANNER -->
 
<!-- PAGE TITLE BANNER -->
−
<div id="greyWrapper">
+
  <div id="greyWrapper">  
−
<div class="pageBanner">
+
    <div class="pageBanner">
−
<h3 id="pageTitle">ATTRIBUTIONS</h3>
+
      <h3 id="pageTitle">PROOF OF CONCEPT</h3>
−
</div>
+
    </div>
 
     <br><br><br><br>
 
     <br><br><br><br>
 
      
 
      
Line 312: Line 416:
 
<div class="row" style="padding-top:50px; padding-bottom:50px;">
 
<div class="row" style="padding-top:50px; padding-bottom:50px;">
 
   <div class="col-md-1"></div>
 
   <div class="col-md-1"></div>
−
   <div class="col-md-8" style="font-size: 4em;">We stand on the <br><br><br> shoulders of giants.</div>
+
   <div class="col-md-10" style="font-size: 3em; line-height: 130%;">Neptune (feat. HEK 293)</div>
−
  <div class="col-md-3"></div>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="row" style="padding-top:50px; padding-bottom:50px;">
+
−
  <div class="col-md-1"></div>
+
−
  <div class="col-md-10" style="font-size: 1em;"> Our work would not have been possible without the foundations laid by our mentors. Our work would not have been possible without the foundations laid by our mentors. Neptune’s microfluidic design and fabrication tool leverages projects such as Fluigi Place and Route, Mint description language, MakerFluidics, and 3DuF in order to provide the most intuitive and cohesive experience for users. These projects have been built and expanded on by our graduate student mentors. We would like to thank our mentors for all of the work they have done to allow us to bring Neptune to life.
+
−
  </div>
+
 
   <div class="col-md-1"></div>
 
   <div class="col-md-1"></div>
 
</div>
 
</div>
Line 327: Line 423:
 
   <div class="col-md-1"></div>
 
   <div class="col-md-1"></div>
 
   <div class="col-md-10" style="background-color: white; padding-top:50px; padding-bottom:50px;">  
 
   <div class="col-md-10" style="background-color: white; padding-top:50px; padding-bottom:50px;">  
−
 
−
 
−
 
−
 
 
     <div class="row">
 
     <div class="row">
−
       <div class="col-md-3">
+
       <div class="col-md-1"></div>
−
      </div>
+
       <div class="col-md-10">
−
       <div class="col-md-9">
+
         <div style="font-size: 2em; line-height: 150%; color:#355E62;">GOLD III VIDEO</div>
−
         <div style="font-size: 2em">Fluigi | Radhakrishna Sanka</div>
+
        <br><br>
 +
        <div>
 +
          Add Descriptive Text HERE.
 +
        </div>
 
       </div>
 
       </div>
 +
      <div class="col-md-1"></div>
 
     </div>
 
     </div>
−
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
 
−
      <div class="col-md-3">
 
−
        <img src="https://static.igem.org/mediawiki/2016/2/2f/T--BostonU_HW--FluigiLogo_rcwolf.png" width="90%" style="padding-left:20px">
 
−
      </div>
 
−
      <div class="col-md-6">
 
−
       
 
−
        A place and route tool for microfluidic devices. Fluigi takes a MINT file as input and strategically routes the features specified in the MINT into an optimized microfluidic design. Fluigi outputs the design in a series of visual formats: SVG files (which can be used to mill out the different layers of the microfluidic chip using a CNC mill), a JSON file (which can be used to visualize the microfluidic design with 3DuF), and EPS files (which can be used to build the chip using photolithography if the user so chooses).
 
−
      </div>
 
−
      <div class="col-md-3">
 
−
        <img src="https://static.igem.org/mediawiki/2016/c/c4/KrishnaSquare_rcwolf.png" width="90%" height="90%" style="border-radius: 50%;">
 
−
      </div>
 
−
    </div>
 
−
 
−
    <br>
 
−
 
−
        <div class="row">
 
−
      <div class="col-md-3">
 
−
      </div>
 
−
      <div class="col-md-9">
 
−
        <div style="font-size: 2em">MINT | Radhakrishna Sanka</div>
 
−
      </div>
 
−
    </div>
 
−
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
 
−
      <div class="col-md-3">
 
−
        <img src="https://static.igem.org/mediawiki/2016/4/4f/T--BostonU_HW--MINTlogo_rcwolf.png" width="90%" style="padding-left:20px">
 
−
      </div>
 
−
      <div class="col-md-6">
 
−
       
 
−
        A microfluidic description language generated as an output of MuShroom mapper and used as an input to Fluigi. This language is used to describe the features of the specified microfluidic device in great detail including specification of feature shape, size and spacing.
 
−
      </div>
 
−
      <div class="col-md-3">
 
−
      </div>
 
−
    </div>
 
−
 
−
    <br>
 
−
 
−
    <div class="row">
 
−
      <div class="col-md-3">
 
−
      </div>
 
−
      <div class="col-md-9">
 
−
        <div style="font-size: 2em">3DuF | Joshua Lippai</div>
 
−
      </div>
 
−
    </div>
 
−
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
 
−
      <div class="col-md-3">
 
−
        <img src="https://static.igem.org/mediawiki/2016/7/7c/T--BostonU_HW--3DuFlogo_rcwolf.png" width="90%" style="padding-left:20px">
 
−
      </div>
 
−
      <div class="col-md-6">
 
−
       
 
−
        A CAD-like drawing web application. 3DuF can be used to manually draw a microfluidic design if the user wishes to bypass high-level specifications. 3DuF will then output SVG files (for CNC milling layers of the microfluidic chip) and a JSON file for later visualization and editing purposes. When used in the context of Neptune, 3DuF is leveraged to visualize the JSON output of Fluigi so that the user may control his or her microfluidic device intuitively through the Neptune interface.
 
−
      </div>
 
−
      <div class="col-md-3">
 
−
        <img src="https://static.igem.org/mediawiki/2016/b/b1/JoshSquare_rcwolf.png" width="90%" height="90%" style="border-radius: 50%;" >
 
−
      </div>
 
−
    </div>
 
−
 
−
    <br>
 
−
 
−
 
−
    <div class="row">
 
−
      <div class="col-md-3">
 
−
      </div>
 
−
      <div class="col-md-9">
 
−
        <div style="font-size: 2em">MakerFluidics | Ryan Silva</div>
 
−
      </div>
 
−
    </div>
 
−
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
 
−
      <div class="col-md-3">
 
−
        <img src="https://static.igem.org/mediawiki/2016/8/8e/T--BostonU_HW--MakerFluidicsLogo_rcwolf.png" width="80%" style="padding-left:20px">
 
−
      </div>
 
−
      <div class="col-md-6">
 
−
        MakerFluidics is an accessible, inexpensive microfluidic fabrication technique used to manufacture microfluidic chips. A user will use an SVG file to mill out both the control and flow layers of a microfluidic chip. Then he or she will use these 2 layers to sandwich a piece of PDMS and vacuum the chip to create a seal. Through Neptune, the user is encouraged to use this fabrication infrastructure to make their chip so that they may rapidly prototype many chips inexpensively for any iterations of their experiment and easily control their microfluidic system through the Neptune interface.
 
−
      </div>
 
−
      <div class="col-md-3">
 
−
        <img src="https://static.igem.org/mediawiki/2016/7/70/RyanSquare_rcwolf.png" width="90%" height="90%" style="border-radius: 50%;" >
 
−
      </div>
 
−
    </div>
 
−
 
−
    <br>
 
−
 
−
 
−
    <div class="row">
 
−
      <div class="col-md-3"></div>
 
−
      <div class="col-md-9">
 
−
        <div style="font-size: 2em">Microfluidic Application | Ali Lashkaripour</div>
 
−
      </div>
 
−
    </div>
 
−
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
 
−
      <div class="col-md-3"></div>
 
−
      <div class="col-md-6">
 
−
       
 
−
        Microfluidic applications description
 
−
      </div>
 
−
      <div class="col-md-3">
 
−
        <img src="https://static.igem.org/mediawiki/2016/9/90/AliSquare_rcwolf.png" width="90%" height="90%" style="border-radius: 50%;" >
 
−
      </div>
 
−
    </div>
 
−
 
 
   </div>
 
   </div>
 
   <div class="col-md-1"></div>
 
   <div class="col-md-1"></div>
 
</div>
 
</div>
  
−
 
+
<div class="row" style="padding-top:20px; padding-bottom:20px;">
−
 
+
      <body style="margin-top: 50px;">
−
 
+
<div class="services bg-primary">
−
 
+
<div class="row text-center">
−
<div class="row" style="margin-top:130px;">
+
          <div class="col-lg-10 col-lg-offset-1">
−
  <div class="col-md-1"></div>
+
        <div class="text-vertical-center" style="color: white;">
−
  <div class="col-md-10" style="font-size: 4em;">Placement in NEPTUNE </div>
+
            <h1>Timeline</h1>
−
  <div class="col-md-1"></div>
+
</div>
 
</div>
 
</div>
−
<div class="row" style="padding-top:30px; padding-bottom:20px;">
 
−
  <div class="col-md-1"></div>
 
−
  <div class="col-md-10" style="font-size: 1.5em; line-height: 150%;"> Each of the above components fit into the Neptune workflow to help fulfill a specific purpose. The location of these pieces are shown in the graph below.
 
−
  </div>
 
−
  <div class="col-md-1"></div>
 
 
</div>
 
</div>
−
 
−
<div class="row">
 
−
  <img src="https://static.igem.org/mediawiki/2016/5/55/T--BostonU_HW--NeptuneWorkflowSimple_rcwolf.png" width="100%" height="100%">
 
 
</div>
 
</div>
−
 
−
<br><br>
 
−
 
−
 
−
 
−
 
−
 
  
  
Line 472: Line 455:
  
  
 +
<!-- About Section -->
 +
    <section id="about">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-lg-12 text-center">
 +
                    <h2 class="section-heading">Building the Fluigi Flow</h2>
 +
                    <h3 class="section-subheading text-muted">An overview of our work from our humble beginnings to a complete microfluidic design suite.</h3>
 +
                </div>
 +
            </div>
 +
            <br><br/>
 +
            <div class="row">
 +
                <div class="col-lg-12">
 +
                    <ul class="timeline">
 +
                        <li>
 +
                            <div class="timeline-image">
 +
                                <img class="img-circle img-responsive" src="https://static.igem.org/mediawiki/2016/c/cd/ChalkboardSquare.jpg" alt="">
 +
                            </div>
 +
                            <div class="timeline-panel">
 +
                                <div class="timeline-heading">
 +
                                    <h4 >16 - 30 May 2016</h4>
 +
                                    <h4 class="subheading">Training and Orientation</h4>
 +
                                </div>
 +
                                <div class="timeline-body">
 +
                                    <p class="text-muted">Our project is part of an existing workflow in our lab, and during training and orientation we learned about the flow and how we fit in. We also started to test tools that we could use to build our graphical user interface and planned out what we could do with the hardware setup. </p>
 +
<a href="https://2016.igem.org/Team:BostonU_HW/Notebook/May" class="btn btn-light">See More </a> 
 +
                                </div>
 +
                            </div>
 +
                        </li>
 +
                        <li class="timeline-inverted">
 +
                            <div class="timeline-image">
 +
                                <img class="img-circle img-responsive" src="https://static.igem.org/mediawiki/2016/6/64/PostitSquare_rcwolf.jpg" alt="">
 +
                            </div>
 +
                            <div class="timeline-panel">
 +
                                <div class="timeline-heading">
 +
                                    <h4>June 2016</h4>
 +
                                    <h4 class="subheading">A GUI is Born</h4>
 +
                                </div>
 +
                                <div class="timeline-body">
 +
                                    <p class="text-muted">After testing out tools, we decided to implement a web application using a node.js (operating as a local server) framework. We started ordering parts and 3D printing components to set up the hardware. </p>
 +
<a href="https://2016.igem.org/Team:BostonU_HW/Notebook/June" class="btn btn-light">See More </a> 
 +
                                </div>
 +
                            </div>
 +
                        </li>
 +
                        <li>
 +
                            <div class="timeline-image">
 +
                                <img class="img-circle img-responsive" src="https://static.igem.org/mediawiki/2016/d/d4/ComputerSquare_rcwolf.jpg" alt="">
 +
                            </div>
 +
                            <div class="timeline-panel">
 +
                                <div class="timeline-heading">
 +
                                    <h4>July 2016</h4>
 +
                                    <h4 class="subheading">Get it together</h4>
 +
                                </div>
 +
                                <div class="timeline-body">
 +
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
 +
<a href="https://2016.igem.org/Team:BostonU_HW/Notebook/July" class="btn btn-light">See More </a> 
 +
                                </div>
 +
                            </div>
 +
                        </li>
 +
                        <li class="timeline-inverted">
 +
                            <div class="timeline-image">
 +
                                <img class="img-circle img-responsive" src="https://static.igem.org/mediawiki/2016/4/4d/FilesSquare_rcwolf.jpg" alt="">
 +
                            </div>
 +
                            <div class="timeline-panel">
 +
                                <div class="timeline-heading">
 +
                                    <h4>August 2016</h4>
 +
                                    <h4 class="subheading">Milkshakes</h4>
 +
                                </div>
 +
                                <div class="timeline-body">
 +
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
 +
<a href="https://2016.igem.org/Team:BostonU_HW/Notebook/August" class="btn btn-light">See More </a> 
 +
                                </div>
 +
                            </div>
 +
                        <li>
 +
                            <div class="timeline-image">
 +
                                <img class="img-circle img-responsive" src="https://static.igem.org/mediawiki/2016/c/cf/MeetingSquare_rcwolf.jpg" alt="">
 +
                            </div>
 +
                            <div class="timeline-panel">
 +
                                <div class="timeline-heading">
 +
                                    <h4>September 2016</h4>
 +
                                    <h4 class="subheading">Some futuristic ish</h4>
 +
                                </div>
 +
                                <div class="timeline-body">
 +
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
 +
<a href="https://2016.igem.org/Team:BostonU_HW/Notebook/September" class="btn btn-light">See More </a> 
 +
                                </div>
 +
                            </div>
 +
                        </li>
 +
                        <li class="timeline-inverted">
 +
                            <div class="timeline-image">
 +
                                <img class="img-circle img-responsive" src="https://static.igem.org/mediawiki/2016/d/d0/WalkingSquare_rcwolf.jpg" alt="">
 +
                            </div>
 +
                            <div class="timeline-panel">
 +
                                <div class="timeline-heading">
 +
                                    <h4>October 2016</h4>
 +
                                    <h4 class="subheading">BEB</h4>
 +
                                </div>
 +
                                <div class="timeline-body">
 +
                                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
 +
<a href="https://2016.igem.org/Team:BostonU_HW/Notebook/October" class="btn btn-light">See More </a> 
 +
                                </div>
 +
                            </div>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
  
 +
    </div>
  
  
  
 +
<br><br>
  
  
Line 482: Line 574:
  
 
</body>
 
</body>
−
 
−
<!-- Footer -->
 
−
    <div id="contact" class="row" style="background-color: white; padding-top: 20px; padding-bottom:20px;">
 
−
        <div class="container">
 
−
 
−
 
−
 
−
 
−
<h3 style="text-align:center; font-size:20px;">Thank you to our sponsors for their support</h3>
 
−
<br><br/>
 
−
<img align="middle" id="Image-Maps-Com-image-maps-2016-08-11-103011" src="https://static.igem.org/mediawiki/2016/9/9a/FooterLogoBoard_rcwolf.png" border="0" width="1050" height="318" orgWidth="1050" orgHeight="318" usemap="#myfootermap" alt="" />
 
−
<map name="myfootermap" id="ImageMapsCom-image-maps-2016-08-11-103011">
 
−
<area  alt="" title="" href="http://www.draper.com/" shape="rect" coords="3,48,266,142" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="https://www.cidarlab.org" shape="rect" coords="729,7,1021,169" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="https://www.bu.edu/urop/" shape="rect" coords="821,188,1034,289" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="https://www.bu.edu" shape="rect" coords="458,99,697,212" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="http://labcentral.org/resident-companies/phenomyx" shape="rect" coords="468,19,711,74" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="http://programmingbiology.org/" shape="rect" coords="32,189,415,315" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="http://www.monsanto.com/pages/default.aspx" shape="rect" coords="484,212,817,299" style="outline:none;" target="_self"    />
 
−
<area  alt="" title="" href="https://2016.igem.org" shape="rect" coords="273,27,444,157" style="outline:none;" target="_self"    />
 
−
</map>
 
−
 
−
<br><br/><br>
 
−
 
−
 
−
  </div>
 
−
  </div>
 
−
 
 
</html>
 
</html>

Revision as of 04:27, 19 October 2016


PROOF OF CONCEPT





Neptune (feat. HEK 293)
GOLD III VIDEO


Add Descriptive Text HERE.

Timeline

Building the Fluigi Flow

An overview of our work from our humble beginnings to a complete microfluidic design suite.



  • 16 - 30 May 2016

    Training and Orientation

    Our project is part of an existing workflow in our lab, and during training and orientation we learned about the flow and how we fit in. We also started to test tools that we could use to build our graphical user interface and planned out what we could do with the hardware setup.

    See More

  • June 2016

    A GUI is Born

    After testing out tools, we decided to implement a web application using a node.js (operating as a local server) framework. We started ordering parts and 3D printing components to set up the hardware.

    See More

  • July 2016

    Get it together

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    See More

  • August 2016

    Milkshakes

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    See More

  • September 2016

    Some futuristic ish

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    See More

  • October 2016

    BEB

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!

    See More