Skip to content

Instantly share code, notes, and snippets.

@painejake
Created September 24, 2013 10:35
Show Gist options
  • Save painejake/6682998 to your computer and use it in GitHub Desktop.
Save painejake/6682998 to your computer and use it in GitHub Desktop.
Without permalinks
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<title>Portfolio Items | Jake Paine</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="alternate" type="application/rss+xml" title="Jake Paine RSS Feed" href="http://jakepaine.co.uk/?feed=rss2" />
<link rel="pingback" href="http://jakepaine.co.uk/xmlrpc.php" />
<link rel="apple-touch-icon" href="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/img/apple-touch.png" />
<link rel="icon" type="image/png" href="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/img/apple-touch.png" />
<link rel="stylesheet" href="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/css/normalize.css">
<link rel="stylesheet" href="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/css/main.css">
<link rel="stylesheet" href="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/css/portfolio.css">
<link rel="stylesheet" href="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/css/meanmenu.css">
<script src="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/js/vendor/modernizr-2.6.2.min.js"></script>
<link rel="alternate" type="application/rss+xml" title="Jake Paine &raquo; Portfolio Comments Feed" href="http://jakepaine.co.uk/?feed=rss2&#038;page_id=9" />
<link rel='stylesheet' id='contact-form-7-css' href='http://jakepaine.co.uk/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.5.2' type='text/css' media='all' />
<script type='text/javascript' src='http://jakepaine.co.uk/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://jakepaine.co.uk/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jakepaine.co.uk/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jakepaine.co.uk/wp-includes/wlwmanifest.xml" />
<link rel='prev' title='Blog' href='http://jakepaine.co.uk/' />
<meta name="generator" content="WordPress 3.6.1" />
<link rel='canonical' href='http://jakepaine.co.uk/?page_id=9' />
<!-- platinum seo pack 1.3.8 -->
<meta name="robots" content="index,follow,noodp,noydir" />
<link rel="canonical" href="http://jakepaine.co.uk/?page_id=9" />
<!-- /platinum one seo pack -->
<style type="text/css" id="syntaxhighlighteranchor"></style>
<!-- Google Analytics Tracking by Google Analyticator 6.4.5: http://ronaldheft.com/code/analyticator/ -->
<!-- Tracking code is hidden, since the settings specify not to track admins. Tracking is occurring for non-admins. -->
</head>
<body>
<!--[if lte IE 8]>
<div style='clear: both; height: 112px; padding:0; position: fixed; z-index:99999;'><a href="http://www.theie8countdown.com/ie-users-info"><img src="http://www.theie8countdown.com/assets/badge_iecountdown.png" border="0" height="112" width="348" alt="" /></a></div>
<![endif]-->
<header>
<nav class="fixed-header">
<div class="menu"><ul><li class="page_item page-item-7"><a href="http://jakepaine.co.uk/">Blog</a></li><li class="page_item page-item-177"><a href="http://jakepaine.co.uk/?page_id=177">About</a></li><li class="page_item page-item-9 current_page_item"><a href="http://jakepaine.co.uk/?page_id=9">Portfolio</a></li><li class="page_item page-item-178"><a href="http://jakepaine.co.uk/?page_id=178">Contact</a></li></ul></div>
</nav>
</header>
<div class="mobile-logo">Jake Paine</div>
<div class="search">
<form method="get" id="search_box" action="http://jakepaine.co.uk/">
<input type="text" name="s" class="search-skin" placeholder="Search..." />
<input value="" type="submit" id="submit" class="search-button" />
</form>
</div>
<section class="showcase" data-speed="3" data-type="background">
<div class="social-wrap">
<ul class="social">
<li class="twitter" data-speed="3" data-type="background">
<a href="https://twitter.com/painejake"><strong>Twitter</strong></a>
</li>
<li class="facebook">
<a href="https://www.facebook.com/HungDrawnQuartered"><strong>Facebook</strong></a>
</li>
<li class="linkedin">
<a href="http://www.linkedin.com/in/painejake"><strong>LinkedIn</strong></a>
</li>
<li class="github">
<a href="https://github.com/painejake"><strong>Github</strong></a>
</li>
<li class="lastfm">
<a href="www.last.fm/user/jakepaine"><strong>Last.FM</strong></a>
</li>
<li class="instagram">
<a href="http://instagram.com/painejake#"><strong>Instagram</strong></a>
</li>
<li class="foursquare">
<a href="https://foursquare.com/painejake"><strong>Foursquare</strong></a>
</li>
</ul>
</div>
<div>
<h3 class="logo">Jake Paine</h3>
</div>
</section>
<div class="main-content">
<section class="wrap">
<h1>Portfolio</h1>
<div class="portfolio">
<div class="portfolio-item">
<div class="view view-sixth" style="margin-bottom:30px">
<img width="450" height="240" src="http://jakepaine.co.uk/wp-content/uploads/2013/09/fairfax-signage-450x240.jpg" class="attachment-portfolio-thumb wp-post-image" alt="Fairfax Digital Signage" /> <div class="mask">
<h2>Fairfax Digital Signage</h2>
<p>Fairfax wanted a custom digital sigange application created for display information on TV&#8217;s around the school. The application was designed by the designer and passed onto myself who then developed the front end and back end using Code Igniter. The site makes high use of CSS3 and jQuery with the Twitter and BBC API.</p>
</div>
</div>
<!--<a href="" class="button-portfolio">View Website</a>-->
</div>
<div class="push-bottom"></div>
<div class="portfolio-item">
<div class="view view-sixth" style="margin-bottom:30px">
<img width="450" height="240" src="http://jakepaine.co.uk/wp-content/uploads/2013/09/frappuchino-450x240.jpg" class="attachment-portfolio-thumb wp-post-image" alt="Frappuchino" /> <div class="mask">
<h2>Frappuchino</h2>
<p>Frappuchino is an app I created for fun using Code Igniter. It displays 1 free app a day from the app store. This site is fully responsive and optimized for offline use on iOS devices. It makes high use of HTML5 and CSS3 media queries with a custom CI backend.</p>
</div>
</div>
<!--<a href="" class="button-portfolio">View Website</a>-->
</div>
<div class="push-bottom"></div>
<div class="portfolio-item">
<div class="view view-sixth" style="margin-bottom:30px">
<img width="450" height="240" src="http://jakepaine.co.uk/wp-content/uploads/2013/04/sianatlanta1.jpg" class="attachment-portfolio-thumb wp-post-image" alt="Sian Atlanta Portfolio" /> <div class="mask">
<h2>Sian Atlanta Portfolio</h2>
<p>Sian Atlanta is an up and coming artist and graphics designer. She required a blog/website to showcase her content. The site was designed by Sian and coded by me using Wordpress as a base. The portfolio custom page template is entirely custom built using advanced CSS3 animations.</p>
</div>
</div>
<!--<a href="" class="button-portfolio">View Website</a>-->
</div>
<div class="push-bottom"></div>
<div class="portfolio-item">
<div class="view view-sixth" style="margin-bottom:30px">
<img width="450" height="240" src="http://jakepaine.co.uk/wp-content/uploads/2013/04/facebookapp1.jpg" class="attachment-portfolio-thumb wp-post-image" alt="Fairfax Facebook App" /> <div class="mask">
<h2>Fairfax Facbook App</h2>
<p>Fairfax School wanted to get their students more engaged with Facebook. A Facebook app was created which allowed the students to take a 15 question quiz after liking the School page, then share their results on Facebook and Twitter after. This promoted the app as well as the school. The app was written using PHP and the Facebook API.</p>
</div>
</div>
<!--<a href="" class="button-portfolio">View Website</a>-->
</div>
<div class="push-bottom"></div>
<div class="portfolio-item">
<div class="view view-sixth" style="margin-bottom:30px">
<img width="450" height="240" src="http://jakepaine.co.uk/wp-content/uploads/2013/04/fairfaxoptions1.jpg" class="attachment-portfolio-thumb wp-post-image" alt="Fairfax Options Minisite" /> <div class="mask">
<h2>Fairfax Options</h2>
<p>Fairfax School wanted to move paper GCSE options choices to a web based solution. The entire site makes very high usage of HTML5 for mobile optimization and jQuery for full validation and scrolling animations, using Google Forms to log the students choices. The data is exportable to CSV or XLS format.</p>
</div>
</div>
<!--<a href="" class="button-portfolio">View Website</a>-->
</div>
<div class="push-bottom"></div>
<div class="portfolio-item">
<div class="view view-sixth" style="margin-bottom:30px">
<img width="450" height="240" src="http://jakepaine.co.uk/wp-content/uploads/2013/04/subculture1.jpg" class="attachment-portfolio-thumb wp-post-image" alt="Subculture Forum" /> <div class="mask">
<h2>Subculture Forum</h2>
<p>Subculture is an Aion gaming guild who required a forum theme creating for the Vanilla forum software as a means of keeping in contact out of the game. The theme was created using XHTML and CSS2 with jQuery.</p>
</div>
</div>
<!--<a href="" class="button-portfolio">View Website</a>-->
</div>
<div class="push-bottom"></div>
</div>
</section>
</div>
<footer class="footer clearfix">
<div class="widget1">
<div> <h4>Recent Posts</h4> <ul>
<li>
<a href="http://jakepaine.co.uk/?p=150" title="Increase WordPress Performance">Increase WordPress Performance</a>
</li>
<li>
<a href="http://jakepaine.co.uk/?p=103" title="CSS3 rotating hover animations">CSS3 rotating hover animations</a>
</li>
<li>
<a href="http://jakepaine.co.uk/?p=80" title="Creating a CSS3 Polaroid effect">Creating a CSS3 Polaroid effect</a>
</li>
<li>
<a href="http://jakepaine.co.uk/?p=70" title="Simple Staff List Plugin">Simple Staff List Plugin</a>
</li>
<li>
<a href="http://jakepaine.co.uk/?p=30" title="Brecon Beaons hiking trip">Brecon Beaons hiking trip</a>
</li>
</ul>
</div> </div>
<div class="widget2">
<div><h4>Hey! Woah wait!</h4> <div class="textwidget">Why don't you drop me a line! For work, regarding content on my blog, just to say hi? Or add me on one of the social networks above including my bands Facebook!
<br/><br/>
Protip: Try using the keyboard arrows!<br/><br/>
<a class="button" href="contact">Contact</a></div>
</div> </div>
<div class="widget3">
<div><h4>Tags</h4><div class="tagcloud"><a href='http://jakepaine.co.uk/?tag=animation' class='tag-link-3' title='1 topic' style='font-size: 8pt;'>Animation</a>
<a href='http://jakepaine.co.uk/?tag=brecon-beaon' class='tag-link-4' title='1 topic' style='font-size: 8pt;'>Brecon Beaon</a>
<a href='http://jakepaine.co.uk/?tag=cache' class='tag-link-5' title='1 topic' style='font-size: 8pt;'>Cache</a>
<a href='http://jakepaine.co.uk/?tag=caching' class='tag-link-6' title='1 topic' style='font-size: 8pt;'>Caching</a>
<a href='http://jakepaine.co.uk/?tag=camping' class='tag-link-7' title='1 topic' style='font-size: 8pt;'>camping</a>
<a href='http://jakepaine.co.uk/?tag=cloudflare' class='tag-link-8' title='1 topic' style='font-size: 8pt;'>Cloudflare</a>
<a href='http://jakepaine.co.uk/?tag=css3' class='tag-link-9' title='2 topics' style='font-size: 22pt;'>CSS3</a>
<a href='http://jakepaine.co.uk/?tag=directory' class='tag-link-10' title='1 topic' style='font-size: 8pt;'>Directory</a>
<a href='http://jakepaine.co.uk/?tag=effect' class='tag-link-11' title='1 topic' style='font-size: 8pt;'>Effect</a>
<a href='http://jakepaine.co.uk/?tag=hiking' class='tag-link-12' title='1 topic' style='font-size: 8pt;'>hiking</a>
<a href='http://jakepaine.co.uk/?tag=hosting' class='tag-link-13' title='1 topic' style='font-size: 8pt;'>Hosting</a>
<a href='http://jakepaine.co.uk/?tag=hover' class='tag-link-14' title='1 topic' style='font-size: 8pt;'>Hover</a>
<a href='http://jakepaine.co.uk/?tag=image' class='tag-link-15' title='1 topic' style='font-size: 8pt;'>Image</a>
<a href='http://jakepaine.co.uk/?tag=keyframes' class='tag-link-16' title='1 topic' style='font-size: 8pt;'>Keyframes</a>
<a href='http://jakepaine.co.uk/?tag=list' class='tag-link-17' title='1 topic' style='font-size: 8pt;'>List</a>
<a href='http://jakepaine.co.uk/?tag=new-host' class='tag-link-18' title='1 topic' style='font-size: 8pt;'>New Host</a>
<a href='http://jakepaine.co.uk/?tag=optimize' class='tag-link-19' title='1 topic' style='font-size: 8pt;'>Optimize</a>
<a href='http://jakepaine.co.uk/?tag=page-speed' class='tag-link-20' title='1 topic' style='font-size: 8pt;'>Page Speed</a>
<a href='http://jakepaine.co.uk/?tag=performance' class='tag-link-21' title='1 topic' style='font-size: 8pt;'>Performance</a>
<a href='http://jakepaine.co.uk/?tag=pingdom' class='tag-link-22' title='1 topic' style='font-size: 8pt;'>Pingdom</a>
<a href='http://jakepaine.co.uk/?tag=plugin' class='tag-link-23' title='1 topic' style='font-size: 8pt;'>Plugin</a>
<a href='http://jakepaine.co.uk/?tag=polaroid' class='tag-link-24' title='1 topic' style='font-size: 8pt;'>Polaroid</a>
<a href='http://jakepaine.co.uk/?tag=rotating' class='tag-link-25' title='1 topic' style='font-size: 8pt;'>Rotating</a>
<a href='http://jakepaine.co.uk/?tag=rotation' class='tag-link-26' title='2 topics' style='font-size: 22pt;'>Rotation</a>
<a href='http://jakepaine.co.uk/?tag=simple' class='tag-link-27' title='1 topic' style='font-size: 8pt;'>Simple</a>
<a href='http://jakepaine.co.uk/?tag=staff' class='tag-link-28' title='1 topic' style='font-size: 8pt;'>Staff</a>
<a href='http://jakepaine.co.uk/?tag=swvps' class='tag-link-29' title='1 topic' style='font-size: 8pt;'>SWVPS</a>
<a href='http://jakepaine.co.uk/?tag=trip' class='tag-link-30' title='1 topic' style='font-size: 8pt;'>trip</a>
<a href='http://jakepaine.co.uk/?tag=tso-host' class='tag-link-31' title='1 topic' style='font-size: 8pt;'>TSO Host</a>
<a href='http://jakepaine.co.uk/?tag=wordpress' class='tag-link-33' title='2 topics' style='font-size: 22pt;'>Wordpress</a>
<a href='http://jakepaine.co.uk/?tag=yslow' class='tag-link-34' title='1 topic' style='font-size: 8pt;'>Yslow</a></div>
</div> </div>
<div class="copyright">
<p></p>
</div>
<div class="top">Back to Top</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/js/plugins.js"></script>
<script src="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/js/main.js"></script>
<script src="http://jakepaine.co.uk/wp-content/themes/jakepaine2013/js/jquery.meanmenu.js"></script>
<script type='text/javascript' src='http://jakepaine.co.uk/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.40.0-2013.08.13'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/jakepaine.co.uk\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ...","cached":"1"};
/* ]]> */
</script>
<script type='text/javascript' src='http://jakepaine.co.uk/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=3.5.2'></script>
</body>
</html>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
Minified using disk
Object Caching 1010/1067 objects using disk
Served from: jakepaine.co.uk @ 2013-09-24 10:35:29 by W3 Total Cache -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment