<!DOCTYPE html><html ng-app="app" lang="en"><head itemscope itemtype="http://schema.org/Website"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"><title>Sam Craig - Full Stack Web Developer</title><meta name="description" content="Sam Craig's personal portfolio website"><link rel="manifest" href="/manifest.json"><meta name="google-site-verification" content="K7RSdQrffsj_FuFvXPIWlIJqsRzXZSVZknDcvo--LXo"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="HandheldFriendly" content="True"><meta name="msapplication-tap-highlight" content="no"><link rel="canonical" href="https://samcraig.io"><link type="text/plain" rel="author" href="humans.txt"><meta name="theme-color" content="#4c4f65"><link rel="icon" sizes="192x192" href="https://samcraig.io/images/mobile-icon.png"><meta itemprop="name" content="Sam Craig - Full Stack Web Developer"><meta itemprop="description" content="Sam Craig's personal portfolio website"><meta itemprop="image" content="https://samcraig.io/images/twitter.png"><style type="text/css">.site-loader.dark .line {
    border-color: #e3e3e5;
}

.line {
    visibility: hidden;
    opacity: .9;
    position: fixed;
    height: 11.512vw;
    width: 0;
    border: #4c4f65 solid;
    transition: height 0.3s cubic-bezier(0, 0.5, 1, 0.5), width 0.3s cubic-bezier(0, 0.5, 1, 0.5), transform 0.8s cubic-bezier(0.5, 0, 0.5, 1);
}

.line.move-y-flat {
    height: 9vh;
    min-height: 50px;
    transition: transform 1.6s cubic-bezier(0.03, 0.88, 0.33, 0.98) !important;
}

.line.change-axis {
    height: 0;
    width: 11.512vw;
}

.line.left {
    border-width: 0 0 6px 6px;
    left: 0;
}

.line.left.move-y-flat {
    height: 9vh;
    transform: translate3d(0, calc(calc(-9vh - 100vh) + 1.5vh), 0);
    top: calc(9vh + 100vh);
}

.line.left.move-y {
    transform: translate3d(0, calc(11.512vw + 100vh), 0);
    bottom: calc(11.512vw + 100vh);
}

.line.left.move-x {
    transform: translate3d(46.5vw, calc(11.512vw + 100vh), 0) !important;
    transition: transform 0.5s cubic-bezier(0.03, 0.88, 0.33, 0.98);
}

.line.right {
    border-width: 6px 6px 0 0;
    right: 0;
}

.line.right.move-y-flat {
    transform: translate3d(0, calc(calc(9vh + 100vh) - 1.5vh), 0);
    bottom: calc(9vh + 100vh);
}

.line.right.move-y {
    transform: translate3d(0, calc(-11.512vw - 100vh), 0);
    top: calc(11.512vw + 100vh);
}

.line.right.move-x {
    transform: translate3d(-46.5vw, calc(-11.512vw - 100vh), 0) !important;
    transition: transform 0.5s cubic-bezier(0.03, 0.88, 0.33, 0.98);
}

.line.bottom {
    border-width: 0 0 6px 0;
    bottom: 0;
    transition: transform 1.6s cubic-bezier(0.03, 0.88, 0.33, 0.98) !important;
}

.line.bottom.move-y {
    width: 9vw;
    transform: translate3d(calc(-100vw + 20px), 0, 0);
    right: -9vw;
}

nav {
    display: block;
    z-index: 200;
    position: fixed;
    height: 110vw;
    width: 4.5vw;
    opacity: .9;
    transition: none;
    transform: rotate(-67deg);
    background: #4c4f65;
}

nav.transition {
    transition: transform 1.6s cubic-bezier(0.15, 0.85, 0, 1);
}

nav.nav-bottom {
    left: 125.26vw;
    bottom: -87vw;
}

nav.nav-bottom.active {
    transform: translate3d(-101.26vw, -43vw, 0px) rotate(-67deg);
}

nav.nav-top {
    right: 125.26vw;
    top: -87vw;
}

nav.nav-top.active {
    transform: translate3d(101.26vw, 43vw, 0px) rotate(-67deg);
}

nav.dark {
    background-color: #e3e3e5;
}

nav .nav-wrapper {
    position: absolute;
}

nav .nav-wrapper.top {
    bottom: 28vw;
}

nav .nav-wrapper.top .nav-icon {
    width: 3.5vw;
    height: 3.5vw;
}

nav .nav-wrapper.bot {
    top: 26vw;
}

nav .nav-wrapper.bot .nav-icon {
    width: 3vw;
    height: 3vw;
}

nav .nav-wrapper.bot .nav-icon:hover svg {
    opacity: 0;
}

nav .nav-wrapper.bot .nav-icon:hover .hover-text {
    opacity: 1;
}

