Skip to content

Commit 0bf16b3

Browse files
author
Johan Van den Rym
committed
Added jekyll page templates
1 parent 2824b58 commit 0bf16b3

File tree

4 files changed

+167
-0
lines changed

4 files changed

+167
-0
lines changed

‎about.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
layout: page
3+
title: About
4+
---
5+
6+
{% capture m %}
7+
##Professional life##
8+
9+
I am certified as a web designer since 2002.
10+
11+
At my latest job at [ESN](http://www.esn.eu/company) (European Services Network), a leading provider of multilingual, multi-channel, multimedia communication services to the European institutions. I worked there since 2008 as a web integrator and a front-end web developer where I got to work on many exciting projects for the European Commission and the Flemish Government.
12+
13+
I dabble in user interface design, user experience, wire-framing and prototyping.
14+
I create mobile-friendly and responsive websites.
15+
I have a knack for accessibility, semantic mark-up.
16+
17+
Experience with feature-driven development, [Agile](http://www.allaboutagile.com/what-is-agile-10-key-principles/), [SCRUM](https://www.scrum.org/Resources/What-is-Scrum) and [JIRA](https://www.atlassian.com/software/jira/agile).
18+
Avid user of front-end tools like [SASS](http://sass-lang.com/), [Grunt](http://gruntjs.com/),... to speed-up, improve and organise workflow of a project. Embrace <abbr title="Keep it simple &amp; straightforward.">KISS</abbr> and <abbr title="Don't Repeat Yourself">DRY</abbr> principles.
19+
20+
Follow all latest UI design trends, accessibility and emerging technologies. Find [me](https://twitter.com/johanvdr) actively discussing any of these topics on Twitter.
21+
22+
##Skills##
23+
24+
###Web Stack###
25+
* [Linux](https://www.linux.com/learn/new-user-guides/376-linux-is-everywhere-an-overview-of-the-linux-operating-system) ([Ubuntu](https://help.ubuntu.com/12.04/installation-guide/i386/what-is-ubuntu.html)), [Terminal](https://help.ubuntu.com/community/UsingTheTerminal)
26+
* [Sublime](http://www.sublimetext.com/) editor
27+
28+
###Front-end tools###
29+
* <abbr title="HyperText Markup Language">HTML 5</abbr> &amp; <abbr title="Cascading Stylesheets">CSS 3</abbr>: Selectors, Media Queries, <abbr title="Object-Oriented CSS">OOCSS</abbr>, <abbr title="Block, Element, Modifier">BEM</abbr>, [AM Modules for CSS](http://amcss.github.io/)
30+
* <abbr title="Extensible Hypertext Markup Language">XHTML 1</abbr>, <abbr title="Extensible Markup Language">XML 1</abbr>
31+
* CSS pre-processors (<abbr title="Syntactically Awesome Style Sheets">SASS</abbr>)
32+
* <abbr title="Scalable Vector Graphics">SVG</abbr>
33+
* [Bootstrap](http://getbootstrap.com/) framework
34+
* [Jquery](http://jquery.com/), [Mootools](http://mootools.net/), [plain javascript](http://blog.adtile.me/2014/01/16/a-dive-into-plain-javascript/)
35+
* [Grunt](ttp://gruntjs.com/) (node.js), [Angular](https://angularjs.org/) JS (Routes)
36+
37+
###Web Standards and Accessibility###
38+
* <abbr title="World Wide Web Consortium">W3C</abbr> [standards](http://www.w3.org/standards/)
39+
* <abbr title="Web Accessibility Initiative - Accessible Rich Internet Applications (standards suite)">WAI-ARIA</abbr>
40+
* <a href="http://www.w3.org/TR/WCAG20/" title="Web Content Accessibility Guidelines">WCAG 2.0</a>, <a href="http://www.webaim.org/standards/508/checklist">Section 508</a> accessibility guidelines
41+
42+
###Visual Design Tools###
43+
* Photoshop, Fireworks, Gimp
44+
* Illustrator, Inkscape
45+
* Wire-framing and proto-typing: [Mindmeister](http://www.mindmeister.com/), [Axure](http://www.axure.com/)
46+
* Design in the browser
47+
48+
###Content Management Systems###
49+
* Drupal: +5 years of experience, participate in the [Drupal community](https://www.drupal.org/user/2514444), Drush, build custom themes (front-end and admin themes) with emphasis on Front-end performance , Drupal Coding Standards, Panels, Context, Views, phpTemplate (<abbr title="Hypertext Pre-processor">PHP</abbr> &amp; Drupal API), Composer
50+
* In-house ColdFusion CMS: building theme with Coldfusion and XML, static HTML site generator.
51+
* Jekyll: liquid template and Ruby on Rails, static HTML site generator.
52+
53+
###Software Development###
54+
* Agile: Scrum. Feature-driven development in a team of front-end developers, back-end developers and UX designers together with the Product Owner and Scrum Master . Daily stand-up meetings.
55+
* Project-based (waterfall)
56+
* Peer review, Quality control and - Assesment.
57+
58+
###Unit testing###
59+
* Selenium and Browser Stack (screenshot diffs UI)
60+
61+
###Languages###
62+
* Dutch (mother tongue)
63+
* English (Full professional proficiency)
64+
* French (Professional proficiency)
65+
66+
{% endcapture %}
67+
{{ m | markdownify }}

‎archive.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
layout: page
3+
title: Archive
4+
---
5+
6+
<section id="archive">
7+
{%for post in site.posts %}
8+
{% capture cyear %}{{ site.time | date: '%Y' }}{% endcapture %}
9+
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
10+
{% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
11+
{% unless post.next %}
12+
{% if cyear != year %}
13+
<h2>{{ year }}</h2>
14+
{% else %}
15+
<h2>This year's posts</h2>
16+
{% endif %}
17+
<ul aria-label="blog posts sorted by date, newest first">
18+
{% else %}
19+
{% if year != nyear %}
20+
</ul>
21+
<h2>{{ year }}</h2>
22+
<ul>
23+
{% endif %}
24+
{% endunless %}
25+
<li>
26+
<time datetime="{{ post.date | date: "%M %Y" }}" class="date">
27+
{{ post.date | date: "%-d %B"}}
28+
</time>
29+
&rarr;
30+
<a href="{{ post.url }}/">{{ post.title }}</a>
31+
</li>
32+
{% endfor %}
33+
</ul>
34+
</section>

‎index.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
layout: home
3+
title: Home
4+
---
5+
6+
{{ content }}

‎work.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
layout: page
3+
title: Work
4+
---
5+
{% capture m %}
6+
7+
##Kanooh Drupal distrubtion SAAS and PAAS - 2013/2014##
8+
9+
Working in a Agile and SCRUM environment in a team of front-end and back-end developers. Build from scratch VO (Vlaamse overheid) themes which are configurable in a complete custom back-end Drupal solution. For more [information](http://kanooh.be/overzicht-functionaliteiten). Build the administration theme for the complete distribution which involved a lot of tweaking and customization of existing core and contributed modules.
10+
11+
##Kanooh website - 2013##
12+
13+
Created a Drupal front-end theme based on the Bootstrap framework. *This website has been since replaced in 2014*, the version I did is [archived here](https://web.archive.org/web/20130611194226/http://kanooh.be/).
14+
15+
{% image kanooh.jpg "Homepage www.kanooh.be" "Homepage has a more information pane that scrolls over the page slider" %}
16+
17+
{% image kanooh_inside_page.jpg "Interior page www.kanooh.be" "Inside page example with responsive tables." %}
18+
19+
##Muntpunt - 2013##
20+
21+
Created Drupal page templates for the Agenda section. This involved customization of the UIT agenda API templates and integration of Google API for localization.
22+
23+
{% image muntpunt_agenda_search.jpg "Agenda www.muntpunt.be" "[Search page for events](http://www.muntpunt.be/agenda/search) (UIT agenda)" %}
24+
{% image muntpunt_agenda_local.jpg "Agenda detail page www.muntpunt.be" "Event detail page with Google Maps integration" %}
25+
26+
##Onderwijs Vlaanderen - 2013##
27+
28+
Working from an analysis of the existing information architecture. From card sorting and IA reports created wireframes and prototypes in Axure. Website is now [online](http://onderwijs.vlaanderen.be/).
29+
30+
{% image ond_vlaanderen.jpg "Onderwijs VL" "Information architecture analysis" %}
31+
32+
##Go! Platform##
33+
34+
Our graphic studio first created a visual identity for the Go! School network websites. Build a Drupal 7 multi-site system that allowed for distinct theme for [each school](http://www.katervuren.be/) with a common base theme for each school. Drupal custom modules like school calendar, newsletters, photo album were all custom built. (Drupal theming - CSS - Jquery - ARIA)
35+
36+
{% image go_websites.jpg "Go websites example website" "Homepage of school KTA Tervuren" %}
37+
38+
##European Research Council##
39+
40+
The main goal of the [European Research Council (ERC)](http://erc.europa.eu) is to encourage high quality research in Europe through competitive funding. Build the custom drupal 6 theme, module to display organization members and a module to display related videos.
41+
42+
{% image erc_homepage.jpg "European Research Council" "Homepage of erc.europa.eu" %}
43+
44+
##Green week conference##
45+
46+
en Week, the biggest annual conference on European environment. Created a drupal conference website with live photo and video blogging during the 3-day event. Build the custom theme and page templates for the website. *[Website](http://ec.europa.eu/environment/archives/greenweek2012/) is only available as static HTML as it gets archived after the conference ends.*
47+
48+
{% image greenweek_2012.jpg "Greenweek 2012" "Homepage of [greenweek 2012 conference website](http://ec.europa.eu/environment/archives/greenweek2012/index.html)" %}
49+
50+
{% image greenweek_2010.jpg "Greenweek 2010" "Homepage of [greenweek 2010 conference website](http://ec.europa.eu/environment/archives/greenweek2010/index.html)" %}
51+
52+
##Marie Curie Actions##
53+
54+
Marie Curie Actions fellowships for researchers is a website where you will find practical information on each of the Marie Curie actions including guidance on how to apply for funding, information on progress of calls for proposals, evaluation and funding decisions.
55+
Creation of theme, and custom news slider with video player integration. Worked on additional page template designs.
56+
57+
{% image marie_curie_actions.png "Marie Curie Actions" "Homepage of [Marie Curie Actions](http://ec.europa.eu/research/mariecurieactions/)" %}
58+
59+
{% endcapture %}
60+
{{ m | markdownify }}

0 commit comments

Comments
 (0)