diff --git a/_config.yml b/_config.yml index c73060d..dd5371c 100755 --- a/_config.yml +++ b/_config.yml @@ -7,7 +7,7 @@ author: Jason Gerbes twitter: username: jasongerbes - + defaults: - scope: path: "" @@ -22,5 +22,10 @@ social: - https://www.linkedin.com/in/jason-gerbes - https://github.com/jasongerbes -gems: +collections: + - sections + - experiences + - projects + +plugins: - jekyll-seo-tag diff --git a/_experiences/1-aut.html b/_experiences/1-aut.html new file mode 100644 index 0000000..50310c2 --- /dev/null +++ b/_experiences/1-aut.html @@ -0,0 +1,6 @@ +--- +date_range: "2013 - 2015" +company_name: "Auckland University of Technology" +role: "Bachelor of Computer Science" +blurb: "I majored in Computer Science and minored in Software Development. Courses included programming, network principles, database design, algorithm design and analysis, IT project management, and operating systems." +--- diff --git a/_experiences/2-asb.html b/_experiences/2-asb.html new file mode 100644 index 0000000..58d33f0 --- /dev/null +++ b/_experiences/2-asb.html @@ -0,0 +1,6 @@ +--- +date_range: "2015 - 2016" +company_name: "ASB Bank" +role: "Online Content Editor" +blurb: "I helped redesign and re-platform ASB's website, working directly with the marketing and development teams." +--- diff --git a/_experiences/3-at.html b/_experiences/3-at.html new file mode 100644 index 0000000..b654440 --- /dev/null +++ b/_experiences/3-at.html @@ -0,0 +1,6 @@ +--- +date_range: "2017" +company_name: "Auckland Transport" +role: "Online Content Editor" +blurb: "I created and iterated webpages for AT’s website, in adherence to the New Zealand Government’s web usability and accessibility standards." +--- diff --git a/_experiences/4-vista.html b/_experiences/4-vista.html new file mode 100644 index 0000000..797b231 --- /dev/null +++ b/_experiences/4-vista.html @@ -0,0 +1,6 @@ +--- +date_range: "2017 - Present" +company_name: "Vista Entertainment Solutions" +role: "Software Developer" +blurb: "I'm helping to maintain and extend a performance-focused API built around the widely-varying needs of Vista’s Cinema customers." +--- diff --git a/_layouts/default.html b/_layouts/default.html index e974d1f..721574b 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,4 +1,5 @@ + @@ -8,6 +9,6 @@ {{ content }} - + diff --git a/_projects/1-luminar.html b/_projects/1-luminar.html new file mode 100644 index 0000000..5efff15 --- /dev/null +++ b/_projects/1-luminar.html @@ -0,0 +1,8 @@ +--- +heading: "LuminAR - An augmented reality wayfinding application" +image_url: "/img/luminar.png" +image_class: "project__image--small" +image_title: "A screenshot of the LuminAR app being used on Queen Street in Auckland" +--- +

LuminAR is a proof-of-concept iOS app built in Xcode that uses augmented reality to navigate to nearby points of interest.

+

As this app was built before the release of ARKit, I created a custom sensor fusion algorithm to maintain a smooth and accurate compass heading.

diff --git a/_projects/2-storefront.html b/_projects/2-storefront.html new file mode 100644 index 0000000..d4b92bf --- /dev/null +++ b/_projects/2-storefront.html @@ -0,0 +1,7 @@ +--- +heading: "Storefront - An online marketplace for NZ's small businesses" +image_url: "/img/storefront.png" +image_title: "A screenshot of the Storefront website concept" +--- +

Storefront is an online marketplace concept that aims to offer a viable alternative to TradeMe for small businesses.

+

Storefront is a platform that uses the latest technologies to offer a modern ecommerce solution that costs less and provides much more extensive automation.

diff --git a/_projects/3-mini.html b/_projects/3-mini.html new file mode 100644 index 0000000..32e3bec --- /dev/null +++ b/_projects/3-mini.html @@ -0,0 +1,7 @@ +--- +heading: "MIINI - My classic Mini Cooper" +image_url: "/img/mini.jpg" +image_title: "A picture of my Rover Mini Cooper" +--- +

