Kristina Brantley

I'm a recovering academic turned developer
who loves solving problems.

Used on this site

css 3

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(10rem);
    }

    80% {
        transform: translateY(-1rem);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}
CSS animation for icons

html 5

<div class="tech__item tech__web u-hidden" id="tech__web--html">
    <svg>
        <use xlink:href="img/sprite.svg#icon-html5"></use>
    </svg>
    <h4 class="heading-4 tech__name">html 5</h5>
</div>
HTML for icons

sass

&__web:hover {
    &::after {
        animation: fadeIn .6s ease-in .2s;
        animation-fill-mode: both;
    }
}
sass for other stuff

javascript

/** Animating 'Used on this page' section. */
const techWebObserver = new Observer(DOM.techWebElements);
techWebObserver.animateIn('moveInUp');
techWebObserver.createObserver();
logger(techWebObserver, 'Used on this page animations');
js for icon animation

webpack

{
"scripts": {
    "start": "webpack serve --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
    }
}
js for icon animation

Other stuff I work with

python

mysql

react

node.js

visual studio code