I spent some time today updating my website to function as an extension of my CV. For just over a year now, I’ve had a website hosted on my own machine located in my parents’ garage, but I decided that I would try and improve the look of the website a bit.
I wanted something simple, just handcrafted HTML with good code legibility, but at the same time responsive and modern. I found a few CSS templates and guides that helped me achieve the look I wanted: Modern and responsive, with gorgeously large images, that scroll behind the text.
I kept all my writings and uploaded files in place, and transferred the text partially from my old website, and partially from my CV. The website is easy to maintain, and simple to read, and I got the chance to show some of my favourite photos as background images as well.
All in all, I’m pleased with the result. What do you think? See for yourself:
By the way, Safari on iPhone posed a bit of a problem. The images were not at all displaying correctly, in that they were stretched too tall, with each pixel being truly gigantic. I had to put in a small fix in my CSS, inspired by the solution on this page.
The problem was, that the iPhone was not understanding the CSS directive
background-size: cover;
So, I had to introduce a fix. To make it work, I had to sacrifice the nice parallax effect where the image scrolls behind the text, but Chrome on Android was already falling back to static images, so I didn’t mind iPhone doing the same. Suffice to say, the following worked, where I set background-attacment to scroll (thus giving up hope of the nice parallax effect), and hardcode the height of the image container, and thus also the image to a set value.
/* fix for the iphone */
@media (min-device-width : 320px) and (max-device-width : 568px) {
section.module.parallax {
background-attachment: scroll;
height: 320px;
}
section.module.parallax h1 {
line-height: 320px;
}
}