Team:Freiburg/Content/Team/Members

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<!-- hier ändern https://2014.igem.org/Team:Freiburg/Content/Team/Members  -->
<!-- hier ändern https://2014.igem.org/Team:Freiburg/Content/Team/Members  -->
-
<html lang="en">
+
<style>
-
<head>
+
    .team-member-virus {
-
<title>The AcCELLerator</title>
+
      width:100%;
-
<link rel="stylesheet" type="text/css" href="styles.css">
+
      height:0;
-
</head>
+
      padding-top:68.359375%;
-
<body>
+
      position: relative;
-
<section id="Team-Team">
+
    }
-
 
+
    svg {
-
<h1>Team</h1>
+
      position:absolute;
-
 
+
      top:0;left:0;
-
  <div class="row category-row">
+
      width:100%;height:100%;
-
    <div class="col-sm-6">
+
    }
-
      <p>
+
    .member {
-
         We are the iGEM Freiburg 2014 team. This is one of our first pictures together.
+
      cursor: pointer;
-
         At that time we were real newbies and most of us had never worked in a real lab!
+
    }
-
         This should change soon...
+
</style>
-
       </p>
+
<div style="display:none;">
 +
    <div id="data-anne">
 +
      <h1>Anne Müller</h1>
 +
      <ul>
 +
        <li>Age: 23</li>
 +
        <li>Studies: Biological Sciences, Applied Biosciences</li>
 +
         <li>Favorite dish and/or drink: Lasagne, Mojito</li>
 +
         <li>Favorite color and/or number: Red, 4</li>
 +
         <li>Hobbies: Showjumping, dog cenel, reading</li>
 +
        <li>Why iGEM?: Last years iGEM was great!</li>
 +
       </ul>
     </div>
     </div>
-
     <div class="col-sm-6">
+
     <div id="data-christoph">
-
       <img src="https://static.igem.org/mediawiki/2014/c/c6/Group_picture_freiburg_01.JPG">
+
       <h1>Christoph Bauer</h1>
 +
      <ul>
 +
        <li>Age: 25 </li>
 +
        <li>Studies: Biological Sciences, Applied Biosciences</li>
 +
        <li>Favorite dish and/or drink: Spaetzle, lentils and hot dogs</li>
 +
        <li>Favorite color and/or number: 6</li>
 +
        <li>Hobbies: Sports, handball, photography, reading</li>
 +
        <li>Why iGEM?: Learn something new, implement our own idea!</li>
 +
      </ul>
     </div>
     </div>
-
  </div>
+
    <div id="data-clarissa">
-
</section>
+
      <h1>Clarissa Hiltl</h1>
-
 
+
      <ul>
-
<section id="Team-Members">
+
        <li>Age: 22</li>
-
<h1>Members</h1>
+
        <li>Studies: Bachelor in Biology</li>
-
 
+
        <li>Favorite dish and/or drink: Mojito</li>
-
 
+
        <li>Favorite color and/or number: Blue and 8</li>
-
 
+
        <li>Hobbies: Travelling</li>
-
<table style="width:100%; border-style: hidden; text-align: left; ">
+
        <li>Why iGEM?: Im always excited for new experiences and the possibilty to meet great people.</li>
-
  <col width="20%">
+
      </ul>
-
  <col width="20%">
+
    </div>
-
  <col width="20%">
+
    <div id="data-dennis">
-
  <col width="20%">
+
      <h1>Dennis Zimmer</h1>
-
  <col width="20%">
+
      <ul>
-
 
+
        <li>Age: 24</li>
-
  <tr>
+
        <li>Studies: Biological Sciences, Immunology</li>
-
     <td colspan="2">
+
        <li>Favorite dish and/or drink: Pancakes / Dark 'n' Stormy</li>
-
       <h2 id="Team-Jan-Ole-Ackermann">Jan Ole Ackermann</h2>
+
        <li>Favorite color and/or number: Blue, 18</li>
 +
        <li>Hobbies: Beach volleyball, mountain biking, traveling</li>
 +
        <li>Why iGEM?: I think iGEM is a great opportunity to learn amazing new stuff!</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-ileana">
 +
      <h1>Ileana Bender</h1>
 +
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Favorite dish and/or drink: </li>
 +
        <li>Favorite color and/or number: </li>
 +
        <li>Hobbies: </li>
 +
        <li>Why iGEM?: </li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-jialiang">
 +
      <h1>Jialiang Lu</h1>
 +
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Favorite dish and/or drink: </li>
 +
        <li>Favorite color and/or number: </li>
 +
        <li>Hobbies: </li>
 +
        <li>Why iGEM?: </li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-kristoffer">
 +
      <h1>Kristoffer Weißert</h1>
 +
      <ul>
 +
        <li>Age: 24</li>
 +
        <li>Studies: Biological Sciences, Immunology</li>
 +
        <li>Favorite dish and/or drink: Rice pudding</li>
 +
        <li>Favorite color and/or number: Red, 77</li>
 +
        <li>Hobbies: Table tennis, singing</li>
 +
        <li>Why iGEM?: Do something besides studying, learn to organize a project.  </li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-laura">
 +
      <h1>Laura Ost</h1>
 +
      <ul>
 +
        <li>Age: 23</li>
 +
        <li>Studies: Bachelor in Biology</li>
 +
        <li>Favorite dish and/or drink: Flammkuchen (flame cake)</li>
 +
        <li>Favorite color and/or number: Dark green and 7</li>
 +
        <li>Hobbies: Reading</li>
 +
        <li>Why iGEM?: It fascinates me to learn about the diversity of ideas different teams came up with. Also I, as part of a great team like to develop a project from scratch. </li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-lisa">
 +
      <h1>Lisa Schmunk</h1>
 +
      <ul>
 +
        <li>Age: 24</li>
 +
        <li>Studies: Mistress of Biology; Genetics and Synthetic Biology</li>
 +
        <li>Favorite dish and/or drink: Black tea</li>
 +
        <li>Favorite color and/or number: Blue, 7</li>
 +
        <li>Hobbies: Jazz &amp; modern dance</li>
 +
        <li>Why iGEM?: Once is not enough :)</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-marc">
 +
      <h1>Marc Müller</h1>
 +
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Favorite dish and/or drink: </li>
 +
        <li>Favorite color and/or number: </li>
 +
        <li>Hobbies: </li>
 +
        <li>Why iGEM?: </li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-max">
 +
      <h1>Max Ulbrich</h1>
 +
      <ul>
 +
        <li>Age: 41</li>
 +
        <li>Studied: Physics</li>
 +
        <li>Favorite dish and/or drink: Flaming Moe</li>
 +
        <li>Favorite color and/or number: Pink</li>
 +
        <li>Hobbies: Brewing, assembling microscopes, disassembling microscopes</li>
 +
        <li>Why iGEM?: Because the students need someone to look up to.</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-mirja">
 +
      <h1>Mirja Harms</h1>
 +
      <ul>
 +
        <li>Age: 22</li>
 +
        <li>Studies: Biological Sciences, Immunology</li>
 +
        <li>Favorite dish and/or drink: Favorite dish and/or drink: Sun &amp; love</li>
 +
        <li>Favorite color and/or number: red, all of the numbers</li>
 +
        <li>Hobbies: Climbing, bouldering, hiking</li>
 +
        <li>Why iGEM?: I like glowing cells!</li>
 +
      </ul>
 +
     </div>
 +
    <div id="data-natalie">
 +
       <h1>Natalie Louis</h1>
 +
      <ul>
 +
        <li>Age: 25</li>
 +
        <li>Studies: Master in Applied Biosciences</li>
 +
        <li>Favorite dish and/or drink: Mussels</li>
 +
        <li>Favorite color and/or number: Blue and 4 </li>
 +
        <li>Hobbies: Latin, standard and salsa dancing, hiking</li>
 +
        <li>Why iGEM?: To be able to pass on iGEM experiences of the previous years.</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-nicole">
 +
      <h1>Nicole Gensch</h1>
 +
      <ul>
 +
        <li>Age: 32</li>
 +
        <li>Studied: Developmental Biology / Biotechnology</li>
 +
        <li>Favorite dish and/or drink: Self-made sandwiches and salad</li>
 +
        <li>Favorite color and/or number: Bright colors</li>
 +
        <li>Hobbies: Workout &amp; fitness</li>
 +
        <li>Why iGEM?: I like the idea of iGEM and I was interested to see how a group of students, which did not know each other beforehand, become a team, develop their own idea of a research project and work on it.</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-ole">
 +
      <h1>Jan Ole Ackermann</h1>
       <ul>
       <ul>
         <li>Age: 25 </li>
         <li>Age: 25 </li>
         <li>Studies: Biological Sciences, Immunology</li>
         <li>Studies: Biological Sciences, Immunology</li>
