Website update #2

It’s been quite a while since I last wrote a blog post, but I’ve got some pretty good reasons for that. First of all, I was busy moving to London (!!!) about which I’ll write more in my next post. And second, I was re-designing my website. I am very happy with the result and hope you like it too 🙂

The main thing I changed is the menu. First, I had a static menu that remained on the top of my site all the time, which looked like this:

Now I made a menu that can appear and disappear whenever the user wants. I did this through jQuery. jQuery is a Javascript library which amongst others makes it very easy to create animations on a web page. I never learnt jQuery but it’s very easy to understand what’s going on when you read the code. For example, in the code below I wrote the part that makes the menu pop out, the body part of the page you’re looking at move to the right and become opaque when you click on the words ‘MENU’. By using jQuery I made my website a lot more interactive and dynamic then it was before.

But there are other ways through which you can add animations to your website. When you click on any of the pages in the menu tab you’ll see the content fades in. I did this with Animate.css. This lets you add animations in your css code.

Another thing I added is the map on my contact page. I did this by following the steps on the google devlopers page about Google Maps: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map.

Of course, re-designing my website brought along some problems, most of them were very small but the thing I struggled with a lot was the size of the images in my blog posts. Somehow all of the pictures I added in the blog posts I wrote were deformed. I tried adjusting my css and HTML but nothing seemed to solve my problem. I always post my posts on WordPress first because it’s very easy to add images there and copy the complete post in HTML and then add it to my site. But the thing is, when adding images in WordPress it stets a fixed size for your images, so when I then add it to my site the width and height are adjusted again by my sites’ css and then weird stuff happens. So I decided to post most of my posts again and get rid of the fixed widths and heights wordpress assigned to my images. That’s why it now seems as if I posted al lot blog posts today. I admit this wasn’t the solution I hoped for, but at least I managed to solve the problem.

Let me know what you think of my new design 🙂

Advertisement