Jack McKenzie Portfolio

In this example below you will see how to do a Jack McKenzie Portfolio with some HTML / CSS and Javascript

Portfolio for freecodecamp.com requirements

Thumbnail
This awesome code was written by grafixgeek, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright grafixgeek ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Jack McKenzie Portfolio</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://webgeek.nz/assets/fonts.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:400,300italic,300,100italic,100'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="row">
		<div class="background col-xs-12 col-sm-5"></div>
		<div class="col-xs-12 header">
<ul id="menu">
  <li><a href="#skills">Skill Set</a></li>
  <li><a href="#portfolio">Portfolio</a></li>
</ul>
		</div>
	</div>

	<div class="row">
		<div class="background col-xs-12 col-sm-5"></div>
		<div class="col-xs-12 header">
			<h1><span>Jack</span> McKenzie</h1>
			<h2><span>Curric</span>ulum Vitae</h2>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-xs-12 col-sm-5 left-bar toprow">
<h2>CONTACT</h2>
<p><i class="fa fa-phone"></i>027 428 4041</p>

<p><i class="fa fa-envelope"></i>P.O. Box 6024, Palmerston North</p>
<p><a target=_parent href="https://nz.linkedin.com/in/yardboy"><i class="fa fa-linkedin-square"></i>nz.linkedin.com/in/yardboy</a></p>
<p><a target=_parent href="https://instagram.com/jackmckenziedesign"><i class="fa fa-instagram"></i> instagram.com/jackmckenziedesign</a></p>
<p><a target=_parent href="https://www.facebook.com/JackMcKenziePhotography/"><i class="fa fa-facebook-square"></i> facebook/JackMcKenziePhotography</a></p>      
      
	</div>
<div class="col-xs-12 col-sm-7 right-bar toprow">
<h2>OBJECTIVE</h2>
<p>To secure contract graphic and web design and development work, with the expectation that the result works well on all
	devices, and in all environments. I bring a full stack of design,
   build and communication skills to your project. I only take on work that I know I can do well. Your satisfaction is guaranteed.</p>
</div>
</div>

	<div class="row">
		<div class="col-xs-12 col-sm-5 skillset left-bar bottomrow">
<h2 id="skills">SKILL SET</h2>
<h3><i class="fa fa-mobile"></i>Responsive Web Design</h3>
<p>My speciality is creating lightweight, fast loading responsive websites. This builds on 20 years of experience in the industry</p>

<h3><i class="fa fa-pencil-square-o"></i>Graphic Design</h3>
<p>End of second year design student with developing skills</p>

<h3><i class="fa fa-code"></i>Web Development</h3>
<p><i class="fa fa-angle-double-right"></i>HTML, CSS, JS stack<br />
<i class="fa fa-angle-double-right"></i>PHP & MySQL<br />
<i class="fa fa-angle-double-right"></i>CMS selection & set up<br />
<i class="fa fa-angle-double-right"></i>Data driven documents<br />
<i class="fa fa-angle-double-right"></i>Usability & user experience<br />
<i class="fa fa-angle-double-right"></i>Content strategy<br />
<i class="fa fa-angle-double-right"></i>Information architecture<br />
<i class="fa fa-angle-double-right"></i>Website testing<br />
<i class="fa fa-angle-double-right"></i>Standards compliance</p>

<h3><i class="fa fa-smile-o"></i>Client Facing Skills</h3>
<p>I’ve worked with sole traders and
small business all the way through to local government, universities, and large scientific research agencies</p>

<h3><i class="fa fa-chain"></i>Team and Independent work</h3>
<p>I have wide experience working as part of a team, often remotely with people I have never met,
	through to providing successful solutions on my own</p>

<h3><i class="fa fa-camera-retro"></i>Photography</h3>
<p>Studied to a professional level at UCOL. Event photography experience
including world championship sport. NZIPP Awards: 1 Silver & 2 Bronze</p>

		</div>
		<div class="col-xs-12 col-sm-7 right-bar bottomrow">

<h2>TIMELINE</h2>