-
         <li>Favorite dish and/or drink: Pizza, green cabbage with kassler & smoothie</li>
+
         <li>Favorite dish and/or drink: Pizza, green cabbage with kassler &amp; smoothie</li>
         <li>Favorite color and/or number: Blue, 8</li>
         <li>Favorite color and/or number: Blue, 8</li>
         <li>Hobbies: Music, sport, reading</li>
         <li>Hobbies: Music, sport, reading</li>
         <li>Why iGEM?: Good food! New experiences, organize an own project.</li>
         <li>Why iGEM?: Good food! New experiences, organize an own project.</li>
       </ul>
       </ul>
-
     </td>
+
     </div>
-
     <td>Bild</td>
+
     <div id="data-pascal">
-
    <td colspan="2"></td>
+
       <h1>Pascal Sartor</h1>
-
  </tr>
+
-
  <tr>
+
-
    <td colspan="2"></td>
+
-
    <td colspan="2">
+
-
       <h2 id="Team-Christoph-Bauer">Christoph Bauer</h2>
+
       <ul>
       <ul>
-
         <li>Age: 25 </li>
+
         <li>Age: </li>
-
         <li>Studies: Biological Sciences, Applied Biosciences</li>
+
         <li>Studies: </li>
-
         <li>Favorite dish and/or drink: Spaetzle, lentils and hot dogs</li>
+
         <li>Favorite dish and/or drink: </li>
-
         <li>Favorite color and/or number: 6</li>
+
         <li>Favorite color and/or number: </li>
-
         <li>Hobbies: Sports, handball, photography, reading</li>
+
         <li>Hobbies: </li>
-
         <li>Why iGEM?: Learn something new, implement our own idea!</li>
+
         <li>Why iGEM?: </li>
       </ul>
       </ul>
-
     </td>
+
     </div>
-
     <td>Bild</td>
+
     <div id="data-patrick">
-
  </tr>
+
      <h1>Patrick Gonschorek</h1>
