{% extends "layout.html" %}
{% block title %}Web Design{% endblock %}
{% block content %}

<h1>Web Design</h1>

Here you can find an archive of some past web designs used for my personal
website, in chronological order.<p>

<div class="row">
	<div class="col-md-4 center">
		<a href="/designs/lavender" target="_blank">
			<img src="/designs/screenshots/lavender.t.png" alt="Lavender" class="portrait">
		</a>
	</div>
	<div class="col-md-8">
		<a href="/designs/lavender" target="_blank">Cuvou.com Lavender</a><p>

		This was the first web design for Cuvou.com, which was the domain I was
		using for my personal website somewhere around the year 2006.
	</div>
</div>
<br>

<div class="row">
	<div class="col-md-4 center">
		<a href="/designs/starburst" target="_blank">
			<img src="/designs/screenshots/starburst.t.png" alt="Starburst" class="portrait">
		</a>
	</div>
	<div class="col-md-8">
		<a href="/designs/starburst" target="_blank">Cuvou.com Starburst</a><p>

		This was the second redesign for Cuvou.com. It featured lighter shades
		of blue to improve the readability of the pages. I named it Starburst
		both for the visual look of the theme, and because it was the name of
		the Perl CMS I was programming to run Cuvou.com.
	</div>
</div>
<br>

<div class="row">
	<div class="col-md-4 center">
		<a href="/designs/storm" target="_blank">
			<img src="/designs/screenshots/storm.t.png" alt="Storm" class="portrait">
		</a>
	</div>
	<div class="col-md-8">
		<a href="/designs/storm" target="_blank">Cuvou.com Storm</a><p>

		This was the third design. I didn't end up liking it very much and
		quickly replaced it.
	</div>
</div>
<br>

<div class="row">
	<div class="col-md-4 center">
		<a href="/designs/cosmos" target="_blank">
			<img src="/designs/screenshots/cosmos.t.png" alt="Cosmos" class="portrait">
		</a>
	</div>
	<div class="col-md-8">
		<a href="/designs/cosmos" target="_blank">Cuvou.com Cosmos</a><p>

		This was the final redesign for Cuvou.com and features an outer space
		style theme, while still keeping the blue and pink color scheme.
	</div>
</div>
<br>

<div class="row">
	<div class="col-md-4 center">
		<a href="/designs/solar" target="_blank">
			<img src="/designs/screenshots/solar.t.png" alt="Solar" class="portrait">
		</a>
	</div>
	<div class="col-md-8">
		<a href="/designs/solar" target="_blank">Kirsle.net Solar</a><p>

		This was the original "Solar" theme for Kirsle.net, which was the next
		logical upgrade from the Cosmos theme. This first iteration used static,
		flat images for every part of the design: though the design looks like
		it has transparent backgrounds, they were actually pre-rendered, because
		I wanted to support Internet Explorer 6 and it couldn't handle alpha
		channels in PNG images.<p>

		I actually lost my copy of this template and had to dig it up on
		<a href="http://www.archive.org/">The Internet Archive</a> and piece it
		back together.
	</div>
</div>
<br>

<div class="row">
	<div class="col-md-4 center">
		<a href="/designs/solar-html5" target="_blank">
			<img src="/designs/screenshots/solar-html5.t.png" alt="Solar HTML5" class="portrait">
		</a>
	</div>
	<div class="col-md-8">
		<a href="/designs/solar-html5" target="_blank">Kirsle.net Solar (HTML5)</a><p>

		An HTML5/CSS3 refresh of the Kirsle.net Solar theme. I started using
		CSS3 for the rounded panel borders and transparent PNGs for the panel
		background colors, breaking compatibility with MSIE 6.0.<p>

		This design went live on Kirsle.net on May 12, 2010.
		<a href="/blog/entry/design-refresh">Relevant blog post</a>.
	</div>
</div>
<br>

<div class="row">
	<div class="col-md-4 center">
		<a href="/designs/solar-bootstrap" target="_blank">
			<img src="/designs/screenshots/solar-bootstrap.t.png" alt="Solar Bootstrap" class="portrait">
		</a>
	</div>
	<div class="col-md-8">
		<a href="/designs/solar-bootstrap" target="_blank">Kirsle.net Solar (Bootstrap)</a><p>

		Another design refresh that uses Twitter Bootstrap as the layout engine,
		improving compatibility with mobile browsers. This design went live on
		October 15, 2014.
	</div>
</div>

{% endblock %}