Welcome to the brand new evenwerk.com. The site has received a brand new design with new features to better showcase my work. In addition, I also have updated the about page to act more like a resumé and a blog.
In this post I would like to take you through the design process and share some neat code that I used to build it.

 

 

Let’s start with the portfolio page. When the user visits the page, they are greeted with a simple but effective header summarizing who I am. When scrolling down, the user will see a grid containing my portfolio. Portfolio item previews are styled using the items main colors, along with a device containing a screenshot.
When the visitor clicks on a portfolio item, some really cool stuff happens; the portfolio item will expand and present seamlessly in a modal-like fashion.
This is effect is achieved by calculating the position in the viewport and using the JavaScript History API. This API enables developers to change the urls without reloading the whole page. In addition, developers can store information in the history.state. In order to retrieve the page, I make an AJAX request to the page and tell it in the header to only return the content.

 

const oldStoreData = {
    scrollY: transformY,
    url: pageURL,
    html: bodyReplaceableContent[0].innerHTML
}
const newStoreData = {
    url: pageURL,
    html: layerReplaceableContent[0].innerHTML
}

if (!popstate) {
    history.replaceState(oldStoreData, null, currentHREF);
    history.pushState(newStoreData, null, pageURL);
}

 

The portfolio item detail or case study as I would like to call it from now on, has been greatly expanded to showcase the process behind each project:

  • Tags defining the main skills necessary.
  • A comparison slider.
  • Technical and design explanation.

 

The comparison slider is very easy to make, especially when using when using the HTML 5 input slider. It is composed of two images in a container with one of the image’s width equal to the sliders progress value.
For the design explanation I have added a nice comparison container in order to show the evolution in iconography for example.

 

$(document).on("input change",".screen input",function() {
    $(".resize").css("width", "" + ($(this).val() / 10) + "%");
});

 

The contact page was kept simple intentionally; the page only contains a few contact links. I have decided not to include the contact form due to it’s limited capability and extra implementation time. Most importantly, they are becoming out of style.

 

Contact forms are becoming out of style.

 

For my about page I wanted to keep the amount of text low, yet still provide a description about myself. I chose to divide the page into three parts:

  • Some personal information with a description about me.
  • My professional skills.
  • My education and experience.

 

For the skills I have created a simple progress bar for each skill. This is a nice visual way to see the strength of each skill.
The education and experience shows a timeline containing each point in time for when I started studying or working. The timeline is completely CSS and uses padding, borders and overflow:hidden to give the illusion of one gradient element.

 

.subTrack {
    width: $timelineWidth;
    display: flex;
    flex-direction: column;
    
    &:before, &:after {
        content: '';
        border-left: $trackPadding solid $blackDefault;
        border-right: $trackPadding solid $blackDefault;
        flex: 1;
        width: inherit;
        display: block;
        box-sizing: border-box;
    }
    
    .corner {
        height: $trackPointHeight;
        
        &:after {
            width: 24px;
            height: 24px;
            top: 50%;
        }
    }
}

 

For the blog I wanted a simple design yet rich support for code snippets, images, quotes and bullets. In fact: this article uses all the beforementioned attributes. In addition, I wanted to create a comment system. The comments can only indent by one in order to prevent unreadable comments on mobile. Blog posts expand in the same way as portfolio items.
The blog overview makes use of the CSS Grid in order to create a native masonry layout.

 

.layoutContainerBase {
    @include respond-to(mobile) {
        width: $mobileGrid !important;
    }
    @include respond-to(tablet) {
        width: $tabletGrid;
    }
    @include respond-to(desktop) {
        width: $desktopGrid;
    }
    @include respond-to(desktopHD) {
        &.padded {
            width: 1142px;
        }
        &:not(.padded) {
            width: $desktopHDGrid;
        }
    }
}

.gridBase {
    display: grid;
    grid-gap: $gridGap;
}

.columnGrid {
    @extend .gridBase;
    @include respond-to(notMobile) {
        justify-self: center;
        justify-content: center;
    }
}

.horizontalAutoGrid {
    @extend .horizontalGrid;
    @extend .layoutContainerBase;
    justify-self: center;
}

 

With the new evenwerk.com, I challenged myself to create a beautiful, modern and responsive design. Along the way, I have learned about CSS Grid, the Javascript History API and made my first WordPress website that actually uses the blog functionality.