Vertically Align navigation on the center left

Question

I'm trying to do a navigation title on the right of the screen and add an animation to it. The top title worked perfectly but trying to rotate the title messes up the javascript.

The animation is: 1st

and transforms into

What I'm having trouble is placing the next title vertically in the middle on the left of the page like this

So far I'm at this stage and stuck:

Here's my code with the javascript:

<div class="navbarProjects">
            <div class="container">
                <h1 class="spread">Projects</h1>
            </div>
        </div>

        <div class="navbarAbout">
            <h1 class="spread">About</h1> 
        </div>
        <script>
            var spread = document.getElementsByClassName('spread');
                [].forEach.call(spread, function(el) {
                  // replace the content width divs
                  el.innerHTML = '<span>' + el.innerText.split('').join('</span><span>') + '</span>'
                  // custom :hover
                  el.onmouseenter = function(e) {
                    var childern = e.target.childNodes
                    var width = e.target.offsetWidth / childern.length 
                    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = width + 'px'
                  }
                  // remove custom style again
                  el.onmouseleave = function(e) {
                    var childern = e.target.childNodes
                    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = '0'
                  }
                })
        </script>
.navbarProjects {
    text-align: center;
    top: 2%;
    font-size: 32px;  
}

.navbarAbout {
    font-size: 32px;
    padding-top: 0;
    transform: rotate(90deg);
}



.spread  {
    text-align:center;

}

.spread span {
    display: inline-block;
    transition: all .5s ease;
    text-align:center;
    min-width: 0;
}

Answer 1

so, i've come up with a solution that will only work if your font-size remains constant (if it's variable you'll need to use javascript/jquery for this particular solution to work) but if you set the margin for the about element to calc(100% - yourWidth); you'll be able to get it to work. i've made a jsfiddle:

EDIT: updated jsfiddle

https://jsfiddle.net/w7zfajea/4/

Answer 2

Here is the CSS I came up with to attempt to solve your issue:

I used classes found here: http://spotlifefilms.com/

See: https://jsfiddle.net/p8eqxpce/3/

.navbarFounder, .navbarServices, .navbarProjects, .navbarAbout {
    position: fixed;
    padding: 0px;
    margin: 0px;
    height: 70px;
}

.navbarFounder, .navbarServices {
    width: 100vh;
    top: 50%;
}
.navbarProjects, .navbarAbout {
    width: 100vw;
    right: 50%;
}

.navbarFounder {
    left: 0px;
    transform:
        rotate(270deg)
        translate(35px, calc(-50vh + 35px));
}
.navbarServices {
    right: 0px;
    transform:
        rotate(90deg)
        translate(-35px, calc(-50vh + 35px));
}
.navbarProjects {
    bottom: 0px;
    transform:
        rotate(180deg)
        translateX(-50vw);
}
.navbarAbout {
    right: 50%;
    transform:
        rotate(0deg)
        translateX(50vw);
}