make a bit more interesting

about.html

@@ -19,7 +19,28 @@
 				<img id="aboutimg" src="/images/loveland-frog.png" alt="an artist's
 								 rendering of the Loveland frog monster" width=944 height=850
 								 />
-				<p>I'm in your walls.</p>
+				<p>I grew up in South Dakota, and early in my working career was a
+				pharmacist at my father's store. But deep in my heart, my true passion
+				was politics. Pretty soon I went back to school and earned a bachelor's
+				from the University of Minnesota, and a master's from LSU, both in
+				political science.</p>
+
+				<p>I then returned to U of M, planning to earn a doctorate and become a
+				professor, but life had other plans. I married my wife of 43 years and
+				raised four children. I ended up heavily involved in Minneapolis
+				politcs and served as mayor for four years. </p>
+
+				<p>After this, I was elected to the United States Senate. I was the
+				leader of several important initiatives, and eventually was tapped to
+				be my party's vice presidential nominee. We then cruised to victory in
+				the general election.</p>
+
+				<p>However, largely due to the public's disdain for the bloodshed in
+				Vietnam, my running mate did not seek re-election. I then launched my
+				own campaign, and was able to secure the party's nomination, but the
+				war hung around my neck like an albatross. I ended up losing the
+				election to Richard M. Nixon. Afterwards I returned to the Senate and
+				served until my death in 1978.</p>
 
 				<h2 class="cleared">Favorites.</h2>
 				<h3>Albums.</h3>

index.html

@@ -19,17 +19,32 @@
 		<main>
 			<article>
 				<h1>Hi.</h1>
-				<p>Welcome to one of the most boring websites on the internet.</p>
+				<p>For your own safety, please keep your anti-static wrist strap on
+				while browsing this site.</p>
+
+				<h2>Now what?</h2>
+				<p>There is <em>some</em> stuff to look at here. Unfortunately, it's
+				for dweebs. :(</p>
+
+				<p>Even worse, it's mostly stuff for <em>computer dweebs</em>. :((</p>
+
+				<ul>
+					<li>If you like trivia, try this <a href='mgs/mgs.html'>Metal Gear Solid trivia game I made</a>.</li>
+
+					<li>If you're a computer dweeb, take a look at <a href="https://scm.dairydemon.net">my software forge</a>.</li>
+
+					<li>If you're a computer dweeb that also likes baseball, you may find <a href='statsapi/index.html'>generated documentation for MLB's Stats API</a> useful.</li>
+
+					<li>If you're some blend of a math and computer dweeb, peruse these <a href='eulerbooks/eulerbooks.html'>Jupyter notebooks for the first 100 Project Euler problems</a>.</li>
+
+					<li>If you're a computer dweeb that likes to read about computers, you can download <a href='taoup/taoup.html'>The Art of Unix Programming, converted to an epub</a>.</li>
+
+					<li>If you're the kind of math dweeb that finds yourself asking questions like "What's the multiplicative order of 10 modulo 19?", you might like this <a href="mcalc/index.html">modular arithmetic calculator</a>.</li>
+				</ul>
+
+				<p>If you're not any of these flavors of dweeb, or you don't even know what some of these words mean, there may be hope for you yet. Go outside. Feel the sun's rays and the air's breeze. Listen to the birds sing. <a href="https://www.youtube.com/watch?v=j8v_XqFO8Bc">Escape, before it's too late.</a></p>
 
-				<p>Feel free to peruse any of the <em>six</em> (6) interesting things
-				on this site:</p>
 				<ul>
-					<li><a href="https://scm.dairydemon.net">my software forge</a></li>
-					<li><a href='mgs/mgs.html'>this Metal Gear Solid trivia game I made</a></li>
-					<li><a href='statsapi/index.html'>generated documentation for MLB's Stats API</a></li>
-					<li><a href='eulerbooks/eulerbooks.html'>Jupyter notebooks for the first 100 Project Euler problems</a></li>
-					<li><a href='taoup/taoup.html'>The Art of Unix Programming by Eric S. Raymond, converted to an epub</a></li>
-					<li><a href="mcalc/index.html">a modular arithmetic calculator</a></li>
 				</ul>
 			</article>
 		</main>

styles/about.css

@@ -4,9 +4,14 @@
 	max-width: 100%;
 	margin-right: 1rem;
 	margin-bottom: 1rem;
-	float: left;
 }
 
-.cleared {
+@media screen and (min-width: 512px) {
+	#aboutimg {
+		float: left;
+	}
+
+	.cleared {
 		clear: left;
+	}
 }