| 1 | <html> |
| 2 | <head> |
| 3 | $meta |
| 4 | <style> |
| 5 | @import url('https://fonts.googleapis.com/css?family=Chivo:400,900,700i&display=swap'); |
| 6 | @import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i&display=swap'); |
| 7 | *, *::before, *::after { |
| 8 | box-sizing: border-box; |
| 9 | } |
| 10 | * { |
| 11 | margin: 0; |
| 12 | } |
| 13 | html, body { |
| 14 | height: 100%; |
| 15 | } |
| 16 | body { |
| 17 | line-height: 1.5; |
| 18 | -webkit-font-smoothing: antialiased; |
| 19 | } |
| 20 | img, picture, video, canvas, svg { |
| 21 | display: block; |
| 22 | max-width: 100%; |
| 23 | } |
| 24 | input, button, textarea, select { |
| 25 | font: inherit; |
| 26 | } |
| 27 | p, h1, h2, h3, h4, h5, h6 { |
| 28 | overflow-wrap: break-word; |
| 29 | } |
| 30 | #root, #__next { |
| 31 | isolation: isolate; |
| 32 | } |
| 33 | </style> |
| 34 | <style> |
| 35 |
|
| 36 | body { |
| 37 | display: flex; |
| 38 | flex-flow: column; |
| 39 | color: #252525; |
| 40 | font-family: "Fira Sans", sans-serif; |
| 41 | font-size: 16px; |
| 42 | } |
| 43 | a { |
| 44 | color: #0077a4; |
| 45 | text-decoration: none; |
| 46 | } |
| 47 | a:hover { |
| 48 | text-decoration: underline; |
| 49 | } |
| 50 | a:visited { |
| 51 | color: #a06780; |
| 52 | } |
| 53 | header a, header a:visited { |
| 54 | color: #252525; |
| 55 | text-decoration: none; |
| 56 | } |
| 57 | header a:hover { |
| 58 | text-decoration: underline; |
| 59 | } |
| 60 | header div.banner-image { |
| 61 | width: 100%; |
| 62 | height: 200px; |
| 63 | background-color: #497fc6; |
| 64 | background-image: url(/static/images/river.jpg); |
| 65 | background-size: cover; |
| 66 | background-position: 50% 30%; |
| 67 | } |
| 68 | header div.topbar-container { |
| 69 | width: 100%; |
| 70 | padding: 16px; |
| 71 | font-family: 'Chivo'; |
| 72 | } |
| 73 | header ul.topbar { |
| 74 | display: flex; |
| 75 | flex-wrap: wrap; |
| 76 | max-width: 1000px; |
| 77 | margin: 0 auto; |
| 78 | padding: 0; |
| 79 | list-style: none; |
| 80 | border-bottom: 2px solid #ccc; |
| 81 | } |
| 82 | header ul.topbar li { |
| 83 | display: inline-block; |
| 84 | white-space: nowrap; |
| 85 | font-size: 24px; |
| 86 | } |
| 87 | header ul.topbar li.hfill { |
| 88 | flex: 1; |
| 89 | } |
| 90 | header ul.topbar li svg{ |
| 91 | display: inline-block; |
| 92 | height: 24px; |
| 93 | vertical-align: middle; |
| 94 | } |
| 95 | header ul.topbar li a:hover { |
| 96 | position: relative; |
| 97 | top: 1px; |
| 98 | } |
| 99 | header ul.topbar li:not(:last-of-type):not(.hfill) { |
| 100 | margin-right: 12px; |
| 101 | } |
| 102 | header ul.topbar div.wrap-group { |
| 103 | margin-left: 12px; |
| 104 | } |
| 105 |
|
| 106 | div.content-container { |
| 107 | display: flex; |
| 108 | flex-flow: column; |
| 109 | flex: 1; |
| 110 | width: 100%; |
| 111 | padding: 0 16px; |
| 112 | } |
| 113 | div.content-body { |
| 114 | max-width: 1000px; |
| 115 | margin: 0 auto; |
| 116 | } |
| 117 | div.content-body p { |
| 118 | line-height: 1.5; |
| 119 | margin-bottom: 16px; |
| 120 | word-wrap: break; |
| 121 | } |
| 122 | div.content-body p:first-of-type::first-line { |
| 123 | font-size: 24px; |
| 124 | line-height: 2; |
| 125 | } |
| 126 | div.content-container div.vfill { |
| 127 | flex: 1; |
| 128 | } |
| 129 | div.content-container footer { |
| 130 | max-width: 1000px; |
| 131 | width: 100%; |
| 132 | margin: 8px auto 128px auto; |
| 133 | text-align: center; |
| 134 | border-top: 2px solid #ccc; |
| 135 | padding-top: 16px; |
| 136 | } |
| 137 |
|
| 138 | img.inline { |
| 139 | display: inline-block; |
| 140 | } |
| 141 |
|
| 142 | figure.float-left { |
| 143 | float: left; |
| 144 | position: relative; |
| 145 | left: -100px; |
| 146 | margin: 0 -84px 8px 0; |
| 147 | } |
| 148 | figure.float-right { |
| 149 | float: right; |
| 150 | position: relative; |
| 151 | right: -100px; |
| 152 | margin: 0 0 8px -84px; |
| 153 | } |
| 154 | figure.inline { |
| 155 | float: none; |
| 156 | width: 100%; |
| 157 | margin: 0 auto; |
| 158 | } |
| 159 | figure figcaption { |
| 160 | text-align: center; |
| 161 | font-size: 12px; |
| 162 | margin-top: 4px; |
| 163 | color: #656565; |
| 164 | } |
| 165 | img.small { |
| 166 | max-height: 320px; |
| 167 | } |
| 168 | img.medium { |
| 169 | max-height: 480px; |
| 170 | } |
| 171 | @media only screen and (max-width: 1400px) { |
| 172 | figure.float-left { |
| 173 | position: inherit; |
| 174 | left: 0; |
| 175 | margin: 0 16px 8px 0; |
| 176 | } |
| 177 | figure.float-right { |
| 178 | position: inherit; |
| 179 | right: 0; |
| 180 | margin: 0 0 8px 16px; |
| 181 | } |
| 182 | figure { |
| 183 | max-width: 50%; |
| 184 | } |
| 185 | } |
| 186 | @media only screen and (max-width: 1000px) { |
| 187 | figure.wrap { |
| 188 | display: inline-block; |
| 189 | max-width: 100%; |
| 190 | width: 100%; |
| 191 | } |
| 192 | figure.wrap img { |
| 193 | margin: 0 auto; |
| 194 | } |
| 195 | } |
| 196 | @media only screen and (max-width: 900px) { |
| 197 | header ul.topbar div.wrap-group { |
| 198 | margin-left: 0; |
| 199 | margin-right: 16px; |
| 200 | display: inline-block; |
| 201 | } |
| 202 | header ul.topbar li.hfill { |
| 203 | flex: none; |
| 204 | } |
| 205 | header ul.topbar li:not(.title) { |
| 206 | font-size: 20px; |
| 207 | padding: 2px 0; |
| 208 | vertical-align: middle; |
| 209 | } |
| 210 | } |
| 211 | </style> |
| 212 |
|
| 213 | <script src="https://unpkg.com/feather-icons"></script> |
| 214 |
|
| 215 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 216 | </head> |
| 217 |
|
| 218 | <body> |
| 219 | <header> |
| 220 | <div class="banner-image"></div> |
| 221 | <div class="topbar-container"> |
| 222 | <ul class="topbar"> |
| 223 | <li class="title"><b><a href="/">JOSH STOCKIN</a></b></li> |
| 224 | <div class="wrap-group"> |
| 225 | <li><a href="/blog">Blog</a></li> |
| 226 | <li><a href="https://git.joshstock.in">Git</a></li> |
| 227 | <li><a href="/projects">Projects</a></li> |
| 228 | <li><a href="/resume">Resume</a></li> |
| 229 | </div> |
| 230 | <li class="hfill"></li> |
| 231 | <div class="wrap-group"> |
| 232 | <li><a href="/"><i data-feather="github"></i></a></li> |
| 233 | <li><a href="/"><i data-feather="gitlab"></i></a></li> |
| 234 | <li><a href="/"><i data-feather="linkedin"></i></a></li> |
| 235 | <li><a href="/"><i data-feather="youtube"></i></a></li> |
| 236 | <li><a href="/"><i data-feather="twitter"></i></a></li> |
| 237 | <li><a href="/"><i data-feather="at-sign"></i></a></li> |
| 238 | </div> |
| 239 | </ul> |
| 240 | </div> |
| 241 | </header> |
| 242 |
|
| 243 | <div class="content-container"> |
| 244 | <div class="content-body"> |
| 245 | <figure class="float-left"> |
| 246 | <img class="medium" src="/static/images/IMG_4956.JPG"/> |
| 247 | </figure> |
| 248 | <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 |
| 249 | <b>Systems Engineering & Design</b> student at the |
| 250 | <u>University of Illinois, Urbana-Champaign</u>, |
| 251 | specializing in Computer Science. I'm a massive nerd and |
| 252 | have spent roughly the past decade doing hobby work in |
| 253 | computer software and hardware engineering, having begun |
| 254 | with game development and 3D animation stuffs on the Roblox |
| 255 | platform sometime around 2012. When I'm not studying or |
| 256 | working, I'll be reading or doing hobby projects. Sometimes |
| 257 | I'll go by the alias 'joshuas3' online.</p> |
| 258 | <p>I have practical and applicable experience in programming |
| 259 | and design for <a |
| 260 | href="https://git.joshstock.in/auto-plow">robotics</a>, |
| 261 | embedded systems, <a |
| 262 | href="https://git.joshstock.in/lognestmonster">low-level |
| 263 | libraries</a>, <a |
| 264 | href="https://git.joshstock.in/ncurses-minesweeper">general |
| 265 | user |
| 266 | applications</a>, |
| 267 | <a |
| 268 | href="https://git.joshstock.in/s3-bsync">tool/utility |
| 269 | applications</a>, |
| 270 | <a |
| 271 | href="https://git.joshstock.in/resty-gitweb">web |
| 272 | development</a>, |
| 273 | and |
| 274 | more, |
| 275 | with |
| 276 | programming |
| 277 | languages |
| 278 | including |
| 279 | C, Python, and |
| 280 | Lua. I've taken |
| 281 | several CTE courses |
| 282 | on woodworking, |
| 283 | AutoCAD drafting, and |
| 284 | 3D printing.</p> |
| 285 | <figure class="float-right wrap"> |
| 286 | <img class="small" src="/static/images/esp32.jpg"/> |
| 287 | <figcaption>Closeup shot of the removable electronics board controlling the snow plow.</figcaption> |
| 288 | </figure> |
| 289 | <p>This website is basically supposed to provide some amount of |
| 290 | structured, public-facing, semi-professional information on |
| 291 | me. The <a href="/blog">Blog</a> page will consist of some |
| 292 | of my ramblings on whatever I write about, but mostly |
| 293 | technical project writeups. The <a |
| 294 | href="https://git.joshstock.in">Git</a> |
| 295 | subdomain contains my self-hosted Git repositories with |
| 296 | options for downloading. The <a |
| 297 | href="/projects">Projects</a> |
| 298 | page will serve as a portfolio, hosting media and roadmaps |
| 299 | and potentially sparing some technical information for the |
| 300 | Git READMEs and project writeups.</p> |
| 301 | <p>I graduated from Reed-Custer High School in May 2022. At |
| 302 | RCHS, I earned the Illinois State Scholar award and became |
| 303 | a finalist for the National Merit Scholarship. I |
| 304 | volunteered for the RCHS Recycling Club and participated in |
| 305 | the Math Team. On the April 2021 SAT, I earned a 790 in |
| 306 | math and 730 in EBRW. During high school, I took several |
| 307 | courses at Joliet Junior College part-time and for dual |
| 308 | credit. As of mid-2022, I will enter my freshman year at |
| 309 | UIUC with some 30 credit hours. I'm currently |
| 310 | working at RCHS as an Information Technology Associate, |
| 311 | following an internship during the school year. I've |
| 312 | previously worked fast food and butchery.</p> |
| 313 | <figure class="float-left"> |
| 314 | <img class="small" src="/static/images/rc-plow.jpg"/> |
| 315 | <figcaption>Snow plow parked in driveway sometime around early 2021.</figcaption> |
| 316 | </figure> |
| 317 | <p>Oh, and I'm also a survivor of <a href="/static/images/scoliosis.png">severe scoliosis</a>.</p> |
| 318 | <p>My informal capstone project has to be the remote controlled |
| 319 | snow plow I built with my father. Because of my spinal |
| 320 | disability, shoveling snow is difficult for me, so we |
| 321 | decided to build a robot to do it instead. We used an ESP32 |
| 322 | to control relays, solenoids, and motor controllers to |
| 323 | direct electric wheelchair motors and linear actuators. My |
| 324 | father designed the drive chain and did most of the |
| 325 | welding, while I did the programming and electrical work. |
| 326 | It's still a work in progress and is likely to see multiple |
| 327 | revisions in the future. Nevertheless, it works well |
| 328 | considering what we made it from. You can find the |
| 329 | (admittedly poorly written) ESP32 source code |
| 330 | <a href="https://git.joshstock.in/auto-plow">here</a>. |
| 331 | I've been meaning to rewrite it for a while.</p> |
| 332 | <p>Thanks for reading! You can best contact me via email at <a |
| 333 | href="mailto:josh@joshstock.in">josh@joshstock.in</a>. I'll |
| 334 | usually reply within a day or two.</p> |
| 335 |
|
| 336 | </div> |
| 337 | <div class="vfill"></div> |
| 338 | <footer> |
| 339 | <p>https://joshstock.in © 2022 Joshua Stockin</p> |
| 340 | <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> |
| 341 | </footer> |
| 342 | </div> |
| 343 | <script> feather.replace() </script> |
| 344 | </body> |
| 345 | </html> |
| 346 |
|
Index