<table class="table">
<tr><th></th><th width="45%"><i class="fa fa-life-bouy"></i>Experience</th><th><i class="fa fa-graduation-cap"></i>Education & Events</th></tr>
<tr>
	<td>2016-2014</td>
	<td><i class="fa fa-home"></i>Independent web designer & developer</td>
	<td><i class="fa fa-paint-brush"></i>Studying towards a Bachelor of Applied Visual Imaging, UCOL (currently two-thirds way through 2nd year, part-time)</td>
</tr>
<tr>
	<td>2013-2008</td>
	<td><i class="fa fa-home"></i>Web development contractor, working mainly for Plant & Food Research</td>
	<td><i class="fa fa-graduation-cap"></i>Certificate in Small Business Management, Te Wananga o Aotearoa</td>
</tr>
<tr>
	<td>2007-1997</td>
	<td><i class="fa fa-industry"></i>Employed at HortResearch in various roles<br />
<i class="fa fa-angle-double-right"></i>Web product manager<br />
<i class="fa fa-angle-double-right"></i>Web developer<br />
<i class="fa fa-angle-double-right"></i>IS strategist<br />
<i class="fa fa-angle-double-right"></i>Science systems manager</td>
	<td><i class="fa fa-institution"></i>Completed 2½ years
towards a B.Inf.Sc degree, Massey University
</td>
</tr>
<tr>
	<td>1997-1994</td>
	<td><i class="fa fa-flask"></i>Horticultural researcher</td>
	<td><i class="fa fa-plane"></i>Emigrated to New Zealand<br />

<i class="fa fa-desktop"></i>Built my first website</td>
</tr>
<tr>
	<td>1994-1990</td>
	<td><i class="fa fa-tree"></i>Wholesale nursery business owner & manager</td>
	<td></td>
</tr>
<tr>
	<td>1989-1985</td>
	<td></td>
	<td><i class="fa fa-graduation-cap"></i>M.Sc.Agric, University of Natal<br />
<i class="fa fa-graduation-cap"></i>B.Sc.Agric, University of Natal</td>
</tr>

</table>


<div class="col-xs-12 extras ">
	<h2>HOBBIES & INTERESTS</h2>
<i class="fa fa-camera"></i>Photography. Telling stories through a lens<br />
<i class="fa fa-bicycle"></i>Triathlon racing. 4 time New Zealand age group representative. 24 ironman-distance races completed and counting. A lifetime of achievement and satisfaction<br />
<i class="fa fa-beer"></i>Dancing. In life and on the dance floor. Mostly interested in Ceroc dancing<br />
<i class="fa fa-tree"></i>Gardening. I follow a less conventional and semi-organic approach to a healthy lifestyle<br />
<i class="fa fa-plane"></i>Overseas travel. Combines my interests in photography, triathlon and celebrating life<br />
</div>
<div class="col-xs-12 extras">
<h2>REFEREES</h2>
Referee’s contact details will be provided on request. I prefer to communicate this before asking them to donate time. 

		</div>
		</div>
	</div>
</div>
<div class="container" style="clear:both">
	<div class="row">
		<div class="col-xs-12 header portfolio">
	<h1 id="portfolio">PORTFOLIO</h2>
		</div>
	</div>
</div>


