Updated portfolio

My updated Graphic & Webdesign portfolio is now online. It’s a platform where I can show of my latest work.

The right time to update

For me it was quite important to find the right moment to update my website. It should represent where you are as a designer in terms of style and skill. Recent projects helped me determine this. Therefore I feel like the new website really shows what I’m capable of at this moment.

Meta

The portfolio website itself is just as important as the projects it contains. It’s a great chance to show of as many design and technical knowledge as possible. Make sure the focus stays on the content though. As with most project, the design and experience are there to support the content.

Add something extra

The portfolio is geared towards my main profession: graphic & webdesign. However, I personally like to include other interests or skills as well. That is why I added a photography and a game design section. Both sections are related to my profession in several ways, show where my interests and skills extent to and simply add something unique.

Visit my update portfolio.

After enjoying photography for just over a year, I decided to build a portfolio for my favourite images.

Photography Portfolio

About the selection

The website contains just a small selection of my photographs. When creating the selection I tried to only include the best, while also representing the different types of pictures I like to take.

ramonvantloo-photography-portfolio-homepage

The photographs are organised in several categories. The most important categories are travel destinations I visited over the last year. Other categories are focused on food and portrait photography for example.

About the design

The design is kept minimalistic to keep the focus on the photographs. In addition, every page starts with a big image to catch the users eye. Galleries contain relatively big thumbnails, but a very selective amount of images to let the user keep a good overview.

ramonvantloo-photography-portfolio-lightbox

With the help of jQuery and imagelightbox.js, users can click on the images to enlarge them. The advantage of imagelightbox.js is that it comes with no design of it’s own, allowing you to design it from the ground up (and consistent with the website).

MarlySesink.nl is a personal portfolio containing the paintings, sculptures and monoprints made by Marly Sesink. I created a brand new design for the website and translated it to HTML5 and CSS3.

marlysesinkhomepage

The design is minimalistic and easy to navigate. For the galleries containing the art I used Image Lightbox. I found this to be a great jQuery-based solution since it works excellent, is easy to implement and doesn’t come with a pre-made (and usually unwanted) design.

Every so often I find myself dealing with a project which contains existing HTML which I have to style without being able to edit it. While that is already less than ideal, finding inline CSS in that HTML can become a real problem. Luckily there are several tricks you can use in cases like that.

Overwrite inline style

Overwriting inline style is a trick I have known and been using for a while. See the example below, add [style] to the selector and use !important.

<body>
<h1>Lorem ipsum</h1>
<p style=”color: white;”>Lorem ipsum dolor sit amet.</p>
</body>

p[style] {
color: black !important;
}

In the example above, the text will be displayed black despite the inline style.

Overwrite based on inline style

The following trick is new to me, but I have found it to be very useful already. If you add [style] to a selector and then also add the inline style you want to target, you can overwrite CSS more specific. Again, don’t forget to add !important too.

<body>
<h1>Lorem ipsum</h1>
<p style=”color: white;”>Lorem ipsum dolor sit amet.</p>
</body>

p[style=”color: white;”] {
color: black !important;
}

In the example above, the CSS will overwrite the HTML element only when it has the inline style.

No Cake Make Up gives workshops about make-up and is located in Utrecht. This is a new initiative and to gain the necessary attention they will use both their own website and a good social media presence.

NoCakeMakeUp

For their website, I helped setting up the HTML5 and CSS3, while also advising in the areas of content, design and search engine optimization.

For a while I’ve been looking for an easy way to check spelling on the websites I design. Unfortunately, the options I found to do this were either not practical or didn’t support the required languages.

However, the following solution comes close to what I was looking for. It allows you to check spelling just like you would in Word for example. It only requires a (modern) browser and temporarily adding an html-attribute.

How to

  1. Add contentEditable="true" to the body tag (to check the entire page) or a specific element (to check only that element and underlying elements) of the page.
  2. View the page in a browser (Firefox or Chrome for example). As you can see, all elements affected by the attribute can de edited. More importantly this also means spelling is checked in a similar way to input fields and text areas.

Caution: Use this only when developing and testing the website. In other words, don’t use this on the website accessible for visitors. For starters it affects the usability of your website.

About the attribute

Adding this attribute to an element makes it editable for users. It’s primarily used as a basis for rich text editors. For more information about the attribute visit w3schools.com.

Languages

This solution uses the dictionaries installed in your browser. You can easily install additional dictionaries and in general browsers support a lot of languages.

Although it’s far from a perfect solution, I thought I’d share it anyway. Especially since it’s so easy to try out and use.