projects.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <title>Ammielle Wambo Becker</title>
  <meta name="viewport" content="width=500, initial-scale=1">
  <meta name="description" content="Ammielle WB's personal site">
  <meta charset="utf-8">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <!-- CSS Stylesheet -->
  <link rel="stylesheet" href="styles.css">

  <!-- Moving Letters JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

  <!-- FontAwesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

  <!-- Begin Mailchimp Signup Form -->
  <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:ital@1&display=swap" rel="stylesheet">

  <!-- Set Favicon -->
  <link rel="icon" type="image/png" href="my-favicon-circle.png"/>
</head>

<body>
  <nav class="navbar fixed-top navbar-expand-lg navbar-dark purple-bg">
    <a class="navbar-brand subtitle" href="index.html">Ammielle Wambo Becker<span class="sr-only">(current)</span></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="projects.html">Projects</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Engagements
          </a>
          <div class="dropdown-menu bg-light" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="academic.html">Academic</a>
            <a class="dropdown-item" href="clubs.html">Clubs</a>
            <a class="dropdown-item" href="service.html">Service</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

<div class="banner">
  <h1 class="ml16"><span>P</span><span>r</span><span>o</span><span>j</span><span>e</span><span>c</span><span>t</span><span>s</span></h1>
</div>

  <div class="past-newsletters text-section">
  <h2 class="purple-text subtitle">What I'm up to...</h2>
  <div class="row">
    <!-- <div class="col-sm-6 col-md-6 col-lg-4 text-section">
      <div class="card shadow rounded">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h3 class="card-title">October 2020 newsletter</h3>
          <p class="card-text">placeholder</p>
          <a href="#" class="button btn btn-dark btn-small">Check it out</a>
        </div>
      </div>
    </div> -->
    <div class="col-sm-6 col-md-6 col-lg-4 text-section">
      <div class="card shadow rounded">
        <img class="card-img-top" src="september-newsletter.PNG" alt="Card image cap">
        <div class="card-body light-blue-bg">
          <h3 class="card-title">September 2020 newsletter</h3>
          <p class="card-text regular-font">I went back to school, joined TKS, met a ton of new people and posted my first YT video.</p>
          <a href="https://mailchi.mp/1ddb4127ca4a/ammielles-area-september-20" class="button btn btn-dark btn-lg">Check it out</a>
        </div>
      </div>
    </div>
  </div>

<div class="more-btn">
  <a href="https://mailchi.mp/ed4ea5ef0a03/ammielles-area" class="button btn btn-dark btn-lg regular-font">More</a>
</div>
</div>

<div class="portfolio text-section purple-bg">
  <h2 class="white-text subtitle">What I've done...</h2>
  <div class="row">
    <!-- <div class="col-sm-6 col-md-6 col-lg-4 text-section">
      <div class="card shadow rounded">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h3 class="card-title">Video</h3>
          <p class="card-text">placeholder</p>
          <a href="#" class="button btn btn-dark btn-small">Check it out</a>
        </div>
      </div>
    </div> -->
    <div class="col-sm-6 col-md-6 col-lg-4 text-section">
      <div class="card shadow rounded">
        <img class="card-img-top" src="journaljsf.jpg" alt="Card image cap">
        <div class="card-body light-blue-bg">
          <h3 class="card-title">JournalJSF</h3>
          <p class="card-text regular-font">As communications officer for the 2020-21 year, I launched a school newspaper!</p>
          <a href="https://journaljsf.ca/" class="button btn btn-dark btn-lg">Check it out</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-4 text-section">
      <div class="card shadow rounded">
        <img class="card-img-top" src="https://blogs.biomedcentral.com/on-biology/wp-content/uploads/sites/5/2017/12/DNA.png" alt="Card image cap">
        <div class="card-body light-blue-bg">
          <h3 class="card-title">Basics of Biological Computers</h3>
          <p class="card-text regular-font">Covering the basics of biological computing by noting the resemblances between regular computers and biocomputers.</p>
          <a href="https://medium.com/@amms.wb/basics-of-biological-computing-93beb293ef35" class="button btn btn-dark btn-lg">Check it out</a>
        </div>
      </div>
    </div>
  </div>