<div class="container">
	<div class="row">

		<div class="col-xs-12 col-sm-6 col-lg-4 ">
			<div class="col-xs-12 thumbnail with-caption">
			<a href="" data-toggle="modal" data-target="#myModal1"><img src="http://webgeek.nz/assets/images/rdc.jpg" class="img-responsive"></a>
			 <p>Rangitikei District Council Website (2015)			 	[<a class="modal-link" href="" data-toggle="modal" data-target="#myModal">More...</a>]</p>
			<!-- Modal -->
			<div id="myModal1" class="modal fade" role="dialog">
			  <div class="modal-dialog modal-lg">
				<!-- Modal content-->
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal">&times;</button>
			        <h4 class="modal-title">Rangitikei District Council Website (2015)</h4>
			      </div>
			      <div class="modal-body">
			        <img src="http://webgeek.nz/assets/images/rdc.jpg" class="img-responsive">
			      </div>
			      <div class="modal-footer">
			      	<p>Rangitikei District Council hired to me to implement a turnkey redesign, development and refresh of their website.
			      	   By all accounts they are very happy with the improvement, but don't take my word for it - talk to them. An increase
			      	   in sessions (>25%), page views (>50%) and a decrease of over 20% in bounce rate is testament to solid design and a
			      	   sensible approach. I am still contracted for ongoing enhancements.</p>
			      	   <a href='https://www.rangitikei.govt.nz' class='btn btn-default'>Visit RDC</a>			      </div>
			    </div>
			  </div>
			</div>
		</div>
		</div>

		<div class="col-xs-12 col-sm-6 col-lg-4 ">
			<div class="col-xs-12 thumbnail with-caption">
			<a href="" data-toggle="modal" data-target="#myModal2"><img src="http://webgeek.nz/assets/images/nzpwt.jpg" class="img-responsive"></a>
			 <p>The New Zealand Poplar & Willow Trust			 	[<a class="modal-link" href="" data-toggle="modal" data-target="#myModal">More...</a>]</p>
			<!-- Modal -->
			<div id="myModal2" class="modal fade" role="dialog">
			  <div class="modal-dialog modal-lg">
				<!-- Modal content-->
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal">&times;</button>
			        <h4 class="modal-title">The New Zealand Poplar & Willow Trust</h4>
			      </div>
			      <div class="modal-body">
			        <img src="http://webgeek.nz/assets/images/nzpwt.jpg" class="img-responsive">
			      </div>
			      <div class="modal-footer">
			      	<p>The New Zealand Poplar & Willow Trust website development and implementation was designed to house their
collection of documents, mostly in PDF format, and provide an accessible way to find the information in these documents. It would be better to
have converted all the documents to HTML, but budget does not allow for this. There is also an HTML willow identification key.</p>
			      	   <a href='http://www.poplarandwillow.org.nz/' class='btn btn-default'>Visit NZPWT</a>			      </div>
			    </div>
			  </div>
			</div>
		</div>
		</div>

		<div class="col-xs-12 col-sm-6 col-lg-4 ">
			<div class="col-xs-12 thumbnail with-caption">
			<a href="" data-toggle="modal" data-target="#myModal3"><img src="http://webgeek.nz/assets/images/pfr.jpg" class="img-responsive"></a>
			 <p>Plant & Food Research: Growing Futures			 	[<a class="modal-link" href="" data-toggle="modal" data-target="#myModal">More...</a>]</p>
			<!-- Modal -->
			<div id="myModal3" class="modal fade" role="dialog">
			  <div class="modal-dialog modal-lg">
				<!-- Modal content-->
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal">&times;</button>
			        <h4 class="modal-title">Plant & Food Research: Growing Futures</h4>
			      </div>
			      <div class="modal-body">
			        <img src="http://webgeek.nz/assets/images/pfr.jpg" class="img-responsive">
			      </div>
			      <div class="modal-footer">
			      	<p>Plant & Food Research's Growing Futures website and the company main website were designed by in-house graphic
designers, but the front end conversion and CMS implementation were all done by me. I continue to work with them developing internal and
external websites.</p>
			      	   <a href='https://www.plantandfood.co.nz/growingfutures/' class='btn btn-default'>Visit Growing Futures</a>
			      	   <a href='https://www.plantandfood.co.nz/' class='btn btn-default'>Visit Main Website</a>			      </div>
			    </div>
			  </div>
			</div>
		</div>
		</div>

		<div class="col-xs-12 col-sm-6 col-lg-4 ">
			<div class="col-xs-12 thumbnail with-caption">
			<a href="" data-toggle="modal" data-target="#myModal4"><img src="http://webgeek.nz/assets/images/ia.jpg" class="img-responsive"></a>
			 <p>Image Adventure Photographer Network			 	[<a class="modal-link" href="" data-toggle="modal" data-target="#myModal">More...</a>]</p>
			<!-- Modal -->
			<div id="myModal4" class="modal fade" role="dialog">
			  <div class="modal-dialog modal-lg">
				<!-- Modal content-->
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal">&times;</button>
			        <h4 class="modal-title">Image Adventure Photographer Network</h4>
			      </div>
			      <div class="modal-body">
			        <img src="http://webgeek.nz/assets/images/ia.jpg" class="img-responsive">
			      </div>
			      <div class="modal-footer">
			      	<p>This website was designed and developed by someone else. I include it as it is an example of a rescued
