Base design finished & content

assets/css/simplegrid.css

@@ -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;
+	}
+}
+

assets/js/index.js

@@ -13,31 +13,22 @@
         var $postContent = $(".post-content");
         $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();
+
+        // On scroll, check if the height is passed, and if so, trigger.
+        $(document).scroll(function(e){
+            if (window.scrollY >= scrollTarget) {
+                $('#scroll-arrow').hide(200);
+                $('.hidden-content').fadeIn(100);
+            } else if (window.scrollY < scrollTarget) {
+                $('.hidden-content').fadeOut(200);
+                $('#scroll-arrow').show(200);
+            }
         });
-
-        var object = $('.homepage-top-header');
-        var toggleHeight = 1442;
-
-        if (object !== null) {
-            $(document).scroll(function(e){
-                if (window.scrollY >= (toggleHeight - 100)) {
-                    object.show(300);
-                } else if (window.scrollY < toggleHeight) {
-                    object.hide(300);
-                }
-            });
-        }
-
-        var animateobject = $('.top-header-animate');
-        if (animateobject !== null) {
-            animateobject.show(200);
-        }
-
     });
 
     // Arctic Scroll by Paul Adam Davis

assets/scss/main.scss

@@ -7,6 +7,7 @@ $arrow-bg: rgba(255, 255, 255, .7);
 $white: #fff;
 $page-bg: #3498db;
 $header-link-color: #ccc;
+$subtext-color: #666;
 
 html {
     box-sizing: border-box;
@@ -51,7 +52,6 @@ h3,
 h4,
 h5,
 h6 {
-    color: $header-color;
     font-family: 'Oxygen', sans-serif;
     line-height: 2em;
     margin: 0 0 .4em;
@@ -91,7 +91,7 @@ a {
 }
 
 $front-page-picture-header: 120vh;
-$front-page-bg-header: 50vh;
+$front-page-bg-header: 95vh;
 
 
 // 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 {
     height: ($front-page-bg-header + $front-page-picture-header);
     left: 0;
@@ -139,65 +165,206 @@ $front-page-bg-header: 50vh;
     top: 0;
     width: 100%;
     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;
-    height: 10vh;
-    padding: 2.5vh;
-    position: relative;
-    width: 100%;
-    z-index: 110;
-
-    h3 {
         color: $white;
-        font-family: 'Catamaran', sans-serif;
+        padding-top: 35vh;
-        font-size: 1.8em;
+        text-align: center;
-        font-weight: 800;
+
-        line-height: 1em;
+        h1 {
-        margin: 0;
+            font-family: 'Source Sans Pro', sans-serif;
+            font-size: 90px;
+            font-weight: 300;
+            line-height: 1.1em;
+            margin: 0;
+        }
+
+        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;
+        }
     }
 
-    h6 {
+    $top-layer-effect: rgba(0, 0, 0, .15);
-        a {
+    $layer-effect: #eee;
-            color: $header-link-color;
-            text-decoration: none;
 
-            &:hover {
+    .hidden-content {
-                color: $white;
+        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;
             }
         }
 
-        font-family: 'Catamaran', sans-serif;
+        .profile {
-        font-size: .8em;
+            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 {
+                        text-decoration: none;
+
+                        &: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;
+        }
     }
 }
 
-.homepage-top-header {
+.profile-picture {
-    display: none;
+    border-radius: 48px;
-}
+    height: 96px;
-
+    width: 96px;
-.top-header-animate {
-    display: none;
 }
 
 .main-header {

author.hbs

@@ -4,12 +4,6 @@
 {{!-- The big featured header --}}
 
 {{!-- Everything inside the #author tags pulls data from the author --}}
-
-
-<header class="top-header top-header-animate">
-    {{> "header"}}
-</header>
-
 {{#author}}
     <header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
     </header>

default.hbs

@@ -11,15 +11,15 @@
 
     {{!-- Mobile Meta --}}
     <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 --}}
     <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
 
     {{!-- 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/main.css"}}" />
 
@@ -41,9 +41,6 @@
     {{!-- 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>
 
-    {{!-- 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_foot}}
     {{!-- Fitvids makes video embeds responsive and awesome --}}

index.hbs

@@ -1,11 +1,6 @@
 {{!< default}}
 {{!-- 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 --}}
 <div class="header-bg"></div>
 <div class="header-overlay"></div>
@@ -13,20 +8,73 @@
 
 {{!-- Header content --}}
 <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>
 
 {{!-- The main content area on the homepage --}}
 <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 --}}
     {{> "loop"}}
 </main>

page.hbs

@@ -5,11 +5,6 @@
 
 {{!-- Everything inside the #post tags pulls data from the page --}}
 {{#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>
 

partials/header.hbs

@@ -1,4 +0,0 @@
-<div class="top-header-contents">
-    <h3>Christiaan's Blog</h3>
-    <h6><a href="/">More about me >></a></h6>
-</div>

post.hbs

@@ -5,11 +5,6 @@
 
 {{!-- Everything inside the #post tags pulls data from the 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>
 

tag.hbs

@@ -3,10 +3,6 @@
 
 {{!-- 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}}">
     <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}}