Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save cmac4603/09357f92a217a106cd2f to your computer and use it in GitHub Desktop.
Save cmac4603/09357f92a217a106cd2f to your computer and use it in GitHub Desktop.
fCC: Build a Personal Portfolio Webpage

fCC: Build a Personal Portfolio Webpage

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/VemmoX/.
Rule #1: Don't look at the example project's code. Figure it out for yourself.
Rule #2: Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.
User Story: I can access all of the portfolio webpage's content just by scrolling.
User Story: I can click different buttons that will take me to the portfolio creator's different social media pages.
User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)
User Story: I navigate to different sections of the webpage by clicking buttons in the navigation.
Don't worry if you don't have anything to showcase on your portfolio yet - you will build several apps on the next few CodePen challenges, and can come back and update your portfolio later.
There are many great portfolio templates out there, but for this challenge, you'll need to build a portfolio page yourself. Using Bootstrap will make this much easier for you.
Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <a target='_blank'>.
Remember to use Read-Search-Ask if you get stuck.
When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. 
You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook).

A Pen by Colin MacRae on CodePen.

License.

<body>
<!-- NAVIGATION FIXED HEADER -->
<div class="navbar navbar-default navbar-fixed-top topnav" id="header-nav">
<div class="container topnav">
<ul class="pull-left nav nav-pills">
<li><a href="https://github.com/cmac4603">Colin MacRae</a><li>
</ul>
<ul class="pull-right nav nav-tabs" id="links">
<li><a href="#">Home</a></li>
<li><a href="#about">About me</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<!-- JUMBOTRON & SOCIAL LINKS -->
<div class="jumbotron">
<div class="container">
<h1 class="center-block">Colin MacRae</h1>
<h3>Wanna-be Full Stack Developer!</h3>
</div>
<div id="btn-container" class="container">
<a class="btn btn-default" href="https://twitter.com/col_macRae"><i class="fa fa-twitter-square"></i>Twitter</a>
<a class="btn btn-default" href="https://github.com/cmac4603"><i class="fa fa-github-square"></i>GitHub</a>
<a class="btn btn-default" href="https://uk.linkedin.com/in/colin-macrae-2767b659"><i class="fa fa-linkedin-square"></i>Linkedin</a>
<a class="btn btn-default" href="https://www.freecodecamp.com/cmac4603"><i class="fa fa-fire"></i>freeCodeCamp</a>
</div>
</div>
<!-- BREAK & ANCHOR LINK POINT -->
<div class="break">
<div class="container">
</div>
<a name="about"></a>
</div>
<!-- ABOUT ME SECTION -->
<div class="about">
<div="container">
<div class="row">
<div id="me" class="col-xs-7 col-md-7">
<h2>About me</h2>
<p>Experienced electrical and mechanical engineer with a passion for coding and track record of delivering innovative projects. A fast learner, keen to gain more experience in coding and contribute skills gained from the engineering sector to start a new career in web development.</p>
<p>I enjoy playing around with new technologies, lately having worked on a small home project that uses a touchscreen IoT app to control lighting in the home, play music, get local weather information from an API, and more; transporting data using Twisted Reactors and the Kivy framework the app is built upon.</p>
</div>
<div class="col-xs-5 col-md-5">
<h3>Languages & Frameworks</h3>
<ul id="langlist">
<li>HTML5 & CSS3</li>
<li>jQuery</li>
<li>Python 2 & 3 (including various packages from PyPI & API Python module wrappers)</li>
<li>Django framework</li>
<li>RESTful APIs (such as <a href="https://api.github.com">GitHubs V3 API</a>)</li>
<li>Javascript</li>
<li>SQLite Relational Databases</li>
<li>Github https://github.com/cmac4603/</li>
<li>Kivy framework</li>
<li>Twisted Reactors</li>
<li>“Programming Foundations with Python: Learn Object-Orientated Programming” from Udacity,
Unverified (programming notes at this <a href="https://github.com/cmac4603/Udacity_Python_Intro_Course">GitHub repo</a>)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- BREAK & ANCHOR LINK POINTS -->
<div class="break">
<div class="container">
</div>
<a name="portfolio"></a>
</div>
<!-- PORTFOLIO OF PROJECTS SECTION -->
<div class="portfolio">
<div class="container">
<h2>Portfolio</h2>
<div class="row">
<div class="col-md-4">
<a class="thumbnail slide" href="https://github.com/cmac4603/CodecademyPRO---HTML-CSS-Projects">
<div class="caption">
<i class="fa fa-github-square"></i>
<p>HTML/CSS GitHub Repo</p>
</div>
<img id="port1" src="http://res.cloudinary.com/cmac4603/image/upload/c_scale,h_300,w_300/v1456862937/html_css_gitscreen_ib2wmd.jpg"/>
</a>
</div>
<div class="col-md-4" id="port2">
<a class="thumbnail slide" href="http://www.belgen.co.uk">
<div class="caption">
<i class="fa fa-wifi"></i>
<p>BelGen IoT Project</p>
</div>
<img src="http://res.cloudinary.com/cmac4603/image/upload/c_scale,h_300,w_300/v1456862945/IMAG0906_uhmvkr.jpg"/>
</a>
</div>
<div class="col-md-4" id="port3">
<a class="thumbnail slide" href="http://colinmacrae.pythonanywhere.com/django-oscar/">
<div class="caption">
<i class="fa fa-list"></i>
<p>Django GitHub-API WebApp</p>
</div>
<img src="http://res.cloudinary.com/cmac4603/image/upload/c_scale,h_300,w_300/v1456862892/django-oscar_screen_j4kgot.jpg"/>
</a>
</div>
</div>
</div>
</div>
<!-- FOOTER & CONTACT SECTION -->
<div class="footer">
<a name="contact"></a>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-6">
<address>
<strong>Colin MacRae</strong><br>
Hoxton, London, N1 UK<br>
<p>(+44) 7793 242201</p>
<a href="mailto:colin@macrae.me">colin@macrae.me</a>
</address>
</div>
<div class="col-xs-6 col-md-6">
<p id="copyr">&copy 2016 Colin MacRae</p>
</div>
</div>
</div>
</div>
</body>
$(document).ready(function() {
$('.slide').hover(
function(){
$(".caption").css({'height': ($(".thumbnail").height()+'px')});
$(".caption").css({'width':($(".thumbnail").width()+'px')});
$(this).find('.caption').slideDown(750);
},
function(){
$(this).find('.caption').slideUp(750);
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
html,
body {
margin: 0;
padding: 0;
font-weight: 200;
font-family: "Ubuntu";
}
/* NAVIGATION HEADER */
#header-nav {
background-color: #000000;
padding: 10px 0;
}
#header-nav #myname {
padding-top: 10px;
}
#header-nav li > a {
color: #FFFFFF;
border-radius: 0;
border-bottom: 1px solid #FFFFFF;
}
#header-nav li > a:hover {
color: red;
border-bottom: 1px solid red;
}
/* JUMBOTRON WITH FIXED BACKGROUND & SOCIAL LINKS */
.jumbotron {
height: 540px;
background: url(http://res.cloudinary.com/cmac4603/image/upload/v1456862973/IMAG0901_BURST001_1_xyh6pd.jpg) no-repeat center center fixed;
background-size: cover;
color: #FFFFFF;
text-align: center;
margin-bottom: 0;
}
.jumbotron h1,
.jumbotron h3 {
text-shadow: 2px 2px 2px #808080;
}
h1 {
padding-top: 100px;
}
#btn-container {
padding-top: 20px;
}
#btn-container a {
margin: 5px 10px;
font-size: 20px;
background-color: #000000;
border-radius: 0;
color: #FFFFFF;
text-shadow: 0;
border: none;
border-bottom: 1px solid #FFFFFF;
}
#btn-container a:hover {
color: red;
background-color: #EEEEEE;
border-bottom: 1px solid red;
}
i {
padding-right: 4px;
}
/* SECTIONS */
.break {
height: 60px;
margin: 0;
background-color: #000000;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
/* ABOUT SECTION */
.about p {
font-size: 18px;
}
.row {
margin: 0;
}
.about .col-md-7 {
padding: 2.5% 3%;
border-right: 1px solid #EEEEEE;
}
.about .col-md-5 {
padding: 2.6% 3%;
}
.about h3 {
padding-right: 20px;
}
.about h2 {
padding: 10px 0;
}
/* PORTFOLIO SECTION */
.portfolio h2 {
text-align: center;
margin: 20px 0;
}
.portfolio {
padding-bottom: 50px;
}
.thumbnail img{
height: 300px;
width: 300px;
}
/* CAPTION SHOWS WITH jQUERY HOVER */
.caption {
display: none;
position: absolute;
text-align: center;
color: #FFFFFF !important;
font-size: 64px;
background-color: rgba(0,0,0,.7);
}
.caption p {
font-size: 14px;
line-height: 60px;
}
/* FOOTER SECTION */
.footer {
background-color: #000000;
color: #FFFFFF;
height: 160px;
padding: 30px;
}
#copyr {
text-align: right;
padding-top: 30px;
}
@media (max-width: 835px) {
.about #me p {
font-size: 16px;
}
.about #langlist li {
font-size: 11px;
}
.about h3 {
font-size: 16px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Ubuntu" 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