Commit 7eab4c13 authored by Willem Sonke's avatar Willem Sonke

Start with a redesign of the entire site

I did away with the leaves header on every page, but the leaves are now
featured much more prominently on the home page. The remainder of the
pages just contains a nicely coloured header.

Also, some pages now have TOCs with Bootstrap scrollspies (although the
contents of the TOC still need to be generated automatically - at the
moment they are hard-coded).

At the moment I only changed the English locale, so the other language
versions are terribly broken. The English one is also broken in quite
some places, but not terribly so.
parent 84965cc7
......@@ -34,6 +34,9 @@ preprocess do
end
compile '/subsites/**/*' do
end
compile '/*/blog/tag/*' do
filter :erb
layout '/tag.html'
......@@ -74,6 +77,10 @@ compile '/**/*' do
end
route '/subsites/**/*' do
item.identifier.to_s.sub(/\A\/subsites/, '')
end
route '/*/blog/tag/*' do
strip_default_language (item.identifier.without_ext + '/index.html')
end
......
......@@ -3,6 +3,4 @@ id: applet-creator
title: Applet Creator
---
<h1>Applet Creator</h1>
<p>... (to do)</p>
......@@ -7,7 +7,6 @@ layout: default
<div class="row">
<div class="col-xs-12">
<h1>Blog</h1>
<p>On this blog I write about things I created or things I did.</p>
</div>
</div>
<%= render "/postlist.html" %>
---
id: 2015-02-06-java-tip-1
title: "Java tip 1: Immutable collections"
title: "Java tip: Immutable collections"
kind: article
created_at: 2015-02-06 12:24
tags:
......
......@@ -3,9 +3,6 @@ id: contact
title: Contact
---
Contact
=======
If you want to contact me, you can use the following methods.
Email
......
---
id: cv
title: CV
layout: page
toc: true
---
<center><i>(last updated: <%= item[:mtime].strftime('%F') %>)</i></center>
<h2>Personal information</h2>
<table>
<tr>
<th>Name</th>
<td>W. M. (Willem) Sonke</td>
</tr>
<tr>
<th>Address</th>
<td>Caeciliastraat 15<br>6143 BK Guttecoven<br>Netherlands</td>
</tr>
<tr>
<th>Date of birth</th>
<td>November 18, 1993</td>
</tr>
<tr>
<th>Place of birth</th>
<td>Sittard, Netherlands</td>
</tr>
<tr>
<th>Citizenship</th>
<td>Dutch</td>
</tr>
<tr>
<th>Email</th>
<td><i>willem@wimiso.nl</i></td>
</tr>
<tr>
<th>Website</th>
<td><a href="/">wimiso.nl</a></td>
</tr>
</table>
\section*{Personal information}
\begin{tabular}{rl}
Name & W.\ M.\ (Willem) Sonke \\[.8em]
Address & Caeciliastraat 15 \\
& 6143 BK\ \ Guttecoven \\
& Netherlands \\[.8em]
Date of birth & November 18, 1993 \\
Place of birth & Sittard, Netherlands \\
Citizenship & Dutch \\[.8em]
Email & \href{mailto:willem@wimiso.nl}{\textit{willem@wimiso.nl}} \\
Website & \href{http://wimiso.nl}{\textit{wimiso.nl}} \\
\end{tabular}
\section*{Education}
\begin{tabular}{cl}
2013 -- current & \textit{(expected)} Master's degree \gray{in} Computer Science \& Engineering \\
& \gray{at} Eindhoven University of Technology \\
& \gray{Honors program (specializations Algorithms and Visualization)} \\[.8em]
2010 -- 2013 & Bachelor's degree \gray{in} Computer Science and Engineering \\
& \gray{at} Eindhoven University of Technology \\
& \gray{graduated cum laude} \\
& \gray{Honors Star program} \\[.8em]
& Bachelor's degree \gray{in} Industrial and Applied Mathematics \\
& \gray{at} Eindhoven University of Technology \\
& \gray{graduated cum laude} \\[.8em]
2004 -- 2010 & Gymnasium \\
& \gray{at} Trevianum Scholengroep, Sittard \\
& \gray{graduated summa cum laude}
\end{tabular}
\section*{Awards}
\begin{tabular}{cl}
2010 & KNAW Onderwijsprijs \\
\phantom{2013 -- current} & \gray{for my final project (``profielwerkstuk'') at the Gymnasium} \\
& \gray{(see \href{http://knawonderwijsprijs.nl/winnaars/winnaars-2010}{\textit{knawonderwijsprijs.nl}})}
\end{tabular}
\pagebreak
\section*{Contests}
In 2007 and 2008 I participated in the preliminary round of the IJSO (International Junior Science Olympiad). Both times I was admitted to the national Dutch final round, but did not make it to the international finals.
% \begin{tabular}{cl}
% 2007 & Dutch final round \gray{of the} IJSO (International Junior Science Olympiad) \\
% \phantom{2013 -- current} & \gray{reached the national Dutch final round} \\
% 2008 & Dutch final round \gray{of the} IJSO (International Junior Science Olympiad) \\
% & \gray{reached the national Dutch final round}
% \end{tabular}
% \section*{Courses attended}
%
% \begin{tabular}{cl}
% 2015 & \textit{(expected)} Summer School on Geometric Network Design \\
% \phantom{2013 -- current} & \gray{at} University of Copenhagen
% \end{tabular}
\section*{Teaching}
During the first year of my master's (2013 -- 2014), I was a student assistant for the following courses at Eindhoven University of Technology. \\
\begin{tabular}{cl}
Sep -- Nov 2013 & \gray{2IL65} Algorithms \\
& \gray{helped grading homework assignments} \\[.8em]
Nov -- Feb 2014 & \gray{2IV60} Computer Graphics \\
& \gray{assisted students with their projects and helped grading} \\[.8em]
Feb -- Apr 2014 & \gray{2IL75} Algorithms for Massive Data \\
& \gray{developed learning materials about GPU programming} \\[.8em]
Apr -- Jul 2014 & \gray{2IT70} Automata and Process Theory \\
& \gray{co-developed a Turing machine simulator in Java}
\end{tabular}
\pagebreak
\section*{Publications}
\subsection*{Journals}
\begin{itemize}
\item \textbf{Mosaic drawings and cartograms} \\
R.\ G.\ Cano, K.\ Buchin, T.\ Castermans, A.\ Pieterse, W.\ Sonke and B.\ Speckmann \\
\textit{Computer Graphics Forum}, 34(3), 2015 \\
(Proc.\ Eurographics\,/\,VGTC Conference on Visualization (EuroVis) 2015)
\end{itemize}
\subsection*{Weakly refereed conference proceedings}
\begin{itemize}
\item \textbf{Mosaic drawings and cartograms} \\
R.\ G.\ Cano, K.\ Buchin, T.\ Castermans, A.\ Pieterse, W.\ Sonke and B.\ Speckmann \\
\textit{Abstr.\ 31st European Workshop on Computational Geometry (EuroCG), 2015}
\end{itemize}
\ No newline at end of file
---
id: fonts
title: Fonts
toc: true
---
<h1>Fonts</h1>
<p></p>
<style>
@font-face {
font-family: 'Blob';
......@@ -14,11 +11,58 @@ title: Fonts
}
</style>
<h2>Blob</h2>
<p>On this page, you will find my fonts. At the moment, there is only one font, since I haven't made any more. I'm planning to create more fonts in the future, in which case I'll add them to this page.</p>
<h2 id="blob">Blob</h2>
<p>Blob is a &lsquo;blobby&rsquo; font for headers, slogans and such; it is not meant for paragraphs of text. It has support for the (basic) Latin and Greek scripts, and some (especially mathematical) symbols. I made this font in the beginning of 2012 using FontForge. Blob is licensed under the <a href="http://creativecommons.org/publicdomain/zero/1.0">CC0</a> (public domain).</p>
<h3>Examples</h3>
<p style="font-family: Blob; text-align: center; line-height: 30px;">
<span style="font-size: 200%;">Blob is a 'blobby' font</span><br>
<span style="font-size: 200%;">In nova fert animus mutatas dicere formas</span><br>
<span style="font-size: 200%;">Μηνιν αειδε, θεα, Πηληϊαδεω Αχιληος</span><br>
<span style="font-size: 200%;">&forall; n &isin; &#8469; : &exist; m &isin; &#8469; : m &gt; n</span><br>
</p>
<h3>Downloads</h3>
<a href="/static/files/fonts/blob.ttf">TTF version</a> &mdash; <a href="/static/files/fonts/blob.woff">WOFF version</a> &mdash; <a href="/static/files/fonts/blob.sfd">FontForge source</a>
<h2 id="blaab">Blaab</h2>
<p>Blob is a &lsquo;blobby&rsquo; font for headers, slogans and such; it is not meant for paragraphs of text. It has support for the (basic) Latin and Greek scripts, and some (especially mathematical) symbols. I made this font in the beginning of 2012 using FontForge. Blob is licensed under the <a href="http://creativecommons.org/publicdomain/zero/1.0">CC0</a> (public domain).</p>
<h3>Examples</h3>
<p style="font-family: Blob; text-align: center; line-height: 30px;">
<span style="font-size: 200%;">Blob is a 'blobby' font</span><br>
<span style="font-size: 200%;">In nova fert animus mutatas dicere formas</span><br>
<span style="font-size: 200%;">Μηνιν αειδε, θεα, Πηληϊαδεω Αχιληος</span><br>
<span style="font-size: 200%;">&forall; n &isin; &#8469; : &exist; m &isin; &#8469; : m &gt; n</span><br>
</p>
<h3>Downloads</h3>
<a href="/static/files/fonts/blob.ttf">TTF version</a> &mdash; <a href="/static/files/fonts/blob.woff">WOFF version</a> &mdash; <a href="/static/files/fonts/blob.sfd">FontForge source</a>
<h2 id="bleeeeb">Lorem ipsum</h2>
<p>Blob is a &lsquo;blobby&rsquo; font for headers, slogans and such; it is not meant for paragraphs of text. It has support for the (basic) Latin and Greek scripts, and some (especially mathematical) symbols. I made this font in the beginning of 2012 using FontForge. Blob is licensed under the <a href="http://creativecommons.org/publicdomain/zero/1.0">CC0</a> (public domain).</p>
<h3>Examples</h3>
<p style="font-family: Blob; text-align: center; line-height: 30px;">
<span style="font-size: 200%;">Blob is a 'blobby' font</span><br>
<span style="font-size: 200%;">In nova fert animus mutatas dicere formas</span><br>
<span style="font-size: 200%;">Μηνιν αειδε, θεα, Πηληϊαδεω Αχιληος</span><br>
<span style="font-size: 200%;">&forall; n &isin; &#8469; : &exist; m &isin; &#8469; : m &gt; n</span><br>
</p>
<h3>Downloads</h3>
<a href="/static/files/fonts/blob.ttf">TTF version</a> &mdash; <a href="/static/files/fonts/blob.woff">WOFF version</a> &mdash; <a href="/static/files/fonts/blob.sfd">FontForge source</a>
<h2 id="bluuub">Dolor sit amet</h2>
<p>Blob is a &lsquo;blobby&rsquo; font for headers, slogans and such; it is not meant for paragraphs of text. It has support for the (basic) Latin and Greek scripts, and some (especially mathematical) symbols. I made this font in the beginning of 2012 using FontForge. Blob is licensed under the <a href="http://creativecommons.org/publicdomain/zero/1.0">CC0</a> (public domain).</p>
<h3>Examples</h3>
<p style="font-family: Blob; text-align: center">
<p style="font-family: Blob; text-align: center; line-height: 30px;">
<span style="font-size: 200%;">Blob is a 'blobby' font</span><br>
<span style="font-size: 200%;">In nova fert animus mutatas dicere formas</span><br>
<span style="font-size: 200%;">Μηνιν αειδε, θεα, Πηληϊαδεω Αχιληος</span><br>
......
......@@ -3,8 +3,6 @@ id: graduates-viewer
title: Graduates viewer
---
<h1>Graduates viewer</h1>
<p><a href="http://denvelop.nl">Thom Castermans</a> and I made a viewer for data of the amount of graduates on universities in the Netherlands. This was a project for a Visualization course.</p>
<p>The graduates viewer is available <a href="http://graduates.wimiso.nl">here</a>.</p>
......@@ -2,8 +2,13 @@
id: home
title: Home
layout: default
index_page: true
---
<div class="row">
<div class="col-xs-12">
<h1>Wimiso</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-7">
<h2>Welcome</h2>
......
......@@ -3,8 +3,6 @@ id: joxy
title: Joxy
---
<h1>Joxy</h1>
<p>If you ever used Java programs in KDE (a desktop environment for &ndash; mostly &ndash; Linux), then you probably noticed that the layout of such programs is not at all similar to KDE's layout. The default style of KDE programs is Oxygen, while the default style of Java programs is called Metal and looks completely different. Fortunately it is possible to do something about that, since Java supports creating your own themes (in Java terminology: <i>look-and-feels</i>).</p>
<p>Joxy is a look-and-feel that Thom Castermans and I created. Joxy tries to imitate KDE's Oxygen style as closely as possible, meaning that Java programs look much better in KDE.</p>
......
......@@ -3,8 +3,6 @@ id: ti-programs
title: TI-84+ programs
---
<h1>Programs for the TI-84+ calculator</h1>
<p>On this page you can find some programs that I created for the TI-84+ graphic calculator. Most of them probably also work on the TI-83+, although I did not test that.</p>
<p>I wrote those programs some years ago, mainly in breaks between lessons. They were often not really intended to be released. This means that the interface to all programs is in Dutch, and the code style is horrible (but, well, that is basically unavoidable in TI-Basic &ndash; pun intended). You can put the programs on your calculator using TI Connect, the linking software that is included with the calculator, or <a href="http://lpg.ticalc.org/prj_tilp">TiLP</a>, a free software alternative.</p>
......
......@@ -2,6 +2,7 @@
id: home
title: Start
layout: default
index_page: true
---
<div class="row">
......
body {
color: rgba(255, 255, 255, 0.95);
}
a {
color: rgba(175, 206, 233, 0.95);
}
.outer-div {
background-image: url('/static/img/header.jpg');
background-size: cover;
background-position: top center;
background-attachment: fixed;
}
.navbar-default {
background: none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.95);
}
h1 {
background: none;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 20px;
}
h2 {
margin-top: 20px;
color: rgba(255, 255, 255, 0.95);
}
.footer {
color: rgba(255, 255, 255, 0.5);
}
\ No newline at end of file
@import url(http://fonts.googleapis.com/css?family=Actor|Oxygen+Mono);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400,400italic,300);
html {
height: 100%;
hyphens: auto;
overflow-x: hidden;
overflow-y: scroll;
}
body {
font-family: "Actor", serif !important;
font-family: 'Open Sans', sans-serif;
font-size: 12pt;
line-height: 25px;
height: 100%;
background: white;
text-rendering: optimizeLegibility;
text-align: justify;
color: #222;
position: relative;
}
pre, code {
......@@ -19,65 +23,80 @@ pre, code {
}
h1 {
font-weight: bold;
color: #b0836e;
padding-bottom: 10px;
border-bottom: 1px #eeeeee solid;
text-align: center;
color: #444;
font-weight: 700;
padding-bottom: 25px;
padding-top: 25px;
padding-left: 1000px;
padding-right: 1000px;
margin-left: -1000px;
margin-right: -1000px;
margin-bottom: 20px;
background-color: #B54772;
color: white;
font-size: 32pt;
}
h2, h3 {
font-weight: bold;
color: #b0836e;
text-align: left;
h2 {
font-weight: 300;
font-size: 32pt;
color: #B54772;
margin: 60px 0px 20px -1px;
}
h3 {
font-weight: 400;
color: #B54772;
}
h4, h5, h6 {
font-weight: bold;
color: #b0836e;
text-align: left;
font-weight: 400;
}
.outer-div {
min-height: 100%;
position: relative;
background: white;
background: #fcfcfc;
}
.content {
padding-bottom: 4em;
}
/* De header */
.header-top {
background: url("/static/img/header.jpg");
background-position: center right;
background-size: cover;
width: 100%;
height: 200px;
padding-top: 35px;
padding-right: 80px;
/* De inhoudsopgave */
#toc {
margin-top: -15px;
}
.header-title {
font-size: 400%;
color: white;
font-weight: bold;
text-align: right;
#toc, #toc .nav {
padding-left: 40px;
width: 220px;
}
.header-subtitle {
font-size: 150%;
color: white;
text-align: right;
font-style: italic;
#toc .nav li {
font-size: 11pt;
}
#toc .nav li.active {
font-weight: 700;
}
body.down #toc .nav {
position: fixed;
top: 25px;
}
/* De header */
.navbar-default {
border: none;
background: #f6f4cf;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
background: #3C9A5C;
border-radius: 0px;
margin-bottom: 0px;
}
.navbar-default .navbar-nav > li > a {
color: rgba(255, 255, 255, 0.95);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: rgba(255, 255, 255, 1);
}
.navbar-default .navbar-nav > .active > a,
......@@ -86,23 +105,37 @@ h4, h5, h6 {
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background: #eee9a4;
background: #88BE4A;
color: rgba(255, 255, 255, 0.95);
}
.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 0.95);
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: rgba(255, 255, 255, 1);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background: #eee9a4;
color: #555;
background: #88BE4A;
color: rgba(255, 255, 255, 0.95);
}
.dropdown-menu {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
background: #f6f4cf;
background: #3C9A5C;
border-radius: 0px;
border: none;
}
.dropdown-menu > li > a {
color: rgba(255, 255, 255, 0.95);
}
.dropdown-menu > li > a:hover {
background: #f1edb2;
}
......@@ -114,14 +147,6 @@ h4, h5, h6 {
margin-right: 1px;
}
/* De header-kloon */
.header-bottom.clone {
position: fixed;
width: 100%;
z-index: 10;
display: none;
}
body.down .header-bottom.clone {
display: inherit;
}
......
$(document).ready(function() {
var $headerBottom = $('.header-bottom'),
$header = $('header'),
$clone = $header.before($headerBottom.clone().addClass('clone'))
$header = $('header')
$(window).on('scroll', function() {
// laat de gekopieerde header zien als we ver genoeg naar onder zijn gescrolld
var fromTop = $(window).scrollTop()
$('body').toggleClass('down', (fromTop > 200)) // header-top heeft hoogte 200px
var tocPosition = $('#toc').offset().top
$('body').toggleClass('down', (fromTop > tocPosition - 25))
// parallax-effect voor het plaatje
$('.header-top').css('background-position', '0% ' + (50 - fromTop / 8) + '%')
......
......@@ -2,6 +2,7 @@
id: home
title: Tìsngä'i
layout: default
index_page: true
---
<div class="row">
......
......@@ -14,9 +14,12 @@
<!-- onze eigen zooi -->
<link href="/static/css/layout.css" rel="stylesheet">
<% if item[:index_page] %>
<link href="/static/css/homepage.css" rel="stylesheet">
<% end %>
<script src="/static/js/header.js"></script>
<% if @item[:needs_math] %>
<% if item[:needs_math] %>
<script type="text/x-mathjax-config">
MathJax.Hub.Config(
{
......@@ -34,17 +37,9 @@
<meta name="generator" content="nanoc <%= Nanoc::VERSION %>">
</head>
<body>
<body data-spy="scroll" data-target="#toc">
<div class="outer-div">
<header>
<div class="header-top">
<div class="header-title">
Wimiso <sup><span class="badge alert-success" style="transform: translate(0, -20px) rotate(-10deg); font-size: 35%; margin-left: -28px;">beta!</span></sup>
</div>
<div class="header-subtitle">
<%= _ :my_website %>
</div>
</div>
<div class="header-bottom">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
......@@ -62,6 +57,7 @@
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<%= menu_link_to 'home' %>
<%= menu_link_to 'research' %>
<%= submenu_to(:projects, ['joxy', 'ti-programs', 'fonts', 'graduates-viewer', 'conlangs']) %>
<%= menu_link_to 'contact' %>
<%= menu_link_to 'blog' %>
......
<% render '/default.html' do %>
<div class="row">
<div class="col-xs-12">
<%= yield %>
</div>
<div id="page-title-row" class="row">
<% if @item[:toc] %>
<div class="col-xs-12">
<h1><%= @item[:title] %></h1>
</div>
<% else %>
<div class="col-md-1 hidden-xs"></div>
<div class="col-xs-12 col-md-10">
<h1><%= @item[:title] %></h1>
</div>
<% end %>
</div>
<div id="content-row" class="row">
<% if @item[:toc] %>
<div class="col-xs-9">
<%= yield %>
</div>
<div class="col-xs-3">
<div id="toc">
<ul class="nav">
<h3>Contents</h3>
<li class="active" role="presentation"><a href="#blob">Blob</a></li>
<li role="presentation"><a href="#blaab">Blaab</a></li>
<li role="presentation"><a href="#bleeeeb">Lorem ipsum</a></li>
<li role="presentation"><a href="#bluuub">Dolor sit amet</a></li>
</ul>
</div>
</div>
<% else %>
<div class="col-md-1 hidden-xs"></div>
<div class="col-xs-12 col-md-10">
<%= yield %>
</div>
<% end %>
</div>
<% end %>
<% render '/default.html' do %>
<div class="col-xs-12">
<h1><%= item[:title] %></h1>
<div class="text-muted" style="text-align: center; margin-bottom: 25px;"><%= tags_for(@item, {base_url: "#{language_prefix_of @item}/blog/tag/", separator: " / "}) %> / <%= item[:created_at] %></div>
<article>
<%= yield %>
</article>
<div class="row">
<div class="col-md-1 hidden-xs"></div>
<div class="col-xs-12 col-md-10">
<h1><%= item[:title] %></h1>
<div class="text-muted" style="text-align: center; margin-bottom: 25px;"><%= tags_for(@item, {base_url: "#{language_prefix_of @item}/blog/tag/", separator: " / "}) %> / <%= item[:created_at] %></div>
<article>
<%= yield %>
</article>
</div>
</div>
<div class="col-xs-12">
<h2><%= _(:comments) %></h2>
<script data-isso="//isso.wimiso.nl/" data-isso-lang="<%= @item[:language] %>" src="//isso.wimiso.nl/js/embed.min.js"></script>
<section id="isso-thread"></section>
<div class="row">
<div class="col-md-1 hidden-xs"></div>
<div class="col-xs-12 col-md-10">
<h2><%= _(:comments) %></h2>
<script data-isso="//isso.wimiso.nl/" data-isso-lang="<%= @item[:language] %>" src="//isso.wimiso.nl/js/embed.min.js"></script>
<section id="isso-thread"></section>
</div>
</div>
<% end %>
......@@ -35,17 +35,11 @@ prune:
# “layout/” directories in the site directory.
data_sources:
-
type: filesystem_unified
items_root: /
layouts_root: /
allow_periods_in_identifiers: false
identifier_type: full
#-
#type: static
#items_root: /static/
#-
#type: static
#items_root: /subsites/
#prefix: subsites
type: filesystem
-
type: filesystem
items_root: /subsites
content_dir: 'subsites'
layouts_dir: null
string_pattern_type: glob
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment