{% extends "layout.html" %}
{% block title %}Error Message Generator{% 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 %}