While they are not the most reliable, economical or practical cars, Minis are certainly the most fun.

+

My Rover Mini Cooper takes up much of my spare time, whether it be repairing a fault or searching the world for an obsolete part.

diff --git a/_sections/1-hero.html b/_sections/1-hero.html new file mode 100644 index 0000000..c512c02 --- /dev/null +++ b/_sections/1-hero.html @@ -0,0 +1,10 @@ +--- +class: "section--hero" +--- +
+
+
+

Jason Gerbes

+

I'm a Software Developer working in Auckland, New Zealand.

+
+
diff --git a/_sections/2-about.html b/_sections/2-about.html new file mode 100644 index 0000000..9bf1bef --- /dev/null +++ b/_sections/2-about.html @@ -0,0 +1,6 @@ +--- +heading: "A bit about me" +--- +

Born in the always-sunny Hawke's Bay of New Zealand, I moved to Auckland to pursue my passion for technology, design and sustainability.

+

Since graduating from Auckland University of Technology with a Bachelor of Computer Science, I have worked with a number of high profile New Zealand companies.

+

I'm always looking to work on the next big thing and draw inspiration from Apple, Vend, Tesla, SpaceX and Dyson.

diff --git a/_sections/3-experience.html b/_sections/3-experience.html new file mode 100644 index 0000000..f4014c7 --- /dev/null +++ b/_sections/3-experience.html @@ -0,0 +1,17 @@ +--- +heading: "My journey (so far)" +--- + diff --git a/_sections/4-projects.html b/_sections/4-projects.html new file mode 100644 index 0000000..155ce7d --- /dev/null +++ b/_sections/4-projects.html @@ -0,0 +1,15 @@ +--- +heading: "How I spend my spare time" +--- +{% for project in site.projects reversed %} +
+
+

{{ project.heading }}

