CobraCatalog: High-Volume, Template-Driven Web Catalog

Fri Oct 08 2021

The final project for COMP 2680, this extensive web catalog was designed to interweave the high-quality lore of Cobramode 3D miniatures directly with their visual models, utilizing templating to manage over 120 pages.

Written by: DarthPackman

Cobramode logo.

Class Project

Web Design

HTML

CSS

JavaScript

Templating

Catalog System

CobraCatalog was developed alongside co-creator Matthew Noel for the COMP 2680 (Web Site Design & Development) course to create a comprehensive, navigable hub for Cobramode miniatures. The core motivation was to bridge a gap found across other platforms: intertwining the high-quality 3D model visuals with their underlying narrative lore from the CobraCompendium. Because of a Merchant License held for these models, the project required an efficient, large-scale architecture scaling to approximately 146 distinct HTML pages.

Core Technical & Design Elements

  1. Large-Scale Content Templating: Successfully developed a system using HTML templates (for months and individual items) to efficiently generate and manage the extensive project scope of around 120 item pages and 20 month pages. This process ensured structural consistency across all 146 documents.
  2. Interactive Elements with JavaScript: Implemented custom JavaScript logic to drive a rotating highlight/slideshow gallery on the homepage alongside a dynamic countdown timer counting down the time left to grab active monthly releases.
  3. Responsive Web Design: Structured the site layout utilizing 6 CSS Stylesheets (including main.css, reset.css, all.css, and specialized component styles) combined with responsive design principles and flexbox layouts to ensure proper scaling across desktop displays and mobile viewports.
  4. Narrative Integration: Designed dedicated dual-format item pages featuring large turnaround renders paired side-by-side with detailed narrative lore text boxes, or alternative grid layouts for collectible modular components like custom bases.

Final Result

The final CobraCatalog successfully demonstrated advanced proficiency in managing large-scale web structures, template-driven generation, and custom styling to merge practical, artistic, and narrative values into a seamless user experience.

You can view the project repository here. And the site itself here.