ProductDesigns.github.io

Landing page for productdesigns.net

🚀 Getting Started

This is a static website built with Eleventy (11ty) and Vite.

Installation

npm install

Development

Start the development server with live reload:

npm run start

The site will be available at http://localhost:8080

Build

Build the site for production:

npm run build

The built site will be in the _site/ directory.

Project Structure

productdesigns.github.io/
├── src/
│   ├── _data/           # Data files (designs.json)
│   ├── _includes/       # Layout templates
│   ├── assets/
│   │   ├── scss/         # Stylesheets
│   │   └── js/          # JavaScript modules
│   └── index.njk        # Main page template
├── .eleventy.js         # Eleventy configuration
├── vite.config.js       # Vite configuration
└── package.json

---

🎮 Gamified Design Showcase Examples

Three interactive examples applying open-world video game principles to design portfolio websites.

Examples

1. Visual Breadcrumb Trail (example1-breadcrumb-trail.html) - Visual landmarks & peeking
2. Discovery & Progress System (example2-discovery-progress.html) - Achievements & collection
3. Fog of War Reveal (example3-fog-reveal.html) - Territory discovery

Game Design Principles Applied

1. Visual Breadcrumb Trail

Open-World Principle: Visual Landmarks & Peeking

Just like how games show distant mountains or towers that pull players forward, this design uses "peeking" cards that partially reveal the next design in the sequence.

Key Features:

• Cards scale down and shift to show what's coming next
• Pulsing navigation hint creates urgency to explore
• Progress dots at bottom provide spatial awareness
• Smooth scroll-snapping creates satisfying transitions

2. Discovery & Progress System

Open-World Principle: Achievements & Collection

Inspired by collectibles in games like Zelda or Assassin's Creed, this system rewards thorough exploration with progress tracking, achievements, and category collections.

Key Features:

• Real-time XP and level-up system
• Achievement popups for milestones
• Category badge collection
• Visual progress bar with shimmer effect
• Checkmarks on viewed designs

3. Fog of War Reveal

Open-World Principle: Territory Discovery

Borrowed from strategy games and exploration titles, designs start hidden under a "fog" that clears when clicked, revealing the content beneath.

Key Features:

• Mysterious fog overlay with animated drift
• Ripple and sparkle effects on reveal
• Counter tracking revealed regions
• Completion celebration when all areas explored

How to Use

Open any HTML file directly in your browser - no build step required. Each example is self-contained.

Core Principles

What makes open-world games compelling and how they apply to design showcases:

• Visual Pull → Breadcrumb trail showing next designs
• Progress Tracking → XP bars, counters, completion percentages
• Rewards → Achievements, unlocked badges, celebrations
• Multiple Goals → View all designs, collect all categories
• Mystery → Fog of war hiding content
• Spatial Awareness → Progress indicators, navigation hints
• Satisfying Feedback → Animations, sparkles, ripples, notifications