Skip to content

Instantly share code, notes, and snippets.

@Domminique

Domminique/Dommy_Portfolio.markdown

Created November 21, 2015 21:14
Show Gist options
  • Save Domminique/9e3c8f3691ee99250d2f to your computer and use it in GitHub Desktop.
Save Domminique/9e3c8f3691ee99250d2f to your computer and use it in GitHub Desktop.
Download ZIP
Dommy_Portfolio
Raw
Dommy_Portfolio.markdown
Raw
index.html
<html>
</body>
</html>
<head>
<title> Dominic imbuga</title>
<meta name="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script src="js/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap-3.3.5-dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap-3.3.5-dist/css/jquery-ui.min.css">
<link rel="stylesheet" href="main.css">
<script src="vendor/bootstrap-3.3.5/js/angular.min.js"></script>zzz
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://domminique.github.io/" target="_blank">Dominic Imbuga</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header -->
<a name="home"></a>
<div class="intro-header">
<div class="bg-overlay">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Scicomax Web Design Studio</h1>
<h2>Crafted With Awesomeness </h2>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="https://twitter.com/dominicimbuga" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://github.com/Domminique" target="_blank" class="btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="https://www.linkedin.com/in/Dominic imbuga" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
<li>
<a href="http://www.thedevschool.org/" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">Dev School</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<a name="about"></a>
<div class="content-section-a">
<div class="bg-overlay2">
<div class="container">
<div class="row">
<h2 class="section-heading">Scicomax Web Design Studio.</h2>
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
</br>
<div id='accordion' class="">
<h2 class="intro-message">Profile</h2>
<div>
<p class='lead'>I'm a Dev School taught web designer, developer, co-founder and techpreneur based in Nairobi, Kenya.</br>
I'm currently part of a small web development team in an upcoming start-up, building web and mobile applications.</p>
<p class='lead'>My passion is to use technology based solutions, to help solve real world challenges.</p>
</div>
<h2>Languages and Frameworks </h2>
<div>
<p class='lead'>Javascript, HTML5, CSS3, </br> jQuery, Bootstrap3, Angular.js </br>Meteor.js, Django and Python</p>
</div>
<h2>Tools & expertise</h2>
<div>
<p class='lead'>Git, Responsive Web Design </br> Agile Methodologies.</p>
</div>
</div>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6 collapse navbar-collapse">
<img class="img-circle img-responsive" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/356006/profile/profile-80_1.jpg" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
</div>
</div>
<!-- Portfolio Grid Section -->
<a name="portfolio"></a>
<section id="portfolio" class="bg-light-gray bounds">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading"> Portfolio.</h2>
<h3 id="below-section" class="section-subheading text-muted">Below you'll find some of my recent work.</h3>
</div>
</div>
<!-- Portfolio img1 -->
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQZHNPQGA7OVlXJZnCZPFegV0NDP5FXNYHI7YG6U4EYpoRs2Fx5QQ" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Wallpapers</h4>
<p id="small-text" class="text-muted">Bootstrap and Angularjs</p>
</div>
</div>
<!-- End of Portfolio img1 -->
<!-- Portfolio img2 -->
<div class="col-md-4 col-sm-6 portfolio-item portfolio2">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSuATzwybbhzkyY-QS3ZiSENyS3S4NS5dGNPG_l67YdDqucqL656g" class="images/img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Awesome Things</h4>
<p id="small-text" class="text-muted">Bootstrap and jQuery</p>
</div>
</div>
<!-- End of Portfolio img2 -->
<!-- Portfolio img3 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR6oo4QVCuvUt6PLnum2dKseDbNTGTBlCQl2MAseXdNi3XgtjPLCw" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>MongoDB</h4>
<p id="small-text" class="text-muted">SCSS and Vanilla Javascript</p>
</div>
</div>
<!-- End of Portfolio img3 -->
<!-- Portfolio img4 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYcGHJIMz3qQLwT-POVsA7O4TUHJl0W2e0ilUjb6Wi9oJ2NIdP" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Ruby</h4>
<p id="small-text" class="text-muted">Bootstrap and Angular.js</p>
</div>
</div>
<!-- End of Portfolio img4 -->
<!-- Portfolio img5 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT5t-nYx6w_n4UKM8-U_8QJ1dZnqb4zV1lhOv0t_HEVjOmNxxH-LA" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Terrorist sniffer</h4>
<p id="small-text" class="text-muted">Bootstrap and Vanilla Javascript</p>
</div>
</div>
<!-- End of Portfolio img5 -->
<!-- Portfolio img6 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQK0p30nl8cGuMkuF34nN7dPMxpIHQGa_Jce9P9dD7y0w4AEIkW" alt="">
</a>
<div class="portfolio-caption">
<h4>Wallpaper</h4>
<p id="small-text" class="text-muted">CSS and jQuery</p>
</div>
</div>
<!-- End of Portfolio img6 -->
</div>
</div>
</section>
<a name="contact"></a>
<div class="banner">
<div class="bg-overlay4">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2 class="connect">Connect with ScicomaX Web Design Studio</br>[email protected]</h2>
<p><h2 class="connect"> +254 715 180 530 | +254 734 983 442</h2><p/>
</div>
</br>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/dominicimbuga" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://github.com/domminique" target="_blank" class="btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="https://www.linkedin.com/in/dominicimbuga" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
<li>
<a href="http://www.thedevschool.org" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">Dev School</span></a>
</li>
</ul>
</div>
</div>
<!-- /.container -->
</div>
</div>
</div>
</div>
<!--
<div class="page-header">
<h1 class="text-center"> Open Source Stuff</h1>
</div>
<div class="row" id="open-source-container">
</div>
</section>
Footer -->
<!--<section class="row text-center">
<div class="page-header ">
<h1>Angular Examples</h1>
</div> -->
<!--<div class="col-sm-6" ng-init="age=50;year=2015;">
<input type="number" ng-model="cash" placeholder="please enter your cash"/>
<input type="number" ng-model="Expenses" placeholder="please enter your Experience"/>
<h1 ng-bind="cash"></h1>KES
<h1 ng-bind="Expenses"></h1>KES
<h1>{{cash*Expenses}}</h1>
<p> My age is : {{age}}</p>
<h1>The year is :{{year}}</h1>
</div>
</section>-->
<footer>
<div class="container ">
<div class="row text-center">
<div class="col-lg-12">
<ul class="list-inline">
<li>
<a href="#">Home</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="#about">About</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<hr class="entro-divider">
<p class="copyright text-muted small">Copyright &copy; Scicomax Web Design Studio 2015 -2016 | All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<script src="vendor/bootstrap-3.3.5-dist/js/jquery-2.1.4.min.js"></script>
<script src="vendor/bootstrap-3.3.5-dist/js/jquerryui.js"></script>
<script src="vendor/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="js/jquerryuiwork.js"></script>
</body>
</html>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.logo{
height:50px;
width: 60px;
}
.topnav {
font-size: 16px;
border-bottom: 1px outset rgba(192, 192, 192, 0.5);
background: rgba(0, 192, 192, 0.9);
box-shadow: 0px 1px rgba(0, 0, 0, 0.3);
}
.topnav ul.navbar-nav li a {
background: rgba(28, 28, 28, 0.1);
color: #000;
}
.topnav ul.navbar-nav li a:hover,
.topnav ul.navbar-nav li a:focus
{
background: rgba(255, 255, 255, 0.5);
color: #000;
}
.topnav .navbar-brand {
background: rgba(28, 28, 28, 0.0);
color: #000;
}
.topnav .navbar-brand:hover,
.topnav .navbar-brand:focus {
background: rgba(255, 255, 255, 0.5);
color: #000;
}
.lead {
font-family: cursive;
margin-top: -10px;
text-shadow: 1px 1px 1px #000;
font-size: 3em;
color: rgba(255, 255, 255, 0.7);
}
/*top background*/
.intro-header {
height: 855px;
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
padding-bottom: 50px;
text-align: center;
background: url('https://splendoursofafricatours.files.wordpress.com/2015/09/nairobi-city-from-skyline.jpg') no-repeat center center fixed;
background-size: cover;
height: 855px;
}
.bg-overlay {
background:rgba(0,0,0, 0.3);
height: 855px;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
/*Big header*/
.intro-message > h1 {
margin-top: -50px;
text-shadow: 2px 1px 2px #000;
font-size: 5em;
color: rgba(255, 255, 255, 0.7);
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.entro-divider {
width: 350px;
border-top: 2px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
/*small header*/
.intro-message > h2 {
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
font-size: 3em;
color: rgba(100, 255, 255, 0.7);
}
@media(max-width:767px) {
.intro-message {
padding-bottom: 15%;
}
.intro-message > h1 {
font-size: 3em;
}
ul.intro-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.intro-social-buttons > li:last-child {
margin-bottom: 0;
}
.intro-divider {
width: 100%;
}
}
/*line*/
hr.intro-divider {
border: 1px outset rgba(255, 255, 255, 0.2);
box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
width: 100%;
}
/* social buttons */
.btn {
display: inline-block;
color: #000;
border: 2px outset rgba(1, 0, 0, 0.9);
background: #C0C0C0;
text-shadow: 1px 1px 1px rgba(0,0,0, 20);
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
letter-spacing: 1px;
transition: 0.2s;
}
.btn:hover {
color: #fff;
border: 2px outset rgba(0, 0, 0, 0.9);
background: rgba(0,0,0, 0.9);
transform:scale(1.1);
transition: 0.2s;
text-shadow: 1px 1px 1px rgba(0,0,0, 20);
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
letter-spacing: 2px;
}
/*section 2*/
.content-section-a {
padding: 50px 0;
background: url('https://roddyfox.files.wordpress.com/2015/09/img_0391.jpg') no-repeat center center fixed;
background-size: cover;
height: 855px;
}
.bg-overlay2 {
margin-top: -50px;
background: rgba(255, 255, 255, 0.2);
height: 855px;
}
/*self-taught*/
.container .link {
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 22px;
}
.container .link:hover {
color: rgb(0,0,128);
font-weight: bold;
font-size: 22.5px;
}
h2.section-heading {
margin-top: 100px;
font-size: 3em;
color: rgba(0, 0, 0, 0.9);
}
/*text*/
.content-section-a p {
font-size: 22px;
font-weight: bold;
color: #000;
}
.content-section-a p a {
color: silver;
font-weight: bold;
}
/*profile picture*/
.img-circle {
margin-top: 150px;
border: 1px outset rgba(255, 255, 255, 0.3);
box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
/* Portfolio section*/
section {
color: black;
background: url('http://2.bp.blogspot.com/-PiMoNj7YvbE/UnF4YBOYqaI/AAAAAAAAMGM/Mz46NtKpZeU/s640/giraffe-manor-hotel-nairobi-kenya-africa-safari-13.jpg') no-repeat center center scroll;
background-size: cover;
}
#below-section {
color: #000;
}
#small-text {
color: white;
}
.portfolio-item {
overflow: hidden;
padding: 7px;
color: white;
height: 308px;
}
#portfolio .portfolio-item {
margin: 0 0 15px;
right: 0;
border: 1px outset rgba(255, 255, 255, 0.6);
}
#portfolio .portfolio-item:hover {
transition: 0.5s;
box-shadow: 5px 10px 5px rgba(0,0,0,0.9);
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
max-width: 400px;
margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
background: rgba(0, 0, 0, .7);
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all ease .5s;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s,
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
position: absolute;
width: 100%;
height: 20px;
font-size: 20px;
text-align: center;
top: 50%;
margin-top: -12px;
color: #fff;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption {
max-width: 400px;
margin: 0 auto;
background-color: rgba(0,0,0, 0.8);
text-align: center;
padding: 25px;
}
#portfolio .portfolio-item .portfolio-caption h4 {
color: #fff;
text-transform: none;
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption p {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 13px;
margin: 0;
}
#portfolio * {
z-index: 2;
}
@media (min-width:767px) {
#portfolio .portfolio-item {
margin: 0 0 30px;
}
}
.col-md-4 {
overflow: hidden;
display: inline-block;
border: 1px outset rgba(255, 255, 255, 0.6);
background: rgba(0, 0, 0, 0.6);
border-radius: 1%;
text-align: center;
box-shadow: 2px 3px 2px rgba(0,0,0,0.3);
text-shadow: 1px 2px 1px rgba(0,0,0,0.3);
cursor: pointer;
}
.col-md-4:hover {
transition: 0.5s;
box-shadow: 5px 10px 5px rgba(0,0,0,0.9);
}
.section-heading-spacer {
float: left;
width: 200px;
border-top: 3px solid #e7e7e7;
}
.banner {
padding: 100px 0;
background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYcGHJIMz3qQLwT-POVsA7O4TUHJl0W2e0ilUjb6Wi9oJ2NIdP') no-repeat center center fixed;
background-size: cover;
height: 755px;
}
.bg-overlay4 {
margin-top: -100px;
padding: 100px 0;
background: rgba(255,255,255, 0.3);
height: 755px;
}
.banner ul {
margin-bottom: 0;
}
.banner-social-buttons {
float: right;
margin-top: 0;
}
@media(max-width:1199px) {
ul.banner-social-buttons {
float: left;
margin-top: 15px;
}
}
ul.banner-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.banner-social-buttons > li:last-child {
margin-bottom: 0;
}
h2.connect {
margin: 0;
color: rgba(0, 0, 0, 0.9);
}
footer {
padding: 50px 0;
background: rgba(0, 0, 0, 0.9);
}
p.copyright {
margin: 15px 0 0;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment