<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/bbrady/pen/WxqPqx?depth=everything&limit=all&order=popularity&page=3&q=single+page&show_forks=false" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style class="cp-pen-styles">body {
font-family: Roboto, sans-serif;
font-size: 16px;
color: black;
background-color: #e8e8e8;
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 7px 15px;
width: auto;
}
.navbar-default .navbar-nav>li>a {
color: #b90504;
font-weight: 600;
}
.navbar-default .navbar-nav> li> a:hover, .navbar-default .navbar-nav> li> a:focus {
color: #b90504;
}
.navbar-default .navbar-nav> .active> a, .navbar-default .navbar-nav> .active> a:hover, .navbar-default .navbar-nav> .active> a:focus {
color: white;
background-color: #b90504;
}
#home, #contact {
padding: 80px 25px;
background: url('https://raw.githubusercontent.com/bobbrady/static-assets/master/images/sailboat-on-ocean.jpg');
background-position: 50% 50%;
background-position-x: 50%;
background-position-y: 50%;
background-size: cover;
text-align: center;
}
.page-view {
min-height: 100vh;
}
.page-view h4 {
font-size: 1.6em;
margin-left: 10px;
}
.page-view h4> i {
vertical-align: middle;
}
.page-view h5 {
font-size: 1.2em;
}
.page-view a {
color: #b90504;
}
#about, #skills, #services, #portfolio {
padding-top: 50px;
}
#portfolio {
padding-bottom: 50px;
}
h1.title {
padding-top: 1.8em;
font-size: 4em;
font-family: Raleway, sans-serif;
}
.title {
font-family: Raleway, sans-serif;
}
.large-font {
font-size: 1.2em;
}
.page-title {
font-size: 2.6em;
font-family: Raleway, sans-serif;
}
.portfolio-title {
font-family: Raleway, sans-serif;
font-size: 2em;
color: #b90504;
padding-top: 30px;
padding-bottom: 10px;
}
.red {
color: #b90504;
}
.container-fluid {
padding-top: 90px;
}
#services ul, #skills ul {
width: auto;
display: inline-block;
}
#services ul>li, #skills ul>li {
text-align: left;
}
.fa-pencil, .fa-cogs, .fa-code, .fa-cubes, .fa-dashboard, .fa-certificate, .fa-flask {
font-size: 2.5em;
color: black;
}
.fa-envelope:hover, .fa-facebook:hover, .fa-github:hover, .fa-google-plus:hover, .fa-linkedin:hover, .fa-twitter:hover {
color: #777;
}
.fa-stack {
color: black;
font-size: 2em;
}
.bg-grey {
color: #333;
}
.container-fluid {
padding: 60px 50px;
}
/* Tablets */
@media (max-width: 992px) {
.navbar ul li a {
font-size: .9em;
padding-left: 0;
}
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
.navbar ul li a {
font-size: .9em;
padding-left: 0;
}
.navbar-brand>img {
height: auto;
padding: 7px 15px;
width: 200px;
}
#home, #contact {
padding: 80px 25px;
background: url('https://raw.githubusercontent.com/bobbrady/static-assets/master/images/sailboat-on-ocean.jpg');
background-position: 60% 50%;
background-position-x: 60%;
background-position-y: 50%;
background-size: cover;
text-align: center;
}
h1.title {
font-size: 1.8em;
padding-top: 1.6em;
}
h3.title {
font-size: 1.2em;
}
.container-fluid {
padding-top: 80px;
}
.fa-stack {
font-size: 1.3em;
}
}
</style></head><body>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Portfolio site of full stack web developer Bob Brady. Services available to help you create a web app from design, style, code to cloud deploy.">
<title>DigiBrady | Full Stack Web Developer | Freelance</title>
<link rel="icon" href="/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Raleway:400" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#site-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://raw.githubusercontent.com/bobbrady/static-assets/master/images/digibrady-logo.png" alt="digibrady-logo" /></a>
</div>
<div class="collapse navbar-collapse" id="site-menu">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#skills">SKILLS</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<div id="home" class="container-fluid page-view">
<div class="row">
<div class="col-sm-12">
<h1 class="title">Bob Brady</h1>
<h3 class="title">Full Stack Software Engineer</h3>
</div>
</div>
</div>
<div id="about" class="container bg-grey page-view">
<h2 class="page-title text-center red">About</h2>
<div class="row">
<div class="col-sm-4">
<img class="img-responsive center-block" src="https://raw.githubusercontent.com/bobbrady/static-assets/master/images/bob-brady-digibrady.jpg" width="300px" alt="Bob Brady AKA DigiBrady" />
</div>
<div class="col-sm-8">
<p class="large-font">
My name is Bob Brady, aka DigiBrady. I’m a full stack software engineer. This means I have a broad skill set and can give you advice ranging from the styling of your website to the JavaScript controlling the behavior of your app to administering the deployment
in the Amazon cloud. The goal of this website is to help you make well-informed decisions about your future or current websites.
</p>
<p class="large-font">
I have over 15 years of experience building web applications. I've coded with the web trinity of JavaScript, HTML, and CSS from the beginning. The software stack I have used has varied over years from Perl/CGI/Apache to PHP/Wordpress to Java/JSP/Tomcat
to NodeJS/MVC/Templates/Nginx. And the stacks keep coming out! I've recently been working with ReactJS and ES6.
</p>
<p class="large-font">
I’m a Linux expert, having both Red Hat Engineer and CompTIA Linux certifications. My expertise in Java is also verified with a Oracle Certified Professional Java SE 7 certificate. All of my skills can be brought to bear to help you understand your website
problems and available solutions.
</p>
</div>
</div>
</div>
<div id="skills" class="container text-center bg-grey page-view">
<h2 class="page-title red">Skills</h2>
<h3 class="title">How I do my work</h3>
<hr>
<div class="row">
<div class="col-sm-4">
<h4><i class="fa fa-cogs"></i> Backend</h4>
<h5><strong>Languages</strong></h5>
<ul>
<li>Javascript | NodeJS</li>
<li>Oracle Certified Java</li>
<li>Bash | SH </li>
</ul>
<h5><strong>Databases</strong></h5>
<ul>
<li>MongoDB</li>
<li>MySQL | MariaDB</li>
<li>Oracle</li>
<li>PostgreSQL</li>
</ul>
<h5><strong>API</strong></h5>
<ul>
<li>REST | SOAP</li>
<li>OAUth</li>
<li>Google</li>
</ul>
<h5><strong>Tools | Frameworks</strong></h5>
<ul>
<li>ExpressJS | Loopback</li>
<li>Spring Boot | Hibernate</li>
<li>Selenium</li>
<li>Mocha | Chai | Istanbul</li>
<li>Webpack | Gulp</li>
<li>GIT | SVN</li>
<li>Wordpress</li>
</ul>
</div>
<div class="col-sm-4">
<h4><i class="fa fa-code"></i> Frontend</h4>
<h5><strong>HTML | CSS</strong></h5>
<ul>
<li>HTML5 (+Canvas)</li>
<li>CSS3 & Responsive</li>
<li>Stylus</li>
</ul>
<h5><strong>JavaScrpt</strong></h5>
<ul>
<li>ES5 | ES6</li>
<li>Babel | ESLint</li>
<li>jQuery</li>
<li>Backbone.js</li>
<li>React | React Router</li>
<li>AngularJS</li>
</ul>
<h5><strong>Tools | Frameworks</strong></h5>
<ul>
<li>Bootstrap</li>
<li>Font Awesome | Google fonts</li>
<li>Stylus | Less</li>
<li>Jade | Pug | Handlebars</li>
<li>Gulp | Webpack</li>
</ul>
</div>
<div class="col-sm-4">
<h4><i class="fa fa-flask"></i> Other</h4>
<h5><strong>DevOps | AWS</strong></h5>
<ul>
<li>EC2 Instance Admin</li>
<li>S3 Bucket Admin</li>
<li>Cache Cluster Admin</li>
<li>Virtual Cloud Admin</li>
</ul>
<h5><strong>Linux</strong></h5>
<ul>
<li>Certified RedHat Engineer</li>
<li>Certified CompTIA Linux</li>
</ul>
<h5><strong>Tools | Frameworks</strong></h5>
<ul>
<li>Docker</li>
<li>Bamboo CI Admin</li>
</ul>
</div>
</div>
</div>
<div id="services" class="container text-center bg-grey page-view">
<h2 class="page-title red">Services</h2>
<h3 class="title">What I can do for you</h3>
<hr>
<div class="row">
<div class="col-sm-4">
<h4><i class="fa fa-cogs"></i> Backend</h4>
<h5><strong>Coding</strong></h5>
<ul>
<li>Build RESTful APIs in Node.js, Java</li>
<li>Stand-up services quickly using best practices</li>
<li>Code and integrate microservices</li>
<li>Take advantage of open source like Drools Rules Engine</li>
</ul>
<h5><strong>Data</strong></h5>
<ul>
<li>Select the best type of DB: SQL | NoSQL</li>
<li>Design the data model</li>
<li>Tune and debug DB calls</li>
</ul>
<h5><strong>Security</strong></h5>
<ul>
<li>Use Authentication/Authorization standards like OAuth</li>
<li>Configure AWS cloud firewall rules</li>
<li>System monitoring for warning signs</li>
</ul>
</div>
<div class="col-sm-4">
<h4><i class="fa fa-code"></i> Frontend</h4>
<h5><strong>Coding</strong></h5>
<ul>
<li>Use Backbone.js, AngularJS, ReactJS browser-side</li>
<li>Develop modular, object-oriented code with design patterns</li>
<li>Quality assurance with linting, tests, coverage analysis</li>
<li>Take advantage of open source like Moment or Async</li>
<li>Ability to use jQuery to meet spec</li>
</ul>
<h5><strong>Styling</strong></h5>
<ul>
<li>Layout first, then style to spec</li>
<li>Preprocessors like Stylus for less churn</li>
</ul>
</div>
<div class="col-sm-4">
<h4><i class="fa fa-flask"></i> Other</h4>
<h5><strong>Architecture | Design</strong></h5>
<ul>
<li>Work with client to identify use cases</li>
<li>Build out user stories from use cases</li>
<li>Work with client to ensure API meets spec</li>
<li>Plan microservice design up front, verify before code</li>
<li>Document architecture and design for client</li>
</ul>
<h5><strong>Amazon Web Service</strong></h5>
<ul>
<li>Create secure virtual public cloud for client</li>
<li>Create instances for microservice deployment</li>
<li>Configure 3rd party servers or load balancing</li>
</ul>
<h5><strong>Test | CI</strong></h5>
<ul>
<li>Configure CI server like Jenkins</li>
<li>Configure CI test runs after master check-in</li>
<li>Create unit, integration, UI, and load tests</li>
<li>Present CI results to client</li>
</ul>
</div>
</div>
</div>
<div id="portfolio" class="container bg-grey page-view">
<h2 class="page-title red text-center">Portfolio</h2>
<h3 class="portfolio-title text-center">XiaoBlog: MEAN stack blog engine</h3>
<br>
<div class="row">
<div class="col-sm-4">
<figure>
<img class="img-responsive" src="https://raw.githubusercontent.com/bobbrady/static-assets/master/images/xiao-blog-node-blog-engine-screen-shot.png" alt="Xiao Blog Engine Screen Shot" />
<figcaption>
<p class="large-font">
Xiao Blog Engine is an open source blogging platform built with Node.js, MongoDB, and Bootstrap. It is designed to be easy-to-use, responsive, and lightning fast.
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="https://raw.githubusercontent.com/bobbrady/static-assets/master/images/xiao-node-js-blog-engine-responsive-design.jpg" alt="Xiao Blog Engine Responsive Design" />
<figcaption>
<p class="large-font">
Xiao Node.js has a responsive design, shown here rendered on a mobile device.
</p>
</figcaption>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="https://raw.githubusercontent.com/bobbrady/static-assets/master/images/node-js-mvc-design-pattern-xiao-blog.jpg" alt="Xiao Blog NodeJS MVC Design Pattern" />
<figcaption>
<p class="large-font">
Xiao Node.js architecture utilizes a JavaScript MVC pattern and MongoDB modeling with Mongoose JS.
</p>
</figcaption>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<p class="large-font">
Xiao Blog Engine many more features available, details are given in the Features section at the live demo site: <a href="http://xiaoblog.digibrady.com" target="_blank">xioablog.digibrady.com</a>. Source code for Xiao blog engine can be found
on the GitHub repo: <a href="https://github.com/bobbrady/node.js-blog-engine" target="_blank">nodejs-blog-engine</a>
</p>
</div>
</div>
<h3 class="portfolio-title text-center">Sharp Reporter: a Responsive Bootstrap Theme</h3>
<div class="row">
<div class="col-sm-offset-2 col-sm-4">
<figure>
<img class="img-responsive" src="https://raw.githubusercontent.com/bobbrady/static-assets/master/images/sharp-reporter-bootstrap-responsive-theme-on-laptop.jpg" alt="Sharp Reporter Bootstrap Responsive Theme on a Laptop" />
<figcaption class="large-font">
Sharp Reporter is a clean, minimalist design suitable for blogging.
</figcaption>
</figure>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="https://raw.githubusercontent.com/bobbrady/static-assets/master/images/sharp-reporter-bootstrap-responsive-theme-mobile-device-on-the-street.jpg" alt="Sharp Reporter Bootstrap Responsive Theme on a Mobile Device" />
<figcaption class="large-font">
Sharp Reporter on-the-street beat with a responsive design for mobile devices.
</figcaption>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<p class="large-font">
A live demo of the template can be seen at <a href="http://www.digibrady.com/portfolio/bootstrap-responsive-theme-sharpreporter.html" target="_blank">www.digibrady.com</a> The Sharp Reporter source code is freely available at the GitHub repo:
<a href="https://github.com/bobbrady/sharp-reporter" target="_blank">sharp-reporter</a>.
</p>
</div>
</div>
</div>
<div id="contact" class="container-fluid text-center bg-grey page-view">
<h2 class="page-title red">Contact</h2>
<h3 class="title">Feel free to reach out to me</h3>
<div class="row">
<div class="col-sm-12">
<ul class="list-inline">
<li>
<a href="https://twitter.com/digitalbrady" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/bobbrady" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</span>
</a>
</li>
<li>
<a href="https://github.com/bobbrady" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script >
$(document).ready(function() {
// Fix for "hamburger menu" not collapsing after a click on menu item
$("nav").find("li").on("click", "a", function() {
$('.navbar-collapse.in').collapse('hide');
});
// Add smooth scrolling to all nav links
$(".navbar a, footer a[href='#home']").on('click', function(event) {
// Don't scroll if on a mobile phone, it's too awkward
if (this.hash !== "" && $(window).width() > 480) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Scroll to hash tag in 700 ms
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 700, function() {
// Add hash (#) to URL when done scrolling
window.location.hash = hash;
});
}
});
});
//# sourceURL=pen.js
</script>
</body></html>
