About this Site

Some notes about this website's purpose, its creation and why I'm glad it's finally out there

So my own website... I wanted to build it for quite a long time now. Actually I already had one, but it was just a simple one-page site with a little bit of information about me. But what I wanted is a site where others can find out more about me, see what I've been working on and I also wanted to have a blog. I've never really written on the web before (with some minor exceptions) but I enjoy it a lot when others share their experiences. The whole time I worked at Station I kept on telling my coworkers that my site will soon be finished. Well, it never happened in those one and a half years I worked there. It's not that I just didn't start, I created probably around five prototypes but before I could finish them I wasn't happy with the concept anymore because I picked up some new inspiration that I liked more. So that's the reason why I'm really happy that after 75 Git commits I finally created a working, usable site. Finished would be the wrong term, there are many things which I'd like to improve / add, but hey it works for now. I'd be happy to hear your feedback.

During the period I worked on the website I went hiking a few times. Each time I realised once more: Switzerland is awesome!

Apart from providing information and giving me a platform to publish my work and stories, I also had some technical and visual goals for the site:

  • It should work like a single page application (SPA) but still provide proper SEO.
  • There should be an intro screen with a 'sweet' animation when entering the website.
  • When navigating the different pages it should switch between these with nice page transition animations.
  • It should be a static website (whitout the need to build it on the server when requested), as a frontend developer I just like simple, static HTML files. :)
  • The HTML loaded via AJAX should only contain the HTML of the new page without the parts shared between every page.
  • I decided the site should be available only in English. The reason is that I can't assume the people I'm sending it to for my applications or the people who could be interested in my articles can understand German. And I'm really too lazy to manage a multilingual site.
  • Keep things simple, design-wise and code-wise.

Sketches & Prototypes

coming soon...

As a bonus, that's how my first website from 2013 looked like. Totally responsive baby! :)

Implementation

I didn't want to use a CMS for managing my content because I wanted total freedom without the need to work around limitations of the content management system. Although I did consider using Ghost or Prismic.io. So no CMS, I could have used one of the popular static site generators like Jekyll or Middleman then, but I didn't. The first reason was the same as with the CMS, I wanted full controll over my HTML output and was not in the mood to learn Ruby to make the needed customisation (if it would have been needed at all, which I don't know as I haven't tried). The second reason was that I had the idea of developing a simple static site generator by myself spinning around in my head for quite some time and I wanted to try. So before I explain further, this is how I publish a blog article on my site now:

  • From the root of my website directory I go into the folder 'content/blog/' and there I create a Markdown file. For example '2015-08-15_desired-blog-article-url.md'.
  • I then write my article within this file, if I add image or video paths to my article I obviously have to add the files to my images folder.
  • I run a php script for example under: my-website.com/generate-static-site
  • If I have done these steps locally and not on the server I would just push to Git and pull again to my server.
  • Done!

The PHP script is around 100 lines of code and it just iterates through the files of the content directory and provides their content as a variable to the template files and then saves the output of the template files as HTML files into the 'site/' directory. That's it.

At the beginning of the Markdown files I add a small JSON where I put content, that I want to place specifically in my template (think custom fields). The PHP script then extracts the JSON and parses the Markdown before sending both to the template. The 'JSON header' looks like this:

---
{
    "title": "Article Title",
    "subtitle": "Subtitle goes here"
}
---

Here starts the Markdown...

I really like this approach for my small, personal site as it gives me all the flexibility I need and still enables me to compose my content in an easy way. I prefer browsing my site's content in Finder/Explorer to navigating in a CMS anyway. And I also prefer writing in my favourite editor/text app to writing in a small, ugly WYSIWYG editor (except if it's done like at Medium).

Now on the frontend side of things: I didn't want to use a MV* framework to keep things simple and it would have been an overkill for this site anyway. Out of habit I sticked with jQuery, but as the site is targeted at modern browsers only I could have left it out. I used RSVP.js to manage asynchronous code (loading & animations) with JS promises.

In addition I used the following external resources:

I really like it when a website or an app gives you a sense of orientation. When you navigate the main pages (listed in the navigation) the page transition animations move the site left and right, but when you navigate to an article from the Craft or Thoughts overview pages the animation moves the site up (you go down) because I look at the articles as subpages. I'd like to hear how this feels and if one gets the idea without knowing about it.

One more thing that was important to me with these animations was that something should happen immediately when you click a link. Showing a loading indicator first is good for your beautiful animation but not for the user experience. So what I've done is: You click a link, the current page starts sliding away and a coloured full-screen panel slides over it. This takes half a second. If you have a good internet connection the next page is probably already loaded and the panel just continous sliding and moves out of your view again on the other side and reveals the next page sliding in. But if the loading wasn't complete I would just display a loading indicator on top of the panel and continue the transition once the loading has completed.

Plans

  • I'd like to implement comments with Disqus.
  • Improve page transition performance, especially on mobile. I've seen some good examples of this effect with Snap.svg.
  • Keep overview pages in the DOM when navigating to an article, because chances are quite big that you'll return to the overview.
  • If I find the time I'll collect images of my sketches and videos of my prototypes and update this article.
  • Write articles, so my blog doesn't have such an empty feeling to it. :)