mirror of
https://github.com/kirsle/kirsle.net
synced 2024-12-22 23:19:28 +00:00
130 lines
4.0 KiB
HTML
130 lines
4.0 KiB
HTML
{% 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 %}
|