Commit 254c9abc authored by David Mitchell's avatar David Mitchell 📚

Revised layout / contents

parent 7c915f0a
<!DOCTYPE html>
<html dir="ltr" lang="en">
<!--
The personal website of me, David Mitchell (@astrosticks).
A simple backup for this website can be found on GitLab:
https://gitlab.com/astrosticks/astrosticksdotcom
This HTML page is written and maintained entirely by hand,
inspired by Charles Poynton's personal website:
https://poynton.ca/
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>astrosticks</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="favicon.ico" rel="shortcut icon" />
<title>astrosticks</title>
<style media="screen" type="text/css">
body {
font-family: monospace;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
html {
/* http://paletton.com/#uid=70u0u0kllllaFw0g0qFqFg0w0aF */
--background: #FFE3AA;
--headings: #162955;
--text: black;
--borders: #061539;
--links: #0D4D4D;
--text-spacing: 1em;
--block-spacing: 2em;
--display-font: times;
--heading-font: times;
}
#page-grid {
display: grid;
grid-gap: 15px 25px;
grid-auto-flow: row;
body {
margin: 0;
padding: var(--block-spacing);
box-sizing: border-box;
width: 100%;
height: 100%;
word-wrap: break-word;
margin-top: 50px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
column-gap: var(--block-spacing);
background-color: var(--background);
font-family: var(--display-font);
}
/* DESKTOP */
#page-grid {
grid-template-columns: 200px 500px;
margin-left: 25px;
p, h1, h2, h3, h4, h5, h6 {
padding:0;
margin: 0;
}
/* MOBILE */
@media
screen and (orientation: portrait) ,
screen and (max-width: 700px) {
#page-grid {
grid-template-columns: 90%;
margin-left: 10%;
}
h1, h2, h3, h4, h5, h6 {
color: var(--headings);
font-family: var(--heading-font);
}
/* Rules for all childen of Body */
#page-grid > div {
width: 100%;
overflow-wrap: break-word;
display: flex;
flex-direction: column;
p {
font-size: 1em;
}
/* Odd-numbered children (starts at 1) */
/* Displayed on left-hand side of page */
#page-grid > div:nth-child(odd){
justify-self: end;
align-items: flex-end;
text-align: right;
a:link, a:visited {
color: var(--links);
}
/* Even-numbered children (starts at 1) */
/* Displayed on right-hand side of page */
#page-grid > div:nth-child(even){
justify-self: start;
align-items: flex-start;
text-align: left;
#handle {
text-decoration: none;
color: var(--headings);
}
#handle::after {
content: "@astrosticks";
#handle:after {
content: "@astrosticks";
}
#handle:hover:after {
content: "astrosticks.com";
content: "astrosticks.com";
}
p, hr {
border: none;
margin: 0 0 var(--text-spacing) 0;
}
#sidebar {
flex-basis: 1;
min-width: 200px;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: var(--block-spacing);
}
#main {
flex-basis: 0;
flex-grow: 1;
max-width: 500px;
}
.i {
font-style: italic;
}
@media only screen and (max-width: 600px) {
body {flex-direction: column;}
#main {max-width: initial;}
}
</style>
</head>
<body>
<div id="page-grid">
<!-- Bio / contact / social media -->
<div>
<div id="sidebar">
<h2>David Mitchell</h2>
<a href="/" id="handle"></a>
<hr>
<a href="/resume">Résumé</a>
<a href="/linkedin">LinkedIn</a>
<hr>
<h3>Contact</h3>
<a href="mailto:david@astrosticks.com">david@astrosticks.com</a>
<hr>
<a href="/mastodon">Mastodon</a>
<a href="/pixelfed">Pixelfed</a>
<hr>
<a href="/twitter">Twitter</a>
<a href="/instagram">Instagram</a>
</div>
<div id="main">
<p>I'm a dean's list junior at the University of Illinois at Urbana-Champaign's college of Engineering, working towards my B.S. in Computer Science, with a focus on Human-Computer Interaction.</p>
<p>My interests include visual arts, local history, politics, HCI, and Free/Open Source Software.</p>
<h3>Programming</h3>
<p>You can find the source code for my coding projects online. Personal projects go on <a href="/gitlab">GitLab</a> and school projects wind up on the ol' <a href="/github">GitHub</a>.</p>
<h3>Animation</h3>
<p>Some people know me by my series of <a href="https://scratch.mit.edu">Scratch</a> animations, <a class="i" href="/scratch">Astro The Stickman</a>. I made these between the ages of 11 and 13, and most of them are still available to view online.</p>
<p>My animations were featured in <a class="i" href="https://doi.org/10.1145/2141512.2141538">A Monkey and a Stick Figure: Stories of Remixing and Social Creativity</a>, a presentation by <a href="https://www.andresmh.com/">Andrés Monroy-Hernández</a> and <a href="https://www.francesyun.com/">Frances Yun</a>, for the <a href="https://web.archive.org/web/20121101092100/http://cscw2012.org/program/videos.php">2012 ACM Conference on Computer Supported Cooperative Work</a>.</p>
<p>In 2018 and 2019, I was a co-director with my friend Will Stejznberg on <a class="i" href="/scratchsaga">The Scratch Saga</a>, a reunion collaboration with over two dozen former animators on the website.</p>
<h3>
<a href="https://astrosticks.com" id="handle" style="color: black; text-decoration: none;"></a>
</h3>
<!--
<br/>
<a href="https://astrosticks.com/twitter">Twitter</a>
<a href="https://astrosticks.com/instagram">Instagram</a>
--->
</div>
<div>
<div>
I am a sophomore at the University of Illinois at Urbana-Champaign,
pursuing a B.S. in Computer Science with a focus on Human-Computer
Interaction.
</div>
</div>
<!-- Email -->
<div>
<a href="mailto:david@astrosticks.com">Email me!</a>
</div>
<div>
<div>Always free to talk.</div>
</div>
<!-- Programming -->
<div>
Programming
</div>
<div>
<div>
You can find the source code for my
<a href="https://astrosticks.com/scratchybot">twitter bot</a> and my
other coding projects online. <a href="https://astrosticks.com/gitlab">
Personal projects</a> go on GitLab and
<a href="https://astrosticks.com/github">school projects</a> wind up on
the ole GitHub.
</div>
</div>
<!-- Notes -->
<div>
Notes
</div>
<div>
<div>
I publish <a href="https://astrosticks.com/notes">notes</a> on some of
the courses I've taken at UIUC, free for anybody to use.
</div>
</div>
<!-- Scratch -->
<div>
Animation
</div>
<div>
<div>
Some people know me by my <a href="https://astrosticks.com/scratch">
series of animations</a>, called <i>Astro The Stickman</i>.
I made these between the ages of 11 and 13, and most of them are still
available to view online.
</div>
<br/>
<div>
At the
<a href="https://web.archive.org/web/20121101092100/http://cscw2012.org/program/videos.php">
2012 ACM Conference</a> on Computer-Supported Cooperative Work, my
projects were featured in
<i><a href="https://dl.acm.org/citation.cfm?id=2141538">A Monkey and a
Stick Figure: Stories of Remixing and Social Creativity</a></i>, a
<a href="https://www.youtube.com/watch?v=xmsH0BsIRHY">presentation</a>
by Andrés Monroy-Hernández and Frances Yun about remixing culture and
online media franchising.
</div>
<!--
<br/>
<div>
In 2018 and 2019, I worked with my friend Will
Sztejnberg on <a href="https://astrosticks.com/scratchsaga">The
Scratch Saga</a>, a reunion collaboration with over a dozen previous
creators on the site.
</div>
-->
</div>
<!-- -->
<div></div>
<div></div>
<!-- -->
<div></div>
<div></div>
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment