Skip to content

Instantly share code, notes, and snippets.

@Narshe1412

Narshe1412/Manuel's Portfolio.markdown

Last active June 29, 2016 03:14
Show Gist options
  • Save Narshe1412/f02e115876ce62bf4f80 to your computer and use it in GitHub Desktop.
Save Narshe1412/f02e115876ce62bf4f80 to your computer and use it in GitHub Desktop.
Download ZIP
Manuel's Portfolio
Raw
index.html
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- 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" href="#" id="top">Manuel Colorado - Portfolio</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">
<!--<li class="active"><a href="#">Portfolio</a></li> -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Navigation <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#top">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#education" class="hidden">Education</a></li>
<li class="divider"></li>
<li><a href="#fccportfolio">FCC Projects</a></li>
<li><a href="#portfolio">Other Projects</a></li>
<li class="divider"></li>
<li><a href="#contact">Contact</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="jumbotron" id="about">
<div class="row">
<div class="col-md-4 col-md-push-8 col-xs-12">
<img class="img-circle" src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/579526_442573379092252_1137729455_n.jpg?oh=b707c7d1a41b4c623a7d281f90d3a884&oe=56E5C385&__gda__=1457604102_4e02c8d94d87751a012677dc494bbca2">
</div>
<div class="col-md-8 col-md-pull-4 col-xs-12">
<h2>Manuel Colorado</h2>
<p>
I'm a <a href="http://freecodecamp.com/" target="_blank">coder</a> in training.
</p>
<p>
Working in Frontline CS since I was 18, I decided to continue my learning from where I left off. Got my High Certificate in Computing and ICT 3 years ago but the birth of my two sons had me living in a budget. Now that I've found <a href="http://freecodecamp.com/"
target="_blank">Free Code Camp</a> I can't stop thinking in 0s and 1s.
</p>
</div>
</div>
</div>
<div class="row" id="fccportfolio">
<div class="col-md-4 thumb">
<h2 class="centered"> Portfolio website </h2>
<a href="#top">
<img class="img-responsive img-thumbnail center-block" src="http://getbootstrap.com/examples/screenshots/dashboard.jpg" alt="This portfolio.">
</a>
<p>
</p>
</div>
<div class="col-md-4 thumb">
<h2 class="centered"> Chuck Quote Machine </h2>
<a href="http://codepen.io/Narshe1412/full/NxPewx/" target="_blank">
<img class="img-responsive img-thumbnail center-block" src="http://i2.kym-cdn.com/photos/images/newsfeed/000/353/962/ede.jpg" alt="Random quote generator using jQuery and Twitter API">
</a>
<p>
</p>
</div>
<div class="col-md-4 thumb">
<h2 class="centered"> Pomodoro Clock</h2>
<a href="http://codepen.io/Narshe1412/full/PZqNep/" target="_blank">
<img class="img-responsive img-thumbnail center-block" src="http://images6.alphacoders.com/410/410958.jpg" alt="Pomodoro clock to keep track of your breaks and not miss any.">
</a>
<p>
<!-- random pictures http://lorempixel.com/400/300/technics/-->
</p>
</div>
</div>
<div class="row">
<div class="col-md-4 thumb">
<h2 class="centered">Javascript Calculator</h2>
<a href="http://codepen.io/Narshe1412/full/GoJaOo/" target="_blank">
<img class="img-responsive img-thumbnail center-block" src="https://image.freepik.com/free-psd/digital-calculator-icon_308-292935103.jpg" alt="A calculator made in Javascript language with Boostrap to support it">
</a>
<p>
</p>
</div>
<div class="col-md-4 thumb">
<h2 class="centered">Local Weather App</h2>
<a href="http://codepen.io/Narshe1412/full/YwqBya/" target="_blank">
<img class="img-responsive img-thumbnail center-block" src="https://pixabay.com/static/uploads/photo/2015/05/15/14/59/lightning-bolt-768801_960_720.jpg" alt="Get ready your umbrella ... or sunscreen. Must allow geolocation to work.">
</a>
<p>
</p>
</div>
<div class="col-md-4 thumb">
<h2 class="centered">Camper News</h2>
<a href="http://codepen.io/Narshe1412/full/MKVQGR/" target="_blank">
<img class="img-responsive img-thumbnail center-block" style="width: 80%; heigth: 80%" src="https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png" alt="News listing for FCC website using AJAX">
</a>
<p>
</p>
</div>
</div>
<div class="row">
<div class="col-md-4 hidden-xs">
<h2 class="centered"> Work in progress...</h2>
<a href="#">
<img class="img-responsive img-thumbnail center-block" src="https://placehold.it/350x250?text=Placeholder" alt="Placeholder">
</a>
<p>
<!-- random pictures http://lorempixel.com/400/300/technics/-->
</p>
</div>
<div class="col-md-4 hidden-xs">
<h2 class="centered"> Work in progress...</h2>
<a href="#">
<img class="img-responsive img-thumbnail center-block" src="https://placehold.it/350x250?text=Placeholder" alt="Placeholder">
</a>
<p>
<!-- random pictures http://lorempixel.com/400/300/technics/-->
</p>
</div>
<div class="col-md-4 hidden-xs">
<h2 class="centered"> Work in progress...</h2>
<a href="#">
<img class="img-responsive img-thumbnail center-block" src="https://placehold.it/350x250?text=Placeholder" alt="Placeholder">
</a>
<p>
<!-- random pictures http://lorempixel.com/400/300/technics/-->
</p>
</div>
</div>
<div class="jumbotron" id="contact" style="background-color: #222">
<h2 class="text-center" style="color:grey; padding-bottom: 20px">Contact me</h2>
<p> </p>
<div class="row">
<div class="col-md-3">
<button class="btn btn-block btn-primary" href="https://twitter.com/Akai1412" target="_blank"><i class="fa fa-twitter"></i> Twitter</button>
</div>
<div class="col-md-3">
<button class="btn btn-block btn-primary" href="https://ie.linkedin.com/in/manuel-colorado-25501235" target="_blank"><i class="fa fa-linkedin facebook-f"></i> LinkedIn</button>
</div>
<div class="col-md-3">
<button class="btn btn-block btn-primary" href="https://github.com/Narshe1412" target="_blank"><i class="fa fa-github"></i> GitHub</button>
</div>
<div class="col-md-3">
<button class="btn btn-block btn-primary" href="http://www.freecodecamp.com/narshe1412" target="_blank"><i class="fa fa-fire"></i> Free Code Camp</button>
</div>
</div>
</div>
</div>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Raw
style.css
body {
padding-top: 70px;
}
.img-circle {
border-radius: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
.centered {
text-align: center;
}
Raw
styles
<link href="http://bootswatch.com/spacelab/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment