Skip to content

Latest commit

 

History

History
116 lines (78 loc) · 3.42 KB

README.md

File metadata and controls

116 lines (78 loc) · 3.42 KB

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