Main Course 1: Graphic Production Apprehension

Process:

The website has taken me a long time to finish, so there are some of the goals, such as simple, I've decided isn't so important. I've gotten new ideas and learned a lot more, since I fired up the project.
More than half of the time I spent creating the site, I wasn't sure of how to tackle responsive typography. That's also why it's taken more time to set up, than if I had known from the start.

Colors:

I've chosen the blue color as my key color. I've played around with colors in the <header> of frontpage, portfolio, CV and contact. It creates a spark and really helps make it seem less dull.

R:53 G:170 B:255

Grayscale

3D title:

I've given both Portfolio, CV and Contact a modern look. Portfolio is inspired by the distorted 3D effect, and CV and Contact is basically the same, but with different color schemes.


html:

<header class="underside portfolio">
    <h1>Portfolio</h1>
    <h1>Portfolio</h1>
</header>

<div class="wrapper-bg portfolio">
    ...
</div>

css:

div.wrapper-bg.portfolio {
    background: linear-gradient(to bottom, rgb(0,0,0), rgb(53, 170, 255));
}

header.underside {
    width: 100%;
    height: 50vh;
    background-color: #000;
    margin: 0;
    padding: 0 10%;
}

header.underside h1 {
    line-height: 0;
    padding-top: 25vh;
    color: rgb(0,255,255);
    mix-blend-mode: difference;
}

header.underside h1:nth-child(2) {
    position: relative;
    left: 6px;
    top: 3px;
    color: rgb(255,0,0);
    padding: 0;
}

It's the same technique I use in Photoshop. First I eliminate the green and blue channel from one layer, and then the red from the other layer. When the two layers are slightly shifted from each other, there's white where they overlap, and their own colors where they don't. No blend mode is necessary for it to work in Photoshop.

Portfolio layout:

I was inspired by Tumblr to make a layout where each of my works have their own height. I built it using lists. To put it briefly, I made two unordered lists (<ul>) standing side by side, each containing two lists (<li>), which makes up for the four rows. I'm then able to put my work inside the <li> tags, whilst manually making sure they each contain an even amount of <div>'s. I like how it makes it look playful when they're not aligned. To keep a good worflow, I made two snippets that I can copy/paste, if I need to add any new products.


Structure of layout:

<ul class="clearfix portfolio">
    <ul class="modalbox">
        <li class="col6 portfolio">
            <div class="modalbox">
                ...
            </div>
            <div class="modalbox">
                ...
            </div>
        </li>
    </ul>
    <ul class="modalbox">
        <li class="col6 portfolio">
            <div class="modalbox">
                ...
            </div>
            <div class="modalbox">
                ...
            </div>
        </li>
    </ul>
</ul>

<!--COPY/PASTE EMPTY THUMBS/MODALS

<div class="modalbox">
    <a class="modalthumb" href="#TYPE...">
        <div id="da" class="modaltext"><h2>TYPE...</h2></div>
        <div id="en" class="modaltext"><h2>TYPE...</h2></div>
        <img src="img/portfolio/thumb/TYPE....jpg">
    </a>
</div>

<div id="TYPE..." class="overlay">
    <div class="popup clearfix">
        <a class="close" href="#">×</a>
        <h2>TYPE...</h2>
        <address id="da">TYPE...</address>
        <address id="en">TYPE...</address>
        <address class="createdin">TYPE...</address>
        <div class="content clearfix">
            <p id="da">
                TYPE...
            </p>
            <p id="en">
                TYPE...
            </p>
            <figure class="productTYPE...">
                <img src="img/portfolio/TYPE...">
            </figure>
        </div>
    </div>
</div>
-->

Bonus:

At release of my website, I ran into a problem; my mediaquery was a no-show in the browser. After googling around for a bit I found the missing piece to the puzzle. The cause to all is that modern smartphones have a larger resolution than what I had written in the mediaquery. E.g. 1080 × 1920 px, 401 dpi.


<head>
    ...
    <meta name="viewport" content="height=device-height, initial-scale=1.0">
    ...
</head>

Main Course 1

Graphics & Image Processing

Typography