Index

joshstock.in / 5b723a1

Source for serving and static templating/compiling of https://joshstock.in.

Latest Commit

{#}TimeHashSubjectAuthor#(+)(-)GPG?
13613 Jul 2022 15:15aa33696Add s3-bsync to resty-gitweb configJosh Stockin166G

Blob @ joshstock.in / root / resources / pages / index.html

text/html13342 bytesdownload raw
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
36body {
37 display: flex;
38 flex-flow: column;
39 color: #252525;
40 font-family: "Fira Sans", sans-serif;
41 font-size: 16px;
42}
43a {
44 color: #0077a4;
45 text-decoration: none;
46}
47a:hover {
48 text-decoration: underline;
49}
50a:visited {
51 color: #a06780;
52}
53header a, header a:visited {
54 color: #252525;
55 text-decoration: none;
56}
57header a:hover {
58 text-decoration: underline;
59}
60header 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}
68header div.topbar-container {
69 width: 100%;
70 padding: 16px;
71 font-family: 'Chivo';
72}
73header 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}
82header ul.topbar li {
83 display: inline-block;
84 white-space: nowrap;
85 font-size: 24px;
86}
87header ul.topbar li.hfill {
88 flex: 1;
89}
90header ul.topbar li svg{
91 display: inline-block;
92 height: 24px;
93 vertical-align: middle;
94}
95header ul.topbar li a:hover {
96 position: relative;
97 top: 1px;
98}
99header ul.topbar li:not(:last-of-type):not(.hfill) {
100 margin-right: 12px;
101}
102header ul.topbar div.wrap-group {
103 margin-left: 12px;
104}
105
106div.content-container {
107 display: flex;
108 flex-flow: column;
109 flex: 1;
110 width: 100%;
111 padding: 0 16px;
112}
113div.content-body {
114 max-width: 1000px;
115 margin: 0 auto;
116}
117div.content-body p {
118 line-height: 1.5;
119 margin-bottom: 16px;
120 word-wrap: break;
121}
122div.content-body p:first-of-type::first-line {
123 font-size: 24px;
124 line-height: 2;
125}
126div.content-container div.vfill {
127 flex: 1;
128}
129div.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
138img.inline {
139 display: inline-block;
140}
141
142figure.float-left {
143 float: left;
144 position: relative;
145 left: -100px;
146 margin: 0 -84px 8px 0;
147}
148figure.float-right {
149 float: right;
150 position: relative;
151 right: -100px;
152 margin: 0 0 8px -84px;
153}
154figure.inline {
155 float: none;
156 width: 100%;
157 margin: 0 auto;
158}
159figure figcaption {
160 text-align: center;
161 font-size: 12px;
162 margin-top: 4px;
163 color: #656565;
164}
165img.small {
166 max-height: 320px;
167}
168img.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="https://github.com/JoshuaS3"><i data-feather="github"></i></a></li>
233 <li><a href="https://gitlab.com/JoshuaS3"><i data-feather="gitlab"></i></a></li>
234 <li><a href="https://www.linkedin.com/in/joshstockin"><i data-feather="linkedin"></i></a></li>
235 <li><a href="https://www.youtube.com/channel/UC72_Shtp0psr4sUSw_KaG5A"><i data-feather="youtube"></i></a></li>
236 <li><a href="https://twitter.com/JoshStockin"><i data-feather="twitter"></i></a></li>
237 <li><a href="mailto:josh@joshstock.in"><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 &amp; 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 &copy; 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