danbarber/cv
1
0
Fork 0
mirror of https://github.com/danbee/cv synced 2025-03-04 08:59:12 +00:00
Code Issues Releases Wiki Activity

More layout tweaks, pretty much there now I think.

Browse Source
This commit is contained in:
Dan Barber 2011-06-16 15:02:55 +01:00
parent e7f78aaba7
commit d0e895200e
4 changed files with 279 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

314
css/style.css
View File

@ -44,40 +44,40 @@ article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin : 0;
padding : 0;
border : 0;
font-size : 100%;
font : inherit;
vertical-align : baseline; }
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display : block; }
display: block; }
abbr[title] {
border-bottom : 1px dotted;
cursor : help; }
border-bottom: 1px dotted;
cursor: help; }
/* 1.ROOT */
html {
overflow-y : scroll;
background : rgb(255,255,255) /* url(../img/tmp/grid.png) repeat-y 50% 0 */; }
overflow-y: scroll;
background: #F9F5EB }
body {
margin : 0 auto;
padding : 0 0;
font : 100%/1.4 "museo-sans-1","museo-sans-2", sans-serif;
margin: 0 auto;
padding: 0 0;
font: 100%/1.4 "museo-sans-1","museo-sans-2", sans-serif;
font-weight: 100;
color : rgb(40,40,40);
background-color : transparent;
color: rgb(40,40,40);
background-color: transparent;
}
#page {
margin : 0 auto;
padding : 0 0;
width : 90% /* 252px */;
margin: 0 auto;
padding: 0 0;
width: 90% /* 252px */;
}
/* 2.HEADINGS */
@ -87,21 +87,22 @@ h2,
h3,
h4,
h5,
h6 { font-family : "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial; font-weight : 700; }
h6 { font-family: "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif; font-weight: 700;
text-shadow: 1px 1px 2px white;}
h1 { margin-bottom : .5em; font-size : 3em; /* 48 / 16 = 3 */ line-height : 1.2; font-weight: 900; text-align: center; }
h1 { margin-bottom: .1em; font-size: 3em; /* 48 / 16 = 3 */ line-height: 1.2; font-weight: 900; text-align: center; width: 100%; }
h1:before { content: ''; display: block; height: 130px; font-size: 3em; margin-top: 0; text-align: center;
background: url(../img/m/danbarberlogo.png) center center no-repeat; background-size: 95px; }
h2 { margin-bottom : .75em; font-size : 2em; /* 36 / 16 = 2 */ line-height : 1.2; text-align: center; }
h2 { margin-bottom: .75em; font-size: 1.7em; /* 36 / 16 = 2 */ line-height: 1.2; text-align: center; color: #464646; }
h3 { text-transform: uppercase; margin-bottom : 1em; font-size : 1.5em; /* 24 / 16 = 1.5 */ line-height : 1.3; }
h3 { text-transform: uppercase; margin-bottom: 1em; font-size: 1.4em; /* 24 / 16 = 1.5 */ line-height: 1.3; }
h4 { margin-bottom : 0.25em; font-size : 1.25em; /* 20 / 16 = 1.25 */ line-height : 1.25; font-weight: 500; }
h4 { margin-bottom: 0.75em; margin-top: 1.7em; font-size: 1.2em; /* 20 / 16 = 1.25 */ line-height: 1.25; font-weight: 500; }
h5 { margin-bottom : 1.5em; font-size : 1em; /* 16 / 16 = 1 */ }
h5 { margin-bottom: 1.5em; font-size: 1em; /* 16 / 16 = 1 */ }
h6 { font-size : 1em; /* 16 / 16 = 1 */ }
h6 { font-size: 1em; /* 16 / 16 = 1 */ }
/* 3.TYPOGRAPHY */
@ -110,139 +111,139 @@ ol,
ul,
dl,
address {
margin-bottom : 1.5em;
font-size : 1em; /* 16 / 16 = 1 */ }
margin-bottom: 0.75em;
font-size: 1em; /* 16 / 16 = 1 */ }
ul,
ol {
margin : 0 0 1.5em -24px;
padding-left : 24px; }
margin: 0 0 0 -24px;
padding-left: 24px; }
ul {
list-style-type : disc; }
list-style-type: disc; }
ol {
list-style-type : decimal; }
list-style-type: decimal; }
li ul,
li ol {
margin : 0;
font-size : 1em; /* 16 / 16 = 1 */ }
margin: 0;
font-size: 1em; /* 16 / 16 = 1 */ }
section { border-top: 2px solid black; padding-top: 1em; margin-top: 0.5em; }
section { border-top: 2px solid black; padding-top: 1em; margin-bottom: 2em; }
section ul, section ol { list-style: none; }
dl,
dd {
margin-bottom : 1.5em; }
margin-bottom: 1.5em; }
dt {
font-weight : normal; }
font-weight: normal; }
blockquote {
margin : 0 0 1.5em -24px;
padding-left : 24px;
border-left : 1px solid rgb(200,200,200);
font-style : italic; }
margin: 0 0 1.5em -24px;
padding-left: 24px;
border-left: 1px solid rgb(200,200,200);
font-style: italic; }
blockquote:before,
blockquote:after,
q:before,
q:after {
content : '';
content : none; }
content: '';
content: none; }
b,
strong {
font-weight : bold; }
font-weight: bold; }
i,
em {
font-style : italic; }
font-style: italic; }
sup,
sub {
position : relative;
font-size : 75%;
line-height : 0; }
position: relative;
font-size: 75%;
line-height: 0; }
sup {
top : -.5em; }
top: -.5em; }
sub {
bottom : -.25em; }
bottom: -.25em; }
address {
font-style : normal; }
font-style: normal; }
pre {
margin-bottom : 1.5em;
white-space : pre;
white-space : pre-wrap;
word-wrap : break-word; }
margin-bottom: 1.5em;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
pre,
code {
font : .875em 'andale mono', 'lucida console', monospace;
line-height : 1.5; }
font: .875em 'andale mono', 'lucida console', monospace;
line-height: 1.5; }
small {
font-size : 1em; /* 16 / 16 = 1 */ }
font-size: 1em; /* 16 / 16 = 1 */ }
/* 4.LINKS */
a,
a:visited {
outline : none;
color : rgb(23,119,175);
text-decoration : none; }
outline: none;
color: rgb(23,119,175);
text-decoration: none; }
a:hover {
outline : none;
color : rgb(40,40,40);
text-decoration : underline; }
outline: none;
color: rgb(40,40,40);
text-decoration: underline; }
a:active,
a:focus {
outline : none;
color : rgb(0,0,0); }
outline: none;
color: rgb(0,0,0); }
/* 5.FIGURES & IMAGES */
figure {
margin-bottom : 1.5em; }
margin-bottom: 1.5em; }
figure img,
figure object,
figure embed {
margin-bottom : .75em;
max-width : 100%; }
margin-bottom: .75em;
max-width: 100%; }
figcaption {
display : block;
font-weight : normal; }
display: block;
font-weight: normal; }
/* 6.TABLES */
table {
border-collapse : collapse;
border-spacing : 0;
margin-bottom : 1.4em;
width : 100%;
font-size : .875em; /* 14 / 16 = .875 */ }
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 1.4em;
width: 100%;
font-size: .875em; /* 14 / 16 = .875 */ }
th {
font-weight : bold; }
font-weight: bold; }
th, td, caption {
padding : .25em 10px .25em 5px; }
padding: .25em 10px .25em 5px; }
tfoot {
font-style : italic; }
font-style: italic; }
caption {
background-color : transparent; }
background-color: transparent; }
/* 7.FORMS (See css/mylibs/forms.css) */
@ -256,119 +257,119 @@ background-color : transparent; }
/* 14.GLOBAL OBJECTS */
.clearfix {
zoom : 1; }
zoom: 1; }
.clearfix:before,
.clearfix:after {
content : "\0020";
display : block;
height : 0;
overflow : hidden; }
content: "\0020";
display: block;
height: 0;
overflow: hidden; }
.clearfix:after {
clear : both; }
clear: both; }
/* 15.VENDOR-SPECIFIC */
body {
-webkit-text-size-adjust : 100%;
-ms-text-size-adjust : 100%; }
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
a:link {
-webkit-tap-highlight-color : rgb(52,158,219); }
-webkit-tap-highlight-color: rgb(52,158,219); }
::-webkit-selection {
background : rgb(23,119,175);
color : rgb(250,250,250);
text-shadow : none; }
background: rgb(23,119,175);
color: rgb(250,250,250);
text-shadow: none; }
::-moz-selection {
background : rgb(23,119,175);
color : rgb(250,250,250);
text-shadow : none; }
background: rgb(23,119,175);
color: rgb(250,250,250);
text-shadow: none; }
::selection {
background : rgb(23,119,175);
color : rgb(250,250,250);
text-shadow : none; }
background: rgb(23,119,175);
color: rgb(250,250,250);
text-shadow: none; }
/* input[type=search] {
-webkit-appearance : none; }
-webkit-appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display : none; } */
display: none; } */
::-webkit-input-placeholder {
padding : 10px;
font-size : .875em;
line-height : 1.4; }
padding: 10px;
font-size: .875em;
line-height: 1.4; }
input:-moz-placeholder {
padding : 10px;
font-size : .875em;
line-height : 1.4; }
padding: 10px;
font-size: .875em;
line-height: 1.4; }
.ie7 img,
.iem7 img {
-ms-interpolation-mode : bicubic; }
-ms-interpolation-mode: bicubic; }
div,
input,
textarea {
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
box-sizing : border-box; }
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
/* Non-semantic helper classes */
/* Image replacement */
.ir {
display : block;
text-indent : -999em;
overflow : hidden;
background-repeat : no-repeat;
text-align : left;
direction : ltr; }
display: block;
text-indent: -999em;
overflow: hidden;
background-repeat: no-repeat;
text-align: left;
direction: ltr; }
/* Hide for screenreaders and visual browsers */
.hidden {
display : none;
visibility : hidden; }
display: none;
visibility: hidden; }
/* Hide visually */
.visuallyhidden {
position : absolute;
clip : rect(0 0 0 0);
overflow : hidden;
position: absolute;
clip: rect(0 0 0 0);
overflow: hidden;
margin: -1px;
padding : 0;
height : 1px;
width : 1px;
border : 0; }
padding: 0;
height: 1px;
width: 1px;
border: 0; }
/* Allow an element to be focusable via keyboard */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
position : static;
clip : auto;
overflow : visible;
height : auto;
margin : 0;
width : auto; }
position: static;
clip: auto;
overflow: visible;
height: auto;
margin: 0;
width: auto; }
/* Hide but maintain layout */
.invisible {
visibility : hidden; }
visibility: hidden; }
/* 16.TEMPLATE SPECIFICS */
#goog-fixurl ul {
list-style-type : none; }
list-style-type: none; }
#goog-fixurl input {
margin-bottom : 1.5em; }
margin-bottom: 1.5em; }
/* 17.MODERNIZR */
@ -377,45 +378,45 @@ margin-bottom : 1.5em; }
/*Print __________________________________________________________________________________________________________ */
@media print {
* {
background : transparent !important;
color : black !important;
text-shadow : none !important;
filter : none !important;
-ms-filter : none !important; }
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important; }
a, a:visited {
color : #444 !important;
text-decoration : underline; }
color: #444 !important;
text-decoration: underline; }
a[href]:after {
content : " (" attr(href) ")"; }
content: " (" attr(href) ")"; }
abbr[title]:after {
content : " (" attr(title) ")"; }
content: " (" attr(title) ")"; }
a[href^="javascript:"]:after,
a[href^="#"]:after {
content : ""; }
content: ""; }
pre, blockquote {
border : 1px solid #999;
page-break-inside : avoid; }
border: 1px solid #999;
page-break-inside: avoid; }
thead {
display : table-header-group; }
display: table-header-group; }
tr, img {
page-break-inside : avoid; }
page-break-inside: avoid; }
@page {
margin : .5cm; }
margin: .5cm; }
p, h2, h3 {
orphans : 3;
widows : 3; }
orphans: 3;
widows: 3; }
h2, h3 {
page-break-after : avoid; }
page-break-after: avoid; }
}/*/mediaquery*/
/*480px __________________________________________________________________________________________________________ */
@ -424,8 +425,8 @@ page-break-after : avoid; }
/* 1.ROOT */
body { font-size: 1.05em; }
/* 2.HEADINGS */
h1 { margin-top: 0.5em; text-align: left; }
h1:before { float: right; font-size: 2em; width: 130px; background-size: 50%; background-position: top center; position: relative; top: 0em; text-align: right; margin-bottom: -0.5em; }
h1 { margin-top: 0.5em; text-align: left; margin-bottom: 0; }
h1:before { float: right; font-size: 2em; width: 130px; background-size: 60%; background-position: top center; position: relative; top: 0em; text-align: right; margin-bottom: -0.5em; }
h2 { text-align: left; }
/* 3.TYPOGRAPHY */
/* 4.LINKS */
@ -451,8 +452,9 @@ h2 { text-align: left; }
/* 1.ROOT */
body { font-size: 1.1em; }
/* 2.HEADINGS */
h1 { font-size: 5em; margin-bottom: 0.25em; }
h1 { font-size: 5em; margin-bottom: 0em; }
h1:before { background-size: 100%; background-position: top center; position: relative; top: 0em; }
h2 { font-size: 2em; }
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */

