Add about page

themes/lite/templates/article.html

@@ -19,9 +19,12 @@
 		{% for tag in article.tags %}
 		<meta name="tags" content="{{tag}}" />
 		{% endfor %}
+
 		{% endblock %}
 
 		{% block style %}
+
+
 		<style>
 			a.external {
 				background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23fff' stroke='%23000' d='M1.5 4.518h5.982V10.5H1.5z'/%3E%3Cpath fill='%23000' d='M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z'/%3E%3Cpath fill='%23fff' d='m9.995 2.004.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z'/%3E%3C/svg%3E%0A");
@@ -35,6 +38,7 @@
 			}
 			.content {
 				max-width: 600px;
+				line-height: 1.4;
 			}
 			.toclink {
 				color: black;
@@ -56,11 +60,15 @@
 			.toc {
 				display: none;
 			}
-			img {
+			img:not(.floated) {
 				width: 600px;
 				max-width: 100%;
 				height: auto;
 			}
+			.floated {
+				float: left;
+				margin-right: 1rem;
+			}
 		</style>
 	</head>
 	{% endblock %}

themes/theme/templates/about.html

@@ -0,0 +1,93 @@
+{% extends "base.html" %}
+
+{% block head %}
+	{{ super() }}
+
+	<meta name="description" content="The personal website of Tanner Collin." />
+	<meta name="summary" content="The personal website of Tanner Collin." />
+{% endblock %}
+
+{% block info %}
+	<picture>
+		<source type="image/webp" srcset="/theme/me.webp">
+		<source type="image/jpeg" srcset="/theme/me.jpg">
+		<img src="/theme/me.jpg" width="128" height="164" class="me" alt="me smiling wide and looking into the camera lit up brightly">
+	</picture>
+
+	<div class="info">
+		<h1>Tanner Collin</h1>
+		<p class="contact-icons">
+			<a href="mailto:site4@tannercollin.com" rel="noreferrer noopener"><img alt="email" src="/theme/mail.svg" width="20" height="20" /></a>
+			<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram" src="/theme/telegram.svg" width="20" height="20" /></a>
+			<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github" src="/theme/github.svg" width="20" height="20" /></a>
+		</p>
+	</div>
+{% endblock %}
+
+{% block content %}
+	<div class="content index">
+		<p>
+			Hi, I'm Tanner! I like home automation, <a href="/sensors">sensors</a>, privacy, bots, Python, Debian, coffee, and makerspaces.
+		</p>
+
+		<h2>Contact Info</h2>
+
+		<p>
+			Email: <a href="mailto:site4@tannercollin.com">site4@tannercollin.com</a> <br />
+			Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a>
+		</p>
+
+		<h2>Resume</h2>
+
+		<ul>
+			<li>Firmware Engineer at <a class="external" href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018–</li>
+			<li>Lead Hardware Engineer at <a class="external" href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 2016–2018</li>
+			<li>Electrical Engineer at <a class="external" href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 2016–2016</li>
+			<li>Electrical Engineer Intern at <a class="external" href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 2014–2015</li>
+			<li>BSc. Electrical Engineering from University of Calgary</li>
+		</ul>
+
+		<h2>Projects</h2>
+
+		<p>
+			My main hobby is working on software projects. I typically design websites or
+			build tools that make my life easier.
+		</p>
+
+		{% for article in articles_page.object_list if article.category.name == 'Projects' %}
+			<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
+			<div class="summary">
+				{{ article.summary }}
+			</div>
+		{% endfor %}
+
+		<h3>
+			<a class="external" href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
+		</h3>
+		<div class="summary">
+			<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
+		</div>
+
+		<h2>Creations</h2>
+
+		<p>Sometimes I create art or interactive tech.</p>
+
+		{% for article in articles_page.object_list if article.category.name == 'Creations' %}
+			<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
+			<div class="summary">
+				{{ article.summary }}
+			</div>
+		{% endfor %}
+
+		<h2>Writing</h2>
+
+		<p>Various articles, mostly about computers.</p>
+
+		{% for article in articles_page.object_list if article.category.name == 'Writing' %}
+			<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
+			<div class="summary">
+				{{ article.summary }}
+			</div>
+		{% endfor %}
+	</div>
+{% endblock %}

themes/theme/templates/style.css

@@ -99,12 +99,17 @@
 				font: 1.1rem/1.5 serif;
 			}
 
-			.content img {
+			.content img:not(.floated) {
 				width: 100%;
 				max-width: 36rem;
 				height: auto;
 			}
 
+			.content .floated {
+				float: left;
+				margin-right: 1rem;
+			}
+
 			.content .aside {
 				display: inline;
 				float: left;