Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 2 commits
  • 15 files changed
  • 0 commit comments
  • 1 contributor
View
45 assets/javascripts/application.js
@@ -45,6 +45,9 @@ if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Basic
d.ring++;
rings_available[d.ring] = d.end_date;
+ //
+ d.id = d.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+
});
// Now, calculate colors based on the ring position
@@ -106,18 +109,27 @@ if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Basic
.data(items)
.enter()
.append('g')
- .attr('class', 'arc');
+ .attr('class', 'arc')
+
var arcs = g.append('path')
+ .attr('class', function(d) { return d.id })
.attr('fill', function(d, i) { return d.color; })
.each(function(d) { d.previous = d; });
+
arcs.transition()
.duration(1000)
.attrTween("d", arcTween);
- arcs.on("mouseover", show_tooltip)
- .on("mouseout", hide_tooltip)
+ arcs.on("mouseover", function(d) {
+ d3.select('#skills .' + d.id).classed('active',true);
+ show_tooltip(d)
+ })
+ .on("mouseout", function(d) {
+ d3.select('#skills .' + d.id).classed('active',false);
+ hide_tooltip()
+ })
.on("mousemove", position_tooltip);
}
@@ -165,15 +177,13 @@ if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Basic
.sortBy(function(d,i) { return d.group == 'frontend' ? i : i+100; })
.value();
- var skills = d3.select("#skills");
-
- skills.append('h1').text('My Skills');
- var list = skills.append('ul');
+ var list = d3.select("#skills").append('ul');
var li = list.selectAll("li")
.data(skill_list)
.enter()
- .append("li");
+ .append("li")
+ .attr('class', function(d) { return d.id});
li.append('span')
.text(function(d) { return d.name; })
@@ -189,14 +199,17 @@ if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Basic
.duration(1000)
.attr('width', function(d) { return d.rank*10 })
.attr('height', 8)
- .attr('fill', function(d,i) {
- color_func = colors[d.group];
- return color_func(0.5); //d.color
- });
-
- li.on("mouseover", show_tooltip)
- .on("mouseout", hide_tooltip)
- .on("mousemove", position_tooltip);
+ .attr('fill', function(d,i) { return d.color });
+
+ li.on("mouseover", function(d) {
+ d3.select('#timeline .' + d.id).classed('active',true);
+ show_tooltip(d);
+ })
+ .on("mouseout", function(d) {
+ d3.select('#timeline .' + d.id).classed('active',false);
+ hide_tooltip(d);
+ })
+ .on("mousemove", position_tooltip)
});
View
15 assets/stylesheets/_footer.scss
@@ -0,0 +1,15 @@
+footer {
+ border-top: 1px solid #2a2a2a;
+ padding: 10px;
+
+ p {
+ color: #6a6a6a;
+ font-size: 12px;
+ text-align: right;
+ }
+
+ a {
+ color: #888;
+ text-decoration: none;
+ }
+}
View
24 assets/stylesheets/_header.scss
@@ -0,0 +1,24 @@
+header {
+ padding: 40px 10px 20px;
+ border-bottom: 1px solid #000;
+ @include clearfix;
+
+ .logo {
+ float: left;
+
+ .title {
+ margin: 0;
+ padding: 0 ;
+ font-weight: normal;
+ font-size: 36px;
+ line-height: 36px;
+ }
+
+ .subtitle {
+ font-size: 16px;
+ color: #888;
+ margin: 0 0 10px;
+ font-weight: normal;
+ }
+ }
+}
View
56 assets/stylesheets/_layout.scss
@@ -1,53 +1,19 @@
-article,
-footer,
-header,
-hgroup,
-section {
- display: block;
-}
+// Very Basic Layout
.container {
width: 1140px;
margin: 0 auto;
}
-.row {
- //outline: 1px dotted #f60;
- // display: -webkit-box;
- // -webkit-box-orient: horizontal;
- // -webkit-box-pack: center;
- // -webkit-box-align: center;
-
- padding-top: 80px;
-
- overflow:hidden;
- _overflow:visible;
- zoom:1;
-}
-
-.col1, .col2 {
- //outline: 1px dotted #f60;
-}
-
-.col1 {
- width: 500px;
- float:left;
-
- margin-left: 10px;
-
-
-}
-
-.col2 {
- width: 500px;
- float: right;
- margin-right: 30px;
+.page {
+ border-top: 1px solid #2a2a2a;
+ border-bottom: 1px solid #000;
+ @include clearfix;
+ padding: 80px 0;
}
-
-
-
-
-
-
-
+.about {
+ width: 500px;
+ float:left;
+ margin-left: 10px;
+}
View
19 assets/stylesheets/_mixins.scss
@@ -0,0 +1,19 @@
+@mixin clearfix {
+ overflow:hidden;
+ _overflow:visible;
+ zoom:1;
+}
+
+@mixin transition($def) {
+ -webkit-transition: $def;
+ -moz-transition: $def;
+ -o-transition: $def;
+ -ms-transition: $def;
+ transition: $def;
+}
+
+@mixin border-radius($def) {
+ -webkit-border-radius: $def;
+ -moz-border-radius: $def;
+ border-radius: $def;
+}
View
48 assets/stylesheets/_normalize.scss
@@ -0,0 +1,48 @@
+/* Very stripped down version of normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
+
+// Corrects block display not defined in IE6/7/8/9 & FF3
+
+article,
+header,
+hgroup,
+nav,
+section {
+ display: block;
+}
+
+// Prevents iOS text size adjust after orientation change, without disabling user zoom
+
+html {
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+// Addresses margins handled incorrectly in IE6/7
+
+body {
+ margin: 0;
+}
+
+// Addresses outline displayed oddly in Chrome
+
+a:focus {
+ outline: thin dotted;
+}
+
+// Improves readability when focused and also mouse hovered in all browsers
+
+a:hover,
+a:active {
+ outline: 0;
+}
+
+// Removes border when inside 'a' element in IE6/7/8/9, FF3
+
+img {
+ border: 0;
+}
+
+// Corrects overflow displayed oddly in IE9
+svg:not(:root) {
+ overflow: hidden;
+}
View
3 assets/stylesheets/_responsive.scss
@@ -20,7 +20,4 @@
}
-
-
-
}
View
48 assets/stylesheets/_skills.scss
@@ -0,0 +1,48 @@
+
+
+.skills {
+
+ margin-top: 60px;
+
+ ul {
+ @include clearfix;
+ }
+
+ li {
+ width: 200px;
+ margin-right: 40px;
+ float: left;
+ padding: 6px 5px;
+ color: #ddd;
+
+ @include border-radius(3px);
+
+ &:nth-child(2n) {
+ margin-right: 0;
+ }
+
+ .label {
+ display: inline-block;
+ width: 80px;
+ margin-right: 10px;
+ }
+
+ svg {
+ border: 1px solid #444;
+ padding: 1px;
+ background-color: #000;
+ }
+
+ &.active, &:hover {
+
+ svg {
+ border: 1px solid #aaa;
+ -webkit-box-shadow: 0 0 4px rgba(255,225,255,0.5);
+ }
+
+ background-color: #333;
+ background-color: rgba(255,255,255,0.1);
+ color: #fff;
+ }
+ }
+}
View
9 assets/stylesheets/_social-icons.scss
@@ -1,10 +1,14 @@
.social-icons {
- margin-top: 5px;
+
float: right;
+ li {
+ float:left;
+ }
+
.icon {
-
text-indent: -9999px;
+ direction: ltr;
display: block;
float:left;
background: url(../../images/social-icons.png);
@@ -17,7 +21,6 @@
.icon-linkedin { background-position: -32px 0; }
.icon-twitter { background-position: -64px 0; }
.icon-gplus { background-position: -96px 0; }
-
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
View
58 assets/stylesheets/_styles.scss
@@ -1,33 +1,22 @@
-// Container
-
-.container {
- width: 1140px;
- margin: 0 auto;
-}
-
body {
font: 13px "GillSans-Light", "Gill Sans Light", Calibri, Trebuchet, sans-serif;
background: #181816 url('../../images/bg.png');
color: #fff;
}
-//Type
-
h1 {
- //font-size: 22px;
font-size: 30px;
font-weight: normal;
- //margin: 0 0 20px 0;
margin: 20px 0 10px 0;
- //padding: 0 0 5px 0;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
text-transform: none;
}
-section {
- //outline: 1px dotted #f60;
- //padding: 20px 0;
+h2 {
+ font-size: 26px;
+ font-weight: normal;
+ margin: 0 0 10px 0;
}
p {
@@ -46,43 +35,4 @@ ul {
margin: 0;
padding: 0;
list-style-type: none;
-}
-
-
-
-// Home Page
-
-.row {
- border-top: 1px solid #2a2a2a;
- border-bottom: 1px solid #000;
-}
-
-
-
-.row {
- @include clearfix;
- padding: 80px 0;
-}
-
-.col1 {
- width: 500px;
- float:left;
- margin-left: 10px;
-}
-
-.col2 {
- width: 500px;
- float: right;
- margin-right: 30px;
-}
-
-
-.timeline .notice {
- padding-top: 100px;
-}
-
-.notice {
- display: block;
- font-size: 13px;
- color: #aaa;
}
View
66 assets/stylesheets/_timeline.scss
@@ -3,6 +3,8 @@
width: 500px;
height: 500px;
text-align:center;
+ float: right;
+ margin-right: 30px;
text {
fill: #ddd;
@@ -23,68 +25,26 @@
stroke: #272727;
}
- .active {
- path {
- fill: #F00;
- }
- }
-
.arc {
path {
-webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-transition-duration: 0.1s;
- -moz-transition-duration: 0.1s;
-
- &:hover {
+ @include transition(0.1s);
+
+ &:hover, &.active {
fill: #fff;
}
}
-
}
-
}
-.tooltip {
- display: none;
-
- position: absolute;
- z-index: 42;
-
- background-color: #000;
- background-color: rgba(0,0,0,0.7);
- border: 1px solid #000;
-
- padding: 5px 15px;
-
- max-width: 200px;
-
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
+// Notice to be displayed if Javascript or SVG aren't supported.
- p {
- line-height: 18px;
- margin: 0;
- }
-
- .title {
- color: #fff;
- margin-bottom: 0;
- }
-
- .date {
- font-size: 12px;
- margin: 0;
- }
-
- .description {
- font-size: 13px;
- color: #ddd;
- }
-}
-
-.visible {
+.notice {
+ background-color: #800;
display: block;
-
-}
+ padding: 8px;
+ margin: 100px auto 0;
+ width: 200px;
+ color: #fff;
+}
View
36 assets/stylesheets/_tooltip.scss
@@ -0,0 +1,36 @@
+.tooltip {
+ display: none;
+ position: absolute;
+ z-index: 42;
+ background-color: #000;
+ background-color: rgba(0,0,0,0.7);
+ border: 1px solid #000;
+ padding: 5px 15px;
+ max-width: 200px;
+
+ @include border-radius(5px);
+
+ p {
+ line-height: 18px;
+ margin: 0;
+ }
+
+ .title {
+ color: #fff;
+ margin-bottom: 0;
+ }
+
+ .date {
+ font-size: 12px;
+ margin: 0;
+ }
+
+ .description {
+ font-size: 13px;
+ color: #ddd;
+ }
+}
+
+.visible {
+ display: block;
+}
View
15 assets/stylesheets/application.scss
@@ -1,5 +1,10 @@
-@import "_layout.scss";
-@import "_styles.scss";
-@import "_timeline.scss";
-@import "_social-icons.scss";
-//@import "_responsive.scss";
+@import "normalize";
+@import "mixins";
+@import "layout";
+@import "styles";
+@import "header";
+@import "social-icons";
+@import "footer";
+@import "skills";
+@import "timeline";
+@import "tooltip";
View
2 assets/stylesheets/compiled/application.css
@@ -1 +1 @@
-article,header,hgroup,nav,section{display:block}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}img{border:0}svg:not(:root){overflow:hidden}header{padding:40px 10px 20px;border-bottom:1px solid #000;overflow:hidden;_overflow:visible;zoom:1}header .logo{float:left}header .logo .title{margin:0;padding:0;font-weight:normal;font-size:36px;line-height:36px}header .logo .subtitle{font-size:16px;color:#888;margin:0 0 10px;font-weight:normal}footer{border-top:1px solid #2a2a2a;padding:10px}footer p{color:#6a6a6a;font-size:12px;text-align:right}footer a{color:#888;text-decoration:none}.container{width:1140px;margin:0 auto}body{font:13px "GillSans-Light", "Gill Sans Light", Calibri, Trebuchet, sans-serif;background:#181816 url("../../images/bg.png");color:#fff}h1{font-size:30px;font-weight:normal;margin:20px 0 10px 0;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,0.2);text-transform:none}p{margin:0;font-size:16px;line-height:21px;color:#aaa}strong{font-weight:bold;color:#fff}ul{margin:0;padding:0;list-style-type:none}.row{border-top:1px solid #2a2a2a;border-bottom:1px solid #000}.row{overflow:hidden;_overflow:visible;zoom:1;padding:80px 0}.col1{width:500px;float:left;margin-left:10px}.col2{width:500px;float:right;margin-right:30px}.timeline .notice{padding-top:100px}.notice{display:block;font-size:13px;color:#aaa}.skills{margin-top:60px}.skills ul{overflow:hidden;_overflow:visible;zoom:1}.skills li{width:200px;margin-right:40px;float:left;padding:6px 5px;color:#ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.skills li:nth-child(2n){margin-right:0}.skills li .label{display:inline-block;width:80px;margin-right:10px}.skills li svg{border:1px solid #444;padding:1px;background-color:#000}.skills li.active,.skills li:hover{background-color:#333;background-color:rgba(255,255,255,0.1);color:#fff}.skills li.active svg,.skills li:hover svg{border:1px solid #aaa;-webkit-box-shadow:0 0 4px rgba(255,225,255,0.5)}.timeline{width:500px;height:500px;text-align:center}.timeline text{fill:#ddd}.timeline line{stroke:#404040;stroke-width:1}.timeline .year{stroke:#777;font-size:12px}.timeline circle{fill:transparent;stroke:#272727}.timeline .active path{fill:#F00}.timeline .arc path{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:0.1s;-moz-transition:0.1s;-o-transition:0.1s;-ms-transition:0.1s;transition:0.1s}.timeline .arc path:hover{fill:#fff}.tooltip{display:none;position:absolute;z-index:42;background-color:#000;background-color:rgba(0,0,0,0.7);border:1px solid #000;padding:5px 15px;max-width:200px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.tooltip p{line-height:18px;margin:0}.tooltip .title{color:#fff;margin-bottom:0}.tooltip .date{font-size:12px;margin:0}.tooltip .description{font-size:13px;color:#ddd}.visible{display:block}.social-icons{float:right}.social-icons li{float:left}.social-icons .icon{text-indent:-9999px;direction:ltr;display:block;float:left;background:url(../../images/social-icons.png);height:32px;width:32px;margin-right:5px}.social-icons .icon-github{background-position:0 0}.social-icons .icon-linkedin{background-position:-32px 0}.social-icons .icon-twitter{background-position:-64px 0}.social-icons .icon-gplus{background-position:-96px 0}@media only screen and (-webkit-min-device-pixel-ratio: 2){.social-icons .icon{background:url(../../images/social-icons_2x.png);background-size:128px 32px}.social-icons .icon-github{background-position:0 0}.social-icons .icon-linkedin{background-position:-32px 0}.social-icons .icon-twitter{background-position:-64px 0}.social-icons .icon-gplus{background-position:-96px 0}}
+article,header,hgroup,nav,section{display:block}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}img{border:0}svg:not(:root){overflow:hidden}.container{width:1140px;margin:0 auto}.page{border-top:1px solid #2a2a2a;border-bottom:1px solid #000;overflow:hidden;_overflow:visible;zoom:1;padding:80px 0}.about{width:500px;float:left;margin-left:10px}body{font:13px "GillSans-Light", "Gill Sans Light", Calibri, Trebuchet, sans-serif;background:#181816 url("../../images/bg.png");color:#fff}h1{font-size:30px;font-weight:normal;margin:20px 0 10px 0;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,0.2);text-transform:none}h2{font-size:26px;font-weight:normal;margin:0 0 10px 0}p{margin:0;font-size:16px;line-height:21px;color:#aaa}strong{font-weight:bold;color:#fff}ul{margin:0;padding:0;list-style-type:none}header{padding:40px 10px 20px;border-bottom:1px solid #000;overflow:hidden;_overflow:visible;zoom:1}header .logo{float:left}header .logo .title{margin:0;padding:0;font-weight:normal;font-size:36px;line-height:36px}header .logo .subtitle{font-size:16px;color:#888;margin:0 0 10px;font-weight:normal}.social-icons{float:right}.social-icons li{float:left}.social-icons .icon{text-indent:-9999px;direction:ltr;display:block;float:left;background:url(../../images/social-icons.png);height:32px;width:32px;margin-right:5px}.social-icons .icon-github{background-position:0 0}.social-icons .icon-linkedin{background-position:-32px 0}.social-icons .icon-twitter{background-position:-64px 0}.social-icons .icon-gplus{background-position:-96px 0}@media only screen and (-webkit-min-device-pixel-ratio: 2){.social-icons .icon{background:url(../../images/social-icons_2x.png);background-size:128px 32px}.social-icons .icon-github{background-position:0 0}.social-icons .icon-linkedin{background-position:-32px 0}.social-icons .icon-twitter{background-position:-64px 0}.social-icons .icon-gplus{background-position:-96px 0}}footer{border-top:1px solid #2a2a2a;padding:10px}footer p{color:#6a6a6a;font-size:12px;text-align:right}footer a{color:#888;text-decoration:none}.skills{margin-top:60px}.skills ul{overflow:hidden;_overflow:visible;zoom:1}.skills li{width:200px;margin-right:40px;float:left;padding:6px 5px;color:#ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.skills li:nth-child(2n){margin-right:0}.skills li .label{display:inline-block;width:80px;margin-right:10px}.skills li svg{border:1px solid #444;padding:1px;background-color:#000}.skills li.active,.skills li:hover{background-color:#333;background-color:rgba(255,255,255,0.1);color:#fff}.skills li.active svg,.skills li:hover svg{border:1px solid #aaa;-webkit-box-shadow:0 0 4px rgba(255,225,255,0.5)}.timeline{width:500px;height:500px;text-align:center;float:right;margin-right:30px}.timeline text{fill:#ddd}.timeline line{stroke:#404040;stroke-width:1}.timeline .year{stroke:#777;font-size:12px}.timeline circle{fill:transparent;stroke:#272727}.timeline .arc path{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transition:0.1s;-moz-transition:0.1s;-o-transition:0.1s;-ms-transition:0.1s;transition:0.1s}.timeline .arc path:hover,.timeline .arc path.active{fill:#fff}.notice{background-color:#800;display:block;padding:8px;margin:100px auto 0;width:200px;color:#fff}.tooltip{display:none;position:absolute;z-index:42;background-color:#000;background-color:rgba(0,0,0,0.7);border:1px solid #000;padding:5px 15px;max-width:200px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.tooltip p{line-height:18px;margin:0}.tooltip .title{color:#fff;margin-bottom:0}.tooltip .date{font-size:12px;margin:0}.tooltip .description{font-size:13px;color:#ddd}.visible{display:block}
View
25 index.html
@@ -5,7 +5,7 @@
<title>Steve Wilshaw - Front End Web Developer</title>
<meta name="viewport" content="width=1160">
- <link rel="shortcut icon" href="assets/images/favicon.ico">
+ <link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
<script type="text/javascript" src="assets/javascripts/libs/d3.v2.min.js"></script>
@@ -40,27 +40,24 @@ <h2 class="subtitle">Front End Developer</h2>
</header>
- <div class="row">
+ <div class="page">
- <div class="col1">
-
- <section>
- <h1>About Me</h1>
- <p>Hi! My name's <strong>Steve</strong> and I'm a <strong>Front End Web Developer</strong> with a passion for good design and great user experiences. I specialise in front end development, building web sites and web apps with <span class="css">CSS</span>, <span class="html">HTML</span> &amp; Javascript using libraries like jQuery, Zepto, Backbone.js and D3.js, but I can also build the backend code in PHP, Wordpress and Ruby on Rails.</p>
- </section>
+ <section class="about">
+ <h1>About Me</h1>
+ <p>Hi! My name's <strong>Steve</strong> and I'm a <strong>Front End Web Developer</strong> with a passion for good design and great user experiences. I specialise in front end development, building web sites and web apps with <span class="css">CSS</span>, <span class="html">HTML</span> &amp; Javascript using libraries like jQuery, Zepto, Backbone.js and D3.js, but I can also build the backend code in PHP, Wordpress and Ruby on Rails.</p>
- <section class="skills" id="skills"></section>
-
- </div>
+ <div class="skills" id="skills">
+ <h2>My Skills</h2>
+ </div>
- <div class="col2">
+ </section>
+
<section id="timeline" class="timeline">
<noscript class="notice">What? No JavaScript?</noscript>
</section>
- </div>
-
+
</div>
<footer>

No commit comments for this range

Something went wrong with that request. Please try again.