<html>
    <head>
$meta
        <style>
            @import url('https://fonts.googleapis.com/css?family=Chivo:400,900,700i&display=swap');
            @import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i&display=swap');
            *, *::before, *::after {
                box-sizing: border-box;
            }
            * {
                margin: 0;
            }
            html, body {
                height: 100%;
            }
            body {
                line-height: 1.5;
                -webkit-font-smoothing: antialiased;
            }
            img, picture, video, canvas, svg {
                display: block;
                max-width: 100%;
            }
            input, button, textarea, select {
                font: inherit;
            }
            p, h1, h2, h3, h4, h5, h6 {
                overflow-wrap: break-word;
            }
            #root, #__next {
                isolation: isolate;
            }
        </style>
<style>

body {
    display: flex;
    flex-flow: column;
    color: #252525;
    font-family: "Fira Sans", sans-serif;
    font-size: 16px;
}
a {
    color: #0077a4;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:visited {
    color: #a06780;
}
header a, header a:visited {
    color: #252525;
    text-decoration: none;
}
header a:hover {
    text-decoration: underline;
}
header div.banner-image {
    width: 100%;
    height: 200px;
    background-color: #497fc6;
    background-image: url(/static/images/river.jpg);
    background-size: cover;
    background-position: 50% 30%;
}
header div.topbar-container {
    width: 100%;
    padding: 16px;
    font-family: 'Chivo';
}
header ul.topbar {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid #ccc;
}
header ul.topbar li {
    display: inline-block;
    white-space: nowrap;
    font-size: 24px;
}
header ul.topbar li.hfill {
    flex: 1;
}
header ul.topbar li svg{
    display: inline-block;
    height: 24px;
    vertical-align: middle;
}
header ul.topbar li a:hover {
    position: relative;
    top: 1px;
}
header ul.topbar li:not(:last-of-type):not(.hfill) {
    margin-right: 12px;
}
header ul.topbar div.wrap-group {
    margin-left: 12px;
}

div.content-container {
    display: flex;
    flex-flow: column;
    flex: 1;
    width: 100%;
    padding: 0 16px;
}
div.content-body {
    max-width: 1000px;
    margin: 0 auto;
}
div.content-body p {
    line-height: 1.5;
    margin-bottom: 16px;
    word-wrap: break;
}
div.content-body p:first-of-type::first-line {
    font-size: 24px;
    line-height: 2;
}
div.content-container div.vfill {
    flex: 1;
}
div.content-container footer {
    max-width: 1000px;
    width: 100%;
    margin: 8px auto 128px auto;
    text-align: center;
    border-top: 2px solid #ccc;
    padding-top: 16px;
}

img.inline {
    display: inline-block;
}

figure.float-left {
    float: left;
    position: relative;
    left: -100px;
    margin: 0 -84px 8px 0;
}
figure.float-right {
    float: right;
    position: relative;
    right: -100px;
    margin: 0 0 8px -84px;
}
figure.inline {
    float: none;
    width: 100%;
    margin: 0 auto;
}
figure figcaption {
    text-align: center;
    font-size: 12px;
    margin-top: 4px;
    color: #656565;
}
img.small {
    max-height: 320px;
}
img.medium {
    max-height: 480px;
}
@media only screen and (max-width: 1400px) {
    figure.float-left {
        position: inherit;
        left: 0;
        margin: 0 16px 8px 0;
    }
    figure.float-right {
        position: inherit;
        right: 0;
        margin: 0 0 8px 16px;
    }
    figure {
        max-width: 50%;
    }
}
@media only screen and (max-width: 1000px) {
    figure.wrap {
        display: inline-block;
        max-width: 100%;
        width: 100%;
    }
    figure.wrap img {
        margin: 0 auto;
    }
}
@media only screen and (max-width: 900px) {
    header ul.topbar div.wrap-group {
        margin-left: 0;
        margin-right: 16px;
        display: inline-block;
    }
    header ul.topbar li.hfill {
        flex: none;
    }
    header ul.topbar li:not(.title) {
        font-size: 20px;
        padding: 2px 0;
        vertical-align: middle;
    }
}
</style>

