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.
The Homepage
The complete homepage design incorporates repetition of the golden ratio throughout the layout
Responsive Tablet View
Tablet view of the homepage showing how the layout responds to this size viewport
Homepage Layout Detail
A detail of the homepage layout
Product Page
The product detail page provides in-page navigation to view information about that project
Project Page Design Panel
Each header of the project page revealed a relevant panel with copy and screenshots
Project Gallery
The project gallery panel features a lightbox to view larger views of the screenshots
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.