-
- Send me a mail:bartvanitterbeeck@gmail.com
-
-
- Send me a tweet:@BartBarto
-
-
- Send me a job: Linkedin
-
-
- Send me a letter: Willem Linnigstraat 11 - 2060 Antwerpen - Belgium
-
-
-
- Link:Behance
-
- Technologies: Adobe Photoshop, Adobe Illustrator, Adobe After Effects
-
- Description: A concert for which I designed the poster, the entrance tickets and the background projection.
-
- Link:Website
-
- Technologies: Maxon Cinema4D, Three.js, HTML5, CSS3, Javascript, Node.js, Websockets, CreateJS, Git, Adobe After Effects
-
- Description: My Final Project for school. A 3D Carnival where you can drive in the bumper cars, shoot at stuff, fish for ducks, take a selfie, play basket like a pro and fly like a pilot.
- I made this together with Robbert Wolfs (@MisterWolfs), who made the basket game, the shooting game, and the main website.
- You can play these games using a Leap Motion, your smartphone, or just your mouse and keyboard.
-
- Link:Youtube - Vimeo
-
- Technologies: Adobe Photoshop, Adobe Illustrator, Adobe After Effects
-
- Description: A "Lyric video" I made for my Web Compositing class.
-
- Link:Swag Swap
-
- Technologies: HTML5, CSS3, Javascript, Git, Node.js
-
- Description: A website I made together with Lorenz Adriaensen (@Lrnzzz) as a school assignment.
-
- Link:Click here to play
-
- Technologies: HTML5, CSS3, Javascript, CreateJS, Canvas, Git
-
- Description: A game I made for my Web Animation class.
-
- Link:Image - Website
-
- Technologies: Adobe Photoshop, HTML5, CSS3, Javascript, SVG, D3.js, Git
-
- Description: A visualisation of the planes flying above me in one week.
-
- Link:Github - Demo
-
- Technologies: HTML5, CSS3, Javascript
-
- Description: A guitar tuner and visualizer with the WebAudio and GetUserMedia API's. requires Chrome or Firefox.
-
- Link:Github
-
- Technologies: Swift
-
- Description: An iPhone app, to log your poo types. Made while trying to learn swift
-
-
-
-
-
-
-
-
About Me
-
-
-
-
- Hi, I'm Bart, currently a Developer at Artcore Society.
- During my time as a student at KdG I've made some fantastic projects like Planes Above Me or Kerm.is.
- You can see more of my work here
- I've always been fascinated by technology and the internet, and I decided that I wanted to make the internet my workplace.
-
-
- I'm skilled in current web technologies, such as HTML5, CSS3, jQuery, canvas and WebGL.
- I also have experience building responsive websites and making themes for Wordpress.
- You can see more of my skills here
-
-
- I'm also a fan of everything science-fiction related, especially Star Wars or Doctor Who and I draw smiley faces everywhere.
-
-
-
-
-
-
-
-
-
-
diff --git a/Website-old/me.jpeg b/Website-old/me.jpeg
deleted file mode 100644
index 802581f..0000000
Binary files a/Website-old/me.jpeg and /dev/null differ
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index 568a6f2..0000000
--- a/_config.yml
+++ /dev/null
@@ -1,17 +0,0 @@
-# Site settings
-title: Bart Van Itterbeeck
-email: bart@bartvi.be
-description: > # this means to ignore newlines until "baseurl:"
- Bart Van Itterbeeck. Full stack web developer and all-round awesome person.
- Hire me now !
-baseurl: "" # the subpath of your site, e.g. /blog/
-url: "http://bartvi.be" # the base hostname & protocol for your site
-twitter_username: BartBarto
-github_username: BartBarto
-facebook_username: bartvanitterbeeck
-pinterest_username: bartbarto
-google_plus_id: +BartVanItterbeeck
-linkedin_id: 87762872
-
-# Build settings
-markdown: kramdown
diff --git a/_includes/footer.html b/_includes/footer.html
deleted file mode 100644
index b0155fd..0000000
--- a/_includes/footer.html
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-
diff --git a/_includes/head.html b/_includes/head.html
deleted file mode 100644
index 548bfe9..0000000
--- a/_includes/head.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
- {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}
-
-
-
-
-
-
-
diff --git a/_includes/header.html b/_includes/header.html
deleted file mode 100644
index 9e3bf51..0000000
--- a/_includes/header.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
diff --git a/_posts/1984-01-22-Various.markdown b/_posts/1984-01-22-Various.markdown
deleted file mode 100644
index 8c58392..0000000
--- a/_posts/1984-01-22-Various.markdown
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: "Various"
-subtitle: "Experiments"
-date: 1984-01-22 11:34:23
-categories: html css js
-main-img: 'github-mark.png'
-small-img: 'github-mark.png'
-link: http://github.com/bartbarto
-permalink: /work/various
----
-Various experiments or little apps / games I made.
-
-[![Space invaders image][invaders-img] Space Invaders canvas clone][invaders] ([github][invaders-gh])
-
-
-[![Speedreader image][speedread-img] jQuery Speedreader][speedread] ([github][speedread-gh])
-
-
-[![Website img][website-img] This website][website] ([github][website-gh])
-
-
-[invaders]: http://bartbarto.github.io/Marvel-Space-Invaders
-[invaders-gh]: https://github.com/bartbarto/Marvel-Space-Invaders
-[invaders-img]: /img/invaders.png
-
-[speedread]: http://bartbarto.github.io/jQuery_Speedreader
-[speedread-gh]: https://github.com/bartbarto/jQuery_Speedreader
-[speedread-img]: /img/speed.png
-
-[website]: http://bartbarto.github.io/
-[website-gh]: https://github.com/bartbarto/bartbarto.github.io
-[website-img]: /img/web.png
\ No newline at end of file
diff --git a/_posts/2013-07-25-CSSSS.markdown b/_posts/2013-07-25-CSSSS.markdown
deleted file mode 100644
index 67df2c1..0000000
--- a/_posts/2013-07-25-CSSSS.markdown
+++ /dev/null
@@ -1,12 +0,0 @@
----
-layout: post
-title: "CSS Sonic Screwdriver"
-subtitle: "CSS image recreation"
-date: 2013-07-25 11:34:23
-categories: css html experiments
-main-img: 'cssss.png'
-small-img: 'cssss.png'
-link: http://codepen.io/bartbarto/full/XmJOGE/
-permalink: /work/CSSSS
----
-A Doctor Who 11th doctor sonic screwdriver image, entirely recreated with only css and html.
diff --git a/_posts/2013-11-12-Swag-Swap.markdown b/_posts/2013-11-12-Swag-Swap.markdown
deleted file mode 100644
index 1ef3d62..0000000
--- a/_posts/2013-11-12-Swag-Swap.markdown
+++ /dev/null
@@ -1,21 +0,0 @@
----
-layout: post
-title: "Swag-Swap"
-subtitle: "Full Stack development"
-date: 2013-11-12 11:34:23
-categories: html Node.js
-main-img: 'swag.png'
-small-img: 'swag.png'
-link: http://swag-swap.herokuapp.com/
-permalink: /work/swag-swap
----
-A website I made together with Lorenz Adriaensen ([@Lrnzzz][lrnzzz]) as a school assignment.
-
-The idea was that you would be able to share clothing you no longer needed with people nearby.
-Based on a rating system you could then swap your items with similiarly rated items.
-
-[Github][github]
-
-
-[lrnzzz]: https://twitter.com/lrnzzz
-[github]: https://github.com/lrnzzz/swag-swap
\ No newline at end of file
diff --git a/_posts/2014-06-23-Tuner-B.markdown b/_posts/2014-06-23-Tuner-B.markdown
deleted file mode 100644
index 1b3d881..0000000
--- a/_posts/2014-06-23-Tuner-B.markdown
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: post
-title: "Tuner-B"
-subtitle: "JS Experiment"
-date: 2014-06-23 11:34:23
-categories: html css js
-main-img: 'tuner.png'
-small-img: 'tuner.png'
-link: http://bartbarto.github.io/Tuner-B
-permalink: /work/tuner-b
----
-A basic tuner/visualizer for tuning your Guitar or ukulele.
-
-It utilizes the WebAudio and GetUserMedia API's. Requires Chrome or Firefox.
-
-[Github][github]
-
-
-[github]: https://github.com/bartbarto/Tuner-B
diff --git a/_posts/2014-09-22-Plogger.markdown b/_posts/2014-09-22-Plogger.markdown
deleted file mode 100644
index bdb31fc..0000000
--- a/_posts/2014-09-22-Plogger.markdown
+++ /dev/null
@@ -1,12 +0,0 @@
----
-layout: post
-title: "Plogger"
-subtitle: "iPhone App"
-date: 2014-09-22 11:34:23
-categories: swift experiments
-main-img: 'plogger.png'
-small-img: 'plogger.png'
-link: https://github.com/bartbarto/Plogger
-permalink: /work/plogger
----
-An iPhone app, to log your poo types. Made while learning swift.
diff --git a/_posts/2015-08-30-kerm-is.markdown b/_posts/2015-08-30-kerm-is.markdown
deleted file mode 100644
index 7a60fe8..0000000
--- a/_posts/2015-08-30-kerm-is.markdown
+++ /dev/null
@@ -1,24 +0,0 @@
----
-layout: post
-title: "Kerm.is"
-subtitle: "Full stack development"
-date: 2015-08-30 12:04:23
-categories: 3D web html css js webgl
-main-img: 'kermis.png'
-small-img: 'kermis.png'
-link: http://kerm.is
-permalink: /work/kerm.is
----
-
-My Final Project for school.
-
-A 3D Carnival where you can drive in the bumper cars, shoot at stuff, fish for ducks, take a selfie, play basket like a pro and fly like a pilot.
-I made this together with Robbert Wolfs (
-[@MisterWolfs][wolfs]
-), who made the basket game, the shooting game, and the main website.
-You can play these games using a Leap Motion, your smartphone, or just your mouse and keyboard.
-
-
-
-[link]: http://kerm.is
-[wolfs]: https://twitter.com/misterwolfs
diff --git a/_posts/2015-08-30-kinetic.markdown b/_posts/2015-08-30-kinetic.markdown
deleted file mode 100644
index 03cc988..0000000
--- a/_posts/2015-08-30-kinetic.markdown
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: post
-title: "Kinetic Typography"
-subtitle: "Bohemian Rhapsody"
-date: 2015-08-30 11:04:23
-categories: Motion-graphics design
-small-img: 'kinetic.png'
-link: http://youtu.be/rWKzC89U7zg
-permalink: /work/kinetic-typography
----
-
-
-
- Send me a mail:bartvanitterbeeck@gmail.com
-
-
- Send me a tweet:@BartBarto
-
-
- Send me a job: Linkedin
-
-
- Send me a letter: Willem Linnigstraat 11 - 2060 Antwerpen - Belgium
-
-
-
- Link:Behance
-
- Technologies: Adobe Photoshop, Adobe Illustrator, Adobe After Effects
-
- Description: A concert for which I designed the poster, the entrance tickets and the background projection.
-
- Link:Website
-
- Technologies: Maxon Cinema4D, Three.js, HTML5, CSS3, Javascript, Node.js, Websockets, CreateJS, Git, Adobe After Effects
-
- Description: My Final Project for school. A 3D Carnival where you can drive in the bumper cars, shoot at stuff, fish for ducks, take a selfie, play basket like a pro and fly like a pilot.
- I made this together with Robbert Wolfs (@MisterWolfs), who made the basket game, the shooting game, and the main website.
- You can play these games using a Leap Motion, your smartphone, or just your mouse and keyboard.
-
- Link:Youtube - Vimeo
-
- Technologies: Adobe Photoshop, Adobe Illustrator, Adobe After Effects
-
- Description: A "Lyric video" I made for my Web Compositing class.
-
- Link:Swag Swap
-
- Technologies: HTML5, CSS3, Javascript, Git, Node.js
-
- Description: A website I made together with Lorenz Adriaensen (@Lrnzzz) as a school assignment.
-
- Link:Click here to play
-
- Technologies: HTML5, CSS3, Javascript, CreateJS, Canvas, Git
-
- Description: A game I made for my Web Animation class.
-
- Link:Image - Website
-
- Technologies: Adobe Photoshop, HTML5, CSS3, Javascript, SVG, D3.js, Git
-
- Description: A visualisation of the planes flying above me in one week.
-
- Link:Github - Demo
-
- Technologies: HTML5, CSS3, Javascript
-
- Description: A guitar tuner and visualizer with the WebAudio and GetUserMedia API's. requires Chrome or Firefox.
-
- Link:Github
-
- Technologies: Swift
-
- Description: An iPhone app, to log your poo types. Made while trying to learn swift
-
-
-
-
-
-
-
-
About Me
-
-
-
-
- Hi, I'm Bart, currently a Developer at Artcore Society.
- During my time as a student at KdG I've made some fantastic projects like Planes Above Me or Kerm.is.
- You can see more of my work here
- I've always been fascinated by technology and the internet, and I decided that I wanted to make the internet my workplace.
-
-
- I'm skilled in current web technologies, such as HTML5, CSS3, jQuery, canvas and WebGL.
- I also have experience building responsive websites and making themes for Wordpress.
- You can see more of my skills here
-
-
- I'm also a fan of everything science-fiction related, especially Star Wars or Doctor Who and I draw smiley faces everywhere.
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at jekyllrb.com
- Hi, I'm Bart, currently a Developer at Artcore Society.
-
- I've always been fascinated by technology and the internet, and I decided that I wanted to make the internet my workplace.
-
- I have made some fun projects using WebGL, Canvas, Node.js and others. You can see some of my work here.
-
A website I made together with Lorenz Adriaensen (@Lrnzzz) as a school assignment.
-
-
The idea was that you would be able to share clothing you no longer needed with people nearby.
-Based on a rating system you could then swap your items with similiarly rated items.
A 3D Carnival where you can drive in the bumper cars, shoot at stuff, fish for ducks, take a selfie, play basket like a pro and fly like a pilot.
-I made this together with Robbert Wolfs (
-@MisterWolfs
-), who made the basket game, the shooting game, and the main website.
-You can play these games using a Leap Motion, your smartphone, or just your mouse and keyboard.
- Hi, I'm Bart, currently a Developer at Artcore Society.
-
- I've always been fascinated by technology and the internet, and I decided that I wanted to make the internet my workplace.
-
- I have made some fun projects using WebGL, Canvas, Node.js and others. You can see some of my work here.
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/js/animations.js b/js/animations.js
deleted file mode 100644
index 2250889..0000000
--- a/js/animations.js
+++ /dev/null
@@ -1,24 +0,0 @@
-
-$(function(){
-
- var jumble = $('.skill'),
- //add the start and finish class respectively
- start = $('h1', jumble).first().addClass('start'),
- finish = start.next().addClass('finish');
-
- start.css({'opacity':'1'});
-
- //jumble is designed to fire only when told to
- //it does not automatically cycle
- function jumbleIt(i) {
- setTimeout(function(){
- if (i <= 4) {
- jumble.jumble();
- jumbleIt(i+1);
- }
- }, 1600);
- }
- //kick off jumble function
- jumbleIt(1);
-
-});
\ No newline at end of file
diff --git a/js/bg.frag b/js/bg.frag
new file mode 100644
index 0000000..17f6394
--- /dev/null
+++ b/js/bg.frag
@@ -0,0 +1,86 @@
+precision mediump float;
+
+uniform vec2 iResolution;
+uniform vec2 iMouse;
+uniform float iTime;
+uniform float movementAmount; // Control the amount of movement
+uniform float scaleFactor; // Control the scale of the pattern dynamically
+
+float hash(vec2 p) {
+ return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x))));
+}
+
+float noise(vec2 x) {
+ vec2 i = floor(x);
+ vec2 f = fract(x);
+ float a = hash(i);
+ float b = hash(i + vec2(1.0, 0.0));
+ float c = hash(i + vec2(0.0, 1.0));
+ float d = hash(i + vec2(1.0, 1.0));
+ vec2 u = f * f * (3.0 - 2.0 * f);
+ return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
+}
+
+#define octaves 14
+float fbm(in vec2 p) {
+ float value = 0.0;
+ float freq = 1.0;
+ float amp = 0.5;
+
+ for (int i = 0; i < octaves; i++) {
+ value += amp * (noise((p - vec2(1.0)) * freq));
+ freq *= 1.9;
+ amp *= 0.6;
+ }
+ return value;
+}
+
+float pattern(in vec2 p) {
+ vec2 offset = vec2(0.5);
+ vec2 mouseDir = vec2(-(iMouse.x - 0.5 * iResolution.x), iMouse.y - 0.5 * iResolution.y) / iResolution.y;
+ mouseDir *= movementAmount;
+
+ vec2 aPos = mouseDir * 6.0 + vec2(sin(iTime * 0.005), cos(iTime * 0.01)) * 6.0;
+ vec2 aScale = vec2(3.0);
+ float a = fbm(p * aScale + aPos);
+
+ vec2 bPos = mouseDir * 1.5 + vec2(cos(iTime * 0.01), sin(iTime * 0.01)) * 1.0;
+ vec2 bScale = vec2(0.6);
+ float b = fbm((p + a) * bScale + bPos);
+
+ vec2 cPos = mouseDir * 2.0 + vec2(-0.6, -0.5) + vec2(cos(-iTime * 0.001), sin(iTime * 0.01)) * 2.0;
+ vec2 cScale = vec2(2.6);
+ float c = fbm((p + b) * cScale + cPos);
+ return c;
+}
+
+vec3 palette(in float t) {
+ vec3 a = vec3(1, 0.5, 1);
+ vec3 b = vec3(0.45, 0.25, 0.14);
+ vec3 c = vec3(1.0, 1.0, 1.0);
+ vec3 d = vec3(0.0, 0.1, 0.2);
+ return a + b * cos(6.28318 * (c * t + d));
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+ vec2 p = fragCoord.xy / iResolution.xy;
+ p.x *= iResolution.x / iResolution.y;
+
+ // Normalize mouse coordinates (center screen is (0, 0))
+ vec2 mouseNorm = iMouse / iResolution;
+ mouseNorm = mouseNorm * 2.0 - 1.0;
+ mouseNorm.y *= -1.0;
+
+ // Apply scale transformation relative to the mouse position
+ p -= mouseNorm;
+ p *= scaleFactor;
+ p += mouseNorm;
+
+ float value = pow(pattern(p), 1.8); // more "islands"
+ vec3 color = palette(value);
+ fragColor = vec4(color, 1.0);
+}
+
+void main() {
+ mainImage(gl_FragColor, gl_FragCoord.xy);
+}
\ No newline at end of file
diff --git a/js/bg.vert b/js/bg.vert
new file mode 100644
index 0000000..9f83e6c
--- /dev/null
+++ b/js/bg.vert
@@ -0,0 +1,6 @@
+ attribute vec2 inPos;
+
+ void main()
+ {
+ gl_Position = vec4(inPos, 0.0, 1.0);
+ }
\ No newline at end of file
diff --git a/js/jumble.js b/js/jumble.js
deleted file mode 100644
index 5f5ea98..0000000
--- a/js/jumble.js
+++ /dev/null
@@ -1,110 +0,0 @@
-//jumble plugin - still very much a WIP
-(function($) {
-
- $.fn.jumble = function(options) {
-
- var o = $.extend(true, {}, $.fn.jumble.defaults, options);
-
- this.each(function() {
-
- var container = $(this),
- h1 = $(o.textContainer, container),
- start = $('.' + o.startClass),
- arr1 = start.text().toLowerCase().split(''),
- finish = $('.' + o.finishClass),
- finishIndex = finish.index(),
- arr2 = finish.text().toLowerCase().split(''),
- validate = {},
- keep = {};
-
-
- //wrap all H1 characters with a span
- for (var i = 0; i < h1.length; i++) {
- var h1Split = h1.eq(i).text().split(''),
- h1New = [];
- for (var c = 0; c < h1Split.length; c++) {
- if (h1Split[c] === '^') {
- h1New[c] = '
' + h1Split[c] + '
';
- } else {
- h1New[c] = '' + h1Split[c] + '';
- }
- }
- h1.eq(i).html(h1New.join(''));
- }
-
-
-
- //find out if start has any of the same letters as finish
-
- //create a validation array
- for (var i = 0; i < arr2.length; i++) {
- validate[arr1[i]] = (arr1[i]) ? true : false;
- }
-
-
-
- //feed the finish array through the validation array to see if
- //there are any matching letters between the two strings.
- //credit: http://stackoverflow.com/questions/2307663/fastest-most-efficient-way-to-compare-two-string-arrays-javascript/#answer-2307736
-
- for (var i = 0; i < arr2.length; i++) {
- if (validate[arr2[i]]){
-
- //if there is a match find the letter in the start string
- //add the class "keep" to the letter's span and append the
- //finish string letter index to a data-index attribute
-
- if ([arr2[i]]) start.find(':contains(' + [arr2[i]] + ')').addClass('keep').attr('data-index', i);
-
- //Save the results in an array named "keep"
-
- keep[arr2[i]] = (arr2[i]) ? true : false;
-
- }
- }
-
-
-
- //fade the letters we are not keeping
- start.find('span').not('.keep').animate({'opacity':'0'}, o.fadeSpeed, o.easing, function(){
-
- //animate the letters we are keeping
- $('.keep').each(function(){
- var startTop = $(this).position().top,
- startLeft = $(this).position().left,
- dataIndex = $(this).data('index'),
- finishTop = finish.find('span').eq(dataIndex).position().top,
- finishLeft = finish.find('span').eq(dataIndex).position().left;
-
- //move the letters to their new position
- $(this).animate({'top':finishTop - startTop,'left':finishLeft - startLeft}, o.animateSpeed, o.easing, function(){
- //fade the finish string in to fill in the gaps
- finish.animate({'opacity':'1'}, o.fadeSpeed, o.easing, function(){
- start.css({'display':'none'});
- h1.removeClass('start finish').eq(finishIndex).addClass('start').next().addClass('finish');
- });
- });
- });
-
- });
-
-
-
-
- }); //end each
-
- return this;
-
- };
-
-
- $.fn.jumble.defaults = {
- textContainer: 'span',
- startClass: 'start',
- finishClass: 'finish',
- fadeSpeed: 500,
- animateSpeed: 500,
- easing: null,
- };
-
-})(jQuery);
\ No newline at end of file
diff --git a/js/jumble.min.js b/js/jumble.min.js
deleted file mode 100644
index 30ba4e5..0000000
--- a/js/jumble.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(a){a.fn.jumble=function(b){var c=a.extend(!0,{},a.fn.jumble.defaults,b);return this.each(function(){for(var b=a(this),d=a(c.textContainer,b),e=a("."+c.startClass),f=e.text().toLowerCase().split(""),g=a("."+c.finishClass),h=g.index(),i=g.text().toLowerCase().split(""),j={},k={},l=0;l'+m[o]+"
- 
-
-
-
- 
-
-
-
- 
-
-
- 
-
-
-
- 
-
-
-
- 
-
-
-
- 
-
-
- 
-
-
-
- 
-
-
-
- 
-
-
-
- 
-
- 
Space Invaders canvas clone
jQuery Speedreader
This website