-
</table>
+
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Favorite dish and/or drink: </li>
 +
        <li>Favorite color and/or number: </li>
 +
        <li>Hobbies: </li>
 +
        <li>Why iGEM?: </li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-patrickh">
 +
      <h1>Patrick Heisterkamp</h1>
 +
      <ul>
 +
        <li>Age: 20</li>
 +
        <li>Studies: Molecular Medicine</li>
 +
        <li>Favorite dish and/or drink: Schnitzel with chips</li>
 +
        <li>Favorite color and/or number: 13</li>
 +
        <li>Hobbies: Chinese language, jogging, informatics</li>
 +
        <li>Why iGEM?: Learn something new!</li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-valentina">
 +
      <h1>Valentina Diehl</h1>
 +
      <ul>
 +
        <li>Age: </li>
 +
        <li>Studies: </li>
 +
        <li>Favorite dish and/or drink: </li>
 +
        <li>Favorite color and/or number: </li>
 +
        <li>Hobbies: </li>
 +
        <li>Why iGEM?: </li>
 +
      </ul>
 +
    </div>
 +
    <div id="data-wignand">
 +
      <h1>Wignand Mühlhäuser</h1>
 +
      <ul>
 +
        <li>Age: 25</li>
 +
        <li>Studies: Master in Biology</li>
 +
        <li>Favorite dish and/or drink: Steak</li>
 +
        <li>Favorite color and/or number: Cherry Berry and pi</li>
 +
        <li>Hobbies: Music</li>
 +
        <li>Why iGEM?: I really like the idea of students creating and working on their own project building something together from the bottom up. </li>
 +
      </ul>
 +
    </div>
 +
  </div>
 +
  <div class="team-member-virus">
 +
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0 1024,700">
 +
      <style type="text/css">
 +
        image {
 +
          clip-path: url(#clipPath);
 +
        }
 +
        #lecell image {
 +
          clip-path: url(#clipPathCell);
 +
        }
 +
      </style>
 +
      <defs>
 +
        <clipPath id="clipPath"><use xlink:href="#sixsider" /></clipPath>
 +
        <clipPath id="clipPathCell"><use xlink:href="#cellcore" /></clipPath>
 +
        <path id="cellcore"
 +
          d="m 223.88555,21.29458 a 120.91828,192.57355 0 0 1 0,385.14685 120.91828,192.57355 0 1 1 0,-385.14685 z"
 +
          style="fill:#ff2b26;stroke:#99150b;stroke-width:10" />
 +
        <path d="M197,27 L253,125 196,222 83,221 27,123 84,26 197,27 z" id="sixsider" style="fill:none;stroke:#85abdd;stroke-width:6.5;" />
 +
        <circle id="outercirc" r="120" style="fill:#5588d8;stroke:#3a5e8c;stroke-width:6.5;" />
 +
        <circle cx="15" cy="122" r="14" id="circ" style="fill:#50a962;stroke:#0e7b2d;stroke-width:2;" />
 +
       
 +
        <g id="bg">
 +
          <use xlink:href="#circ" />
 +
          <use transform="translate(62,112)" xlink:href="#circ" />
 +
          <use transform="translate(190,111)" xlink:href="#circ" />
 +
          <use transform="translate(250,1)" xlink:href="#circ" />
 +
          <use transform="translate(188,-105)" xlink:href="#circ" />
 +
          <use transform="translate(60,-104)" xlink:href="#circ" />
 +
          <use transform="translate(140,125)" xlink:href="#outercirc" />
 +
        </g>
 +
        <linearGradient
 +
          x1="0%"
 +
          y1="25%"
 +
          x2="100%"
 +
          y2="75%"
 +
          id="gradOrange">
 +
          <stop
 +
            id="stop5"
 +
            style="stop-color:#ffffff;stop-opacity:1"
 +
            offset="0" />
 +
          <stop
 +
            id="stop7"
 +
            style="stop-color:#ffb888;stop-opacity:1"
 +
            offset="1" />
 +
        </linearGradient>
 +
      </defs>
 +
      <!-- bottom cell where text will be displayed eventually -->
 +
      <!-- cell part -->
 +
      <g id="lecell" transform="translate(0,400)">
 +
        <path
 +
          d="M 84.6349,-95.7008 C 421.58879,109.71901 733.49662,8.81505 878.70582,-70.194 920.57862,32.68133 861.12342,109.51504 1071.6661,184.37737 995.64312,263.16505 863.57452,345.58349 905.04162,518.36333 618.91832,418.84221 333.88112,399.28807 170.7772,480.84023 169.39472,381.31895 47.99788,324.7212 -49.55187,244.45876 78.86805,140.73498 79.30872,81.11448 84.6349,-95.7008 z"
 +
          style="fill:url(#gradOrange);stroke:#99150b;stroke-width:5" />
 +
        <use xlink:href="#cellcore" />
 +
        <image x="100" y="15" width="250" height="290"preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/2/24/Teamfreiburg-all.jpg" />
 +
      </g>
 +
      <!-- receptor and docking part -->
 +
      <g id="receptor" transform="translate(155,330) scale(6)">
 +
          <path
 +
            d="M 4.0165967,4.2964177 23.01686,11.167445"
 +
            id="path3822-3-62-6-4"
 +
            style="fill:none;stroke:#000000;stroke-width:0.7690776;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
 +
          <path
 +
            d="M 0.10695222,7.0590881 C 1.8516854,7.8789947 3.1427512,7.7542598 3.3739521,9.6631807 3.687317,12.250584 5.2632199,2.2578247 6.7732171,2.1776212 9.0785754,2.0551595 4.3336116,7.0352291 5.9803883,7.8214 7.6271576,8.6075789 8.0197959,1.8817558 9.5538504,0.94367219 11.356322,-0.15857468 7.2963306,8.9319464 8.3417333,9.237118 9.3871388,9.5422872 10.532708,-0.30804996 11.755542,0.27736062 12.978374,0.86277306 9.0932771,9.4411027 10.091311,9.5656155 c 0.998042,0.1245202 1.872871,-7.1893698 3.103782,-7.4229493 1.230913,-0.2335977 0.920899,1.3032086 0.928062,2.2370326 0.0058,0.7541972 -2.548869,5.9704792 -1.898521,6.4683322 0.650353,0.497852 1.065499,-0.0714 1.453386,-1.1978967 0.387885,-1.1264964 0.344657,-3.38756 0.889876,-3.8572455 0.545226,-0.4696886 0.933814,-0.00718 1.022076,1.0093576 0.08826,1.016514 -1.201319,2.2160216 -1.109822,2.9049473 0.09149,0.6889223 0.500185,0.7748543 0.31629,1.1498223 -0.183903,0.374956 -1.018136,0.252051 -0.923414,0.613385 0.09473,0.361331 1.01329,0.239353 0.777192,0.925025 -0.236104,0.685687 -2.418603,2.728233 -0.768593,3.186805 1.650002,0.458574 1.981736,-1.618599 2.298931,-2.221589 0.317194,-0.60298 -1.133672,-1.321693 -0.52099,-1.987294 0.612679,-0.665595 0.745074,0.859191 1.257468,-1.265347 0.512397,-2.1245361 -0.94402,-3.9408605 0.320621,-4.2724044 1.264641,-0.3315443 -1.148596,6.8361244 0.12478,7.2746024 1.27343,0.438479 1.687351,-6.6506089 2.455757,-6.4955991 0.7684,0.1550094 -2.756085,7.0496041 0.874556,10.9841961"
 +
            id="path8"
 +
            style="fill:none;stroke:#000000;stroke-width:0.36622745" />
 +
        </g>
 +
      <!-- content part -->
 +
      <foreignObject class="node" x="380" y="440" width="500" height="270">
 +
        <body xmlns="http://www.w3.org/1999/xhtml">
 +
          <div id="member-description" style="height:250px; overflow:auto;">
 +
            <h1>The iGEM2014 Team Freiburg </h1>
 +
            <p>We are the iGEM Freiburg 2014 team. This is one of our first pictures together. At that time we were real newbies and most of us had never worked in a real lab! This should change soon...</p>
 +
          </div>
 +
        </body>
 +
      </foreignObject>
 +
     
 +
      <g class="member" data-id="anne" transform="translate(0,0)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/2/21/Teamfreiburg-anne.jpg"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
 +
      <g class="member" data-id="christoph" transform="translate(405,150)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/0/09/Teamfreiburgnopic.jpg"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
 +
      <g class="member" data-id="clarissa" transform="translate(145,50)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/b/ba/Teamfreiburg-clarissa.jpg"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
-
<h2 id="Team-Jan-Ole-Ackermann">Jan Ole Ackermann</h2>
+
      <g class="member" data-id="dennis" transform="translate(290,20)">
-
<div class="row category-row">
+
        <g transform="scale(0.35)">
-
<div class="col-sm-6">
+
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/c/cf/Teamfreiburg-dennis.jpg" />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
 +
      <g class="member" data-id="ileana" transform="translate(820,235)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/0/09/Teamfreiburgnopic.jpg"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
 +
      <g class="member" data-id="jialiang" transform="translate(130,210)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/9/9f/Teamfreiburg-jialiang.jpg"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
-
<ul>
+
      <g class="member" data-id="kristoffer" transform="translate(435,0)">
-
<li>Age: 25 </li>
+
        <g transform="scale(0.35)">
-
<li>Studies: Biological Sciences, Immunology</li>
+
          <use xlink:href="#bg" />
-
<li>Favorite dish and/or drink: Pizza, green cabbage with kassler & smoothie </li>
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/9/93/Teamfreiburg-kristoffer.jpg" />
-
<li>Favorite color and/or number: Blue, 8</li>
+
          <use xlink:href="#sixsider" />
-
<li>Hobbies: Music, sport, reading</li>
+
        </g>
-
<li>Why iGEM?: Good food! New experiences, organize an own project.</li>
+
      </g>
-
</ul>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
-
</div>
+
-
</div>
+
 +
      <g class="member" data-id="laura" transform="translate(900,300)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/a/a0/Teamfreiburg-laura.jpg"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
 +
      <g class="member" data-id="lisa" transform="translate(290,160)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/7/7c/Teamfreiburg-lisa.jpg"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
 +
      <g class="member" data-id="marc" transform="translate(590,300)">
 +
        <g transform="scale(0.35)">
 +
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/f/fe/Teamfreiburg-marc.jpg"  />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
-
<h2 id="Team-Christoph-Bauer">Christoph Bauer</h2>
+
      <g class="member" data-id="max" transform="translate(450,260)">
-
<div class="row category-row">
+
        <g transform="scale(0.35)">
-
<div class="col-sm-6">
+
          <use xlink:href="#bg" />
-
<p></p>
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/4/46/Teamfreiburg-max.jpg"  />
-
<figure>
+
          <use xlink:href="#sixsider" />
-
<img src="">
+
        </g>
-
<figcaption>
+
      </g>
-
<p class="header">Chrys</p>
+
-
</figcaption>
+
-
        </figure>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<ul>
+
-
<li>Age: 25 </li>
+
-
<li>Studies: Biological Sciences, Applied Biosciences</li>
+
-
<li>Favorite dish and/or drink: Spaetzle, lentils and hot dogs</li>
+
-
<li>Favorite color and/or number: 6</li>
+
-
<li>Hobbies: Sports, handball, photography, reading</li>
+
-
<li>Why iGEM?: Learn something new, implement our own idea!</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
+
-
<h2 id="Team-Ileana-Bender">Ileana Bender</h2>
+
-
<div class="row category-row">
+
-
<div class="col-sm-6">
+
-
<ul>
+
-
<li>Age: </li>
+
-
<li>Studies: </li>
+
-
<li>Favorite dish and/or drink: </li>
+
-
<li>Favorite color and/or number: </li>
+
-
<li>Hobbies: </li>
+
-
<li>Why iGEM?: </li>
+
-
</ul>
+
-
</div>
+
      <g class="member" data-id="mirja" transform="translate(570,170)">
-
<div class="col-sm-6">
+
        <g transform="scale(0.35)">
-
<figure>
+
          <use xlink:href="#bg" />
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/3/35/Teamfreiburg-mirja.jpg" />
-
<figcaption>
+
          <use xlink:href="#sixsider" />
-
<p class="header">Illi-Vanilli</p>
+
        </g>
-
</figcaption>
+
      </g>
-
</figure>
+
-
</div>
+
-
</div>
+
-
<h2 id="Team-Valentina-Diehl">Valentina Diehl</h2>
+
      <g class="member" data-id="natalie" transform="translate(600,20)">
-
<div class="row category-row">
+
        <g transform="scale(0.35)">
-
<div class="col-sm-6">
+
          <use xlink:href="#bg" />
-
<figure>
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/e/e2/Teamfreiburg-natalie.jpg" />
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
          <use xlink:href="#sixsider" />
-
<figcaption>
+
        </g>
-
<p class="header">Vali</p>
+
      </g>
-
</figcaption>
+
-
      </figure>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<ul>
+
-
<li>Age: </li>
+
-
<li>Studies: </li>
+
-
<li>Favorite dish and/or drink: </li>
+
-
<li>Favorite color and/or number: </li>
+
-
<li>Hobbies: </li>
+
-
<li>Why iGEM?: </li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
<h2 id="Team-Mirja-Harms">Mirja Harms</h2>
+
      <g class="member" data-id="nicole" transform="translate(710,80)">
-
<div class="row category-row">
+
        <g transform="scale(0.35)">
-
<div class="col-sm-6">
+
          <use xlink:href="#bg" />
-
<ul>
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/b/ba/Teamfreiburg-nicole.jpg" />
-
<li>Age: 22</li>
+
          <use xlink:href="#sixsider" />
-
<li>Studies: Biological Sciences, Immunology</li>
+
        </g>
-
<li>Favorite dish and/or drink: Favorite dish and/or drink: Sun & love</li>
+
      </g>
-
<li>Favorite color and/or number: red, all of the numbers</li>
+
-
<li>Hobbies: Climbing, bouldering, hiking</li>
+
-
<li>Why iGEM?: I like glowing cells!</li>
+
-
</ul>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<figure>
+
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
-
<figcaption>
+
-
<p class="header">MirNEIN</p>
+
-
</figcaption>
+
-
</figure>
+
-
</div>
+
-
</div>
+
-
<h2 id="Team-Patrick-Heisterkamp">Patrick Heisterkamp</h2>
+
      <g class="member" data-id="ole" transform="translate(340,260)">
-
<div class="row category-row">
+
        <g transform="scale(0.35)">
-
<div class="col-sm-6">
+
          <use xlink:href="#bg" />
-
<figure>
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/3/3a/Teamfreiburg-ole.jpg" />
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
          <use xlink:href="#sixsider" />
-
<figcaption>
+
        </g>
-
<p class="header">Appologe</p>
+
      </g>
-
</figcaption>
+
-
      </figure>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<ul>
+
-
<li>Age: 20</li>
+
-
<li>Studies: Molecular Medicine</li>
+
-
<li>Favorite dish and/or drink: Schnitzel with chips</li>
+
-
<li>Favorite color and/or number: 13</li>
+
-
<li>Hobbies: Chinese language, jogging, informatics</li>
+
-
<li>Why iGEM?: Learn something new!</li>
+
-
</ul>
+
-
</div>
+
      <g class="member" data-id="pascal" transform="translate(10,140)">
-
</div>
+
        <g transform="scale(0.35)">
-
+
          <use xlink:href="#bg" />
-
<h2 id="Team-Clarissa-Hiltl">Clarissa Hiltl</h2>
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/4/43/Teamfreiburg-pascal.jpg" />
-
<div class="row category-row">
+
          <use xlink:href="#sixsider" />
-
<div class="col-sm-6">
+
        </g>
-
<ul>
+
      </g>
-
<li>Age: 22</li>
+
-
<li>Studies: Bachelor in Biology</li>
+
-
<li>Favorite dish and/or drink: Mojito</li>
+
-
<li>Favorite color and/or number: Blue and 8</li>
+
-
<li>Hobbies: Travelling</li>
+
-
<li>Why iGEM?: Im always excited for new experiences and the possibilty to meet great people.</li>
+
-
</ul>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<figure>
+
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
-
<figcaption>
+
-
<p class="header">CEO von HZ Corp.</p>
+
-
</figcaption>
+
-
</figure>
+
-
</div>
+
-
</div>
+
-
<h2 id="Team-Jialiang-Lu">Jialiang Lu</h2>
+
      <g class="member" data-id="patrick" transform="translate(830,140)">
-
<div class="row category-row">
+
        <g transform="scale(0.35)">
-
<div class="col-sm-6">
+
          <use xlink:href="#bg" />
-
<figure>
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/2/2d/Teamfreiburg-patrick.jpg" />
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
          <use xlink:href="#sixsider" />
-
<figcaption>
+
        </g>
-
<p class="header">LaLeLu</p>
+
      </g>
-
</figcaption>
+
-
      </figure>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<ul>
+
-
<li>Age: </li>
+
-
<li>Studies: </li>
+
-
<li>Favorite dish and/or drink: </li>
+
-
<li>Favorite color and/or number: </li>
+
-
<li>Hobbies: </li>
+
-
<li>Why iGEM?: </li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
<h2 id="Team-Wignand-Mühlhäuser">Wignand Mühlhäuser</h2>
+
      <g class="member" data-id="patrickh" transform="translate(870,10)">
-
<div class="row category-row">
+
        <g transform="scale(0.35)">
-
<div class="col-sm-6">
+
          <use xlink:href="#bg" />
 +
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/3/33/Teamfreiburg-PatrickH.jpg" />
 +
          <use xlink:href="#sixsider" />
 +
        </g>
 +
      </g>
-
<ul>
+
      <g class="member" data-id="valentina" transform="translate(480,90)">
-
<li>Age: 25</li>
+
        <g transform="scale(0.35)">
-
<li>Studies: Master in Biology</li>
+
          <use xlink:href="#bg" />
-
<li>Favorite dish and/or drink: Steak</li>
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/0/09/Teamfreiburgnopic.jpg"  />
-
<li>Favorite color and/or number: Cherry Berry and pi</li>
+
          <use xlink:href="#sixsider" />
-
<li>Hobbies: Music</li>
+
        </g>
-
<li>Why iGEM?: I really like the idea of students creating and working on their own project building something together from the bottom up. </li>
+
      </g>
-
</ul>
+
-
</div>
+
      <g class="member" data-id="wignand" transform="translate(700,220)">
-
<div class="col-sm-6">
+
        <g transform="scale(0.35)">
-
<figure>
+
          <use xlink:href="#bg" />
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
          <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="https://static.igem.org/mediawiki/2014/6/68/Teamfreiburgwignand.jpg" />
-
<figcaption>
+
          <use xlink:href="#sixsider" />
-
<p class="header">Weegee</p>
+
        </g>
-
</figcaption>
+
      </g>
-
</figure>
+
-
</div>
+
-
</div>
+
-
<h2 id="Team-Marc-Müller">Marc Müller</h2>
+
     
-
<div class="row category-row">
+
    </svg>
-
<div class="col-sm-6">
+
  </div>
-
<figure>
+
<script>
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
(function(){
-
<figcaption>
+
  var animating = false;
-
<p class="header">Hexer</p>
+
  var posRecep = [200,270]; // receptorpos
-
</figcaption>
+
  var time = 0.7/300; // s/px
-
      </figure>
+
  function selectMember(){
-
</div>
+
    // just don't animate when we are currently docking
-
<div class="col-sm-6">
+
    if (animating) return;
-
<ul>
+
    animating = true;
-
<li>Age: </li>
+
-
<li>Studies: </li>
+
-
<li>Favorite dish and/or drink: </li>
+
-
<li>Favorite color and/or number: </li>
+
-
<li>Hobbies: </li>
+
-
<li>Why iGEM?: </li>
+
-
</ul>
+
-
 
+
-
</div>
+
-
</div>
+
-
 
+
-
<h2 id="Team-Laura-Ost">Laura Ost</h2>
+
-
<div class="row category-row">
+
-
<div class="col-sm-6">
+
-
 
+
-
<ul>
+
-
<li>Age: 23</li>
+
-
<li>Studies: Bachelor in Biology</li>
+
-
<li>Favorite dish and/or drink: Flammkuchen (flame cake)</li>
+
-
<li>Favorite color and/or number: Dark green and 7</li>
+
-
<li>Hobbies: Reading</li>
+
-
<li>Why iGEM?: It fascinates me to learn about the diversity of ideas different teams came up with. Also I, as part of a great team like to develop a project from scratch. </li>
+
-
</ul>
+
-
 
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<figure>
+
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
-
<figcaption>
+
-
<p class="header">Sonnenaufgang</p>
+
-
</figcaption>
+
-
</figure>
+
-
</div>
+
-
</div>
+
-
 
+
-
<h2 id="Team-Pascal-Sartor">Pascal Sartor</h2>
+
-
<div class="row category-row">
+
-
<div class="col-sm-6">
+
-
<figure>
+
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
-
<figcaption>
+
-
<p class="header">Dizzie Pascal</p>
+
-
</figcaption>
+
-
      </figure>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
 
+
-
<ul>
+
-
<li>Age: </li>
+
-
<li>Studies: </li>
+
-
<li>Favorite dish and/or drink: </li>
+
-
<li>Favorite color and/or number: </li>
+
-
<li>Hobbies: </li>
+
-
<li>Why iGEM?: </li>
+
-
</ul>
+
-
 
+
-
</div>
+
-
</div>
+
-
+
-
<h2 id="Team-Kristoffer-Weißert">Kristoffer Weißert</h2>
+
-
<div class="row category-row">
+
-
<div class="col-sm-6">
+
-
 
+
-
<ul>
+
-
<li>Age: 24</li>
+
-
<li>Studies: Biological Sciences, Immunology</li>
+
-
<li>Favorite dish and/or drink: Rice pudding</li>
+
-
<li>Favorite color and/or number: Red, 77</li>
+
-
<li>Hobbies: Table tennis, singing</li>
+
-
<li>Why iGEM?: Do something besides studying, learn to organize a project. </li>
+
-
</ul>
+
-
 
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<figure>
+
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
-
<figcaption>
+
-
<p class="header">Krissi</p>
+
-
</figcaption>
+
-
</figure>
+
-
</div>
+
-
</div>
+
-
 
+
-
<h2 id="Team-Dennis-Zimmer">Dennis Zimmer</h2>
+
-
<div class="row category-row">
+
-
<div class="col-sm-6">
+
-
<figure>
+
-
<img src="https://static.igem.org/mediawiki/2014/3/3a/Cowabunga.JPG">
+
-
<figcaption>
+
-
<p class="header">Chambre</p>
+
-
</figcaption>
+
-
      </figure>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<ul>
+
-
<li>Age: 24</li>
+
-
<li>Studies: Biological Sciences, Immunology</li>
+
-
<li>Favorite dish and/or drink: Pancakes / Dark 'n' Stormy</li>
+
-
<li>Favorite color and/or number: Blue, 18</li>
+
-
<li>Hobbies: Beach volleyball, mountain biking, traveling</li>
+
-
<li>Why iGEM?: I think iGEM is a great opportunity to learn amazing new stuff!</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
+
-
</section>
+
-
 
+
-
<section id="Team-Instructors">
+
-
<h1>Instructors</h1>
+
-
<h2 id="Team-Max-Ulbrich">Max Ulbrich</h2>
+
-
<div class="row category-row">
+
-
<div class="col-sm-6">
+
-
 
+
-
<ul>
+
-
<li>Age: 41</li>
+
-
<li>Studied: Physics</li>
+
-
<li>Favorite dish and/or drink: Flaming Moe</li>
+
-
<li>Favorite color and/or number: Pink</li>
+
-
<li>Hobbies: Brewing, assembling microscopes, disassembling microscopes</li>
+
-
<li>Why iGEM?: Because the students need someone to look up to.</li>
+
-
</ul>
+
-
 
+
-
 
+
-
</p>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<figure>
+
-
<img src="http://d.yimg.com/eur.yimg.com/xp/leadsatz/20091125/13/3404769581-kuess-frosch-gewinnspiel.jpg">
+
-
<figcaption>
+
-
<p class="header">Prof. Mäx</p>
+
-
</figcaption>
+
-
</figure>
+
-
</div>
+
-
</div>
+
-
 
+
-
<h2 id="Team-Nicole-Gensch">Nicole Gensch</h2>
+
-
<div class="row category-row">
+
-
<div class="col-sm-6">
+
-
<figure>
+
-
<img src="https://static.igem.org/mediawiki/2014/9/9a/Toolbox.jpg">
+
-
<figcaption>
+
-
<p class="header">Dr. Toolbox</p>
+
-
</figcaption>
+
-
      </figure>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<ul>
+
-
<li>Age: 32</li>
+
-
<li>Studied: Developmental Biology / Biotechnology</li>
+
-
<li>Favorite dish and/or drink: Self-made sandwiches and salad</li>
+
-
<li>Favorite color and/or number: Bright colors</li>
+
-
<li>Hobbies: Workout & fitness</li>
+
-
<li>Why iGEM?: I like the idea of iGEM and I was interested to see how a group of students, which did not know each other beforehand, become a team, develop their own idea of a research project and work on it.</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</section>
+
-
 
+
-
<section id="Team-Advisors">
+
-
<h1>Advisors</h1>
+
-
+
-
<h2 id="Team-Patrick-Gonschorek">Patrick Gonschorek</h2>
+
-
<div class="row category-row">
+
-
<div class="col-sm-6">
+
-
<ul>
+
    var $this = $(this);
-
<li>Age: </li>
+
-
<li>Studies: </li>
+
-
<li>Favorite dish and/or drink: </li>
+
-
<li>Favorite color and/or number: </li>
+
-
<li>Hobbies: </li>
+
-
<li>Why iGEM?: </li>
+
-
</ul>
+
-
</div>
+
    // move docked head back
-
<div class="col-sm-6">
+
    $active = $('.member.active');
-
<figure>
+
    $active.each(function(){
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
      var $this = $(this);
-
<figcaption>
+
      var pos = $this.data('orig-pos');
-
<p class="header">Pat</p>
+
      $this.css('-webkit-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
-
</figcaption>
+
      $this.css('-ms-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
-
</figure>
+
      $this.css('-o-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
-
</div>
+
      $this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
-
</div>
+
      $this.attr('class', 'member');
 +
    })
-
<h2 id="Team-Anne-Müller">Anne Müller</h2>
+
    // set current member active
-
<div class="row category-row">
+
    $this.attr('class', 'member active');
-
<div class="col-sm-6">
+
-
<figure>
+
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
-
<figcaption>
+
-
<p class="header">Alles Müller, oder was?</p>
+
-
</figcaption>
+
-
      </figure>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<ul>
+
    // move head to receptor
-
<li>Age: 23</li>
+
    $this.css('-webkit-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
-
<li>Studies: Biological Sciences, Applied Biosciences</li>
+
    $this.css('-ms-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
-
<li>Favorite dish and/or drink: Lasagne, Mojito</li>
+
    $this.css('-0', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
-
<li>Favorite color and/or number: Red, 4</li>
+
    $this.css('transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
-
<li>Hobbies: Showjumping, dog cenel, reading</li>
+
-
<li>Why iGEM?: Last years iGEM was great!</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
<h2 id="Team-Natalie-Louis">Natalie Louis</h2>
+
    console.log($this.data('duration'));
-
<div class="row category-row">
+
-
<div class="col-sm-6">
+
-
<ul>
+
    setTimeout(function(){
-
<li>Age: 25</li>
+
      // docked part
-
<li>Studies: Master in Applied Biosciences</li>
+
-
<li>Favorite dish and/or drink: Mussels</li>
+
-
<li>Favorite color and/or number: Blue and 4 </li>
+
-
<li>Hobbies: Latin, standard and salsa dancing, hiking</li>
+
-
<li>Why iGEM?: To be able to pass on iGEM experiences of the previous years.</li>
+
-
</ul>
+
-
</div>
+
      // get content of member
-
<div class="col-sm-6">
+
      var content = $('#data-'+$this.data('id')).html();
-
<figure>
+
      // apply content of member to the red cell content area
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
      $('#member-description').html(content);
-
<figcaption>
+
-
<p class="header">Rafael Natal</p>
+
-
</figcaption>
+
-
</figure>
+
-
</div>
+
-
</div>
+
-
<h2 id="Team-Lisa-Schmunk">Lisa Schmunk</h2>
+
      // get the image url
-
<div class="row category-row">
+
      var href = $this.find('image').attr('xlink:href');
-
<div class="col-sm-6">
+
      // apply to the cellcore
-
<figure>
+
      $('#lecell image').attr('xlink:href', href);
-
<img src="https://static.igem.org/mediawiki/2014/6/63/2014Freiburg_Viral_specificity_schema.jpg">
+
-
<figcaption>
+
-
<p class="header">Schmuck</p>
+
-
</figcaption>
+
-
      </figure>
+
-
</div>
+
-
<div class="col-sm-6">
+
-
<ul>
+
-
<li>Age: 24</li>
+
-
<li>Studies: Mistress of Biology; Genetics and Synthetic Biology</li>
+
-
<li>Favorite dish and/or drink: Black tea</li>
+
-
<li>Favorite color and/or number: Blue, 7</li>
+
-
<li>Hobbies: Jazz & modern dance</li>
+
-
<li>Why iGEM?: Once is not enough :)</li>
+
-
</ul>
+
-
</div>
+
      animating = false;
-
</div>
+
-
</section>
+
    }, $this.data('duration') * 1000);
 +
   
 +
  }
 +
  $('.member')
 +
    .each(function(){
 +
      // set orig-pos
 +
      var $this = $(this);
 +
      var transform = $this.attr('transform');
 +
      transform = transform.match(/translate\((\d+),(\d+)\)/);
 +
      pos = [transform[1],transform[2]];
 +
      $this.data('orig-pos', pos);
 +
      $this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
 +
      // compute duration
 +
      var dist = Math.sqrt(Math.pow(posRecep[0] - pos[0],2) +
 +
        Math.pow(posRecep[1] - pos[1],2));
 +
      var dur = dist*time;
 +
      $this.css('transition-duration', dur + 's');
 +
      $this.data('duration', dur);
 +
    })
 +
    // add the click handler
 +
    .click(selectMember);
 +
})();
-
</body>
+
</script>
</html>
</html>

Revision as of 10:22, 17 October 2014

<style>

   .team-member-virus {
     width:100%;
     height:0;
     padding-top:68.359375%;
     position: relative;
   }
   svg {
     position:absolute;
     top:0;left:0;
     width:100%;height:100%;
   }
   .member {
     cursor: pointer;
   }

</style>

Contents

Anne Müller

  • Age: 23
  • Studies: Biological Sciences, Applied Biosciences
  • Favorite dish and/or drink: Lasagne, Mojito
  • Favorite color and/or number: Red, 4
  • Hobbies: Showjumping, dog cenel, reading
  • Why iGEM?: Last years iGEM was great!

Christoph Bauer

  • Age: 25
  • Studies: Biological Sciences, Applied Biosciences
  • Favorite dish and/or drink: Spaetzle, lentils and hot dogs
  • Favorite color and/or number: 6
  • Hobbies: Sports, handball, photography, reading
  • Why iGEM?: Learn something new, implement our own idea!

Clarissa Hiltl

  • Age: 22
  • Studies: Bachelor in Biology
  • Favorite dish and/or drink: Mojito
  • Favorite color and/or number: Blue and 8
  • Hobbies: Travelling
  • Why iGEM?: Im always excited for new experiences and the possibilty to meet great people.

Dennis Zimmer

  • Age: 24
  • Studies: Biological Sciences, Immunology
  • Favorite dish and/or drink: Pancakes / Dark 'n' Stormy
  • Favorite color and/or number: Blue, 18
  • Hobbies: Beach volleyball, mountain biking, traveling
  • Why iGEM?: I think iGEM is a great opportunity to learn amazing new stuff!

Ileana Bender

  • Age:
  • Studies:
  • Favorite dish and/or drink:
  • Favorite color and/or number:
  • Hobbies:
  • Why iGEM?:

Jialiang Lu

  • Age:
  • Studies:
  • Favorite dish and/or drink:
  • Favorite color and/or number:
  • Hobbies:
  • Why iGEM?:

Kristoffer Weißert

  • Age: 24
  • Studies: Biological Sciences, Immunology
  • Favorite dish and/or drink: Rice pudding
  • Favorite color and/or number: Red, 77
  • Hobbies: Table tennis, singing
  • Why iGEM?: Do something besides studying, learn to organize a project.

Laura Ost

  • Age: 23
  • Studies: Bachelor in Biology
  • Favorite dish and/or drink: Flammkuchen (flame cake)
  • Favorite color and/or number: Dark green and 7
  • Hobbies: Reading
  • Why iGEM?: It fascinates me to learn about the diversity of ideas different teams came up with. Also I, as part of a great team like to develop a project from scratch.

Lisa Schmunk

  • Age: 24
  • Studies: Mistress of Biology; Genetics and Synthetic Biology
  • Favorite dish and/or drink: Black tea
  • Favorite color and/or number: Blue, 7
  • Hobbies: Jazz & modern dance
  • Why iGEM?: Once is not enough :)

Marc Müller

  • Age:
  • Studies:
  • Favorite dish and/or drink:
  • Favorite color and/or number:
  • Hobbies:
  • Why iGEM?:

Max Ulbrich

  • Age: 41
  • Studied: Physics
  • Favorite dish and/or drink: Flaming Moe
  • Favorite color and/or number: Pink
  • Hobbies: Brewing, assembling microscopes, disassembling microscopes
  • Why iGEM?: Because the students need someone to look up to.

Mirja Harms

  • Age: 22
  • Studies: Biological Sciences, Immunology
  • Favorite dish and/or drink: Favorite dish and/or drink: Sun & love
  • Favorite color and/or number: red, all of the numbers
  • Hobbies: Climbing, bouldering, hiking
  • Why iGEM?: I like glowing cells!

Natalie Louis

  • Age: 25
  • Studies: Master in Applied Biosciences
  • Favorite dish and/or drink: Mussels
  • Favorite color and/or number: Blue and 4
  • Hobbies: Latin, standard and salsa dancing, hiking
  • Why iGEM?: To be able to pass on iGEM experiences of the previous years.

Nicole Gensch

  • Age: 32
  • Studied: Developmental Biology / Biotechnology
  • Favorite dish and/or drink: Self-made sandwiches and salad
  • Favorite color and/or number: Bright colors
  • Hobbies: Workout & fitness
  • Why iGEM?: I like the idea of iGEM and I was interested to see how a group of students, which did not know each other beforehand, become a team, develop their own idea of a research project and work on it.

Jan Ole Ackermann

  • Age: 25
  • Studies: Biological Sciences, Immunology
  • Favorite dish and/or drink: Pizza, green cabbage with kassler & smoothie
  • Favorite color and/or number: Blue, 8
  • Hobbies: Music, sport, reading
  • Why iGEM?: Good food! New experiences, organize an own project.

Pascal Sartor

  • Age:
  • Studies:
  • Favorite dish and/or drink:
  • Favorite color and/or number:
  • Hobbies:
  • Why iGEM?:

Patrick Gonschorek

  • Age:
  • Studies:
  • Favorite dish and/or drink:
  • Favorite color and/or number:
  • Hobbies:
  • Why iGEM?:

Patrick Heisterkamp

  • Age: 20
  • Studies: Molecular Medicine
  • Favorite dish and/or drink: Schnitzel with chips
  • Favorite color and/or number: 13
  • Hobbies: Chinese language, jogging, informatics
  • Why iGEM?: Learn something new!

Valentina Diehl

  • Age:
  • Studies:
  • Favorite dish and/or drink:
  • Favorite color and/or number:
  • Hobbies:
  • Why iGEM?:

Wignand Mühlhäuser

  • Age: 25
  • Studies: Master in Biology
  • Favorite dish and/or drink: Steak
  • Favorite color and/or number: Cherry Berry and pi
  • Hobbies: Music
  • Why iGEM?: I really like the idea of students creating and working on their own project building something together from the bottom up.
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0 1024,700">
     <style type="text/css">
       image {
         clip-path: url(#clipPath);
       }
       #lecell image {
         clip-path: url(#clipPathCell);
       }
     </style>
     <defs>
       <clipPath id="clipPath"><use xlink:href="#sixsider" /></clipPath>
       <clipPath id="clipPathCell"><use xlink:href="#cellcore" /></clipPath>
       <path id="cellcore"
          d="m 223.88555,21.29458 a 120.91828,192.57355 0 0 1 0,385.14685 120.91828,192.57355 0 1 1 0,-385.14685 z"
          style="fill:#ff2b26;stroke:#99150b;stroke-width:10" />
       <path d="M197,27 L253,125 196,222 83,221 27,123 84,26 197,27 z" id="sixsider" style="fill:none;stroke:#85abdd;stroke-width:6.5;" />
       <circle id="outercirc" r="120" style="fill:#5588d8;stroke:#3a5e8c;stroke-width:6.5;" />
       <circle cx="15" cy="122" r="14" id="circ" style="fill:#50a962;stroke:#0e7b2d;stroke-width:2;" />
       
       <g id="bg">
         <use xlink:href="#circ" />
         <use transform="translate(62,112)" xlink:href="#circ" />
         <use transform="translate(190,111)" xlink:href="#circ" />
         <use transform="translate(250,1)" xlink:href="#circ" />
         <use transform="translate(188,-105)" xlink:href="#circ" />
         <use transform="translate(60,-104)" xlink:href="#circ" />
         <use transform="translate(140,125)" xlink:href="#outercirc" />
       </g>
       <linearGradient
         x1="0%"
         y1="25%"
         x2="100%"
         y2="75%"
         id="gradOrange">
         <stop
            id="stop5"
            style="stop-color:#ffffff;stop-opacity:1"
            offset="0" />
         <stop
            id="stop7"
            style="stop-color:#ffb888;stop-opacity:1"
            offset="1" />
       </linearGradient>
     </defs>


     <g id="lecell" transform="translate(0,400)">
       <path
          d="M 84.6349,-95.7008 C 421.58879,109.71901 733.49662,8.81505 878.70582,-70.194 920.57862,32.68133 861.12342,109.51504 1071.6661,184.37737 995.64312,263.16505 863.57452,345.58349 905.04162,518.36333 618.91832,418.84221 333.88112,399.28807 170.7772,480.84023 169.39472,381.31895 47.99788,324.7212 -49.55187,244.45876 78.86805,140.73498 79.30872,81.11448 84.6349,-95.7008 z"
          style="fill:url(#gradOrange);stroke:#99150b;stroke-width:5" />
       <use xlink:href="#cellcore" />
       <image x="100" y="15" width="250" height="290"preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-all.jpg" />
     </g>


     <g id="receptor" transform="translate(155,330) scale(6)">
         <path
           d="M 4.0165967,4.2964177 23.01686,11.167445"
           id="path3822-3-62-6-4"
           style="fill:none;stroke:#000000;stroke-width:0.7690776;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
         <path
           d="M 0.10695222,7.0590881 C 1.8516854,7.8789947 3.1427512,7.7542598 3.3739521,9.6631807 3.687317,12.250584 5.2632199,2.2578247 6.7732171,2.1776212 9.0785754,2.0551595 4.3336116,7.0352291 5.9803883,7.8214 7.6271576,8.6075789 8.0197959,1.8817558 9.5538504,0.94367219 11.356322,-0.15857468 7.2963306,8.9319464 8.3417333,9.237118 9.3871388,9.5422872 10.532708,-0.30804996 11.755542,0.27736062 12.978374,0.86277306 9.0932771,9.4411027 10.091311,9.5656155 c 0.998042,0.1245202 1.872871,-7.1893698 3.103782,-7.4229493 1.230913,-0.2335977 0.920899,1.3032086 0.928062,2.2370326 0.0058,0.7541972 -2.548869,5.9704792 -1.898521,6.4683322 0.650353,0.497852 1.065499,-0.0714 1.453386,-1.1978967 0.387885,-1.1264964 0.344657,-3.38756 0.889876,-3.8572455 0.545226,-0.4696886 0.933814,-0.00718 1.022076,1.0093576 0.08826,1.016514 -1.201319,2.2160216 -1.109822,2.9049473 0.09149,0.6889223 0.500185,0.7748543 0.31629,1.1498223 -0.183903,0.374956 -1.018136,0.252051 -0.923414,0.613385 0.09473,0.361331 1.01329,0.239353 0.777192,0.925025 -0.236104,0.685687 -2.418603,2.728233 -0.768593,3.186805 1.650002,0.458574 1.981736,-1.618599 2.298931,-2.221589 0.317194,-0.60298 -1.133672,-1.321693 -0.52099,-1.987294 0.612679,-0.665595 0.745074,0.859191 1.257468,-1.265347 0.512397,-2.1245361 -0.94402,-3.9408605 0.320621,-4.2724044 1.264641,-0.3315443 -1.148596,6.8361244 0.12478,7.2746024 1.27343,0.438479 1.687351,-6.6506089 2.455757,-6.4955991 0.7684,0.1550094 -2.756085,7.0496041 0.874556,10.9841961"
           id="path8"
           style="fill:none;stroke:#000000;stroke-width:0.36622745" />
       </g>
     <foreignObject class="node" x="380" y="440" width="500" height="270">
       <body xmlns="http://www.w3.org/1999/xhtml">

The iGEM2014 Team Freiburg

We are the iGEM Freiburg 2014 team. This is one of our first pictures together. At that time we were real newbies and most of us had never worked in a real lab! This should change soon...

       </body>
     </foreignObject>
     
     <g class="member" data-id="anne" transform="translate(0,0)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-anne.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="christoph" transform="translate(405,150)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburgnopic.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="clarissa" transform="translate(145,50)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-clarissa.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="dennis" transform="translate(290,20)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-dennis.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="ileana" transform="translate(820,235)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburgnopic.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="jialiang" transform="translate(130,210)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-jialiang.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="kristoffer" transform="translate(435,0)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-kristoffer.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="laura" transform="translate(900,300)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-laura.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="lisa" transform="translate(290,160)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-lisa.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="marc" transform="translate(590,300)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-marc.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="max" transform="translate(450,260)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-max.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="mirja" transform="translate(570,170)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-mirja.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="natalie" transform="translate(600,20)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-natalie.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="nicole" transform="translate(710,80)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-nicole.jpg" />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="ole" transform="translate(340,260)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-ole.jpg" />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="pascal" transform="translate(10,140)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-pascal.jpg" />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="patrick" transform="translate(830,140)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-patrick.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="patrickh" transform="translate(870,10)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburg-PatrickH.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="valentina" transform="translate(480,90)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburgnopic.jpg"  />
         <use xlink:href="#sixsider" />
       </g>
     </g>
     <g class="member" data-id="wignand" transform="translate(700,220)">
       <g transform="scale(0.35)">
         <use xlink:href="#bg" />
         <image x="25" y="25" width="230" height="200" preserveAspectRatio="xMidYMid slice" xlink:href="Teamfreiburgwignand.jpg" />
         <use xlink:href="#sixsider" />
       </g>
     </g>


   </svg>

<script> (function(){

 var animating = false;
 var posRecep = [200,270]; // receptorpos
 var time = 0.7/300; // s/px
 function selectMember(){
   // just don't animate when we are currently docking
   if (animating) return;
   animating = true;
   var $this = $(this);
   // move docked head back
   $active = $('.member.active');
   $active.each(function(){
     var $this = $(this);
     var pos = $this.data('orig-pos');
     $this.css('-webkit-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
     $this.css('-ms-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
     $this.css('-o-transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
     $this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
     $this.attr('class', 'member');
   })
   // set current member active
   $this.attr('class', 'member active');
   // move head to receptor
   $this.css('-webkit-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
   $this.css('-ms-transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
   $this.css('-0', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
   $this.css('transform', 'translate('+posRecep[0]+'px,'+posRecep[1]+'px)');
   console.log($this.data('duration'));
   setTimeout(function(){
     // docked part
     // get content of member
     var content = $('#data-'+$this.data('id')).html();
     // apply content of member to the red cell content area
     $('#member-description').html(content);
     // get the image url
     var href = $this.find('image').attr('xlink:href');
     // apply to the cellcore
     $('#lecell image').attr('xlink:href', href);
     animating = false;
   }, $this.data('duration') * 1000);
   
 }
 $('.member')
   .each(function(){
     // set orig-pos
     var $this = $(this);
     var transform = $this.attr('transform');
     transform = transform.match(/translate\((\d+),(\d+)\)/);
     pos = [transform[1],transform[2]];
     $this.data('orig-pos', pos);
     $this.css('transform', 'translate('+pos[0]+'px,'+pos[1]+'px)');
     // compute duration
     var dist = Math.sqrt(Math.pow(posRecep[0] - pos[0],2) +
       Math.pow(posRecep[1] - pos[1],2));
     var dur = dist*time;
     $this.css('transition-duration', dur + 's');
     $this.data('duration', dur);
   })
   // add the click handler
   .click(selectMember);

})();

</script>

</html>