Wordpress site - I had to recover the situation after it was hacked, infected and the webhost shut the account down.
I now host the site and have been commissioned to upgrade the site to a new version with added features.</p>
			      	   <a href='http://www.image-adventure.com/' class='btn btn-default'>Visit Image Adventure</a>			      </div>
			    </div>
			  </div>
			</div>
		</div>
		</div>

		<div class="col-xs-12 col-sm-6 col-lg-4 ">
			<div class="col-xs-12 thumbnail with-caption">
			<a href="" data-toggle="modal" data-target="#myModal5"><img src="http://webgeek.nz/assets/images/ps.jpg" class="img-responsive"></a>
			 <p>Premier Seeds Limited			 	[<a class="modal-link" href="" data-toggle="modal" data-target="#myModal">More...</a>]</p>
			<!-- Modal -->
			<div id="myModal5" class="modal fade" role="dialog">
			  <div class="modal-dialog modal-lg">
				<!-- Modal content-->
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal">&times;</button>
			        <h4 class="modal-title">Premier Seeds Limited</h4>
			      </div>
			      <div class="modal-body">
			        <img src="http://webgeek.nz/assets/images/ps.jpg" class="img-responsive">
			      </div>
			      <div class="modal-footer">
			      	<p>Premier Seeds came to me after talking to a number of high profile web development companies. They are reluctant
website owners, and wanted a very simple site. The other companies kept trying to upsell them - I was able to do just what they required.</p>
			      	   <a href='https://premierseeds.co.nz/' class='btn btn-default'>Visit Premier Seeds</a>			      </div>
			    </div>
			  </div>
			</div>
		</div>
		</div>

		<div class="col-xs-12 col-sm-6 col-lg-4 ">
			<div class="col-xs-12 thumbnail with-caption">
			<a href="" data-toggle="modal" data-target="#myModal6"><img src="http://webgeek.nz/assets/images/composite.png" class="img-responsive"></a>
			 <p>Various student design projects			 	[<a class="modal-link" href="" data-toggle="modal" data-target="#myModal">More...</a>]</p>
			<!-- Modal -->
			<div id="myModal6" class="modal fade" role="dialog">
			  <div class="modal-dialog modal-lg">
				<!-- Modal content-->
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal">&times;</button>
			        <h4 class="modal-title">Various student design projects</h4>
			      </div>
			      <div class="modal-body">
			        <img src="http://webgeek.nz/assets/images/composite.png" class="img-responsive">
			      </div>
			      <div class="modal-footer">
			      	<p>These are some of the posters and logo designs I completed during my first and second year as a design student in 2014 and 2015.</p>
<a href='https://www.instagram.com/jackmckenziedesign/' class='btn btn-default'>See Instagram Account</a>			      </div>
			    </div>
			  </div>
			</div>
		</div>
		</div>

	</div>
</div>
  <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  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/grafixgeek/jack-mckenzie-portfolio-mAdJaK */
body {font-family: Lato, serif; font-size: 20px; font-weight: 300}