<script src="https://unpkg.com/feather-icons"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        <header>
            <div class="banner-image"></div>
            <div class="topbar-container">
                <ul class="topbar">
                    <li class="title"><b><a href="/">JOSH STOCKIN</a></b></li>
                    <div class="wrap-group">
                        <li><a href="/blog">Blog</a></li>
                        <li><a href="https://git.joshstock.in">Git</a></li>
                        <li><a href="/projects">Projects</a></li>
                        <li><a href="/resume">Resume</a></li>
                    </div>
                    <li class="hfill"></li>
                    <div class="wrap-group">
                        <li><a href="https://github.com/JoshuaS3"><i data-feather="github"></i></a></li>
                        <li><a href="https://gitlab.com/JoshuaS3"><i data-feather="gitlab"></i></a></li>
                        <li><a href="https://www.linkedin.com/in/joshstockin"><i data-feather="linkedin"></i></a></li>
                        <li><a href="https://www.youtube.com/channel/UC72_Shtp0psr4sUSw_KaG5A"><i data-feather="youtube"></i></a></li>
                        <li><a href="https://twitter.com/JoshStockin"><i data-feather="twitter"></i></a></li>
                        <li><a href="mailto:josh@joshstock.in"><i data-feather="at-sign"></i></a></li>
                    </div>
                </ul>
            </div>
        </header>

        <div class="content-container">
            <div class="content-body">
                <figure class="float-left">
                    <img class="medium" src="/static/images/IMG_4956.JPG"/>
                </figure>
                <p><b><img class="inline" src="/static/svg/wave.svg" style="height: 1.5em"/> Hello!</b> I'm <i>Josh Stockin</i>, an 18-year-old
                    <b>Systems Engineering &amp; Design</b> student at the
                    <u>University of Illinois, Urbana-Champaign</u>,
                    specializing in Computer Science. I'm a massive nerd and
                    have spent roughly the past decade doing hobby work in
                    computer software and hardware engineering, having begun
                    with game development and 3D animation stuffs on the Roblox
                    platform sometime around 2012. When I'm not studying or
                working, I'll be reading or doing hobby projects. Sometimes
                I'll go by the alias 'joshuas3' online.</p>
                <p>I have practical and applicable experience in programming
                    and design for <a
                                       href="https://git.joshstock.in/auto-plow">robotics</a>,
                                   embedded systems, <a
                                                         href="https://git.joshstock.in/lognestmonster">low-level
                                                         libraries</a>, <a
                                                                            href="https://git.joshstock.in/ncurses-minesweeper">general
                                                                            user
                                                                            applications</a>,
                                                                            <a
                                                                                href="https://git.joshstock.in/s3-bsync">tool/utility
                                                                                applications</a>,
                                                                                <a
                                                                                    href="https://git.joshstock.in/resty-gitweb">web
                                                                                    development</a>,
                                                                            and
                                                                            more,
                                                                        with
                                                                        programming
                                                                    languages
                                                                    including
                                                                C, Python, and
                                                                Lua. I've taken
                                                            several CTE courses
                                                            on woodworking,
                                                        AutoCAD drafting, and
                                                        3D printing.</p>
                <figure class="float-right wrap">
                    <img class="small" src="/static/images/esp32.jpg"/>
                    <figcaption>Closeup shot of the removable electronics board controlling the snow plow.</figcaption>
                </figure>
                <p>This website is basically supposed to provide some amount of
                    structured, public-facing, semi-professional information on
                    me. The <a href="/blog">Blog</a> page will consist of some
                    of my ramblings on whatever I write about, but mostly
                    technical project writeups. The <a
                                                        href="https://git.joshstock.in">Git</a>
                    subdomain contains my self-hosted Git repositories with
                    options for downloading. The <a
                                                     href="/projects">Projects</a>
                    page will serve as a portfolio, hosting media and roadmaps
                    and potentially sparing some technical information for the
                Git READMEs and project writeups.</p>
                <p>I graduated from Reed-Custer High School in May 2022. At
                    RCHS, I earned the Illinois State Scholar award and became
                    a finalist for the National Merit Scholarship. I
                    volunteered for the RCHS Recycling Club and participated in
                    the Math Team. On the April 2021 SAT, I earned a 790 in
                    math and 730 in EBRW. During high school, I took several
                    courses at Joliet Junior College part-time and for dual
                    credit. As of mid-2022, I will enter my freshman year at
                    UIUC with some 30 credit hours. I'm currently
                    working at RCHS as an Information Technology Associate,
                following an internship during the school year.  I've
                previously worked fast food and butchery.</p>
                <figure class="float-left">
                    <img class="small" src="/static/images/rc-plow.jpg"/>
                    <figcaption>Snow plow parked in driveway sometime around early 2021.</figcaption>
                </figure>
                <p>Oh, and I'm also a survivor of <a href="/static/images/scoliosis.png">severe scoliosis</a>.</p>
                <p>My informal capstone project has to be the remote controlled
                    snow plow I built with my father. Because of my spinal
                    disability, shoveling snow is difficult for me, so we
                    decided to build a robot to do it instead. We used an ESP32
                    to control relays, solenoids, and motor controllers to
                    direct electric wheelchair motors and linear actuators. My
                    father designed the drive chain and did most of the
                    welding, while I did the programming and electrical work.
                    It's still a work in progress and is likely to see multiple
                    revisions in the future. Nevertheless, it works well
                    considering what we made it from. You can find the
                    (admittedly poorly written) ESP32 source code
                    <a href="https://git.joshstock.in/auto-plow">here</a>.
                I've been meaning to rewrite it for a while.</p>
                <p>Thanks for reading! You can best contact me via email at <a
                    href="mailto:josh@joshstock.in">josh@joshstock.in</a>. I'll
                usually reply within a day or two.</p>

            </div>
            <div class="vfill"></div>
            <footer>
                <p>https://joshstock.in &copy; 2022 Joshua Stockin</p>
                <p><a href="mailto:josh@joshstock.in">josh@joshstock.in</a> / <a href="mailto:stockin2@illinois.edu">stockin2@illinois.edu</a> / <code>joshuas3#<i>9641</i></code></p>
            </footer>
        </div>
        <script> feather.replace() </script>
    </body>
</html>