nav .nav-wrapper .nav-icon {
    z-index: 900;
    transition: opacity ease-in 1s;
    display: inline-block;
    transform: rotate(67deg);
    margin-top: 2vw;
    fill: #F8F8F8;
    cursor: pointer;
    opacity: 0;
}

nav .nav-wrapper .nav-icon.active svg {
    fill: #57a3e4;
}

nav .nav-wrapper .nav-icon.dark {
    fill: #15151e;
}

nav .nav-wrapper .nav-icon.transition {
    transition: all ease-in-out .2s;
}

nav .nav-wrapper .nav-icon:hover, nav .nav-wrapper .nav-icon:focus {
    fill: #57a3e4;
    transform: rotate(67deg) scale(1.05);
}

nav .nav-wrapper .nav-icon .hover-text {
    opacity: 0;
    position: absolute;
    text-transform: uppercase;
    font: 800 1vw 'Khula', sans-serif;
    letter-spacing: 2px;
    color: #57a3e4;
    left: 50%;
    margin-top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

nav.flat {
    transform: translate3d(0, 0, 0px) rotate(0deg) !important;
    transition: none !important;
    width: 110vw !important;
    height: 9vh !important;
    min-height: 50px;
}

nav.flat.transition {
    transition: transform 1.4s cubic-bezier(0.15, 0.85, 0, 1) !important;
}

nav.flat.nav-bottom {
    bottom: 1.5vh !important;
}

nav.flat.nav-bottom.active {
    transform: translate3d(-132vw, 0, 0px) rotate(0deg) !important;
}

nav.flat.nav-bottom .nav-wrapper.bot {
    display: inline-flex;
    margin-left: 8vw;
    float: left;
}

nav.flat.nav-top {
    top: 1.5vh !important;
}

nav.flat.nav-top.active {
    transform: translate3d(132vw, 0, 0px) rotate(0deg) !important;
}

nav.flat.nav-top .nav-wrapper.top {
    display: inline-flex;
    margin-right: 8vw;
    float: right;
}

nav.flat .nav-wrapper {
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

nav.flat .nav-icon {
    width: 7vh !important;
    height: 7vh !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: auto 1vw;
    transform: scale(1) !important;
}

nav.flat .nav-icon:hover {
    transform: scale(1.05) !important;
}

/*# sourceMappingURL=headStyle.css.map */



</style><meta name="" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="Sam Craig - Full Stack Web Developer"><link rel="apple-touch-icon" href="images/mobile-icon.png"><meta property="og:url" content="https://samcraig.io"><meta property="og:type" content="website"><meta property="og:title" content="Sam Craig - Full Stack Web Developer"><meta property="og:description" content="Sam Craig's personal portfolio website"><meta property="og:image" content="https://samcraig.io/dist/images/twitter.small.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@SamCraig"><meta name="twitter:creator" content="@SamCraig"><meta name="twitter:title" content="Sam Craig - Full Stack Web Developer"><meta name="twitter:description" content="Sam Craig's personal portfolio website"><meta name="twitter:url" content="https://samcraig.io"><meta name="twitter:image" content="https://samcraig.io/dist/images/twitter.small.png"><link rel="stylesheet" href="dist/style.css"><base href="/"></head><body id="scope" ng-controller="view" itemscope itemtype="http://schema.org/Webpage"><div class="site-loader active"><span class="line left"></span><span class="line right"></span><span class="line bottom"></span></div><div class="site-wrap"><a class="night" id="light-mode" tabindex="10"><svg id="sun" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="15 15 70 70" enable-background="new 15 15 70 70" xml:space="preserve"><clippath id="sunFillClip"><path d="M0,0v100h100V0H0z M50.001,57.999c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C57.999,54.417,54.418,57.999,50.001,57.999z"></path></clippath><g><path d="M72.03,51.999h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S73.136,51.999,72.03,51.999z"></path><path d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"></path><path d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"></path><path d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"></path><path d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"></path><path d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"></path><path d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"></path><path d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"></path></g><g clip-path="url(#sunFillClip)"><circle cx="50.034" cy="50" r="11.999"></circle></g></svg><svg id="moon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="15 15 70 70" enable-background="new 15 15 70 70" xml:space="preserve"><clippath id="moonFillClip"><path d="M15,15v70h70V15H15z M50,57.999c-4.418,0-7.999-3.582-7.999-7.999c0-3.803,2.655-6.979,6.211-7.792c0.903,4.854,4.726,8.676,9.579,9.58C56.979,55.344,53.802,57.999,50,57.999z"></path></clippath><g clip-path="url(#moonFillClip)"><path d="M50,61.998c-6.627,0-11.999-5.372-11.999-11.998c0-6.627,5.372-11.999,11.999-11.999c0.755,0,1.491,0.078,2.207,0.212c-0.132,0.576-0.208,1.173-0.208,1.788c0,4.418,3.582,7.999,8,7.999c0.614,0,1.212-0.076,1.788-0.208c0.133,0.717,0.211,1.452,0.211,2.208C61.998,56.626,56.626,61.998,50,61.998z"></path></g></svg></a><nav class="nav-top n" itemscope itemtype="http://schema.org/Organization"><div class="nav-wrapper top"><a class="nav-icon twitter" title="Twitter" tabindex="6" href="https://twitter.com/SamCraigDev"><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"></path></svg></a><a class="nav-icon linkedin" title="LinkedIn" tabindex="7" href="https://www.linkedin.com/in/samcraigdev/"><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path></svg></a><a class="nav-icon github" title="Github" tabindex="8" href="https://github.com/samcraigdev"><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z"></path></svg></a><a class="nav-icon codepen" title="CodePen" tabindex="9" href="https://codepen.io/samcraig/#"><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"></path></svg></a></div></nav><nav class="nav-bottom n" itemscope itemtype="http://schema.org/SiteNavigationElement"><div class="nav-wrapper bot"><a class="nav-icon home active" ng-click="changeView('')" ng-keypress="($event.key==='Enter')?changeView(''):return" tabindex="1"><div class="hover-text">home</div><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon xmlns="http://www.w3.org/2000/svg" points="436.1 167.73 359.66 131.95 359.66 371.94 152.24 371.94 152.24 189.36 126.61 201.62 126.61 396.62 385.28 396.62 385.28 174.34 436.1 198.12"></polygon><polygon xmlns="http://www.w3.org/2000/svg" points="332.95 119.44 332.95 149.84 256 113.82 75.792 198.12 75.792 167.73 256 83.427"></polygon></svg></a><a class="nav-icon about" ng-click="changeView('about')" ng-keypress="($event.key==='Enter')?changeView('about'):return" tabindex="2"><div class="hover-text">about</div><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon xmlns="http://www.w3.org/2000/svg" points="324.84 248.07 187.16 248.07 96.275 310.84 96.275 413.7 121.13 413.7 121.13 325.57 196.28 273.07 315.72 273.07 390.87 325.57 390.87 413.7 415.72 413.7 415.72 310.84"></polygon><polygon xmlns="http://www.w3.org/2000/svg" points="293.05 74.037 319.71 147.4 302.11 203.4 237.79 203.4 245.25 227.16 322.86 227.16 348.38 145.96 321.72 74.037"></polygon><polygon xmlns="http://www.w3.org/2000/svg" points="273.04 97.797 264.41 74.037 189.28 74.037 163.62 145.96 189.14 227.16 217.42 227.16 192.29 147.4 209.99 97.797"></polygon></svg></a><a class="nav-icon skills" ng-click="changeView('skills')" ng-keypress="($event.key==='Enter')?changeView('skills'):return" tabindex="3"><div class="hover-text">skills</div><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect transform="matrix(.234 -.9722 .9722 .234 -52.79 445)" x="80.687" y="240.69" width="350.62" height="30.625"></rect><polygon points="117.31 256 200.1 173.22 178.44 151.56 74.143 255.86 74.143 256.14 178.44 360.44 200.1 338.78"></polygon><polygon points="333.56 151.56 311.9 173.22 394.69 256 311.9 338.78 333.56 360.44 437.86 256.14 437.86 255.86"></polygon></svg></a><a class="nav-icon work" ng-click="changeView('work')" ng-keypress="($event.key==='Enter')?changeView('work'):return" tabindex="4"><div class="hover-text">work</div><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m256 158.75l-46.25-47.25h-144.38v285.12h381.25v-237.88h-190.62zm165.31 213.19h-330.62v-235.38h103.74l46.25 47.25 180.63-0.063v188.19z"></path><polygon points="269.12 142.5 446.62 142.5 446.62 118.88 246 118.88"></polygon></svg></a><a class="nav-icon contact" ng-click="changeView('contact')" ng-keypress="($event.key==='Enter')?changeView('contact'):return" tabindex="5"><div class="hover-text">contact</div><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polyline points="90.688 136.56 90.688 371.94 421.31 371.94 421 236.01 446.62 223.75 446.62 396.62 65.375 396.62 65.375 111.5 446.62 111.5 446.62 184 256 272.5 127.04 212.57 127.01 181.93 256 241.88 421.31 165.25 421.31 136.56"></polyline></svg></a></div></nav><div class="ng-cloak" id="view-container" ng-view></div><div id="notification"></div><div class="container" id="background"><div class="container" id="output"></div></div></div><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.js"></script><script src="dist/build.js"></script><script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDicAF7bfpFCq_PVEO6yQpr0JevPzeL3Xs"></script></body></html>