The web design and pages for my personal website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

129 lines
4.0 KiB

{% 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 %}