SerpentVenom

This is the third and final design of my former website, SerpentVenom. SerpentVenom featured my art and design portfolios as well as my blog and some articles I had written. I retired the site when I realized I had not updated the blog in over a year.

The Design

The design is built upon a layout that conforms to the golden ratio. The homepage in particular implies golden ratio spiral starting at the logo when viewed on a desktop or laptop. Project pages featured a unique UI to control what aspect of the project was featured such as Design, Development and a project gallery that displayed images using my custom lightbox script.

Color is boldly used to distinguish one category of content from another; blue for web projects, green for art projects and yellow for blog posts and articles. The color palette is drawn first from the blue of the logo. Shades and tints were created by adjusting the HSB values in PhotoShop. Green and yellow hues were selected using similar saturation and blackness values as the main blue color.

Click on each screenshot to enlarge them.

Homepage design screenshot
Homepage design screenshot

The Homepage

The complete homepage design incorporates repetition of the golden ratio throughout the layout

Responsive tablet view of the SerpentVenom site
Responsive tablet view of the SerpentVenom site

Responsive Tablet View

Tablet view of the homepage showing how the layout responds to this size viewport

Homepage layout detail of the SerpentVenom site
Homepage layout detail of the SerpentVenom site

Homepage Layout Detail

A detail of the homepage layout

Project page design
Project page design

Product Page

The product detail page provides in-page navigation to view information about that project

Detail of the design panel of the project page
Detail of the design panel of the project page

Project Page Design Panel

Each header of the project page revealed a relevant panel with copy and screenshots

Detail of the project gallery panel
Detail of the project gallery panel

Project Gallery

The project gallery panel features a lightbox to view larger views of the screenshots

Project gallery lightbox
Project gallery lightbox

Project gallery lightbox

The lightbox allows the user to view all of the project gallery images sequentially

Technical Details

WordPress Theme

SerpentVenom was powered by WordPress using a custom theme that I developed from the ground up. Some of the custom development work included modifications and additions to the functions.php file, and custom loops on the homepage.

The Markup Structure

The markup was standards-compliant HTML5. The HTML generated by the theme was semantic and succinct to bolster SEO and rendering performance.

CSS

Hand-coded CSS provided the layouts, visual treatments like gradients, and transitions such as those used in the lightbox. This was the first project that I used flex to create layouts and that ultimately maded converting the site to a responsive design much simpler thanks to being able to alter the order of flex items via media queries.

JavaScript

Vanilla JavaScript was developed to run the Project Viewer on the project pages. This was essentially a tab interface that revealed the content panel associated with the selected tab.

The Lightbox was also written in vanilla JavaScript. This script collected all of the anchor tags with a specific class name. Each anchor's HREF attribute was the location of the larger version of the thumnail image that the anchor contained. The ALT attribute of each thumbnail provided the caption of each image in the Lightbox itself. The navigation of the images in the lightbox was sequential and continuous, going back to the start if you reached the last image while going forward or backward.