<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Portfolio Template For Developers</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Xiaoying Riley at 3rd Wave Media">
<link rel="shortcut icon" href="favicon.ico">
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,400italic,300italic,300,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<script defer src="assets/fontawesome/js/all.js"></script>
<link id="theme-style" rel="stylesheet" href="assets/css/theme-1.css">
</head>
<body>
<header class="header">
<div class="top-bar theme-bg-primary-darken">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark position-relative">
<ul class="social-list list-inline mb-0">
<li class="list-inline-item"><a class="text-white" href="#"><i class="fab fa-twitter fa-fw"></i></a></li>
<li class="list-inline-item"><a class="text-white" href="#"><i class="fab fa-linkedin-in fa-fw"></i></a></li>
<li class="list-inline-item"><a class="text-white" href="#"><i class="fab fa-github-alt fa-fw"></i></a></li>
<li class="list-inline-item"><a class="text-white" href="#"><i class="fab fa-stack-overflow fa-fw"></i></a></li>
<li class="list-inline-item"><a class="text-white" href="#"><i class="fab fa-codepen fa-fw"></i></a></li>
</ul>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-uppercase" id="navigation">
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item me-lg-3">
<a class="nav-link" href="index.html">About</a>
</li>
<li class="nav-item me-lg-3">
<a class="nav-link active" href="projects.html">Projects <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item me-lg-3">
<a class="nav-link" href="talks.html">Talks</a>
</li>
<li class="nav-item me-lg-3">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item me-lg-3">
<a class="nav-link" href="resume.html">Resume</a>
</li>
<li class="nav-item me-lg-3">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item dropdown me-0">
<a class="nav-link dropdown-toggle" href="#" id="navigationLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu dropdown-menu-right text-capitalize shadow-lg" aria-labelledby="navigationLink">
<a class="dropdown-item" href="project.html">Project Case Study (1 Column)</a>
<a class="dropdown-item" href="project-alt.html">Project Case Study (2 Columns)</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>
</ul>
<span id="slide-line"></span>
</div>
</nav>
</div>
</div>
<div class="header-intro theme-bg-primary text-white py-5">
<div class="container">
<h2 class="page-heading mb-3">Projects</h2>
<div class="page-heading-tagline">In-depth Case Studies to show you what I can offer and how I work</div>
</div>
</div>
</header>
<section class="section pt-5">
<div class="container">
<div class="text-center">
<ul id="filters" class="filters mb-5 mx-auto ps-0">
<li class="type active" data-filter="*">All</li>
<li class="type" data-filter=".angular">Angular</li>
<li class="type" data-filter=".react">React</li>
<li class="type" data-filter=".python-django">Python/Django</li>
<li class="type" data-filter=".ruby-rails">Ruby/Rails</li>
<li class="type" data-filter=".php">PHP</li>
</ul>
</div>
<div class="project-cards row mb-5 isotope">
<div class="isotope-item col-12 col-lg-4 angular python-django">
<div class="card rounded-0 border-0 shadow-sm mb-5">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/projects/project-1-thumb.jpg" alt="">
<div class="card-img-overlay overlay-logo text-center">
<div class="project-logo"><img class="img-fluid w-50" src="assets/images/logos/logo-1-inverse.svg"></div>
</div>
<a class="card-img-overlay overlay-content text-start p-lg-4" href="project.html">
<h5 class="card-title font-weight-bold">Client: Google</h5>
<p class="card-text">Project summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod...</p>
</a>
</div>
<div class="card-body pb-0">
<h4 class="card-title text-truncate text-center mb-0"><a class="text-link" href="project.html">SaaS Product</a></h4>
</div>
<div class="card-footer border-0 text-center bg-white pb-4">
<ul class="list-inline mb-0 mx-auto">
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">Angular</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill" >Django</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">MongoDB</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">HTML/CSS</span></li>
</ul>
</div>
</div>
</div>
<div class="isotope-item col-12 col-lg-4 ruby-rails">
<div class="card rounded-0 border-0 shadow-sm mb-5">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/projects/project-2-thumb.jpg" alt="">
<div class="card-img-overlay overlay-logo text-center">
<div class="project-logo"><img class="img-fluid w-50" src="assets/images/logos/logo-2-inverse.svg"></div>
</div>
<a class="card-img-overlay overlay-content text-start p-lg-4" href="project.html">
<h5 class="card-title font-weight-bold">Client: Basecamp</h5>
<p class="card-text">Project summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod...</p>
</a>
</div>
<div class="card-body pb-0">
<h4 class="card-title text-truncate text-center mb-0"><a class="text-link" href="project.html">Webapp Development</a></h4>
</div>
<div class="card-footer border-0 text-center bg-white pb-4">
<ul class="list-inline mb-0 mx-auto">
<li class="list-inline-item"><span class="badge bg-secondary badge-pill" >Rails</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">jQuery</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">PostgresSQL</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">HTML/LESS</span></li>
</ul>
</div>
</div>
</div>
<div class="isotope-item col-12 col-lg-4 react python-django">
<div class="card rounded-0 border-0 shadow-sm mb-5">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/projects/project-3-thumb.jpg" alt="">
<div class="card-img-overlay overlay-logo text-center">
<div class="project-logo"><img class="img-fluid w-50" src="assets/images/logos/logo-3-inverse.svg"></div>
</div>
<a class="card-img-overlay overlay-content text-start p-lg-4" href="project.html">
<h5 class="card-title font-weight-bold">Client: Airbnb</h5>
<p class="card-text">Project summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod...</p>
</a>
</div>
<div class="card-body pb-0">
<h4 class="card-title text-truncate text-center mb-0"><a class="text-link" href="project.html">Mobile app development</a></h4>
</div>
<div class="card-footer border-0 text-center bg-white pb-4">
<ul class="list-inline mb-0 mx-auto">
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">React</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill" >Python</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">MySQL</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">Webpack</span></li>
</ul>
</div>
</div>
</div>
<div class="isotope-item col-12 col-lg-4 react">
<div class="card rounded-0 border-0 shadow-sm mb-5">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/projects/project-4-thumb.jpg" alt="">
<div class="card-img-overlay overlay-logo text-center">
<div class="project-logo"><img class="img-fluid w-50" src="assets/images/logos/logo-4-inverse.svg"></div>
</div>
<a class="card-img-overlay overlay-content text-start p-lg-4" href="project.html">
<h5 class="card-title font-weight-bold">Client: Dropbox</h5>
<p class="card-text">Project summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod...</p>
</a>
</div>
<div class="card-body pb-0">
<h4 class="card-title text-truncate text-center mb-0"><a class="text-link" href="project.html">Internal Product</a></h4>
</div>
<div class="card-footer border-0 text-center bg-white pb-4">
<ul class="list-inline mb-0 mx-auto">
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">React</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">Flux</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">Babel</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">MongoDB</span></li>
</ul>
</div>
</div>
</div>
<div class="isotope-item col-12 col-lg-4 react php">
<div class="card rounded-0 border-0 shadow-sm mb-5">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/projects/project-5-thumb.jpg" alt="">
<div class="card-img-overlay overlay-logo text-center">
<div class="project-logo"><img class="img-fluid w-50" src="assets/images/logos/logo-5-inverse.svg"></div>
</div>
<a class="card-img-overlay overlay-content text-start p-lg-4" href="project.html">
<h5 class="card-title font-weight-bold">Client: Spotify</h5>
<p class="card-text">Project summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod...</p>
</a>
</div>
<div class="card-body pb-0">
<h4 class="card-title text-truncate text-center mb-0"><a class="text-link" href="project.html">Mobile App</a></h4>
</div>
<div class="card-footer border-0 text-center bg-white pb-4">
<ul class="list-inline mb-0 mx-auto">
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">React</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">PHP</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">MySQL</span></li>
</ul>
</div>
</div>
</div>
<div class="isotope-item col-12 col-lg-4 ruby-rails">
<div class="card rounded-0 border-0 shadow-sm mb-5">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/projects/project-6-thumb.jpg" alt="">
<div class="card-img-overlay overlay-logo text-center">
<div class="project-logo"><img class="img-fluid w-50" src="assets/images/logos/logo-6-inverse.svg"></div>
</div>
<a class="card-img-overlay overlay-content text-start p-lg-4" href="project.html">
<h5 class="card-title font-weight-bold">Client: Evernote</h5>
<p class="card-text">Project summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod...</p>
</a>
</div>
<div class="card-body pb-0">
<h4 class="card-title text-truncate text-center mb-0"><a class="text-link" href="project.html">Web App & Chrome Extension</a></h4>
</div>
<div class="card-footer border-0 text-center bg-white pb-4">
<ul class="list-inline mb-0 mx-auto">
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">JavaScript</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">Ruby</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">HTML/CSS</span></li>
</ul>
</div>
</div>
</div>
<div class="isotope-item col-12 col-lg-4 angular php">
<div class="card rounded-0 border-0 shadow-sm mb-5">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/projects/project-7-thumb.jpg" alt="">
<div class="card-img-overlay overlay-logo text-center">
<div class="project-logo"><img class="img-fluid w-50" src="assets/images/logos/logo-7-inverse.svg"></div>
</div>
<a class="card-img-overlay overlay-content text-start p-lg-4" href="project.html">
<h5 class="card-title font-weight-bold">Client: Facebook</h5>
<p class="card-text">Project summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod...</p>
</a>
</div>
<div class="card-body pb-0">
<h4 class="card-title text-truncate text-center mb-0"><a class="text-link" href="project.html">Facebook Ads Manager</a></h4>
</div>
<div class="card-footer border-0 text-center bg-white pb-4">
<ul class="list-inline mb-0 mx-auto">
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">Angular</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">PHP</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">HTML/SaSS</span></li>
</ul>
</div>
</div>
</div>
<div class="isotope-item col-12 col-lg-4 react python-django">
<div class="card rounded-0 border-0 shadow-sm mb-5">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/projects/project-8-thumb.jpg" alt="">
<div class="card-img-overlay overlay-logo text-center">
<div class="project-logo"><img class="img-fluid w-50" src="assets/images/logos/logo-8-inverse.svg"></div>
</div>
<a class="card-img-overlay overlay-content text-start p-lg-4" href="project.html">
<h5 class="card-title font-weight-bold">Client: Zendesk</h5>
<p class="card-text">Project summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod...</p>
</a>
</div>
<div class="card-body pb-0">
<h4 class="card-title text-truncate text-center mb-0"><a class="text-link" href="project.html">Mobile App Development</a></h4>
</div>
<div class="card-footer border-0 text-center bg-white pb-4">
<ul class="list-inline mb-0 mx-auto">
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">React</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">Django</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">HTML/SaSS</span></li>
</ul>
</div>
</div>
</div>
<div class="isotope-item col-12 col-lg-4 angular python-django">
<div class="card rounded-0 border-0 shadow-sm mb-5">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/projects/project-9-thumb.jpg" alt="">
<div class="card-img-overlay overlay-logo text-center">
<div class="project-logo"><img class="img-fluid w-50" src="assets/images/logos/logo-9-inverse.svg"></div>
</div>
<a class="card-img-overlay overlay-content text-start p-lg-4" href="project.html">
<h5 class="card-title font-weight-bold">Client: Coinbase</h5>
<p class="card-text">Project summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod...</p>
</a>
</div>
<div class="card-body pb-0">
<h4 class="card-title text-truncate text-center mb-0"><a class="text-link" href="project.html">App Development</a></h4>
</div>
<div class="card-footer border-0 text-center bg-white pb-4">
<ul class="list-inline mb-0 mx-auto">
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">Angular</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">Python</span></li>
<li class="list-inline-item"><span class="badge bg-secondary badge-pill">HTML/SaSS</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section py-5 bg-primary text-white">
<div class="container">
<div class="text-center">
<img class="profile-small d-inline-block mx-auto rounded-circle mb-2" src="assets/images/profile.jpg" alt="">
</div>
<h3 class="section-title font-weight-bold text-center mb-2">Interested in hiring me for your project?</h3>
<div class="section-intro mx-auto text-center mb-3">
Looking for an experienced full-stack developer to build your web app or ship your software product? To start an initial chat, just drop me an email at <a class="link-on-bg text-link" href="#">steve.doe@youremail.com</a> or use the <a class="link-on-bg text-link" href="contact.html">form on the contact page</a>.
</div>
<div class="text-center">
<a class="theme-btn-on-bg btn" href="contact.html">Let's Talk</a>
</div>
</div>
</section>
<footer class="footer text-light text-center py-2">
<small class="copyright">Template Copyright © <a class="text-light text-link" href="https://themes.3rdwavemedia.com/" target="_blank">3rd Wave Media</a></small>
</footer>
<div id="config-panel" class="config-panel config-panel-hide d-none d-lg-block">
<div class="panel-inner">
<a id="config-trigger" class="config-trigger text-center" href="#"><i class="fas fa-cog mx-auto" data-fa-transform="down-6" ></i></a>
<h5 class="panel-title">Choose Colour</h5>
<ul id="color-options" class="list-inline mb-0">
<li class="theme-1 active list-inline-item"><a data-style="assets/css/theme-1.css" href="#"></a></li>
<li class="theme-2 list-inline-item"><a data-style="assets/css/theme-2.css" href="#"></a></li>
<li class="theme-3 list-inline-item"><a data-style="assets/css/theme-3.css" href="#"></a></li>
<li class="theme-4 list-inline-item"><a data-style="assets/css/theme-4.css" href="#"></a></li>
<li class="theme-5 list-inline-item"><a data-style="assets/css/theme-5.css" href="#"></a></li>
<li class="theme-6 list-inline-item"><a data-style="assets/css/theme-6.css" href="#"></a></li>
<li class="theme-7 list-inline-item"><a data-style="assets/css/theme-7.css" href="#"></a></li>
<li class="theme-8 list-inline-item"><a data-style="assets/css/theme-8.css" href="#"></a></li>
<li class="theme-9 list-inline-item"><a data-style="assets/css/theme-9.css" href="#"></a></li>
<li class="theme-10 list-inline-item"><a data-style="assets/css/theme-10.css" href="#"></a></li>
<li class="theme-11 list-inline-item"><a data-style="assets/css/theme-11.css" href="#"></a></li>
<li class="theme-12 list-inline-item"><a data-style="assets/css/theme-12.css" href="#"></a></li>
</ul>
<a id="config-close" class="close" href="#"><i class="fa fa-times-circle"></i></a>
</div>
</div>
<script type="text/javascript" src="assets/plugins/popper.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/vanilla-back-to-top.min.js"></script>
<script type="text/javascript" src="assets/plugins/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="assets/plugins/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="assets/js/isotope-custom.js"></script>
<script src="assets/js/demo/style-switcher.js"></script>
</body>
</html>