The new Lourentius

Lourentius V2

Growing with the web

The web is constantly evolving, and I’m always trying to evolve with it. Technologies get updated, new/better techniques are created and people use the web in different ways. Even though my current portfolio works (it’s stable, responsive, adapts to mobile and accounts for older browsers), it doesn’t exactly show what I’m capable of anymore, nor does it really show who I am. It needs to be fresh and attractive to potential clients as well.


I’ve been pondering about whether I should focus on a WordPress framework such as Genesis and go from there on out, or build everything from scratch again. Since I’m a big fan of doing things myself (don’t mistake this for reinventing the wheel), I’ve chosen to build it from scratch (though using a few common code snippets from my current portfolio) and build a better theme that corresponds more with the current WordPress theme guidelines. While not neccesary (I’ve learned that’s only neccesary when it’s a theme that will be sold on the theme market) I’ll still learn a lot in doing so.


So far, I’ve been using the BEM method in my new project and it proves to be useful. I consider it practice rather than neccesity, since I’ll be the only one working on this (it’s particularly useful when working with multiple developers).


Another note: CSS preprocessors have been out for a while and I’ve never actually used it because I’ve always been more of a “pure CSS” guy. This changed and I can definitely see the huge benefits of incorporating it in my workflow. I actually feel like I’m late to the party. It’s definitely come to my notice that the more I learn, the more I realize how little I know. So, with this project, I’m going to update my online identity and improve my skills at the same time. This means: using Less or Sass (leaning towards Sass), becoming an expert in Javascript and jQuery, learning the ins and outs of node.js, getting comfortable with Git again, etc. Here’s a better list for what I’m aiming for: A Baseline for Front-End Developers.


Alright, on to the actual portfolio I’ve been working on. Keep in mind, it’s a work in progress, meaning that text and images will most likely change.


Clearly, I’m a fan of big and fullscreen headers, using images to give visitors the right impression. This particular image is a placeholder but still conveys what I’m working with. As for the headline, the word “Awesome” keeps changing into other keywords for the people who stare at the header long enough (“responsive, “beautiful”, “functional”, etc). It’s a nice catchphrase, but since websites aren’t only about being “awesome”, I decided to let the word switch out with other keywords.


Lourentius Header

Right below the header is where I present my services. If people are searching for me, the most likely reason for visiting the website is getting something done. My current icons are flat, using just one color and negative space. Since I want my portfolio to be more vibrant and friendly, I decided to create new ones, incorporating colors and shades. They animate on hover, with the last one being a little special: hover on the rocket for too long, and it’ll fly away! Easter eggs are fun (not much of a secret now though…). Users will be able to go to my about page, where I’ll go into more detail about my work process.

Lourentius Services

Here’s a closer look:

Lourentius Services

I’ve decided to show only my latest work on the frontpage, giving a clear picture of what I’ve been working on. Since this is an important part, it needs to stand out. From here on out, users can either check the case study or my full portfolio.

Lourentius Work

When users are still interested and keep on scrolling, they’ll land on a little “about me” section. This part is ment to give a soft, friendly vibe, portraying myself as an approachable, good guy (I am!).

About Lourentius

Last but definitely not least, I created an interactive questionnaire to make the process of defining a project for clients a lot easier. More questions reveal itself depending on which options are chosen. Here’s a little peak:

Lourentius questionnaire


That’s it for now. Back to designing and coding!


Go Back