<div class="more-btn">
  <a href="https://tks.life/profile/ammielle.wambo.becker#portfolio" class="button btn btn-dark btn-lg regular-font">More</a>
</div>
</div>

<div class="progress-items text-section">
  <h2 class="subtitle purple-text">What I'm learning...</h2>

  <div class="progress-item">
    <h3 class="light-blue-text">Synthetic biology</h3>
    <div class="progress white-bg">
      <div class="progress-bar progress-bar-striped progress-bar-animated purple-bg" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <div class="progress-item">
    <h3 class="light-blue-text">Quantum computing</h3>
    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated purple-bg" role="progressbar" style="width: 17%" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <div class="progress-item">
    <h3 class="light-blue-text">Biological computing</h3>
    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated purple-bg" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <div class="progress-item">
    <h3 class="light-blue-text">Machine learning</h3>
    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated purple-bg" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>

  <div class="progress-item">
    <h3 class="light-blue-text">Web development</h3>
    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated purple-bg" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>

</div>


<div class="newsletter gradient-color">
<div id="mc_embed_signup">
<h2 class="white-text">Subscribe to my monthly newsletter</h2>
<form action="https://mailchi.us2.list-manage.com/subscribe/post?u=c436778fbbff034a01a1bd7ac&amp;id=03ed8a9006" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
  <div id="mc_embed_signup_scroll">

<div class="mc-field-group form-group">
<label for="mce-EMAIL" class="regular-font">Email address</label>
<input type="email" value="" name="EMAIL" class="required email form-control regular-font" id="mce-EMAIL" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div id="mce-responses" class="clear">
  <div class="response" id="mce-error-response" style="display:none"></div>
  <div class="response" id="mce-success-response" style="display:none"></div>
</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
  <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c436778fbbff034a01a1bd7ac_03ed8a9006" tabindex="-1" value=""></div>
  <div class="clear">
    <button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-dark btn-lg regular-font">Submit</button>
  </div>
  </div>
</form>
</div>


</div>
  <footer>
    <p class="purple-text">Get in touch</p>
    <div class="socials">
      <a href="mailto:ammiellewb@gmail.com"><i class="fas fa-envelope fa-2x purple-text"></i></a>
      <a href="https://www.linkedin.com/in/ammielle-wb-6538231b2/"><i class="fab fa-linkedin fa-2x purple-text"></i></a>
      <a href="https://www.instagram.com/amms.wb/"><i class="fab fa-instagram fa-2x purple-text"></i></a>
      <a href="https://twitter.com/ammswb"><i class="fab fa-twitter fa-2x purple-text"></i></a>
      <a href="https://www.youtube.com/channel/UCsp5LFDrt9Ut6pkZBvtOaYA"><i class="fab fa-youtube fa-2x purple-text"></i></a>
      <a href="https://github.com/ammiellewb"><i class="fab fa-github fa-2x purple-text"></i></a>
      <a href="https://medium.com/@amms.wb"><i class="fab fa-medium-m fa-2x purple-text"></i></a>
    </div>
    <br>
    <br>
    <div>
      <small class="purple-text">&copy; 2020 <a class="purple-text" href="index.html">Ammielle WB</a>. All rights reserved.</small>
    </div>
  </footer>

  <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
  <script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
  <!--End mc_embed_signup-->
  <script type="text/javascript">
    var textWrapper = document.querySelector('.ml16');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    anime.timeline({
        loop: true
      })
      .add({
        targets: '.ml16 .letter',
        translateY: [-100, 0],
        easing: "easeOutExpo",
        duration: 1400,
        delay: (el, i) => 30 * i
      }).add({
        targets: '.ml16',
        opacity: 0,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
      });

    // MDB Lightbox Init
    $(function() {
      $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
    });
  </script>
</body>

</html>