<!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" href="projects.html">Projects</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 active" href="blog.html">Blog <span class="sr-only">(current)</span></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 position-relative">
<div class="row g-2 g-lg-3">
<div class="col-12 col-md-auto">
<img class="profile-medium d-inline-block rounded-circle me-md-4 align-self-center mb-2 mb-lg-0" src="assets/images/profile.jpg" alt="">
</div>
<div class="col align-self-center">
<h2 class="page-heading mb-2">Steve Doe's Blog</h2>
<div class="page-heading-tagline mb-3">I write about web development and life as a developer. <br class="d-lg-block d-none">You can follow me via the various channels below:</div>
<ul class="social-list-square list-inline mb-0">
<li class="list-inline-item mb-3 mb-lg-0"><a href="#"><i class="fab fa-twitter fa-fw text-white"></i></a></li>
<li class="list-inline-item mb-3 mb-lg-0"><a href="#"><i class="fab fa-linkedin-in fa-fw text-white"></i></a></li>
<li class="list-inline-item mb-3 mb-lg-0"><a href="#"><i class="fab fa-github-alt fa-fw text-white"></i></a></li>
<li class="list-inline-item mb-3 mb-lg-0"><a href="#"><i class="fab fa-stack-overflow fa-fw text-white"></i></a></li>
<li class="list-inline-item mb-3 mb-lg-0"><a href="#"><i class="fab fa-medium-m fa-fw text-white"></i></a></li>
<li class="list-inline-item mb-3 mb-lg-0"><a href="#"><i class="fab fa-codepen fa-fw text-white"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<section class="section pt-5">
<div class="container blog-cards">
<div class="row">
<div class="col-12">
<div class="featured-card d-md-table card rounded-0 border-0 shadow-sm mb-5">
<div class="featured-card-image card-img-container position-relative d-md-table-cell">
<span class="badge bg-success mb-2 position-absolute">Featured</span>
<div class="card-img-overlay overlay-mask text-center p-0">
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="featured-card-body card-body d-md-table-cell pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">How to Create an Angular Library</a></h4>
<div class="card-text">
<div class="excerpt mb-3"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
<a class="btn btn-primary d-none d-md-inline-block" href="blog-post.html">Read more</a>
</div>
</div>
<div class="card-footer border-0 d-md-none">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>June 18, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">8 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5">
<div class="card rounded-0 border-0 shadow-sm eq-height">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/blog/blog-post-thumb-2.jpg" alt="">
<div class="card-img-overlay overlay-mask text-center p-0">
<div class="overlay-mask-content text-center w-100 position-absolute">
<a class="btn btn-primary" href="blog-post.html">Read more</a>
</div>
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="card-body pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">React, Bootstrap, and Angular- The Basics</a></h4>
<div class="card-text">
<div class="excerpt"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
</div>
</div>
<div class="card-footer border-0">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>June 18, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">12 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5">
<div class="card rounded-0 border-0 shadow-sm eq-height">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/blog/blog-post-thumb-3.jpg" alt="">
<div class="card-img-overlay overlay-mask text-center p-0">
<div class="overlay-mask-content text-center w-100 position-absolute">
<a class="btn btn-primary" href="blog-post.html">Read more</a>
</div>
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="card-body pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">Best Practices for Code Review</a></h4>
<div class="card-text">
<div class="excerpt"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
</div>
</div>
<div class="card-footer border-0">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>May 7, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">23 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5">
<div class="card rounded-0 border-0 shadow-sm eq-height">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/blog/blog-post-thumb-4.jpg" alt="">
<div class="card-img-overlay overlay-mask text-center p-0">
<div class="overlay-mask-content text-center w-100 position-absolute">
<a class="btn btn-primary" href="blog-post.html">Read more</a>
</div>
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="card-body pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">Learn React Components</a></h4>
<div class="card-text">
<div class="excerpt"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
</div>
</div>
<div class="card-footer border-0">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>Apr 25, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">18 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5">
<div class="card rounded-0 border-0 shadow-sm eq-height">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/blog/blog-post-thumb-5.jpg" alt="">
<div class="card-img-overlay overlay-mask text-center p-0">
<div class="overlay-mask-content text-center w-100 position-absolute">
<a class="btn btn-primary" href="blog-post.html">Read more</a>
</div>
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="card-body pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">
A Guide to Becoming a Full-Stack Developer</a></h4>
<div class="card-text">
<div class="excerpt"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
</div>
</div>
<div class="card-footer border-0">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>Mar 15, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">21 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5">
<div class="card rounded-0 border-0 shadow-sm eq-height">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/blog/blog-post-thumb-6.jpg" alt="">
<div class="card-img-overlay overlay-mask text-center p-0">
<div class="overlay-mask-content text-center w-100 position-absolute">
<a class="btn btn-primary" href="blog-post.html">Read more</a>
</div>
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="card-body pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">
Top 10 UX Tools for Developers</a></h4>
<div class="card-text">
<div class="excerpt"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
</div>
</div>
<div class="card-footer border-0">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>Mar 7, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">12 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5">
<div class="card rounded-0 border-0 shadow-sm eq-height">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/blog/blog-post-thumb-7.jpg" alt="">
<div class="card-img-overlay overlay-mask text-center p-0">
<div class="overlay-mask-content text-center w-100 position-absolute">
<a class="btn btn-primary" href="blog-post.html">Read more</a>
</div>
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="card-body pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">
The Future of Blockchain</a></h4>
<div class="card-text">
<div class="excerpt"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
</div>
</div>
<div class="card-footer border-0">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>Feb 26, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">16 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5">
<div class="card rounded-0 border-0 shadow-sm eq-height">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/blog/blog-post-thumb-8.jpg" alt="">
<div class="card-img-overlay overlay-mask text-center p-0">
<div class="overlay-mask-content text-center w-100 position-absolute">
<a class="btn btn-primary" href="blog-post.html">Read more</a>
</div>
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="card-body pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">
Coding Challenges</a></h4>
<div class="card-text">
<div class="excerpt"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
</div>
</div>
<div class="card-footer border-0">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>Feb 21, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">7 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5">
<div class="card rounded-0 border-0 shadow-sm eq-height">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/blog/blog-post-thumb-9.jpg" alt="">
<div class="card-img-overlay overlay-mask text-center p-0">
<div class="overlay-mask-content text-center w-100 position-absolute">
<a class="btn btn-primary" href="blog-post.html">Read more</a>
</div>
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="card-body pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">
How to become a digital nomad</a></h4>
<div class="card-text">
<div class="excerpt"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
</div>
</div>
<div class="card-footer border-0">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>Feb 8, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">7 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5">
<div class="card rounded-0 border-0 shadow-sm eq-height">
<div class="card-img-container position-relative">
<img class="card-img-top rounded-0" src="assets/images/blog/blog-post-thumb-10.jpg" alt="">
<div class="card-img-overlay overlay-mask text-center p-0">
<div class="overlay-mask-content text-center w-100 position-absolute">
<a class="btn btn-primary" href="blog-post.html">Read more</a>
</div>
<a class="overlay-mask-link position-absolute w-100 h-100" href="blog-post.html"></a>
</div>
</div>
<div class="card-body pb-4">
<h4 class="card-title mb-2"><a class="text-link" href="blog-post.html">
Best Meetups for Developers in London</a></h4>
<div class="card-text">
<div class="excerpt"> Blog post intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sapien quis nulla dictum euismod. Vivamus sed mi vitae dui iaculis venenatis...</div>
</div>
</div>
<div class="card-footer border-0">
<ul class="meta list-inline mb-0">
<li class="list-inline-item me-3"><i class="far fa-clock me-2"></i>Jan 12, 2021</li>
<li class="list-inline-item"><i class="fas fa-comment me-2"></i><a class="text-link" href="#">14 Comments</a></li>
</ul>
</div>
</div>
</div>
<div class="col-12 mb-5">
<a class="btn-blog-more btn btn-primary w-100 text-white font-weight-bold">Load more posts...</a>
</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/js/main.js"></script>
<script src="assets/js/demo/style-switcher.js"></script>
</body>
</html>