<!-- Portfolio page for freeCodeCamp
Must be able to:
1) Access entire page content just by scrolling.
-> using fixed height sections to allow scrolling and implement data-scroll
2) Clickable buttons that take visitors to social media pages (gitHub, linkedin, freecodecamp - don't want a link to facebook so leave that out)
-> They want buttons, so they get buttons. But typically links would be simpler and work just as well.
3) Thumbnail images of different projects (or placeholder images). Currently just have the tribute page and this page.
-> Using iframes to provide realtime previews of the webpages
-> Overlaying div's embedded in links so that iframe is clickable
4) Navigation bar with links that scroll to different parts in the page. Fixed bar on top or side.
-> Bootstrap framework using navbar and data-spy
TODO: Cleanup code; update and add pages; improve things a bit...
-->
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation" style="min-width:400px">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Philip's portfolio</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
<div class="navbar-right row" style="position:absolute; top:0px; right:0px">
<div class="col-xs-4">
<button id="btn-github" type="button" class="btn btn-primary btn-block" style="height:50px" title="Click to go to my GitHub profile"><img class="img-responsive center-block" src="https://github.com/philipmey/freeCodeCamp/blob/master/GitHub-Mark-Light-32px.png?raw=true" alt="Link to my GitHub profile"/></button>
</div>
<div class="col-xs-4">
<button id="btn-linkedin" type="button" class="btn btn-primary btn-block" style="height:50px" title="Click to go to my LinkedIn profile"><img class="img-responsive center-block" src="https://github.com/philipmey/freeCodeCamp/blob/master/In-2C-34px-R.png?raw=true" alt="Link to my LinkedIn profile"/></button>
</div>
<div class="col-xs-4">
<button id="btn-freecodecamp" type="button" class="btn btn-primary btn-block" style="height:50px" title="Click to go to my FreeCodeCamp profile"><img class="img-responsive center-block" src="https://github.com/FreeCodeCamp/assets/blob/master/Logos%20and%20Covers/fcc-app-icon.png?raw=true" style="height:32px" alt="Link to my FreeCodeCamp profile" /></button>
</div>
</div>
</nav>
<div id="container">
<div id="home" class="page-section row">
<div class="col-xs-12">
<h1>Home</h1>
<h4 class="text-primary">Hello and welcome...</h4>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-8"><img class="img-responsive" src="https://github.com/philipmey/freeCodeCamp/blob/master/antarctica.jpg?raw=true" alt="A picture of me when I was in Antarctica" width="500px" style="border-radius:5%" /></div>
</div>
<div class="col-xs-2"></div>
</div>
<div id="about" class="page-section row">
<div class="col-xs-2">
</div>
<div class="col-xs-6">
<h1>About</h1>
<h4 class="text-primary">A little bit of information about myself...</h4>
<p>I am an electronic (mostly) engineer sharpening up on my web development skills - hence the CodePen websites and following of FreeCodeCamp.</p>
<p>I am currently working as a project manager, so my time is not always my own and there is likely to be frequent gaps in my web development activity when my "real-world" job needs more attention.</p>
</div>
</div>
<div id="projects" class="page-section">
<div class="row">
<div class="col-xs-12">
<h1>Projects</h1>
<h4 class="text-primary">Here is a list of the projects (webpages) I have done so far. Click on the thumbnails to open a new window/tab to the relevant page.</h4>
</div>
</div>
<div class="row">
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/YWOkzw" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/YWOkzw" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>Simon says... Features 20 levels with increasing speed and an optional strict mode. Basic sequencing (asynchronous requests) performed. But need to look more into jQuery Deferred.</p>
</div>
</div> <!-- Thumbnail page-->
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/jAYOvW" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/jAYOvW" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>An unbeatable game of Tic Tac Toe for FreeCodeCamp. Some algorithm scripting.</p>
</div>
</div> <!-- Thumbnail page-->
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/yJPgza" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/yJPgza" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>A Pomodora clock for FreeCodeCamp exercise.</p>
</div>
</div> <!-- Thumbnail page-->
</div>
<div class="row">
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/YWAKvL" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/YWAKvL" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>A simple javascript calculator.</p>
</div>
</div> <!-- Thumbnail page-->
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/NrpoOd" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/NrpoOd" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>Interfacing with the TwitchTV API. I personally do not like the TwitchTV API capabilities and therefore implemented minimum functionality.</p>
</div>
</div> <!-- Thumbnail page-->
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/dXNGBr" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/dXNGBr" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>A wikipedia article search page. You can search for a word or phrase and get a short description and a link to the full article.</p>
</div>
</div> <!-- Thumbnail page-->
</div> <!-- Row -->
<div class='row'>
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/pbNzyL" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/pbNzyL" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>My local weather page for freeCodeCamp. Accesses to API's (weather and location) and delivers local weather based on the user's IP. Because of safety features with Google Chrome, the navigator.geolocation does not work with an HTTP page, but HTTPS is not catered for by the API's I used.</p>
</div>
</div> <!-- Thumbnail page-->
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/vKKwpm" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/vKKwpm" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>My Random Quotes page for freeCodeCamp. Uses some animation (and edited animation) effects, a tweet button as well as JSONP across websites.</p>
</div>
</div> <!-- Thumbnail page-->
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/OXMZoz" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/OXMZoz" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>This is a thumbnail of the page you are currently viewing. It mostly covers the bootstrap navbar and overlaying clickable divisions on top of iframes.</p>
</div>
</div> <!-- Thumbnail page-->
</div> <!-- Row -->
<div class="row">
<!-- Thumbnail page-->
<div class="col-xs-4 thumbnail-clickable">
<iframe class="thumbnail" src="https://codepen.io/philipM/full/WwaaaM" frameborder="0"></iframe>
<!-- Create a div which is encapsulated in a link. i.e. Place an "invisible" div over the iframe to make the entire iframe clickable. The iframe provides a realtime preview of whatever webpage -->
<a href="https://codepen.io/philipM/full/WwaaaM" target="_blank">
<div class="link-overlay"></div>
</a>
<div class="description-overlay">
<p>My tribute page to Mr Money Mustache. It was the first page I made in FreeCodeCamp and features clickable links.</p>
</div>
</div> <!-- Thumbnail page-->
</div>
</div>
</div>
</body>
.navbar-collapse.collapse{
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
body {
background-color:silver;
}
h1 {
color:black;
}
#about {
background-color: #F5F5F5;
height:350px;
}
#home {
background-color: orange;
}
#projects {
background-color: silver;
}
#btn-github:hover {
background-color: black;
border-color: black;
}
#btn-linkedin:hover {
background-color: black;
border-color: black;
}
#btn-freecodecamp:hover {
background-color: black;
border-color:black;
}
.link-overlay{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
display:block;
z-index:5;
}
.description-overlay{
width:320px;
position:absolute;
top:250px;
left:20;
display:block;
z-index:4;
background-color:#DBDBDB;
}
.thumbnail-clickable
{
overflow: hidden;
background-color:silver;
width:340px;
height:400px;
margin:5px;
}
.thumbnail{
-ms-zoom: 0.4;
-moz-transform: scale(0.4);
-moz-transform-origin: 0 0;
-o-transform: scale(0.4);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.4);
-webkit-transform-origin: 0 0;
width:800px;
height:600px;
position:relative;
overflow:hidden;
z-index:1;
}
.page-section {
height: 1000px;
padding-top: 50px;
}
$(document).ready(function(){
// Code to open github profile page
$("#btn-github").click(function(){
window.open('https://github.com/philipmey')
});
// Code to open linkedIn profile page
$("#btn-linkedin").click(function(){
window.open('https://za.linkedin.com/in/philip-mey-825447104')
});
// Code to open freecodecamp profile page
$("#btn-freecodecamp").click(function(){
window.open('https://www.freecodecamp.com/fccf0d44b75')
});
});