+ {{ project.content }} +
+ {{ project.image_title }} +
+{% endfor %} diff --git a/_sections/5-contact.html b/_sections/5-contact.html new file mode 100644 index 0000000..ace39c8 --- /dev/null +++ b/_sections/5-contact.html @@ -0,0 +1,6 @@ +--- +heading: "Want to chat? I'd love to hear from you." +--- +
+ hello@jasongerbes.com +
diff --git a/css/base/_all.scss b/css/base/_all.scss new file mode 100644 index 0000000..b7ccb8d --- /dev/null +++ b/css/base/_all.scss @@ -0,0 +1,3 @@ +@import "reset"; +@import "fonts"; +@import "helpers"; diff --git a/css/base/fonts.scss b/css/base/fonts.scss new file mode 100644 index 0000000..85c5a5a --- /dev/null +++ b/css/base/fonts.scss @@ -0,0 +1,63 @@ +@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Roboto:300,400'); + +body { + color: $black; + font-size: 1.1rem; + line-height: 1.5; + font-weight: 400; + font-family: $font-family-body; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: $font-family-headings; + font-weight: 600; + color: $grey-dark; + line-height: 1.2; + margin-bottom: 0.5em; +} + +h1 { + font-size: 3em; + + @include tablet { + font-size: 3.5em; + } +} + +h2 { + font-size: 1.75em; + + @include tablet { + font-size: 2em; + } +} + +h3 { + font-size: 1.2em; + + @include tablet { + font-size: 1.3em; + } +} + +h4 { + font-size: 1em; + + @include tablet { + font-size: 1.1em; + } +} + +p:not(:last-child) { + margin-bottom: 1em; +} + +a { + color: $blue; + text-decoration: none; +} diff --git a/css/base/helpers.scss b/css/base/helpers.scss new file mode 100644 index 0000000..4a99b5e --- /dev/null +++ b/css/base/helpers.scss @@ -0,0 +1,11 @@ +.text-centered { + text-align: center; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} diff --git a/css/base/reset.scss b/css/base/reset.scss new file mode 100644 index 0000000..16e365d --- /dev/null +++ b/css/base/reset.scss @@ -0,0 +1,74 @@ +html { + box-sizing: border-box; + -webkit-text-size-adjust: 100%; +} + +* { + box-sizing: inherit; + + &:before, + &:after { + box-sizing: inherit; + } +} + +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; +} + +ul { + list-style: none; +} + +button, +input, +select, +textarea { + margin: 0; +} + +img, +embed, +object, +audio, +video { + max-width: 100%; +} + +iframe { + border: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; + text-align: left; +} diff --git a/css/modules/_all.scss b/css/modules/_all.scss new file mode 100644 index 0000000..a50102c --- /dev/null +++ b/css/modules/_all.scss @@ -0,0 +1,4 @@ +@import "section"; +@import "hero"; +@import "experience-list"; +@import "project"; diff --git a/css/modules/experience-list.scss b/css/modules/experience-list.scss new file mode 100644 index 0000000..7f2e5d9 --- /dev/null +++ b/css/modules/experience-list.scss @@ -0,0 +1,57 @@ +.experience-list { + padding: 0; + margin: 0; +} + +.experience-list-item { + position: relative; + padding-left: 40px; + display: flex; + flex-direction: column; + + &:not(:last-child) { + padding-bottom: 2em; + } + + &::before { + content: ''; + position: absolute; + top: 6px; + left: 0; + height: 15px; + width: 15px; + border-radius: 50%; + background-color: $blue; + } + + &::after { + content: ''; + position: absolute; + top: 26px; + left: 6px; + height: calc(100% - 26px); + width: 3px; + background-color: $grey; + } + + &__primary-details { + margin-bottom: 1em; + } + + &__date-range { + display: block; + color: $grey-dark; + margin-bottom: 0.5em; + } + + @include tablet { + flex-direction: row; + + &__primary-details { + margin-right: 2em; + margin-bottom: 0; + width: 45%; + flex-shrink: 0; + } + } +} diff --git a/css/modules/hero.scss b/css/modules/hero.scss new file mode 100644 index 0000000..9a971ab --- /dev/null +++ b/css/modules/hero.scss @@ -0,0 +1,63 @@ +@include tablet { + .section--hero { + padding-top: 120px; + padding-bottom: 80px; + } +} + +.hero { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + &__profile-image { + flex-shrink: 0; + border-radius: 50%; + width: 150px; + height: 150px; + box-shadow: $image-shadow; + margin-bottom: 1.5em; + background: { + image: url('/img/profile_image.jpg'); + position: center; + size: contain; + repeat: no-repeat; + } + } + + &__content { + max-width: 400px; + text-align: center; + } + + &__name { + margin: 0; + margin-bottom: 1rem; + } + + &__accented-text { + color: $blue; + } + + &__intro { + font-size: 1.3rem; + font-weight: 300; + margin: 0; + } + + @include tablet { + flex-direction: row; + + &__profile-image { + width: 200px; + height: 200px; + margin-right: 3em; + margin-bottom: 0; + } + + &__content { + text-align: left; + } + } +} diff --git a/css/modules/project.scss b/css/modules/project.scss new file mode 100644 index 0000000..fc1fecb --- /dev/null +++ b/css/modules/project.scss @@ -0,0 +1,53 @@ +.project { + display: flex; + flex-direction: column; + + &:not(:last-child) { + margin-bottom: 2.5em; + } + + &__details { + margin-bottom: 2em; + } + + &__image { + width: 100%; + height: auto; + box-shadow: $image-shadow; + + &--small { + max-width: 300px; + margin: 0 auto; + } + } + + @include tablet { + flex-direction: row; + justify-content: flex-start; + align-items: center; + + &:not(:last-child) { + margin-bottom: 4.5em; + } + + &__details { + margin-bottom: 0; + } + + &__image { + flex-shrink: 1; + width: 50%; + } + + &--image-left > &__image, + &--image-right > &__details { + margin-right: 2.5em; + order: 0; + } + + &--image-left > &__details, + &--image-right > &__image { + order: 1; + } + } +} diff --git a/css/modules/section.scss b/css/modules/section.scss new file mode 100644 index 0000000..fe523d4 --- /dev/null +++ b/css/modules/section.scss @@ -0,0 +1,31 @@ +.section { + padding: 50px 25px 70px; + position: relative; + + &__heading { + text-align: center; + margin-bottom: 1.5em; + } + + &__content { + max-width: 800px; + margin: 0 auto; + } + + &__overlay { + background-color: rgba($grey-dark, 0.3); + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + opacity: 0; + transition: opacity 30ms ease-in; + pointer-events: none; + } + + @include tablet { + padding-left: 50px; + padding-right: 50px; + } +} diff --git a/css/normalize.css b/css/normalize.css deleted file mode 100644 index 47b010e..0000000 --- a/css/normalize.css +++ /dev/null @@ -1,341 +0,0 @@ -/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/css/style.css b/css/style.css index fafb443..f6626af 100755 --- a/css/style.css +++ b/css/style.css @@ -1,302 +1 @@ -/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ -/* Document - ========================================================================== */ -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ -html { - line-height: 1.15; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ } - -/* Sections - ========================================================================== */ -/** - * Remove the margin in all browsers. - */ -body { - margin: 0; } - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - margin: 0.67em 0; } - -/* Grouping content - ========================================================================== */ -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ -hr { - -webkit-box-sizing: content-box; - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ } - -/* Text-level semantics - ========================================================================== */ -/** - * Remove the gray background on active links in IE 10. - */ -a { - background-color: transparent; } - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ -abbr[title] { - border-bottom: none; - /* 1 */ - text-decoration: underline; - /* 2 */ - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - /* 2 */ } - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ -b, -strong { - font-weight: bolder; } - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -code, -kbd, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ } - -/** - * Add the correct font size in all browsers. - */ -small { - font-size: 80%; } - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sub { - bottom: -0.25em; } - -sup { - top: -0.5em; } - -/* Embedded content - ========================================================================== */ -/** - * Remove the border on images inside links in IE 10. - */ -img { - border-style: none; } - -/* Forms - ========================================================================== */ -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - line-height: 1.15; - /* 1 */ - margin: 0; - /* 2 */ } - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ -button, -input { - /* 1 */ - overflow: visible; } - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ -button, -select { - /* 1 */ - text-transform: none; } - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; } - -/** - * Remove the inner border and padding in Firefox. - */ -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; } - -/** - * Restore the focus styles unset by the previous rule. - */ -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; } - -/** - * Correct the padding in Firefox. - */ -fieldset { - padding: 0.35em 0.75em 0.625em; } - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ -legend { - -webkit-box-sizing: border-box; - box-sizing: border-box; - /* 1 */ - color: inherit; - /* 2 */ - display: table; - /* 1 */ - max-width: 100%; - /* 1 */ - padding: 0; - /* 3 */ - white-space: normal; - /* 1 */ } - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ -progress { - vertical-align: baseline; } - -/** - * Remove the default vertical scrollbar in IE 10+. - */ -textarea { - overflow: auto; } - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ -[type="checkbox"], -[type="radio"] { - -webkit-box-sizing: border-box; - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ } - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; } - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ -[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ } - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ } - -/* Interactive - ========================================================================== */ -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ -details { - display: block; } - -/* - * Add the correct display in all browsers. - */ -summary { - display: list-item; } - -/* Misc - ========================================================================== */ -/** - * Add the correct display in IE 10+. - */ -template { - display: none; } - -/** - * Add the correct display in IE 10. - */ -[hidden] { - display: none; } +@import url(https://fonts.googleapis.com/css?family=Lato:400,700|Roboto:300,400);html{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:100%}*{-webkit-box-sizing:inherit;box-sizing:inherit}:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}ul{list-style:none}button,input,select,textarea{margin:0}audio,embed,img,object,video{max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}body{color:#424242;font-size:1.1rem;line-height:1.5;font-weight:400;font-family:Roboto,sans-serif}h1,h2,h3,h4,h5,h6{font-family:Lato,sans-serif;font-weight:600;color:#5e5e5e;line-height:1.2;margin-bottom:.5em}h1{font-size:3em}@media screen and (min-width:769px),print{h1{font-size:3.5em}}h2{font-size:1.75em}@media screen and (min-width:769px),print{h2{font-size:2em}}h3{font-size:1.2em}@media screen and (min-width:769px),print{h3{font-size:1.3em}}h4{font-size:1em}@media screen and (min-width:769px),print{h4{font-size:1.1em}}p:not(:last-child){margin-bottom:1em}a{color:#56c1ff;text-decoration:none}.text-centered{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.section{padding:50px 25px 70px;position:relative}.section__heading{text-align:center;margin-bottom:1.5em}.section__content{max-width:800px;margin:0 auto}.section__overlay{background-color:rgba(94,94,94,.3);position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;-webkit-transition:opacity 30ms ease-in;-o-transition:opacity 30ms ease-in;transition:opacity 30ms ease-in;pointer-events:none}@media screen and (min-width:769px),print{.section{padding-left:50px;padding-right:50px}}@media screen and (min-width:769px),print{.section--hero{padding-top:120px;padding-bottom:80px}}.hero{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.hero__profile-image{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-border-radius:50%;border-radius:50%;width:150px;height:150px;-webkit-box-shadow:0 50px 70px -40px rgba(0,0,0,.15),0 5px 20px 2px rgba(0,0,0,.05);box-shadow:0 50px 70px -40px rgba(0,0,0,.15),0 5px 20px 2px rgba(0,0,0,.05);margin-bottom:1.5em;background-image:url(/img/profile_image.jpg);background-position:center;-webkit-background-size:contain;background-size:contain;background-repeat:no-repeat}.hero__content{max-width:400px;text-align:center}.hero__name{margin:0;margin-bottom:1rem}.hero__accented-text{color:#56c1ff}.hero__intro{font-size:1.3rem;font-weight:300;margin:0}@media screen and (min-width:769px),print{.hero{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.hero__profile-image{width:200px;height:200px;margin-right:3em;margin-bottom:0}.hero__content{text-align:left}}.experience-list{padding:0;margin:0}.experience-list-item{position:relative;padding-left:40px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.experience-list-item:not(:last-child){padding-bottom:2em}.experience-list-item::before{content:'';position:absolute;top:6px;left:0;height:15px;width:15px;-webkit-border-radius:50%;border-radius:50%;background-color:#56c1ff}.experience-list-item::after{content:'';position:absolute;top:26px;left:6px;height:-webkit-calc(100% - 26px);height:calc(100% - 26px);width:3px;background-color:#cacaca}.experience-list-item__primary-details{margin-bottom:1em}.experience-list-item__date-range{display:block;color:#5e5e5e;margin-bottom:.5em}@media screen and (min-width:769px),print{.experience-list-item{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.experience-list-item__primary-details{margin-right:2em;margin-bottom:0;width:45%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}}.project{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.project:not(:last-child){margin-bottom:2.5em}.project__details{margin-bottom:2em}.project__image{width:100%;height:auto;-webkit-box-shadow:0 50px 70px -40px rgba(0,0,0,.15),0 5px 20px 2px rgba(0,0,0,.05);box-shadow:0 50px 70px -40px rgba(0,0,0,.15),0 5px 20px 2px rgba(0,0,0,.05)}.project__image--small{max-width:300px;margin:0 auto}@media screen and (min-width:769px),print{.project{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.project:not(:last-child){margin-bottom:4.5em}.project__details{margin-bottom:0}.project__image{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;width:50%}.project--image-left>.project__image,.project--image-right>.project__details{margin-right:2.5em;-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.project--image-left>.project__details,.project--image-right>.project__image{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index 87d2282..17f919a 100755 --- a/css/style.scss +++ b/css/style.scss @@ -1 +1,3 @@ -@import "normalize"; +@import "utilities/all"; +@import "base/all"; +@import "modules/all"; diff --git a/css/utilities/_all.scss b/css/utilities/_all.scss new file mode 100644 index 0000000..8cc02d6 --- /dev/null +++ b/css/utilities/_all.scss @@ -0,0 +1,2 @@ +@import "variables"; +@import "mixins"; diff --git a/css/utilities/mixins.scss b/css/utilities/mixins.scss new file mode 100644 index 0000000..b02b0ff --- /dev/null +++ b/css/utilities/mixins.scss @@ -0,0 +1,36 @@ +// Responive helpers +@mixin from($device) { + @media screen and (min-width: $device) { + @content; + } +} + +@mixin until($device) { + @media screen and (max-width: $device - 1px) { + @content; + } +} + +@mixin mobile { + @media screen and (max-width: $tablet - 1px) { + @content; + } +} + +@mixin tablet { + @media screen and (min-width: $tablet), print { + @content; + } +} + +@mixin tablet-only { + @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) { + @content; + } +} + +@mixin desktop { + @media screen and (min-width: $desktop) { + @content; + } +} diff --git a/css/utilities/variables.scss b/css/utilities/variables.scss new file mode 100644 index 0000000..eb9e83a --- /dev/null +++ b/css/utilities/variables.scss @@ -0,0 +1,16 @@ +// Colours +$blue: #56C1FF; +$black: #424242; +$grey: #CACACA; +$grey-dark: #5E5E5E; + +// Typography +$font-family-headings: 'Lato', sans-serif; +$font-family-body: 'Roboto', sans-serif; + +// Images +$image-shadow: 0px 50px 70px -40px rgba(0, 0, 0, 0.15), 0px 5px 20px 2px rgba(0, 0, 0, 0.05); + +// Responsiveness +$tablet: 769px; +$desktop: 960px; diff --git a/gulpfile.js b/gulpfile.js index 2e28b88..aa84c58 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,6 +4,7 @@ var sass = require('gulp-sass'); var prefix = require('gulp-autoprefixer'); var cp = require('child_process'); var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll'; +var cleanCss = require('gulp-clean-css'); /** * Build the Jekyll Site @@ -38,12 +39,12 @@ gulp.task('browser-sync', ['sass', 'jekyll-build'], function() { gulp.task('sass', function () { return gulp.src('css/style.scss') .pipe(sass({ - includePaths: ['css'], - onError: browserSync.notify - })) + includePaths: ['css'] + }).on('error', sass.logError)) .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) .pipe(gulp.dest('_site/css')) .pipe(browserSync.reload({stream:true})) + .pipe(cleanCss()) .pipe(gulp.dest('css')); }); @@ -52,8 +53,9 @@ gulp.task('sass', function () { * Watch html/md files, run jekyll & reload BrowserSync */ gulp.task('watch', function () { - gulp.watch('css/*', ['sass']); - gulp.watch(['*.html', '_layouts/*.html', '_includes/*.html', '_config.yml'], ['jekyll-rebuild']); + gulp.watch('css/**', ['sass']); + gulp.watch(['*.html', '_layouts/*.html', '_includes/*.html', '_sections/*.html', '_experiences/*.html', '_projects/*.html', '_config.yml'], ['jekyll-rebuild']); + gulp.watch('js/*', ['jekyll-rebuild']); }); /** diff --git a/img/luminar.png b/img/luminar.png new file mode 100755 index 0000000..bbff549 Binary files /dev/null and b/img/luminar.png differ diff --git a/img/mini.jpg b/img/mini.jpg new file mode 100644 index 0000000..6e8d3a4 Binary files /dev/null and b/img/mini.jpg differ diff --git a/img/storefront.png b/img/storefront.png new file mode 100644 index 0000000..f783d30 Binary files /dev/null and b/img/storefront.png differ diff --git a/index.html b/index.html index af2788f..cbfc4a2 100755 --- a/index.html +++ b/index.html @@ -1,6 +1,16 @@ --- layout: default +title: Jason Gerbes +description: Software Developer working in Auckland, New Zealand. --- - -

Hello world, from Jason Gerbes

-

This website is under development. In the meantime, please check out my LinkedIn profile.

+{% for section in site.sections %} +
+ {% if section.heading != null %} +

{{ section.heading }}

+ {% endif %} +
+ {{ section.content }} +
+
+
+{% endfor %} diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..39ad51d --- /dev/null +++ b/js/app.js @@ -0,0 +1,44 @@ +window.onscroll = function() { + var wScroll = getScrollPosition(); + updateSectionOpacities(wScroll); +}; + +window.onresize = function() { + var wScroll = getScrollPosition(); + updateSectionOpacities(wScroll); +} + +function getScrollPosition() { + return wScroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop; +} + +var sections = Array.from(document.getElementsByClassName("section")); + +function updateSectionOpacities(wScroll) { + var threshold = window.innerHeight / 3; // 33% of window height + + sections.forEach(function(section) { + var overlay = section.getElementsByClassName("section__overlay")[0]; + if (overlay == null) return; + + var bounds = section.getBoundingClientRect(); + + if (wScroll <= bounds.y) { + overlay.style.opacity = 0; + } + else { + var sectionTop = bounds.y + wScroll; + var visibleHeight = sectionTop - wScroll + bounds.height; + + if (visibleHeight <= 0) { + overlay.style.opacity = 1; + } + else if (visibleHeight < threshold) { + overlay.style.opacity = 1 - (visibleHeight / threshold); + } + else { + overlay.style.opacity = 0; + } + } + }); +} diff --git a/package-lock.json b/package-lock.json index 5a2b87e..43484ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,15 @@ "ansi-wrap": "0.1.0" } }, + "ansi-cyan": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/ansi-cyan/-/ansi-cyan-0.1.1.tgz", + "integrity": "sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=", + "dev": true, + "requires": { + "ansi-wrap": "0.1.0" + } + }, "ansi-gray": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz", @@ -60,6 +69,15 @@ "ansi-wrap": "0.1.0" } }, + "ansi-red": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz", + "integrity": "sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=", + "dev": true, + "requires": { + "ansi-wrap": "0.1.0" + } + }, "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", @@ -876,6 +894,15 @@ } } }, + "clean-css": { + "version": "4.1.9", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz", + "integrity": "sha1-Nc7ornaHpJuYA09w3gDE7dOCYwE=", + "dev": true, + "requires": { + "source-map": "0.5.7" + } + }, "cliui": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", @@ -3023,6 +3050,70 @@ "vinyl-sourcemaps-apply": "0.2.1" } }, + "gulp-clean-css": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-3.9.2.tgz", + "integrity": "sha512-NaBtCOmhk2FP1D1pgv5jEvZaKr+6FZHvEgsl1iPGmTpyUOWpECR3Mzdciwo+hEWwtlnkZSueoAf74YCMtar48A==", + "dev": true, + "requires": { + "clean-css": "4.1.9", + "plugin-error": "0.1.2", + "through2": "2.0.3", + "vinyl-sourcemaps-apply": "0.2.1" + }, + "dependencies": { + "arr-diff": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.1.0.tgz", + "integrity": "sha1-aHwydYFjWI/vfeezb6vklesaOZo=", + "dev": true, + "requires": { + "arr-flatten": "1.1.0", + "array-slice": "0.2.3" + } + }, + "arr-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-2.1.0.tgz", + "integrity": "sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=", + "dev": true + }, + "array-slice": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz", + "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=", + "dev": true + }, + "extend-shallow": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-1.1.4.tgz", + "integrity": "sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=", + "dev": true, + "requires": { + "kind-of": "1.1.0" + } + }, + "kind-of": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", + "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=", + "dev": true + }, + "plugin-error": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-0.1.2.tgz", + "integrity": "sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=", + "dev": true, + "requires": { + "ansi-cyan": "0.1.1", + "ansi-red": "0.1.1", + "arr-diff": "1.1.0", + "arr-union": "2.1.0", + "extend-shallow": "1.1.4" + } + } + } + }, "gulp-sass": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-2.3.2.tgz", diff --git a/package.json b/package.json index 5722cb6..ade6242 100755 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "browser-sync": "^2.23.6", "gulp": "^3.9.1", "gulp-autoprefixer": "^5.0.0", + "gulp-clean-css": "^3.9.2", "gulp-sass": "^2.3.2" }, "repository": {