Base design finished & content

master
Christiaan Goossens 7 years ago
parent 050d446960
commit 9fe6157707

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

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();
// 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 // 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; color: $white;
left: 0; padding-top: 35vh;
position: fixed; text-align: center;
top: 0;
width: 100%; h1 {
z-index: 100; font-family: 'Source Sans Pro', sans-serif;
font-size: 90px;
font-weight: 300;
line-height: 1.1em;
margin: 0;
}
&:before { h2 {
border-right: 60vw solid transparent; font-family: 'Source Sans Pro', sans-serif;
border-top: 15vh solid $page-bg; font-size: 24px;
bottom: 0; font-weight: 300;
content: ''; line-height: 1.1em;
position: absolute; margin-bottom: 10px;
right: 50%; margin-top: 20px;
width: 0; }
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-header-contents { $top-layer-effect: rgba(0, 0, 0, .15);
color: $white; $layer-effect: #eee;
height: 10vh;
padding: 2.5vh;
position: relative;
width: 100%;
z-index: 110;
h3 { .hidden-content {
color: $white; margin: auto;
font-family: 'Catamaran', sans-serif; margin-top: 10vh;
font-size: 1.8em; max-width: 1140px;
font-weight: 800; transition: translateZ(0);
line-height: 1em; width: 60vw;
margin: 0;
} }
h6 { .cv-box {
a { background: $white;
color: $header-link-color; box-shadow:
text-decoration: none; // 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;
}
&:hover { .right {
color: $white; 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 {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
} }
} }
font-family: 'Catamaran', sans-serif; .profile-picture {
font-size: .8em; 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;
}
} }
}
.homepage-top-header { $tag-bg: rgba(255, 255, 255, .3);
display: none;
.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;
}
}
} }
.top-header-animate { .profile-picture {
display: none; border-radius: 48px;
height: 96px;
width: 96px;
} }
.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 --}}

@ -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,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,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>

@ -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…
Cancel
Save