.background {background-color: #503b63; position: absolute; width: 455px; height: 300px}


.header { padding: 0 0 0 98px; color: #503b63; border-right: 0px solid #efefef; }
.header h2 {text-transform: uppercase; font-family: Lato, serif; font-weight: 300}
.header span {color: white;}

.left-bar {  color: #fff;  background-color: #503b63; width: 455px;}
.left-bar h3:nth-of-type(1) {margin-top: 0; }
.portfolio {margin-top: 40px;}
.portfolio {text-align: center;}
.left-bar p {vertical-align: top; margin:0 0 10px 0; line-height: 1.4; }
h2 {font-family: 'museo_slab500', sans-serif; letter-spacing: 3px; font-size: 28px; margin-bottom: 20px 0 0 0; color: #503b63; }
h3 {margin-bottom:0; margin-top: 30px; font-weight: 400;} 

.left-bar span {font-family:'FontAwesome'; color: white; font-size: 25px;  font-weight: lighter}
.skillset span {font-family:'FontAwesome'; margin-right: 10px; font-weight: lighter}
.skillset h3 span {font-size: 35px;}
.left-bar h2 {color: white;}
td, th {padding: 10px 5px; vertical-align:top;}
td {font-size: 16px }
tr:nth-of-type(odd) {background-color:#eee}

a, a:hover {color:white;}

i.fa {margin-right:5px;}

  .thumbnail.with-caption {
    display: inline-block;
    background: #fff;
    padding: 20px;
  }
  .thumbnail.with-caption p {
    margin: 0;
    padding-top: 0.5em;
    font-size: 16px;
    font-weight: normal; 
  }
  .thumbnail.with-caption small:before {
    content: '\2014 \00A0';
  }
  .thumbnail.with-caption small {
    width: 100%;
    text-align: right;
    display: inline-block;
    color: #999;
  }
.modal-link, .modal-link:hover {color: inherit;}
.modal-footer p { text-align:left; font-size: 16px; font-weight: normal; }
.extras {font-size: 18px; font-weight: 400;}
/* font sizes should viewport widths fail */
.header h1 { font-size: 100px; letter-spacing: 28px; white-space: nowrap; font-weight: 300}
.header h2 { font-size: 32px; letter-spacing: 44px; margin-top: 0; white-space: nowrap; font-weight: 100}


/* Text Viewport settings (turn off to see if styles look OK for non-supported browsers at various widths) 
*/
@media screen and (max-width: 1200px) {
	.header h1 { font-size: 8.33vw; letter-spacing: 2.33vw; }
	.header h2 { font-size: 2.67vw; letter-spacing: 3.67vw; }
	.header {padding: 0 0 0 8.17vw;}
	.container {width: 97.7vw}
	.background, .left-bar {width: 37.9vw} 
	.left-bar {font-size: 2.0vw;}
}
#menu { list-style-type:none;}
#menu li {display: inline-block; border-left: 1px solid white ; padding: 0 10px;}
#menu li:first-of-type {border: 0}

@media screen and (max-width: 768px) {
.header {background-color: #503b63; color: #fff}
.left-bar { width: 100%;  background-color: inherit; } 
.left-bar, .left-bar span, a, a:hover {color: inherit; }
.background {background-color: white;}
.left-bar {font-size: 20px }

a.modal-link img {visibility:visible;}
.left-bar h2 {color: #503b63;}
.header h2 {color: white;}
}

@media print { container {width: 700px;}
body {width: 800px} 

}


@media screen and (max-width: 1200px) {
.modal-dialog {
	width: auto;
    margin: 20px;
}

}

/*Downloaded from https://www.codeseek.co/grafixgeek/jack-mckenzie-portfolio-mAdJaK */

window.onload=resizer;
window.onresize=resizerDelay;


function resizer() {
	if( window.innerWidth > 768 ) {
	resize('toprow'); resize('bottomrow');
	}
}

function resizerDelay() {
	resizeDelay('toprow'); resizeDelay('bottomrow');
}



function resizeDelay(div) {
var col=document.getElementsByClassName(div);

for (i=0; i<col.length; i++) {

col[i].style.height="auto";

}

	window.setTimeout(resizer,20);
}

function resize(div) {

if( window.innerWidth > 768) {
var col=document.getElementsByClassName(div);
var maxLenth=0;
for (i=0; i<col.length; i++) {
var h= col[i].clientHeight;
if (h > maxLenth) { maxLenth = h;}

}
col=document.getElementsByClassName(div);
for (i=0; i<col.length; i++) {

col[i].style.height=maxLenth+"px";

}

}
}

Comments