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

  1. {{ define "title" }}Web Design{{ end }}
  2. {{ define "content" }}
  3. <h1>Web Design</h1>
  4. Here you can find an archive of some past web designs used for my personal
  5. website, in chronological order.<p>
  6. <div class="row">
  7. <div class="col-md-4 center">
  8. <a href="/designs/lavender" target="_blank">
  9. <img src="/designs/screenshots/lavender.t.png" alt="Lavender" class="portrait">
  10. </a>
  11. </div>
  12. <div class="col-md-8">
  13. <a href="/designs/lavender" target="_blank">Cuvou.com Lavender</a><p>
  14. This was the first web design for Cuvou.com, which was the domain I was
  15. using for my personal website somewhere around the year 2006.
  16. </div>
  17. </div>
  18. <br>
  19. <div class="row">
  20. <div class="col-md-4 center">
  21. <a href="/designs/starburst" target="_blank">
  22. <img src="/designs/screenshots/starburst.t.png" alt="Starburst" class="portrait">
  23. </a>
  24. </div>
  25. <div class="col-md-8">
  26. <a href="/designs/starburst" target="_blank">Cuvou.com Starburst</a><p>
  27. This was the second redesign for Cuvou.com. It featured lighter shades
  28. of blue to improve the readability of the pages. I named it Starburst
  29. both for the visual look of the theme, and because it was the name of
  30. the Perl CMS I was programming to run Cuvou.com.
  31. </div>
  32. </div>
  33. <br>
  34. <div class="row">
  35. <div class="col-md-4 center">
  36. <a href="/designs/storm" target="_blank">
  37. <img src="/designs/screenshots/storm.t.png" alt="Storm" class="portrait">
  38. </a>
  39. </div>
  40. <div class="col-md-8">
  41. <a href="/designs/storm" target="_blank">Cuvou.com Storm</a><p>
  42. This was the third design. I didn't end up liking it very much and
  43. quickly replaced it.
  44. </div>
  45. </div>
  46. <br>
  47. <div class="row">
  48. <div class="col-md-4 center">
  49. <a href="/designs/cosmos" target="_blank">
  50. <img src="/designs/screenshots/cosmos.t.png" alt="Cosmos" class="portrait">
  51. </a>
  52. </div>
  53. <div class="col-md-8">
  54. <a href="/designs/cosmos" target="_blank">Cuvou.com Cosmos</a><p>
  55. This was the final redesign for Cuvou.com and features an outer space
  56. style theme, while still keeping the blue and pink color scheme.
  57. </div>
  58. </div>
  59. <br>
  60. <div class="row">
  61. <div class="col-md-4 center">
  62. <a href="/designs/solar" target="_blank">
  63. <img src="/designs/screenshots/solar.t.png" alt="Solar" class="portrait">
  64. </a>
  65. </div>
  66. <div class="col-md-8">
  67. <a href="/designs/solar" target="_blank">Kirsle.net Solar</a><p>
  68. This was the original "Solar" theme for Kirsle.net, which was the next
  69. logical upgrade from the Cosmos theme. This first iteration used static,
  70. flat images for every part of the design: though the design looks like
  71. it has transparent backgrounds, they were actually pre-rendered, because
  72. I wanted to support Internet Explorer 6 and it couldn't handle alpha
  73. channels in PNG images.<p>
  74. I actually lost my copy of this template and had to dig it up on
  75. <a href="http://www.archive.org/">The Internet Archive</a> and piece it
  76. back together.
  77. </div>
  78. </div>
  79. <br>
  80. <div class="row">
  81. <div class="col-md-4 center">
  82. <a href="/designs/solar-html5" target="_blank">
  83. <img src="/designs/screenshots/solar-html5.t.png" alt="Solar HTML5" class="portrait">
  84. </a>
  85. </div>
  86. <div class="col-md-8">
  87. <a href="/designs/solar-html5" target="_blank">Kirsle.net Solar (HTML5)</a><p>
  88. An HTML5/CSS3 refresh of the Kirsle.net Solar theme. I started using
  89. CSS3 for the rounded panel borders and transparent PNGs for the panel
  90. background colors, breaking compatibility with MSIE 6.0.<p>
  91. This design went live on Kirsle.net on May 12, 2010.
  92. <a href="/blog/entry/design-refresh">Relevant blog post</a>.
  93. </div>
  94. </div>
  95. <br>
  96. <div class="row">
  97. <div class="col-md-4 center">
  98. <a href="/designs/solar-bootstrap" target="_blank">
  99. <img src="/designs/screenshots/solar-bootstrap.t.png" alt="Solar Bootstrap" class="portrait">
  100. </a>
  101. </div>
  102. <div class="col-md-8">
  103. <a href="/designs/solar-bootstrap" target="_blank">Kirsle.net Solar (Bootstrap)</a><p>
  104. Another design refresh that uses Twitter Bootstrap as the layout engine,
  105. improving compatibility with mobile browsers. This design went live on
  106. October 15, 2014.
  107. </div>
  108. </div>
  109. {{ end }}