156
index.html
View File

@ -67,93 +67,95 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
<div id="page">
<header role="banner" class="clearfix">
<h1>Dan Barber</h1>
<h1 id="main_heading">Dan Barber</h1>
<h2>Web Designer &amp;&nbsp;Developer</h2>
</header>
<div class="content clearfix">
<div role="main">
<section id="profile">
<h3>Profile</h3>
<p>I have 11 years of experience building web sites and web applications, from small simple services to large enterprise level systems. I focus on simple, usable interfaces and prefer to work by prototyping ideas.</p>
</section>
<div class="clearfix">
<section id="profile">
<h3>Profile</h3>
<p>I have 11 years of experience building web sites and web applications, from small simple services to large enterprise level systems. I focus on simple, usable interfaces and prefer to work by prototyping ideas.</p>
</section>
<section id="skills">
<h3>Skills</h3>
<section id="skills">
<h3>Skills</h3>
<ul>
<li>
<h4>HTML/CSS</h4>
<p>Excellent knowledge of standards and browser engines.</p>
</li>
<li>
<h4>Ruby on Rails</h4>
<p>Intermediate level.</p>
</li>
<li>
<h4>PHP</h4>
<p>Expert level.</p>
</li>
<li>
<h4>SQL/&shy;MySQL/&shy;PostgreSQL</h4>
<p>Excellent knowledge of SQL and configuration.</p>
</li>
<li>
<h4>Javascript/jQuery</h4>
<p>Sound working knowledge</p>
</li>
<li>
<h4>Typography</h4>
<p>Good working knowledge.</p>
</li>
<li>
<h4>Photoshop/GIMP</h4>
<p>Good working knowledge.</p>
</li>
<li>
<h4>Linux Servers</h4>
<p>Web (Apache), MySQL, PostgreSQL, DNS, Samba</p>
</li>
<li>
<h4>Networking</h4>
<p>Good knowledge of cabling, routing and protocols.</p>
</li>
</ul>
</section>
<ul>
<li>
<h4>HTML/CSS</h4>
<p>Excellent knowledge of standards and browser engines.</p>
</li>
<li>
<h4>Ruby on Rails</h4>
<p>Intermediate level.</p>
</li>
<li>
<h4>PHP</h4>
<p>Expert level.</p>
</li>
<li>
<h4>SQL/&shy;MySQL/&shy;PostgreSQL</h4>
<p>Excellent knowledge of SQL and configuration.</p>
</li>
<li>
<h4>Javascript/jQuery</h4>
<p>Sound working knowledge</p>
</li>
<li>
<h4>Typography</h4>
<p>Good working knowledge.</p>
</li>
<li>
<h4>Photoshop/GIMP</h4>
<p>Good working knowledge.</p>
</li>
<li>
<h4>Linux Servers</h4>
<p>Web (Apache), MySQL, PostgreSQL, DNS, Samba</p>
</li>
<li>
<h4>Networking</h4>
<p>Good knowledge of cabling, routing and protocols.</p>
</li>
</ul>
</section>
<section id="experience">
<h3>Experience</h3>
<section id="experience">
<h3>Experience</h3>
<ul>
<li>
<h4>Abiquo</h4>
<p>June 2010&ndash;Present</p>
<p>[to be written]</p>
</li>
<li>
<h4>Deep Blue Sound</h4>
<p>Aug 2008&ndash;June 2010</p>
<p>Administering and augmenting the existing web systems including Moodle, SugarCRM and others. Deputising for the System Administrator.</p>
</li>
<li>
<h4>Footwork Solutions</h4>
<p>Nov 2002&ndash;Aug 2008</p>
<p><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a><br />I was a lead developer and designer on the Halo care co-ordination system, including training and documentation and support. I was also the System Administrator for both the local network and remote server farm.</p>
</li>
<li>
<h4>Granite Internet</h4>
<p>2000&ndash;2002</p>
<p>Designed and developed and maintained several property company websites based on a single code base. Setup Windows, Linux and FreeBSD servers.</p>
</li>
<li>
<h4>North Devon Journal</h4>
<p>1998&ndash;2000</p>
<p>Set advertisements using QuarkXpress and was responsible for laying out the classified pages. Developed a love for typography.</p>
</li>
</ul>
</section>
<ul>
<li>
<h4>Abiquo</h4>
<p>June 2010&ndash;Present</p>
<p>[to be written]</p>
</li>
<li>
<h4>Deep Blue Sound</h4>
<p>Aug 2008&ndash;June 2010</p>
<p>Administering and augmenting the existing web systems including Moodle, SugarCRM and others. Deputising for the System Administrator.</p>
</li>
<li>
<h4>Footwork Solutions</h4>
<p>Nov 2002&ndash;Aug 2008</p>
<p><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a><br />I was a lead developer and designer on the Halo care co-ordination system, including training and documentation and support. I was also the System Administrator for both the local network and remote server farm.</p>
</li>
<li>
<h4>Granite Internet</h4>
<p>2000&ndash;2002</p>
<p>Designed and developed and maintained several property company websites based on a single code base. Setup Windows, Linux and FreeBSD servers.</p>
</li>
<li>
<h4>North Devon Journal</h4>
<p>1998&ndash;2000</p>
<p>Set advertisements using QuarkXpress and was responsible for laying out the classified pages. Developed a love for typography.</p>
</li>
</ul>
</section>
</div>
<section id="portfolio">
<h3>Portfolio</h3>

39
js/plugins.js
View File

@ -111,4 +111,41 @@ if(this.console) console.log( Array.prototype.slice.call(arguments) );
$('.placeholder').val('');
});
}(jQuery));
}(jQuery));
/*global jQuery */
/*!
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/
(function( $ ){
$.fn.fitText = function( kompressor ) {
return this.each(function(){
var $this = $(this); // store the object
var origFontSize = parseFloat($this.css('font-size')); // init the font sizes
var compressor = kompressor || 1; // set the compressor
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.min($this.width() / (compressor*10), origFontSize));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).resize(resizer);
});
};
})( jQuery );

5
js/script.js
View File

@ -6,4 +6,7 @@ document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
}
$(function() {
});