Base design finished & content
This commit is contained in:
parent
050d446960
commit
9fe6157707
288
assets/css/simplegrid.css
Normal file
288
assets/css/simplegrid.css
Normal file
@ -0,0 +1,288 @@
|
|||||||
|
/*
|
||||||
|
Simple Grid
|
||||||
|
Project Page - http://thisisdallas.github.com/Simple-Grid/
|
||||||
|
Author - Dallas Bass
|
||||||
|
Site - http://dallasbass.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
[class*='grid'],
|
||||||
|
[class*='col-'],
|
||||||
|
[class*='mobile-'],
|
||||||
|
.grid:after {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*='col-'] {
|
||||||
|
float: left;
|
||||||
|
min-height: 1px;
|
||||||
|
padding-right: 20px; /* column-space */
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*='col-'] [class*='col-']:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1140px;
|
||||||
|
min-width: 748px; /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-pad {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-left: 20px; /* grid-space to left */
|
||||||
|
padding-right: 0; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content Columns */
|
||||||
|
|
||||||
|
.col-1-1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-2-3, .col-8-12 {
|
||||||
|
width: 66.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-2, .col-6-12 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-3, .col-4-12 {
|
||||||
|
width: 33.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-4, .col-3-12 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-5 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-6, .col-2-12 {
|
||||||
|
width: 16.667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-7 {
|
||||||
|
width: 14.28%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-8 {
|
||||||
|
width: 12.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-9 {
|
||||||
|
width: 11.1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-10 {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-11 {
|
||||||
|
width: 9.09%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1-12 {
|
||||||
|
width: 8.33%
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout Columns */
|
||||||
|
|
||||||
|
.col-11-12 {
|
||||||
|
width: 91.66%
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-10-12 {
|
||||||
|
width: 83.333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-9-12 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-5-12 {
|
||||||
|
width: 41.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-7-12 {
|
||||||
|
width: 58.33%
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pushing blocks */
|
||||||
|
|
||||||
|
.push-2-3, .push-8-12 {
|
||||||
|
margin-left: 66.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-2, .push-6-12 {
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-3, .push-4-12 {
|
||||||
|
margin-left: 33.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-4, .push-3-12 {
|
||||||
|
margin-left: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-5 {
|
||||||
|
margin-left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-6, .push-2-12 {
|
||||||
|
margin-left: 16.667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-7 {
|
||||||
|
margin-left: 14.28%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-8 {
|
||||||
|
margin-left: 12.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-9 {
|
||||||
|
margin-left: 11.1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-10 {
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-11 {
|
||||||
|
margin-left: 9.09%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push-1-12 {
|
||||||
|
margin-left: 8.33%
|
||||||
|
}
|
||||||
|
|
||||||
|
@media handheld, only screen and (max-width: 767px) {
|
||||||
|
.grid {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
padding-left: 20px; /* grid-space to left */
|
||||||
|
padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*='col-'] {
|
||||||
|
width: auto;
|
||||||
|
float: none;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 10px; /* column-space */
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*='col-'] [class*='col-'] {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile Layout */
|
||||||
|
|
||||||
|
[class*='mobile-col-'] {
|
||||||
|
float: left;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 10px; /* column-space */
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.mobile-col-2-3, .mobile-col-8-12 {
|
||||||
|
width: 66.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-2, .mobile-col-6-12 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-3, .mobile-col-4-12 {
|
||||||
|
width: 33.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-4, .mobile-col-3-12 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-5 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-6, .mobile-col-2-12 {
|
||||||
|
width: 16.667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-7 {
|
||||||
|
width: 14.28%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-8 {
|
||||||
|
width: 12.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-9 {
|
||||||
|
width: 11.1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-10 {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-11 {
|
||||||
|
width: 9.09%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-1-12 {
|
||||||
|
width: 8.33%
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout Columns */
|
||||||
|
|
||||||
|
.mobile-col-11-12 {
|
||||||
|
width: 91.66%
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-10-12 {
|
||||||
|
width: 83.333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-9-12 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-5-12 {
|
||||||
|
width: 41.66%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-col-7-12 {
|
||||||
|
width: 58.33%
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide-on-mobile {
|
||||||
|
display: none !important;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
BIN
assets/img/profile.jpg
Normal file
BIN
assets/img/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@ -13,31 +13,22 @@
|
|||||||
var $postContent = $(".post-content");
|
var $postContent = $(".post-content");
|
||||||
$postContent.fitVids();
|
$postContent.fitVids();
|
||||||
|
|
||||||
$(".scroll-down").arctic_scroll();
|
$(".scroll-up").arctic_scroll();
|
||||||
|
|
||||||
$(".menu-button, .nav-cover, .nav-close").on("click", function(e){
|
var scrollTarget = (window.innerHeight * 0.30);
|
||||||
e.preventDefault();
|
// Don't hide this earlier (in CSS) for SEO reasons
|
||||||
$("body").toggleClass("nav-opened nav-closed");
|
$('.hidden-content').hide();
|
||||||
});
|
|
||||||
|
|
||||||
var object = $('.homepage-top-header');
|
// On scroll, check if the height is passed, and if so, trigger.
|
||||||
var toggleHeight = 1442;
|
|
||||||
|
|
||||||
if (object !== null) {
|
|
||||||
$(document).scroll(function(e){
|
$(document).scroll(function(e){
|
||||||
if (window.scrollY >= (toggleHeight - 100)) {
|
if (window.scrollY >= scrollTarget) {
|
||||||
object.show(300);
|
$('#scroll-arrow').hide(200);
|
||||||
} else if (window.scrollY < toggleHeight) {
|
$('.hidden-content').fadeIn(100);
|
||||||
object.hide(300);
|
} else if (window.scrollY < scrollTarget) {
|
||||||
|
$('.hidden-content').fadeOut(200);
|
||||||
|
$('#scroll-arrow').show(200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
var animateobject = $('.top-header-animate');
|
|
||||||
if (animateobject !== null) {
|
|
||||||
animateobject.show(200);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Arctic Scroll by Paul Adam Davis
|
// Arctic Scroll by Paul Adam Davis
|
||||||
|
|||||||
@ -7,6 +7,7 @@ $arrow-bg: rgba(255, 255, 255, .7);
|
|||||||
$white: #fff;
|
$white: #fff;
|
||||||
$page-bg: #3498db;
|
$page-bg: #3498db;
|
||||||
$header-link-color: #ccc;
|
$header-link-color: #ccc;
|
||||||
|
$subtext-color: #666;
|
||||||
|
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -51,7 +52,6 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
color: $header-color;
|
|
||||||
font-family: 'Oxygen', sans-serif;
|
font-family: 'Oxygen', sans-serif;
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
margin: 0 0 .4em;
|
margin: 0 0 .4em;
|
||||||
@ -91,7 +91,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$front-page-picture-header: 120vh;
|
$front-page-picture-header: 120vh;
|
||||||
$front-page-bg-header: 50vh;
|
$front-page-bg-header: 95vh;
|
||||||
|
|
||||||
|
|
||||||
// Big cover on the frontpage
|
// Big cover on the frontpage
|
||||||
@ -132,6 +132,32 @@ $front-page-bg-header: 50vh;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Bouncing arrow
|
||||||
|
.scroll-down {
|
||||||
|
animation: bounce 4s 2s infinite;
|
||||||
|
color: $arrow-bg;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
font-size: 24px;
|
||||||
|
height: 24px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -12px;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
transition: translateZ(0);
|
||||||
|
width: 24px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
// Stop the bouncing while hovered
|
||||||
|
&:hover {
|
||||||
|
animation: none;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.header-text {
|
.header-text {
|
||||||
height: ($front-page-bg-header + $front-page-picture-header);
|
height: ($front-page-bg-header + $front-page-picture-header);
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -139,65 +165,206 @@ $front-page-bg-header: 50vh;
|
|||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
|
||||||
|
|
||||||
.top-header {
|
.top-content {
|
||||||
height: 15vh;
|
|
||||||
left: 0;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
border-right: 60vw solid transparent;
|
|
||||||
border-top: 15vh solid $page-bg;
|
|
||||||
bottom: 0;
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
right: 50%;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-header-contents {
|
|
||||||
color: $white;
|
color: $white;
|
||||||
height: 10vh;
|
padding-top: 35vh;
|
||||||
padding: 2.5vh;
|
text-align: center;
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 110;
|
|
||||||
|
|
||||||
h3 {
|
h1 {
|
||||||
color: $white;
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
font-family: 'Catamaran', sans-serif;
|
font-size: 90px;
|
||||||
font-size: 1.8em;
|
font-weight: 300;
|
||||||
font-weight: 800;
|
line-height: 1.1em;
|
||||||
line-height: 1em;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h2 {
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.1em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.4em;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$top-layer-effect: rgba(0, 0, 0, .15);
|
||||||
|
$layer-effect: #eee;
|
||||||
|
|
||||||
|
.hidden-content {
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 10vh;
|
||||||
|
max-width: 1140px;
|
||||||
|
transition: translateZ(0);
|
||||||
|
width: 60vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-box {
|
||||||
|
background: $white;
|
||||||
|
box-shadow:
|
||||||
|
// Top layer
|
||||||
|
0 1px 1px $top-layer-effect,
|
||||||
|
// Second layer
|
||||||
|
0 10px 0 -5px $layer-effect,
|
||||||
|
// Second layer shadow
|
||||||
|
0 10px 1px -4px $top-layer-effect,
|
||||||
|
// Third layer
|
||||||
|
0 20px 0 -10px $layer-effect,
|
||||||
|
// Third layer shadow
|
||||||
|
0 20px 1px -9px $top-layer-effect;
|
||||||
|
padding: 30px;
|
||||||
|
transition: translateZ(0);
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: .9em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: inline-block;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtext {
|
||||||
|
color: $subtext-color;
|
||||||
|
display: block;
|
||||||
|
font-size: .8em;
|
||||||
|
line-height: 1.3em;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.languages {
|
||||||
|
p {
|
||||||
|
font-size: .8em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile {
|
||||||
|
h6 {
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 300;
|
||||||
|
margin: 1em 0 .4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: .8em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
clear: both;
|
||||||
|
margin-top: 5vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-footer {
|
||||||
|
color: $subtext-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 18px;
|
||||||
|
padding: 2px 0 0;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $header-link-color;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-picture {
|
||||||
|
float: left;
|
||||||
|
margin: 0 20px 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 3rem;
|
||||||
|
margin-bottom: 2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$tag-bg: rgba(255, 255, 255, .3);
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
color: $white;
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
|
||||||
|
line-height: 1.1em;
|
||||||
|
margin-top: 10vh;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: .8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
background: $tag-bg;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5em;
|
||||||
|
margin: 0 .5vw;
|
||||||
|
padding: 4px 10px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
font-family: 'Catamaran', sans-serif;
|
|
||||||
font-size: .8em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.homepage-top-header {
|
.profile-picture {
|
||||||
display: none;
|
border-radius: 48px;
|
||||||
}
|
height: 96px;
|
||||||
|
width: 96px;
|
||||||
.top-header-animate {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-header {
|
.main-header {
|
||||||
|
|||||||
@ -4,12 +4,6 @@
|
|||||||
{{!-- The big featured header --}}
|
{{!-- The big featured header --}}
|
||||||
|
|
||||||
{{!-- Everything inside the #author tags pulls data from the author --}}
|
{{!-- Everything inside the #author tags pulls data from the author --}}
|
||||||
|
|
||||||
|
|
||||||
<header class="top-header top-header-animate">
|
|
||||||
{{> "header"}}
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{{#author}}
|
{{#author}}
|
||||||
<header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
|
<header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -11,15 +11,15 @@
|
|||||||
|
|
||||||
{{!-- Mobile Meta --}}
|
{{!-- Mobile Meta --}}
|
||||||
<meta name="HandheldFriendly" content="True" />
|
<meta name="HandheldFriendly" content="True" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" >
|
||||||
|
|
||||||
{{!-- Brand icon --}}
|
{{!-- Brand icon --}}
|
||||||
<link rel="shortcut icon" href="{{asset "favicon.ico"}}">
|
<link rel="shortcut icon" href="{{asset "favicon.ico"}}">
|
||||||
|
|
||||||
{{!-- Styles'n'Scripts --}}
|
{{!-- Styles'n'Scripts --}}
|
||||||
<link href="https://fonts.googleapis.com/css?family=Lato|Oxygen|Catamaran" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Lato|Oxygen|Catamaran|Source+Sans+Pro:300" rel="stylesheet">
|
||||||
<link rel="stylesheet" type="text/css" href="{{asset "assets/components/animate.css/animate.min.css"}}" />
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="{{asset "css/simplegrid.css"}}" />
|
||||||
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
|
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
|
||||||
<link rel="stylesheet" type="text/css" href="{{asset "css/main.css"}}" />
|
<link rel="stylesheet" type="text/css" href="{{asset "css/main.css"}}" />
|
||||||
|
|
||||||
@ -41,9 +41,6 @@
|
|||||||
{{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
|
{{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
|
||||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
|
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
|
||||||
|
|
||||||
{{!-- Use this awesome waypoint library --}}
|
|
||||||
<script type="text/javascript" src="{{ asset "components/waypoints/lib/noframework.waypoints.min.js"}}"></script>
|
|
||||||
|
|
||||||
{{!-- Ghost outputs important scripts and data with this tag --}}
|
{{!-- Ghost outputs important scripts and data with this tag --}}
|
||||||
{{ghost_foot}}
|
{{ghost_foot}}
|
||||||
{{!-- Fitvids makes video embeds responsive and awesome --}}
|
{{!-- Fitvids makes video embeds responsive and awesome --}}
|
||||||
|
|||||||
76
index.hbs
76
index.hbs
@ -1,11 +1,6 @@
|
|||||||
{{!< default}}
|
{{!< default}}
|
||||||
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
|
||||||
|
|
||||||
{{!-- Top header --}}
|
|
||||||
<header class="top-header homepage-top-header">
|
|
||||||
{{> "header"}}
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{{!-- All header backgrounds --}}
|
{{!-- All header backgrounds --}}
|
||||||
<div class="header-bg"></div>
|
<div class="header-bg"></div>
|
||||||
<div class="header-overlay"></div>
|
<div class="header-overlay"></div>
|
||||||
@ -13,20 +8,73 @@
|
|||||||
|
|
||||||
{{!-- Header content --}}
|
{{!-- Header content --}}
|
||||||
<div class="header-text">
|
<div class="header-text">
|
||||||
<div class="content">
|
<div class="top-content">
|
||||||
Test
|
<h1>Christiaan Goossens</h1>
|
||||||
|
<h2>Creating software for the web, mobile devices and the desktop while consulting in all things IT related.</h2>
|
||||||
|
<h4>Student at the Eindhoven University of Technology</br>CEO, Verictas</h4>
|
||||||
|
<a class="scroll-down icon-arrow-left" title="Please scroll down" id="scroll-arrow"><span class="hidden">Scroll Down</span></a>
|
||||||
|
</div>
|
||||||
|
<div class="hidden-content">
|
||||||
|
<div class="cv-box">
|
||||||
|
<h5>Curriculum Vitae</h5>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="col-7-12">
|
||||||
|
<h6>Education</h6>
|
||||||
|
<p>Eindhoven University of Technology<span class="right">2017 - now</span><span class="subtext">Computer Science and Engineering (Technische Informatica)</span></p>
|
||||||
|
<p>Radboud University Nijmegen<span class="right">2015-2016</span><span class="subtext">VWO Talent Programme</span></p>
|
||||||
|
<p>Stedelijk Gymnasium Nijmegen<span class="right">2011-2017</span><span class="subtext">Grammar school (Gymnasium, VWO), Nature & Technology (NT)</span></p>
|
||||||
|
<br/>
|
||||||
|
<h6>Experience</h6>
|
||||||
|
<p>CEO, <a href="https://verictas.nl">Verictas</a><span class="right">2015 - now</span><span class="subtext">Verictas is a Dutch IT company, that provides clear hosting and domainnames, develops applications and other types of (web)software, as well as consulting in IT matters.</span></p>
|
||||||
|
<p>Building websites freelance and practice<span class="right">2007-2015</span><span class="subtext">Practice makes perfect.</span></p>
|
||||||
|
<p>One-week Internship, <a href="https://www.d-centralize.nl/" target="_blank">d-centralize</a><span class="right">2016</span><span class="subtext">I spent a week with the great team at d-centralize to collaborate on a project and to familiarize with their code reviewing standards.</span></p><br/>
|
||||||
|
<h6>Languages</h6>
|
||||||
|
<div class="languages">
|
||||||
|
<br/>
|
||||||
|
<p>I speak Dutch and English fluently (CAE certificate, C2 level). I also babble a bit of German and French. I should also be able to read Latin with a dictionary, at least that's what I finished six years of grammar school for.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4-12 push-1-12 profile">
|
||||||
|
<img class="profile-picture" alt="Profile Picture" src="{{asset "img/profile.jpg"}}">
|
||||||
|
|
||||||
|
<h6>Christiaan Goossens</h6>
|
||||||
|
<p>contact@christiaangoossens.nl</p>
|
||||||
|
|
||||||
|
<div class="full-width">
|
||||||
|
<p>I've been working with technology since I first read a technology magazine (yes, those old paper booklets) about 12 years ago.</p><br/>
|
||||||
|
|
||||||
|
<p>From my humble beginnings dragging around boxes in Microsoft Publisher 2007 to create websites, I have progressed to programming API's, full-blown software solutions for clients and consulting in IT matters, such as networking and security, at <a href="https://verictas.nl">Verictas</a>.</p><br/>
|
||||||
|
|
||||||
|
<p>At the moment I'm studying Computer Science and Engineering at the Eindhoven University of Technology to further improve my academic knowledge about IT, but I'm always up for a challenge!</p><br/>
|
||||||
|
|
||||||
|
<ul class="links">
|
||||||
|
<li><a href="https://www.linkedin.com/in/christiaangoossens/">Visit my profile at LinkedIn</a></li>
|
||||||
|
<li><a href="https://github.com/christiaangoossens">View my projects at GitHub</a></li>
|
||||||
|
<li><a href="https://git.verictas.com/christiaangoossens">View my projects at git.verictas.com</a></li>
|
||||||
|
<li><a href="mailto:contact@christiaangoossens.nl">Contact me at contact@christiaangoossens.nl</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p class="small-footer">You can also view the source code in HTML, JS and SCSS of this page <a href="https://git.verictas.com/christiaangoossens/chrg.nl">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tags">
|
||||||
|
<p>I'am working with<br/><small>(and possibly writing about)</small></p>
|
||||||
|
<ul>
|
||||||
|
{{#get "tags" limit="25"}}
|
||||||
|
{{#foreach tags}}
|
||||||
|
<a href="/tag/{{slug}}"><li>{{name}}</li></a>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/get}}
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{!-- The main content area on the homepage --}}
|
{{!-- The main content area on the homepage --}}
|
||||||
<main id="content" class="content" role="main">
|
<main id="content" class="content" role="main">
|
||||||
|
|
||||||
{{#get "tags" limit="all"}}
|
|
||||||
{{#foreach tags}}
|
|
||||||
<p>{{name}}</p>
|
|
||||||
{{/foreach}}
|
|
||||||
{{/get}}
|
|
||||||
|
|
||||||
{{!-- The tag below includes the post loop - partials/loop.hbs --}}
|
{{!-- The tag below includes the post loop - partials/loop.hbs --}}
|
||||||
{{> "loop"}}
|
{{> "loop"}}
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
5
page.hbs
5
page.hbs
@ -5,11 +5,6 @@
|
|||||||
|
|
||||||
{{!-- Everything inside the #post tags pulls data from the page --}}
|
{{!-- Everything inside the #post tags pulls data from the page --}}
|
||||||
{{#post}}
|
{{#post}}
|
||||||
|
|
||||||
<header class="top-header top-header-animate">
|
|
||||||
{{> "header"}}
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
|
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
<div class="top-header-contents">
|
|
||||||
<h3>Christiaan's Blog</h3>
|
|
||||||
<h6><a href="/">More about me >></a></h6>
|
|
||||||
</div>
|
|
||||||
5
post.hbs
5
post.hbs
@ -5,11 +5,6 @@
|
|||||||
|
|
||||||
{{!-- Everything inside the #post tags pulls data from the post --}}
|
{{!-- Everything inside the #post tags pulls data from the post --}}
|
||||||
{{#post}}
|
{{#post}}
|
||||||
|
|
||||||
<header class="top-header top-header-animate">
|
|
||||||
{{> "header"}}
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
|
<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
4
tag.hbs
4
tag.hbs
@ -3,10 +3,6 @@
|
|||||||
|
|
||||||
{{!-- If we have a tag cover, display that - else blog cover - else nothing --}}
|
{{!-- If we have a tag cover, display that - else blog cover - else nothing --}}
|
||||||
|
|
||||||
<header class="top-header top-header-animate">
|
|
||||||
{{> "header"}}
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
|
<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
|
||||||
<nav class="main-nav overlay clearfix">
|
<nav class="main-nav overlay clearfix">
|
||||||
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user