mirror of
https://github.com/danbee/cv
synced 2025-03-04 08:59:12 +00:00
Lots of changes and updates
* Start organizing CSS according to ITCSS * Replace logo with rainbow db * Add Imagine Learning to experience * Refactor layout to use CSS grid
This commit is contained in:
parent
6e046cb293
commit
4346f8a3ba
@ -7,12 +7,11 @@ Deploys to Github Pages.
|
|||||||
### Setup
|
### Setup
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
$ bundle install
|
$ bin/setup
|
||||||
$ bundle exec middleman
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Deploy
|
### Dev Server
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
$ bundle exec mgd
|
$ bin/server
|
||||||
```
|
```
|
||||||
|
|||||||
585
source/css/_legacy.scss
Normal file
585
source/css/_legacy.scss
Normal file
@ -0,0 +1,585 @@
|
|||||||
|
// 1.ROOT*/
|
||||||
|
|
||||||
|
/* 2.HEADINGS */
|
||||||
|
|
||||||
|
/* 3.TYPOGRAPHY */
|
||||||
|
|
||||||
|
.link {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.period {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
dl,
|
||||||
|
address {
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
/* 16 / 16 = 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > section {
|
||||||
|
border-top: 2px solid #666;
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#skills,
|
||||||
|
#interests {
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dl,
|
||||||
|
dd {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1.5em -24px;
|
||||||
|
padding-left: 24px;
|
||||||
|
border-left: 1px solid rgb(200, 200, 200);
|
||||||
|
font-style: italic;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
q {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
i,
|
||||||
|
em {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup,
|
||||||
|
sub {
|
||||||
|
position: relative;
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
white-space: pre;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
font: 0.875em "andale mono", "lucida console", monospace;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font: 0.875em "andale mono", "lucida console", monospace;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
/* 16 / 16 = 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 5.FIGURES & IMAGES */
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
|
||||||
|
img,
|
||||||
|
object,
|
||||||
|
embed {
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
display: block;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 6.TABLES */
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
margin-bottom: 1.4em;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.875em;
|
||||||
|
|
||||||
|
/* 14 / 16 = .875 */
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.25em 10px 0.25em 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
caption {
|
||||||
|
padding: 0.25em 10px 0.25em 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
tfoot {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 7.FORMS (See css/mylibs/forms.css) */
|
||||||
|
|
||||||
|
/* 8.BANNER */
|
||||||
|
/* 9.NAVIGATION */
|
||||||
|
/* 10.CONTENT */
|
||||||
|
/* 11.MAIN */
|
||||||
|
/* 12.COMPLIMENTARY */
|
||||||
|
/* 13.CONTENTINFO */
|
||||||
|
|
||||||
|
/* 14.GLOBAL OBJECTS */
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
zoom: 1;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 15.VENDOR-SPECIFIC */
|
||||||
|
|
||||||
|
body {
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
-webkit-tap-highlight-color: rgb(52, 158, 219);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-selection {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: rgb(23, 119, 175);
|
||||||
|
color: rgb(250, 250, 250);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 0.875em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* input[type=search] { -webkit-appearance: none; }
|
||||||
|
*
|
||||||
|
*input[type="search"]::-webkit-search-decoration,
|
||||||
|
*input[type="search"]::-webkit-search-cancel-button { display: none; } */
|
||||||
|
|
||||||
|
input:-moz-placeholder {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 0.875em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ie7 img,
|
||||||
|
.iem7 img {
|
||||||
|
-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Non-semantic helper classes */
|
||||||
|
|
||||||
|
/* Image replacement */
|
||||||
|
|
||||||
|
.ir {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide visually */
|
||||||
|
|
||||||
|
.visuallyhidden {
|
||||||
|
position: absolute;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
overflow: hidden;
|
||||||
|
margin: -1px;
|
||||||
|
padding: 0;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
&.focusable {
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
position: static;
|
||||||
|
clip: auto;
|
||||||
|
overflow: visible;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Allow an element to be focusable via keyboard */
|
||||||
|
|
||||||
|
/* Hide but maintain layout */
|
||||||
|
|
||||||
|
.invisible {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 16.TEMPLATE SPECIFICS */
|
||||||
|
|
||||||
|
#goog-fixurl {
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 17.MODERNIZR */
|
||||||
|
|
||||||
|
/* MEDIA QUERIES */
|
||||||
|
|
||||||
|
/*Print __________________________________________________________________________________________________________ */
|
||||||
|
@media print {
|
||||||
|
* {
|
||||||
|
background: transparent !important;
|
||||||
|
color: black !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
filter: none !important;
|
||||||
|
-ms-filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 58%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stripe {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#profile,
|
||||||
|
#experience {
|
||||||
|
float: left;
|
||||||
|
width: 68%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#skills {
|
||||||
|
float: right;
|
||||||
|
width: 25%;
|
||||||
|
margin-left: 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#portfolio {
|
||||||
|
break-before: left;
|
||||||
|
float: left;
|
||||||
|
width: 68%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#interests,
|
||||||
|
#contact {
|
||||||
|
float: right;
|
||||||
|
width: 25%;
|
||||||
|
margin-left: 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #444 !important;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
color: #444 !important;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title]:after {
|
||||||
|
content: " (" attr(title) ")";
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
&[href^="javascript:"]:after,
|
||||||
|
&[href^="#"]:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
blockquote {
|
||||||
|
border: 1px solid #999;
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
display: table-header-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr,
|
||||||
|
img {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
@page {
|
||||||
|
margin: 0.5cm;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
orphans: 3;
|
||||||
|
widows: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*/mediaquery */
|
||||||
|
|
||||||
|
/*500px __________________________________________________________________________________________________________ */
|
||||||
|
@media only screen and (min-width: 540px) {
|
||||||
|
/* 3.TYPOGRAPHY */
|
||||||
|
/* 4.LINKS */
|
||||||
|
/* 5.FIGURES & IMAGES */
|
||||||
|
/* 6.TABLES */
|
||||||
|
/* 7.FORMS */
|
||||||
|
/* 8.BANNER */
|
||||||
|
/* 9.NAVIGATION */
|
||||||
|
/* 10.CONTENT */
|
||||||
|
/* #experience h4 { float: left; margin-top: 0; }
|
||||||
|
*#experience li { margin-top: 2.2em; }
|
||||||
|
*#experience .period { clear: none; text-align: right; position: relative; top: 0.1em; }
|
||||||
|
*#experience p { clear: both; } */
|
||||||
|
/* 11.MAIN */
|
||||||
|
/* 12.COMPLIMENTARY */
|
||||||
|
/* 13.CONTENTINFO */
|
||||||
|
/* 14.GLOBAL OBJECTS */
|
||||||
|
/* 15.VENDOR-SPECIFIC */
|
||||||
|
/* 16.TEMPLATE SPECIFICS */
|
||||||
|
/* 17.MODERNIZR */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*/mediaquery */
|
||||||
|
|
||||||
|
/*480px __________________________________________________________________________________________________________ */
|
||||||
|
@media only screen and (min-width: 640px) {
|
||||||
|
/* 1.ROOT */
|
||||||
|
/* 2.HEADINGS */
|
||||||
|
/* 3.TYPOGRAPHY */
|
||||||
|
/* 4.LINKS */
|
||||||
|
/* 5.FIGURES & IMAGES */
|
||||||
|
/* 6.TABLES */
|
||||||
|
/* 7.FORMS */
|
||||||
|
/* 8.BANNER */
|
||||||
|
/* 9.NAVIGATION */
|
||||||
|
/* 10.CONTENT */
|
||||||
|
/* 11.MAIN */
|
||||||
|
/* 12.COMPLIMENTARY */
|
||||||
|
/* 13.CONTENTINFO */
|
||||||
|
/* 14.GLOBAL OBJECTS */
|
||||||
|
/* 15.VENDOR-SPECIFIC */
|
||||||
|
/* 16.TEMPLATE SPECIFICS */
|
||||||
|
/* 17.MODERNIZR */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*/mediaquery */
|
||||||
|
|
||||||
|
/*768px __________________________________________________________________________________________________________ */
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
/* 3.TYPOGRAPHY */
|
||||||
|
/* 4.LINKS */
|
||||||
|
/* 5.FIGURES & IMAGES */
|
||||||
|
/* 6.TABLES */
|
||||||
|
/* 7.FORMS */
|
||||||
|
/* 8.BANNER */
|
||||||
|
/* 9.NAVIGATION */
|
||||||
|
/* 10.CONTENT */
|
||||||
|
/* 11.MAIN */
|
||||||
|
/* 12.COMPLIMENTARY */
|
||||||
|
/* 13.CONTENTINFO */
|
||||||
|
/* 14.GLOBAL OBJECTS */
|
||||||
|
/* 15.VENDOR-SPECIFIC */
|
||||||
|
/* 16.TEMPLATE SPECIFICS */
|
||||||
|
/* 17.MODERNIZR */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*/mediaquery */
|
||||||
|
|
||||||
|
/*992px __________________________________________________________________________________________________________ */
|
||||||
|
@media only screen and (min-width: 992px) {
|
||||||
|
/* 1.ROOT */
|
||||||
|
.container {
|
||||||
|
max-width: 890px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2.HEADINGS */
|
||||||
|
/* 3.TYPOGRAPHY */
|
||||||
|
/* 4.LINKS */
|
||||||
|
/* 5.FIGURES & IMAGES */
|
||||||
|
/* 6.TABLES */
|
||||||
|
/* 7.FORMS */
|
||||||
|
/* 8.BANNER */
|
||||||
|
/* 9.NAVIGATION */
|
||||||
|
/* 10.CONTENT */
|
||||||
|
/* 11.MAIN */
|
||||||
|
/* 12.COMPLIMENTARY */
|
||||||
|
/* 13.CONTENTINFO */
|
||||||
|
/* 14.GLOBAL OBJECTS */
|
||||||
|
/* 15.VENDOR-SPECIFIC */
|
||||||
|
/* 16.TEMPLATE SPECIFICS */
|
||||||
|
/* 17.MODERNIZR */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*/mediaquery */
|
||||||
|
|
||||||
|
/*1382px __________________________________________________________________________________________________________ */
|
||||||
|
@media only screen and (min-width: 1382px) {
|
||||||
|
/* 1.ROOT */
|
||||||
|
/* 2.HEADINGS */
|
||||||
|
/* 3.TYPOGRAPHY */
|
||||||
|
/* 4.LINKS */
|
||||||
|
/* 5.FIGURES & IMAGES */
|
||||||
|
/* 6.TABLES */
|
||||||
|
/* 7.FORMS */
|
||||||
|
/* 8.BANNER */
|
||||||
|
/* 9.NAVIGATION */
|
||||||
|
/* 10.CONTENT */
|
||||||
|
/* 11.MAIN */
|
||||||
|
/* 12.COMPLIMENTARY */
|
||||||
|
/* 13.CONTENTINFO */
|
||||||
|
/* 14.GLOBAL OBJECTS */
|
||||||
|
/* 15.VENDOR-SPECIFIC */
|
||||||
|
/* 16.TEMPLATE SPECIFICS */
|
||||||
|
/* 17.MODERNIZR */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*/mediaquery */
|
||||||
|
|
||||||
|
/*2x __________________________________________________________________________________________________________ */
|
||||||
|
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||||
|
only screen and (min-device-pixel-ratio: 2) {
|
||||||
|
/* 1.ROOT */
|
||||||
|
/* 2.HEADINGS */
|
||||||
|
/* 3.TYPOGRAPHY */
|
||||||
|
/* 4.LINKS */
|
||||||
|
/* 5.FIGURES & IMAGES */
|
||||||
|
/* 6.TABLES */
|
||||||
|
/* 7.FORMS */
|
||||||
|
/* 8.BANNER */
|
||||||
|
/* 9.NAVIGATION */
|
||||||
|
/* 10.CONTENT */
|
||||||
|
/* 11.MAIN */
|
||||||
|
/* 12.COMPLIMENTARY */
|
||||||
|
/* 13.CONTENTINFO */
|
||||||
|
/* 14.GLOBAL OBJECTS */
|
||||||
|
/* 15.VENDOR-SPECIFIC */
|
||||||
|
/* 16.TEMPLATE SPECIFICS */
|
||||||
|
/* 17.MODERNIZR */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*/mediaquery */
|
||||||
|
|
||||||
|
/* Sources:
|
||||||
|
* http://meyerweb.com/eric/tools/css/reset
|
||||||
|
* http://people.opera.com/patrickl/experiments/keyboard/test
|
||||||
|
* http://gist.github.com/413930
|
||||||
|
* http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap
|
||||||
|
* http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars
|
||||||
|
* http://tjkdesign.com/ez-css/css/base.css
|
||||||
|
* http://viget.com/inspire/styling-the-button-element-in-internet-explorer
|
||||||
|
* http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing
|
||||||
|
* http://html5doctor.com/html-5-reset-stylesheet/
|
||||||
|
* http://praegnanz.de/weblog/htmlcssjs-kickstart/
|
||||||
|
* http://camendesign.com/design/
|
||||||
|
* http://yui.yahooapis.com/2.8.1/build/base/base.css
|
||||||
|
* http://webaim.org/techniques/css/invisiblecontent/
|
||||||
|
* http://drupal.org/node/897638 */
|
||||||
32
source/css/components/_content.scss
Normal file
32
source/css/components/_content.scss
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
.content {
|
||||||
|
@media only screen and (min-width: 640px) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 0fr 0fr 1fr;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"profile contact"
|
||||||
|
"experience skills"
|
||||||
|
"experience interests";
|
||||||
|
grid-gap: 0 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__profile {
|
||||||
|
grid-area: profile;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__contact {
|
||||||
|
grid-area: contact;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__skills {
|
||||||
|
grid-area: skills;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__experience {
|
||||||
|
grid-area: experience;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__interests {
|
||||||
|
grid-area: interests;
|
||||||
|
}
|
||||||
|
}
|
||||||
53
source/css/components/_header.scss
Normal file
53
source/css/components/_header.scss
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
.header {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1em;
|
||||||
|
margin-top: 2em;
|
||||||
|
margin-bottom: 2.5em;
|
||||||
|
|
||||||
|
@media only screen and (min-width: 580px) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__heading {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.1em;
|
||||||
|
font-size: 3em;
|
||||||
|
|
||||||
|
/* 48 / 16 = 3 */
|
||||||
|
line-height: 1.2;
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 3.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 580px) {
|
||||||
|
font-size: 3.3em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 820px) {
|
||||||
|
font-size: 5em;
|
||||||
|
margin-bottom: 0em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__subheading {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
@media only screen and (min-width: 580px) {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
172
source/css/components/_logo.scss
Normal file
172
source/css/components/_logo.scss
Normal file
@ -0,0 +1,172 @@
|
|||||||
|
:root {
|
||||||
|
--color-1: hsl(28, 100%, 48%);
|
||||||
|
--color-2: hsl(41, 100%, 50%);
|
||||||
|
--color-3: hsl(69, 100%, 43%);
|
||||||
|
--color-4: hsl(103, 80%, 46%);
|
||||||
|
--color-5: hsl(200, 100%, 50%);
|
||||||
|
--color-6: hsl(234, 100%, 68%);
|
||||||
|
--color-7: hsl(278, 100%, 63%);
|
||||||
|
--color-8: hsl(335, 85%, 63%);
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
--color-1: hsl(28, 90%, 48%);
|
||||||
|
--color-2: hsl(41, 90%, 50%);
|
||||||
|
--color-3: hsl(69, 90%, 43%);
|
||||||
|
--color-4: hsl(103, 70%, 46%);
|
||||||
|
--color-5: hsl(200, 90%, 50%);
|
||||||
|
--color-6: hsl(234, 90%, 68%);
|
||||||
|
--color-7: hsl(278, 90%, 60%);
|
||||||
|
--color-8: hsl(335, 80%, 63%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo__wrapper {
|
||||||
|
width: 10rem;
|
||||||
|
line-height: 0;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo__color {
|
||||||
|
animation-duration: 30s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-play-state: playing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo__color_1 {
|
||||||
|
animation-name: cycle_color_1;
|
||||||
|
}
|
||||||
|
.logo__color_2 {
|
||||||
|
animation-name: cycle_color_2;
|
||||||
|
}
|
||||||
|
.logo__color_3 {
|
||||||
|
animation-name: cycle_color_3;
|
||||||
|
}
|
||||||
|
.logo__color_4 {
|
||||||
|
animation-name: cycle_color_4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo__color_1 {
|
||||||
|
fill: var(--color-1);
|
||||||
|
}
|
||||||
|
.logo__color_2 {
|
||||||
|
fill: var(--color-3);
|
||||||
|
}
|
||||||
|
.logo__color_3 {
|
||||||
|
fill: var(--color-5);
|
||||||
|
}
|
||||||
|
.logo__color_4 {
|
||||||
|
fill: var(--color-7);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cycle_color_1 {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
fill: var(--color-1);
|
||||||
|
}
|
||||||
|
12.5% {
|
||||||
|
fill: var(--color-2);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
fill: var(--color-3);
|
||||||
|
}
|
||||||
|
37.5% {
|
||||||
|
fill: var(--color-4);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
fill: var(--color-5);
|
||||||
|
}
|
||||||
|
62.5% {
|
||||||
|
fill: var(--color-6);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
fill: var(--color-7);
|
||||||
|
}
|
||||||
|
87.5% {
|
||||||
|
fill: var(--color-8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cycle_color_2 {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
fill: var(--color-3);
|
||||||
|
}
|
||||||
|
12.5% {
|
||||||
|
fill: var(--color-4);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
fill: var(--color-5);
|
||||||
|
}
|
||||||
|
37.5% {
|
||||||
|
fill: var(--color-6);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
fill: var(--color-7);
|
||||||
|
}
|
||||||
|
62.5% {
|
||||||
|
fill: var(--color-8);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
fill: var(--color-1);
|
||||||
|
}
|
||||||
|
87.5% {
|
||||||
|
fill: var(--color-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cycle_color_3 {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
fill: var(--color-5);
|
||||||
|
}
|
||||||
|
12.5% {
|
||||||
|
fill: var(--color-6);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
fill: var(--color-7);
|
||||||
|
}
|
||||||
|
37.5% {
|
||||||
|
fill: var(--color-8);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
fill: var(--color-1);
|
||||||
|
}
|
||||||
|
62.5% {
|
||||||
|
fill: var(--color-2);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
fill: var(--color-3);
|
||||||
|
}
|
||||||
|
87.5% {
|
||||||
|
fill: var(--color-4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cycle_color_4 {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
fill: var(--color-7);
|
||||||
|
}
|
||||||
|
12.5% {
|
||||||
|
fill: var(--color-8);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
fill: var(--color-1);
|
||||||
|
}
|
||||||
|
37.5% {
|
||||||
|
fill: var(--color-2);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
fill: var(--color-3);
|
||||||
|
}
|
||||||
|
62.5% {
|
||||||
|
fill: var(--color-4);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
fill: var(--color-5);
|
||||||
|
}
|
||||||
|
87.5% {
|
||||||
|
fill: var(--color-6);
|
||||||
|
}
|
||||||
|
}
|
||||||
19
source/css/components/_stripe.scss
Normal file
19
source/css/components/_stripe.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
#stripe {
|
||||||
|
background: #262626;
|
||||||
|
height: 12px;
|
||||||
|
line-height: 0;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
height: 12px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
background: #121212;
|
||||||
|
}
|
||||||
|
}
|
||||||
38
source/css/elements/_a.scss
Normal file
38
source/css/elements/_a.scss
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
a {
|
||||||
|
outline: none;
|
||||||
|
color: hsl(202, 77%, 39%);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
outline: none;
|
||||||
|
color: hsl(202, 77%, 39%);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
color: hsl(202, 67%, 29%);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
outline: none;
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
color: hsl(202, 67%, 59%);
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
color: hsl(202, 67%, 59%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
color: hsl(202, 67%, 79%);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
4
source/css/elements/_abbr.scss
Normal file
4
source/css/elements/_abbr.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
abbr[title] {
|
||||||
|
border-bottom: 1px dotted;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
4
source/css/elements/_block.scss
Normal file
4
source/css/elements/_block.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
p,
|
||||||
|
li {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
35
source/css/elements/_body.scss
Normal file
35
source/css/elements/_body.scss
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
body {
|
||||||
|
background: white;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(239, 239, 239, 1) 0%,
|
||||||
|
rgba(255, 255, 255, 1) 35%,
|
||||||
|
rgba(255, 255, 255, 1) 65%,
|
||||||
|
rgba(239, 239, 239, 1) 100%
|
||||||
|
);
|
||||||
|
color: #262626;
|
||||||
|
font-weight: 300;
|
||||||
|
font: 100% / 1.5 "Gotham SSm A", "Gotham SSm B", sans-serif;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 0;
|
||||||
|
|
||||||
|
@media only screen and (min-width: 540px) {
|
||||||
|
font-size: 1.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
background: #262626;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(38, 38, 38, 1) 0%,
|
||||||
|
rgba(46, 46, 46, 1) 35%,
|
||||||
|
rgba(46, 46, 46, 1) 65%,
|
||||||
|
rgba(38, 38, 38, 1) 100%
|
||||||
|
);
|
||||||
|
color: #eeeeee;
|
||||||
|
}
|
||||||
|
}
|
||||||
52
source/css/elements/_headings.scss
Normal file
52
source/css/elements/_headings.scss
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica,
|
||||||
|
Arial, serif;
|
||||||
|
font-weight: 700;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
font-size: 1.7em;
|
||||||
|
|
||||||
|
/* 36 / 16 = 2 */
|
||||||
|
line-height: 1.2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
font-size: 1.4em;
|
||||||
|
|
||||||
|
/* 24 / 16 = 1.5 */
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 */
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
/* 16 / 16 = 1 */
|
||||||
|
}
|
||||||
4
source/css/elements/_html.scss
Normal file
4
source/css/elements/_html.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
html {
|
||||||
|
background: white;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
27
source/css/elements/_lists.scss
Normal file
27
source/css/elements/_lists.scss
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: 0 0 0 -24px;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
ul {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
/* 16 / 16 = 1 */
|
||||||
|
}
|
||||||
|
}
|
||||||
11
source/css/generic/_box-sizing.scss
Normal file
11
source/css/generic/_box-sizing.scss
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
/* apply a natural box layout model to all elements, but allowing components to change */
|
||||||
|
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
div,
|
div,
|
||||||
@ -81,10 +80,8 @@ mark,
|
|||||||
audio,
|
audio,
|
||||||
video {
|
video {
|
||||||
border: 0;
|
border: 0;
|
||||||
font: inherit;
|
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
/* Forms
|
|
||||||
|
|
||||||
_____________________________________________________
|
|
||||||
|
|
||||||
320 and Up boilerplate extension
|
|
||||||
|
|
||||||
Author: Andy Clarke
|
|
||||||
Version: 0.9b
|
|
||||||
URL: http://stuffandnonsense.co.uk/projects/320andup/
|
|
||||||
License: http://creativecommons.org/licenses/MIT/
|
|
||||||
_____________________________________________________
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
form {
|
|
||||||
margin-bottom : 1.5em; }
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
margin-bottom : 1.5em;
|
|
||||||
padding : 0;
|
|
||||||
border-width : 0; }
|
|
||||||
|
|
||||||
legend {
|
|
||||||
margin-top : -.2em 0 1em 0;
|
|
||||||
font-weight : bold;
|
|
||||||
font-size : 1.2em; }
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight : normal; }
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
margin : 0; }
|
|
||||||
|
|
||||||
label,
|
|
||||||
input[type="button"],
|
|
||||||
input[type="submit"],
|
|
||||||
input[type="image"],
|
|
||||||
button {
|
|
||||||
cursor : pointer; }
|
|
||||||
|
|
||||||
input,
|
|
||||||
select {
|
|
||||||
vertical-align : middle; }
|
|
||||||
|
|
||||||
input[type=text],
|
|
||||||
input[type=password],
|
|
||||||
input[type=tel],
|
|
||||||
input[type=email],
|
|
||||||
input[type=url],
|
|
||||||
input[type=search],
|
|
||||||
textarea {
|
|
||||||
padding : 2px;
|
|
||||||
width : 100%;
|
|
||||||
background-color : rgb(255,255,255);
|
|
||||||
border : 1px solid rgb(200,200,200);
|
|
||||||
font-family : inherit;
|
|
||||||
font-size : inherit; }
|
|
||||||
|
|
||||||
input[type=text]:focus,
|
|
||||||
input[type=password]:focus,
|
|
||||||
input[type=tel]:focus,
|
|
||||||
input[type=email]:focus,
|
|
||||||
input[type=url]:focus,
|
|
||||||
input[type=search]:focus,
|
|
||||||
textarea:focus {
|
|
||||||
border-color : rgb(100,100,100); }
|
|
||||||
|
|
||||||
input[type="radio"] {
|
|
||||||
vertical-align : text-bottom; }
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
vertical-align : bottom; }
|
|
||||||
|
|
||||||
/* Colors for form validity */
|
|
||||||
input:valid,
|
|
||||||
textarea:valid {
|
|
||||||
/* Styles */ }
|
|
||||||
|
|
||||||
input:invalid,
|
|
||||||
textarea:invalid {
|
|
||||||
-webkit-box-shadow : 0 0 2px rgb(255,0,0);
|
|
||||||
-moz-box-shadow : 0 0 2px rgb(255,0,0);
|
|
||||||
box-shadow : 0 0 2px rgb(255,0,0); }
|
|
||||||
|
|
||||||
.no-boxshadow input:invalid,
|
|
||||||
.no-boxshadow textarea:invalid {
|
|
||||||
background-color : rgb(240,221,221); }
|
|
||||||
|
|
||||||
select {
|
|
||||||
margin : .5em 0;
|
|
||||||
background-color : rgb(255,255,255);
|
|
||||||
border-width : 1px;
|
|
||||||
border-style : solid; }
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow : auto;
|
|
||||||
padding : 2px; }
|
|
||||||
|
|
||||||
button {
|
|
||||||
width : auto;
|
|
||||||
padding : 8px 12px 9px;
|
|
||||||
overflow : visible;
|
|
||||||
background-color : rgb(227,227,227);
|
|
||||||
border : 1px solid rgb(204,204,204);
|
|
||||||
border-bottom-color : rgb(187,187,187);
|
|
||||||
font-family : "Helvetica Neue", Helvetica, Arial;
|
|
||||||
font-size : .875em;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align : center;
|
|
||||||
line-height : 1;
|
|
||||||
color : rgb(51,51,51);
|
|
||||||
text-shadow : 0 1px 0 rgb(255,255,255); }
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
cursor : pointer;
|
|
||||||
background-color : rgb(217,217,217); }
|
|
||||||
|
|
||||||
.ie6 legend,
|
|
||||||
.ie7 legend {
|
|
||||||
margin-left : -7px; }
|
|
||||||
|
|
||||||
.ie6 input {
|
|
||||||
vertical-align : text-bottom; }
|
|
||||||
|
|
||||||
.ie7 input[type="checkbox"],
|
|
||||||
.iem7 input[type="checkbox"] {
|
|
||||||
vertical-align : baseline; }
|
|
||||||
5
source/css/objects/_container.scss
Normal file
5
source/css/objects/_container.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.container {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 0;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
@ -1,882 +1,40 @@
|
|||||||
/* ====================================================
|
// 0. Vendor - Imported from other source
|
||||||
*
|
@import "vendor/iconfont";
|
||||||
* Dan Barber CV Styles
|
|
||||||
* Based on:
|
// 1. Settings – used with preprocessors and contain font,
|
||||||
* 320 and Up boilerplate extension
|
// colors definitions, etc.
|
||||||
*
|
|
||||||
* Author: Andy Clarke
|
// 2. Tools – globally used mixins and functions.
|
||||||
* Version: 0.9b
|
// It’s important not to output any CSS in the first 2 layers.
|
||||||
* URL: http://stuffandnonsense.co.uk/projects/320andup/
|
|
||||||
* _____________________________________________________
|
// 3. Generic – reset and/or normalize styles, box-sizing definition, etc.
|
||||||
*
|
// This is the first layer which generates actual CSS.
|
||||||
* 1.ROOT
|
@import "generic/box-sizing";
|
||||||
* 2.HEADINGS
|
@import "generic/reset";
|
||||||
* 3.TYPOGRAPHY
|
|
||||||
* 4.LINKS
|
// 4. Elements – styling for bare HTML elements (like H1, A, etc.).
|
||||||
* 5.FIGURES & IMAGES
|
// These come with default styling from the browser so we can redefine
|
||||||
* 6.TABLES
|
// them here.
|
||||||
* 7.FORMS (See css/mylibs/forms.css)
|
@import "elements/a";
|
||||||
* 8.BANNER header[role="banner"]
|
@import "elements/abbr";
|
||||||
* 9.NAVIGATION nav[role="navigation"]
|
@import "elements/block";
|
||||||
* 10.CONTENT
|
@import "elements/body";
|
||||||
* 11.MAIN div[role="main"]
|
@import "elements/headings";
|
||||||
* 12.COMPLIMENTARY div[role="complementary"]
|
@import "elements/html";
|
||||||
* 13.CONTENTINFO footer[role="contentinfo"]
|
@import "elements/lists";
|
||||||
* 14.GLOBAL OBJECTS
|
|
||||||
* 15.VENDOR-SPECIFIC
|
// 5. Objects – class-based selectors which define undecorated design patterns,
|
||||||
* 16.TEMPLATE SPECIFICS
|
// for example media object known from OOCSS
|
||||||
* 17.MODERNIZR
|
@import "objects/container";
|
||||||
*
|
|
||||||
* COLOURS */
|
// 6. Components – specific UI components.
|
||||||
|
// This is where majority of our work takes place and our UI components
|
||||||
@import "iconfont";
|
// are often composed of Objects and Components
|
||||||
|
@import "components/stripe";
|
||||||
*,
|
@import "components/header";
|
||||||
*:before,
|
@import "components/logo";
|
||||||
*:after {
|
@import "components/content";
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
// 7. Utilities – utilities and helper classes with ability to override
|
||||||
|
// anything which goes before in the triangle, eg. hide helper class
|
||||||
@import "reset";
|
@import "legacy";
|
||||||
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
details,
|
|
||||||
figcaption,
|
|
||||||
figure,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
hgroup,
|
|
||||||
menu,
|
|
||||||
nav,
|
|
||||||
section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: 1px dotted;
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 1.ROOT*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
background: white;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: white;
|
|
||||||
background: -moz-linear-gradient(left, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%);
|
|
||||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(239, 239, 239, 1)), color-stop(35%, rgba(255, 255, 255, 1)), color-stop(65%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(239, 239, 239, 1)));
|
|
||||||
background: -webkit-linear-gradient(left, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%);
|
|
||||||
background: -o-linear-gradient(left, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%);
|
|
||||||
background: -ms-linear-gradient(left, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%);
|
|
||||||
background: linear-gradient(to right, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(239, 239, 239, 1) 100%);
|
|
||||||
color: #262626;
|
|
||||||
font-weight: 300;
|
|
||||||
font: 100% / 1.5 "Gotham SSm A", "Gotham SSm B", sans-serif;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
li {
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
#stripe {
|
|
||||||
background: #262626;
|
|
||||||
height: 12px;
|
|
||||||
line-height: 0;
|
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
height: 12px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 0;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2.HEADINGS */
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: "Gotham SSm A", "Gotham SSm B", "Helvetica Neue", Helvetica, Arial, serif;
|
|
||||||
font-weight: 700;
|
|
||||||
text-shadow: 1px 1px 1px white;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0.1em;
|
|
||||||
font-size: 3em;
|
|
||||||
|
|
||||||
/* 48 / 16 = 3 */
|
|
||||||
line-height: 1.2;
|
|
||||||
font-weight: 800;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
display: block;
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin-top: 0.3em;
|
|
||||||
margin-bottom: 0.1em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide the logomark in ie7/8 as it just doesn't work correctly. It's not essential. */
|
|
||||||
|
|
||||||
.ie8 h1:before, .ie7 h1:before {
|
|
||||||
border: 1px solid red;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 0.75em;
|
|
||||||
font-size: 1.7em;
|
|
||||||
|
|
||||||
/* 36 / 16 = 2 */
|
|
||||||
line-height: 1.2;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
font-size: 1.4em;
|
|
||||||
|
|
||||||
/* 24 / 16 = 1.5 */
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 */
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: 1em;
|
|
||||||
|
|
||||||
/* 16 / 16 = 1 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 3.TYPOGRAPHY */
|
|
||||||
|
|
||||||
.link {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.period {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
p, ol, ul, dl, address {
|
|
||||||
margin-bottom: 0.75em;
|
|
||||||
font-size: 1em;
|
|
||||||
|
|
||||||
/* 16 / 16 = 1 */
|
|
||||||
}
|
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
margin: 0 0 0 -24px;
|
|
||||||
padding-left: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
ul {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
ul, ol {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1em;
|
|
||||||
|
|
||||||
/* 16 / 16 = 1 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container > section {
|
|
||||||
border-top: 2px solid #666;
|
|
||||||
padding-top: 1em;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skills,
|
|
||||||
#interests {
|
|
||||||
ul, ol {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dl, dd {
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin: 0 0 1.5em -24px;
|
|
||||||
padding-left: 24px;
|
|
||||||
border-left: 1px solid rgb(200, 200, 200);
|
|
||||||
font-style: italic;
|
|
||||||
|
|
||||||
&:before, &:after {
|
|
||||||
content: "";
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
q {
|
|
||||||
&:before, &:after {
|
|
||||||
content: "";
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
b, strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
i, em {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup, sub {
|
|
||||||
position: relative;
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
address {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
white-space: pre;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-wrap: break-word;
|
|
||||||
font: 0.875em "andale mono", "lucida console", monospace;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font: 0.875em "andale mono", "lucida console", monospace;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 1em;
|
|
||||||
|
|
||||||
/* 16 / 16 = 1 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 4.LINKS */
|
|
||||||
|
|
||||||
a {
|
|
||||||
outline: none;
|
|
||||||
color: rgb(23, 119, 175);
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:visited {
|
|
||||||
outline: none;
|
|
||||||
color: rgb(23, 119, 175);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
|
||||||
outline: none;
|
|
||||||
color: rgb(40, 40, 40);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
outline: none;
|
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 5.FIGURES & IMAGES */
|
|
||||||
|
|
||||||
figure {
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
|
|
||||||
img, object, embed {
|
|
||||||
margin-bottom: 0.75em;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
figcaption {
|
|
||||||
display: block;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 6.TABLES */
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
margin-bottom: 1.4em;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 0.875em;
|
|
||||||
|
|
||||||
/* 14 / 16 = .875 */
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 0.25em 10px 0.25em 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td, caption {
|
|
||||||
padding: 0.25em 10px 0.25em 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tfoot {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 7.FORMS (See css/mylibs/forms.css) */
|
|
||||||
|
|
||||||
/* 8.BANNER */
|
|
||||||
/* 9.NAVIGATION */
|
|
||||||
/* 10.CONTENT */
|
|
||||||
/* 11.MAIN */
|
|
||||||
/* 12.COMPLIMENTARY */
|
|
||||||
/* 13.CONTENTINFO */
|
|
||||||
|
|
||||||
/* 14.GLOBAL OBJECTS */
|
|
||||||
|
|
||||||
.clearfix {
|
|
||||||
zoom: 1;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 15.VENDOR-SPECIFIC */
|
|
||||||
|
|
||||||
body {
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
-ms-text-size-adjust: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link {
|
|
||||||
-webkit-tap-highlight-color: rgb(52, 158, 219);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-selection {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
background: rgb(23, 119, 175);
|
|
||||||
color: rgb(250, 250, 250);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 0.875em;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* input[type=search] { -webkit-appearance: none; }
|
|
||||||
*
|
|
||||||
*input[type="search"]::-webkit-search-decoration,
|
|
||||||
*input[type="search"]::-webkit-search-cancel-button { display: none; } */
|
|
||||||
|
|
||||||
input:-moz-placeholder {
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 0.875em;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ie7 img, .iem7 img {
|
|
||||||
-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Non-semantic helper classes */
|
|
||||||
|
|
||||||
/* Image replacement */
|
|
||||||
|
|
||||||
.ir {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide visually */
|
|
||||||
|
|
||||||
.visuallyhidden {
|
|
||||||
position: absolute;
|
|
||||||
clip: rect(0 0 0 0);
|
|
||||||
overflow: hidden;
|
|
||||||
margin: -1px;
|
|
||||||
padding: 0;
|
|
||||||
height: 1px;
|
|
||||||
width: 1px;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
&.focusable {
|
|
||||||
&:active, &:focus {
|
|
||||||
position: static;
|
|
||||||
clip: auto;
|
|
||||||
overflow: visible;
|
|
||||||
height: auto;
|
|
||||||
margin: 0;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Allow an element to be focusable via keyboard */
|
|
||||||
|
|
||||||
/* Hide but maintain layout */
|
|
||||||
|
|
||||||
.invisible {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 16.TEMPLATE SPECIFICS */
|
|
||||||
|
|
||||||
#goog-fixurl {
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 17.MODERNIZR */
|
|
||||||
|
|
||||||
/* MEDIA QUERIES */
|
|
||||||
|
|
||||||
/*Print __________________________________________________________________________________________________________ */
|
|
||||||
@media print {
|
|
||||||
* {
|
|
||||||
background: transparent !important;
|
|
||||||
color: black !important;
|
|
||||||
text-shadow: none !important;
|
|
||||||
filter: none !important;
|
|
||||||
-ms-filter: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-size: 58%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 0.5em;
|
|
||||||
text-align: left;
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 3.3em;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
float: right;
|
|
||||||
font-size: 1.5em;
|
|
||||||
width: 78px;
|
|
||||||
background-size: 78px;
|
|
||||||
background-position: top center;
|
|
||||||
position: relative;
|
|
||||||
top: 0em;
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: -0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#stripe {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profile, #experience {
|
|
||||||
float: left;
|
|
||||||
width: 68%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skills {
|
|
||||||
float: right;
|
|
||||||
width: 25%;
|
|
||||||
margin-left: 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#portfolio {
|
|
||||||
break-before: left;
|
|
||||||
float: left;
|
|
||||||
width: 68%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#interests, #contact {
|
|
||||||
float: right;
|
|
||||||
width: 25%;
|
|
||||||
margin-left: 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #444 !important;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
&:visited {
|
|
||||||
color: #444 !important;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title]:after {
|
|
||||||
content: " (" attr(title) ")";
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
&[href^="javascript:"]:after, &[href^="#"]:after {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre, blockquote {
|
|
||||||
border: 1px solid #999;
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
display: table-header-group;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr, img {
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
@page {
|
|
||||||
margin: 0.5cm;
|
|
||||||
}
|
|
||||||
|
|
||||||
p, h2, h3 {
|
|
||||||
orphans: 3;
|
|
||||||
widows: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2, h3 {
|
|
||||||
page-break-after: avoid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*/mediaquery */
|
|
||||||
|
|
||||||
/*500px __________________________________________________________________________________________________________ */
|
|
||||||
@media only screen and (min-width: 540px) {
|
|
||||||
/* 1.ROOT */
|
|
||||||
body {
|
|
||||||
font-size: 1.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2.HEADINGS */
|
|
||||||
h1 {
|
|
||||||
margin-top: 0.5em;
|
|
||||||
text-align: left;
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 3.3em;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
float: right;
|
|
||||||
font-size: 1.5em;
|
|
||||||
width: 78px;
|
|
||||||
background-size: 78px;
|
|
||||||
background-position: top center;
|
|
||||||
position: relative;
|
|
||||||
top: 0em;
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: -0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 3.TYPOGRAPHY */
|
|
||||||
/* 4.LINKS */
|
|
||||||
/* 5.FIGURES & IMAGES */
|
|
||||||
/* 6.TABLES */
|
|
||||||
/* 7.FORMS */
|
|
||||||
/* 8.BANNER */
|
|
||||||
/* 9.NAVIGATION */
|
|
||||||
/* 10.CONTENT */
|
|
||||||
/* #experience h4 { float: left; margin-top: 0; }
|
|
||||||
*#experience li { margin-top: 2.2em; }
|
|
||||||
*#experience .period { clear: none; text-align: right; position: relative; top: 0.1em; }
|
|
||||||
*#experience p { clear: both; } */
|
|
||||||
/* 11.MAIN */
|
|
||||||
/* 12.COMPLIMENTARY */
|
|
||||||
/* 13.CONTENTINFO */
|
|
||||||
/* 14.GLOBAL OBJECTS */
|
|
||||||
/* 15.VENDOR-SPECIFIC */
|
|
||||||
/* 16.TEMPLATE SPECIFICS */
|
|
||||||
/* 17.MODERNIZR */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*/mediaquery */
|
|
||||||
|
|
||||||
/*480px __________________________________________________________________________________________________________ */
|
|
||||||
@media only screen and (min-width: 640px) {
|
|
||||||
/* 1.ROOT */
|
|
||||||
/* 2.HEADINGS */
|
|
||||||
/* 3.TYPOGRAPHY */
|
|
||||||
/* 4.LINKS */
|
|
||||||
/* 5.FIGURES & IMAGES */
|
|
||||||
/* 6.TABLES */
|
|
||||||
/* 7.FORMS */
|
|
||||||
/* 8.BANNER */
|
|
||||||
/* 9.NAVIGATION */
|
|
||||||
/* 10.CONTENT */
|
|
||||||
#profile, #experience {
|
|
||||||
float: left;
|
|
||||||
width: 63%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skills {
|
|
||||||
float: right;
|
|
||||||
width: 30%;
|
|
||||||
margin-left: 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#portfolio {
|
|
||||||
float: left;
|
|
||||||
width: 63%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#interests, #contact {
|
|
||||||
float: right;
|
|
||||||
width: 30%;
|
|
||||||
margin-left: 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 11.MAIN */
|
|
||||||
/* 12.COMPLIMENTARY */
|
|
||||||
/* 13.CONTENTINFO */
|
|
||||||
/* 14.GLOBAL OBJECTS */
|
|
||||||
/* 15.VENDOR-SPECIFIC */
|
|
||||||
/* 16.TEMPLATE SPECIFICS */
|
|
||||||
/* 17.MODERNIZR */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*/mediaquery */
|
|
||||||
|
|
||||||
/*768px __________________________________________________________________________________________________________ */
|
|
||||||
@media only screen and (min-width: 768px) {
|
|
||||||
/* 1.ROOT */
|
|
||||||
body {
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2.HEADINGS */
|
|
||||||
h1 {
|
|
||||||
font-size: 5em;
|
|
||||||
margin-bottom: 0em;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
width: 130px;
|
|
||||||
background-size: 130px;
|
|
||||||
background-position: top center;
|
|
||||||
position: relative;
|
|
||||||
top: 0em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 3.TYPOGRAPHY */
|
|
||||||
/* 4.LINKS */
|
|
||||||
/* 5.FIGURES & IMAGES */
|
|
||||||
/* 6.TABLES */
|
|
||||||
/* 7.FORMS */
|
|
||||||
/* 8.BANNER */
|
|
||||||
/* 9.NAVIGATION */
|
|
||||||
/* 10.CONTENT */
|
|
||||||
/* 11.MAIN */
|
|
||||||
/* 12.COMPLIMENTARY */
|
|
||||||
/* 13.CONTENTINFO */
|
|
||||||
/* 14.GLOBAL OBJECTS */
|
|
||||||
/* 15.VENDOR-SPECIFIC */
|
|
||||||
/* 16.TEMPLATE SPECIFICS */
|
|
||||||
/* 17.MODERNIZR */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*/mediaquery */
|
|
||||||
|
|
||||||
/*992px __________________________________________________________________________________________________________ */
|
|
||||||
@media only screen and (min-width: 992px) {
|
|
||||||
/* 1.ROOT */
|
|
||||||
.container {
|
|
||||||
max-width: 890px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2.HEADINGS */
|
|
||||||
/* 3.TYPOGRAPHY */
|
|
||||||
/* 4.LINKS */
|
|
||||||
/* 5.FIGURES & IMAGES */
|
|
||||||
/* 6.TABLES */
|
|
||||||
/* 7.FORMS */
|
|
||||||
/* 8.BANNER */
|
|
||||||
/* 9.NAVIGATION */
|
|
||||||
/* 10.CONTENT */
|
|
||||||
/* 11.MAIN */
|
|
||||||
/* 12.COMPLIMENTARY */
|
|
||||||
/* 13.CONTENTINFO */
|
|
||||||
/* 14.GLOBAL OBJECTS */
|
|
||||||
/* 15.VENDOR-SPECIFIC */
|
|
||||||
/* 16.TEMPLATE SPECIFICS */
|
|
||||||
/* 17.MODERNIZR */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*/mediaquery */
|
|
||||||
|
|
||||||
/*1382px __________________________________________________________________________________________________________ */
|
|
||||||
@media only screen and (min-width: 1382px) {
|
|
||||||
/* 1.ROOT */
|
|
||||||
/* 2.HEADINGS */
|
|
||||||
/* 3.TYPOGRAPHY */
|
|
||||||
/* 4.LINKS */
|
|
||||||
/* 5.FIGURES & IMAGES */
|
|
||||||
/* 6.TABLES */
|
|
||||||
/* 7.FORMS */
|
|
||||||
/* 8.BANNER */
|
|
||||||
/* 9.NAVIGATION */
|
|
||||||
/* 10.CONTENT */
|
|
||||||
/* 11.MAIN */
|
|
||||||
/* 12.COMPLIMENTARY */
|
|
||||||
/* 13.CONTENTINFO */
|
|
||||||
/* 14.GLOBAL OBJECTS */
|
|
||||||
/* 15.VENDOR-SPECIFIC */
|
|
||||||
/* 16.TEMPLATE SPECIFICS */
|
|
||||||
/* 17.MODERNIZR */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*/mediaquery */
|
|
||||||
|
|
||||||
/*2x __________________________________________________________________________________________________________ */
|
|
||||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
|
|
||||||
/* 1.ROOT */
|
|
||||||
/* 2.HEADINGS */
|
|
||||||
/* 3.TYPOGRAPHY */
|
|
||||||
/* 4.LINKS */
|
|
||||||
/* 5.FIGURES & IMAGES */
|
|
||||||
/* 6.TABLES */
|
|
||||||
/* 7.FORMS */
|
|
||||||
/* 8.BANNER */
|
|
||||||
/* 9.NAVIGATION */
|
|
||||||
/* 10.CONTENT */
|
|
||||||
/* 11.MAIN */
|
|
||||||
/* 12.COMPLIMENTARY */
|
|
||||||
/* 13.CONTENTINFO */
|
|
||||||
/* 14.GLOBAL OBJECTS */
|
|
||||||
/* 15.VENDOR-SPECIFIC */
|
|
||||||
/* 16.TEMPLATE SPECIFICS */
|
|
||||||
/* 17.MODERNIZR */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*/mediaquery */
|
|
||||||
|
|
||||||
/* Sources:
|
|
||||||
* http://meyerweb.com/eric/tools/css/reset
|
|
||||||
* http://people.opera.com/patrickl/experiments/keyboard/test
|
|
||||||
* http://gist.github.com/413930
|
|
||||||
* http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap
|
|
||||||
* http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars
|
|
||||||
* http://tjkdesign.com/ez-css/css/base.css
|
|
||||||
* http://viget.com/inspire/styling-the-button-element-in-internet-explorer
|
|
||||||
* http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing
|
|
||||||
* http://html5doctor.com/html-5-reset-stylesheet/
|
|
||||||
* http://praegnanz.de/weblog/htmlcssjs-kickstart/
|
|
||||||
* http://camendesign.com/design/
|
|
||||||
* http://yui.yahooapis.com/2.8.1/build/base/base.css
|
|
||||||
* http://webaim.org/techniques/css/invisiblecontent/
|
|
||||||
* http://drupal.org/node/897638 */
|
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'icomoon';
|
font-family: "icomoon";
|
||||||
src:url('../fonts/icomoon.eot');
|
src: url("../fonts/icomoon.eot");
|
||||||
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
|
src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"),
|
||||||
url('../fonts/icomoon.woff') format('woff'),
|
url("../fonts/icomoon.woff") format("woff"),
|
||||||
url('../fonts/icomoon.ttf') format('truetype'),
|
url("../fonts/icomoon.ttf") format("truetype"),
|
||||||
url('../fonts/icomoon.svg#icomoon') format('svg');
|
url("../fonts/icomoon.svg#icomoon") format("svg");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Use the following CSS code if you want to use data attributes for inserting your icons */
|
/* Use the following CSS code if you want to use data attributes for inserting your icons */
|
||||||
[data-icon]:before {
|
[data-icon]:before {
|
||||||
font-family: 'icomoon';
|
font-family: "icomoon";
|
||||||
content: attr(data-icon);
|
content: attr(data-icon);
|
||||||
speak: none;
|
speak: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@ -27,7 +27,7 @@
|
|||||||
you can use the generic selector below, but it's slower:
|
you can use the generic selector below, but it's slower:
|
||||||
*/
|
*/
|
||||||
[class*="icon-"]:before {
|
[class*="icon-"]:before {
|
||||||
font-family: 'icomoon';
|
font-family: "icomoon";
|
||||||
speak: none;
|
speak: none;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 599 B |
Binary file not shown.
|
Before Width: | Height: | Size: 599 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 614 B |
Binary file not shown.
|
Before Width: | Height: | Size: 804 B |
@ -1,17 +1,17 @@
|
|||||||
<main role="main" class="main-content container">
|
<main role="main" class="content main-content container">
|
||||||
<section id="profile">
|
<section id="profile" class="content__profile">
|
||||||
<%= partial "sections/_profile.markdown" %>
|
<%= partial "sections/_profile.markdown" %>
|
||||||
</section>
|
</section>
|
||||||
<section id="contact" class="vcard">
|
<section id="contact" class="content__contact" vcard">
|
||||||
<%= partial "sections/_contact.html.erb" %>
|
<%= partial "sections/_contact.html.erb" %>
|
||||||
</section>
|
</section>
|
||||||
<section id="skills">
|
<section id="skills" class="content__skills">
|
||||||
<%= partial "sections/_skills.markdown" %>
|
<%= partial "sections/_skills.markdown" %>
|
||||||
</section>
|
</section>
|
||||||
<section id="experience">
|
<section id="experience" class="content__experience">
|
||||||
<%= partial "sections/_experience.markdown" %>
|
<%= partial "sections/_experience.markdown" %>
|
||||||
</section>
|
</section>
|
||||||
<section id="interests">
|
<section id="interests" class="content__interests">
|
||||||
<%= partial "sections/_interests.markdown" %>
|
<%= partial "sections/_interests.markdown" %>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
22
source/js/script.js
Normal file
22
source/js/script.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
(function() {
|
||||||
|
var canvas, colour, colours, context, i, len, offset, results;
|
||||||
|
canvas = document.getElementById("colours");
|
||||||
|
context = canvas.getContext("2d");
|
||||||
|
colours = [
|
||||||
|
"hsl(28, 100%, 48%)",
|
||||||
|
"hsl(69, 100%, 43%)",
|
||||||
|
"hsl(200, 100%, 50%)",
|
||||||
|
"hsl(278, 100%, 60%)",
|
||||||
|
];
|
||||||
|
offset = 0;
|
||||||
|
results = [];
|
||||||
|
|
||||||
|
for (i = 0, len = colours.length; i < len; i++) {
|
||||||
|
colour = colours[i];
|
||||||
|
context.fillStyle = colour;
|
||||||
|
context.fillRect(offset, 0, 72, 12);
|
||||||
|
results.push((offset += 72));
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}).call(this);
|
||||||
@ -1,17 +0,0 @@
|
|||||||
if navigator.userAgent.match(/iPhone/i) or navigator.userAgent.match(/iPad/i)
|
|
||||||
viewportmeta = document.querySelectorAll("meta[name=\"viewport\"]")[0]
|
|
||||||
if viewportmeta
|
|
||||||
viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0"
|
|
||||||
document.body.addEventListener "gesturestart", (->
|
|
||||||
viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6"
|
|
||||||
), false
|
|
||||||
|
|
||||||
$ ->
|
|
||||||
canvas = document.getElementById("colours")
|
|
||||||
context = canvas.getContext("2d")
|
|
||||||
colours = ['#FF6205', '#8ED600', '#00BAEB']
|
|
||||||
offset = 0
|
|
||||||
for colour in colours
|
|
||||||
context.fillStyle = colour
|
|
||||||
context.fillRect(offset, 0, 72, 12)
|
|
||||||
offset += 72
|
|
||||||
@ -1,18 +1,2 @@
|
|||||||
<footer class="clearfix" role="contentinfo"></footer>
|
<footer class="clearfix" role="contentinfo"></footer>
|
||||||
<!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
|
|
||||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
|
|
||||||
<script src="js/plugins.js"></script>
|
|
||||||
<script src="js/script.js"></script>
|
<script src="js/script.js"></script>
|
||||||
<!--[if (lt IE 9) & (!IEMobile)]
|
|
||||||
<script src="js/libs/DOMAssistantCompressed-2.8.js"></script>
|
|
||||||
<script src="js/libs/selectivizr-1.0.1.js"></script>
|
|
||||||
<script src="js/libs/respond.min.js"></script>
|
|
||||||
-->
|
|
||||||
<!-- http://t.co/HZe9oJ4 -->
|
|
||||||
<script>
|
|
||||||
var _gaq=[['_setAccount','UA-603600-3'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
|
|
||||||
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
|
|
||||||
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
|
|
||||||
s.parentNode.insertBefore(g,s)}(document,'script'));
|
|
||||||
</script>
|
|
||||||
<noscript>Your browser does not support JavaScript!</noscript>
|
|
||||||
|
|||||||
@ -1,10 +1,5 @@
|
|||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<title>Dan Barber — Web Developer</title>
|
<title>Dan Barber — Web Developer</title>
|
||||||
<meta name="description"/>
|
|
||||||
<meta name="author"/>
|
|
||||||
<!-- http://t.co/dKP3o1e -->
|
|
||||||
<meta content="True" name="HandheldFriendly"/>
|
|
||||||
<meta content="320" name="MobileOptimized"/>
|
|
||||||
<meta content="target-densitydpi=160dpi, initial-scale=1" name="viewport"/>
|
<meta content="target-densitydpi=160dpi, initial-scale=1" name="viewport"/>
|
||||||
<!--
|
<!--
|
||||||
For less capable mobile browsers
|
For less capable mobile browsers
|
||||||
|
|||||||
@ -5,8 +5,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<header class="clearfix" role="banner">
|
<header class="clearfix" role="banner">
|
||||||
<div class="container">
|
<div class="header container">
|
||||||
<h1 class="icon-logo" id="main_heading">Dan Barber</h1>
|
<div class="logo">
|
||||||
<h2>Web Developer</h2>
|
<div class="logo__wrapper">
|
||||||
|
<%= partial "img/logo.svg" %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1 class="header__heading" id="main_heading">Dan Barber</h1>
|
||||||
|
<h2 class="header__subheading">Web Developer</h2>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -4,4 +4,3 @@
|
|||||||
<p><a class="email" href="mailto:hello@danbarber.me">hello@danbarber.me</a></p>
|
<p><a class="email" href="mailto:hello@danbarber.me">hello@danbarber.me</a></p>
|
||||||
<p><a class="url" href="https://danbarber.me">https://danbarber.me</a></p>
|
<p><a class="url" href="https://danbarber.me">https://danbarber.me</a></p>
|
||||||
<p class="icon-github"> <a class="url" href="http://github.com/danbee">github.com/danbee</a></p>
|
<p class="icon-github"> <a class="url" href="http://github.com/danbee">github.com/danbee</a></p>
|
||||||
<p class="icon-twitter"> <a class="url" href="http://twitter.com/_danbarber">@_danbarber</a></p>
|
|
||||||
|
|||||||
@ -1,17 +1,31 @@
|
|||||||
### Experience
|
### Experience
|
||||||
|
|
||||||
#### Buoy Software
|
#### [Imagine Learning](https://www.imaginelearning.com) (formerly Learnzillion)
|
||||||
|
|
||||||
Senior Developer: Feb 2021---Jun 2021
|
**Senior Developer**: Aug 2021---Present
|
||||||
|
|
||||||
* Worked with the product team to triage bugs and scope new features for
|
- Developed and deployed a new annotation feature for lesson plans. Implemented
|
||||||
|
a focused selection of drawing tools to teachers to use to annotate lessons.
|
||||||
|
This also uses websockets to broadcast annotations to students.
|
||||||
|
|
||||||
|
- Created a self service interface for curriculum team members to be able to
|
||||||
|
download standards for lesson plans.
|
||||||
|
|
||||||
|
- Created an interface for managing scheduled user imports and exports to and
|
||||||
|
from an external SFTP service.
|
||||||
|
|
||||||
|
#### [Buoy Software](https://www.buoysoftware.com)
|
||||||
|
|
||||||
|
**Senior Developer**: Feb 2021---Jun 2021
|
||||||
|
|
||||||
|
- Worked with the product team to triage bugs and scope new features for
|
||||||
software built to run the Parachute blood plasma donation centers.
|
software built to run the Parachute blood plasma donation centers.
|
||||||
|
|
||||||
* Created a new feature for the Parachute management app that consolidates all
|
- Created a new feature for the Parachute management app that consolidates all
|
||||||
the details of a single donation onto one page. The app uses a Ruby on Rails
|
the details of a single donation onto one page. The app uses a Ruby on Rails
|
||||||
GraphQL API and a React front-end.
|
GraphQL API and a React front-end.
|
||||||
|
|
||||||
* Created a new sign up flow and home screen for the React Native mobile app.
|
- Created a new sign up flow and home screen for the React Native mobile app.
|
||||||
|
|
||||||
#### [thoughtbot](https://thoughtbot.com) (formerly [New Bamboo](http://legacy.new-bamboo.co.uk))
|
#### [thoughtbot](https://thoughtbot.com) (formerly [New Bamboo](http://legacy.new-bamboo.co.uk))
|
||||||
|
|
||||||
@ -20,32 +34,32 @@ Senior Developer: Feb 2021---Jun 2021
|
|||||||
During my time at thoughtbot I worked on a large number of projects directly
|
During my time at thoughtbot I worked on a large number of projects directly
|
||||||
with clients. Here are some highlights from the projects I worked on:
|
with clients. Here are some highlights from the projects I worked on:
|
||||||
|
|
||||||
* Worked with an external designer to design and build a new website for [New
|
- Worked with an external designer to design and build a new website for [New
|
||||||
Bamboo](http://legacy.new-bamboo.co.uk).
|
Bamboo](http://legacy.new-bamboo.co.uk).
|
||||||
|
|
||||||
* Built a CMS and subscription system for a marketing intelligence firm using
|
- Built a CMS and subscription system for a marketing intelligence firm using
|
||||||
Ruby on Rails and ElasticSearch.
|
Ruby on Rails and ElasticSearch.
|
||||||
|
|
||||||
* Built a form system for an organisation that funds research in developing
|
- Built a form system for an organisation that funds research in developing
|
||||||
countries using a Ruby on Rails back-end and Angular front-end.
|
countries using a Ruby on Rails back-end and AngularJS front-end.
|
||||||
|
|
||||||
* Built a statistics dashboard for a company that provides cloud based banking
|
- Built a statistics dashboard for a company that provides cloud based banking
|
||||||
solutions using React.
|
solutions using React.
|
||||||
|
|
||||||
* Worked with a company that provides publishing services to musicians to
|
- Worked with a company that provides publishing services to musicians to
|
||||||
upgrade their website to the latest version of Ruby on Rails.
|
upgrade their website to the latest version of Ruby on Rails.
|
||||||
|
|
||||||
* Built a full MVP with sign up flow for a company offering mail order
|
- Built a full MVP with sign up flow for a company offering mail order
|
||||||
prescription medication using Ruby on Rails.
|
prescription medication using Ruby on Rails.
|
||||||
|
|
||||||
* Worked with a major health insurance provider to augment their web development
|
- Worked with a major health insurance provider to augment their web development
|
||||||
team.
|
team.
|
||||||
|
|
||||||
#### [Pixelhum](http://pixelhum.com)
|
#### [Pixelhum](http://pixelhum.com)
|
||||||
|
|
||||||
**Web Designer & Developer**: Aug 2010---Apr 2015
|
**Web Designer & Developer**: Aug 2010---Apr 2015
|
||||||
|
|
||||||
* Designed and built an E-commerce site for
|
- Designed and built an E-commerce site for
|
||||||
[Soundunlimited](https://web.archive.org/web/20130310015425/http://www.soundunlimited.co.uk/),
|
[Soundunlimited](https://web.archive.org/web/20130310015425/http://www.soundunlimited.co.uk/),
|
||||||
a Plymouth-based music shop.
|
a Plymouth-based music shop.
|
||||||
|
|
||||||
@ -53,18 +67,18 @@ with clients. Here are some highlights from the projects I worked on:
|
|||||||
|
|
||||||
**Web Developer**: Dec 2011---Nov 2012
|
**Web Developer**: Dec 2011---Nov 2012
|
||||||
|
|
||||||
* Continued the development of a CRM product built using Ruby on Rails 2.3.
|
- Continued the development of a CRM product built using Ruby on Rails 2.3.
|
||||||
|
|
||||||
* Migrated version control from SVN to git.
|
- Migrated version control from SVN to git.
|
||||||
|
|
||||||
#### [Abiquo](http://web.archive.org/web/20111005142120/http://www.abiquo.com/)
|
#### [Abiquo](http://web.archive.org/web/20111005142120/http://www.abiquo.com/)
|
||||||
|
|
||||||
**Web Developer**: Jun 2010---Oct 2011
|
**Web Developer**: Jun 2010---Oct 2011
|
||||||
|
|
||||||
* Updated and maintained Abiquo's websites, which were written in both PHP and
|
- Updated and maintained Abiquo's websites, which were written in both PHP and
|
||||||
Ruby on Rails.
|
Ruby on Rails.
|
||||||
|
|
||||||
* Rebuilt the virtual image exchange site,
|
- Rebuilt the virtual image exchange site,
|
||||||
[Thunderflash](http://web.archive.org/web/20110829022630/http://thunderflash.com/),
|
[Thunderflash](http://web.archive.org/web/20110829022630/http://thunderflash.com/),
|
||||||
using Ruby on Rails 3.
|
using Ruby on Rails 3.
|
||||||
|
|
||||||
@ -72,7 +86,7 @@ with clients. Here are some highlights from the projects I worked on:
|
|||||||
|
|
||||||
**Deputy Sysadmin**: Aug 2008---Jun 2010
|
**Deputy Sysadmin**: Aug 2008---Jun 2010
|
||||||
|
|
||||||
* Administered and augmented the existing web systems including Moodle, SugarCRM
|
- Administered and augmented the existing web systems including Moodle, SugarCRM
|
||||||
and others.
|
and others.
|
||||||
|
|
||||||
* Deputised for the System Administrator.
|
- Deputised for the System Administrator.
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user