Redesign Portfolio Section of V² Home Page for Tabs

[VillageHubertChen]

• [x] HC: Specify new design
• [x] Implement new design

  Reducing Vertical Space:

Key Idea: Everything is moved into Square:

1. Square Title is moved as overlay into top of square, aligned from left 20 px, clearance from top square border of: 30 px
2. Link to GitHub and Site is moved into Overlay Text. It is always placed on bottom of overlay, no matter if overlay text is short or long. We use arrow and 2nd Highlight Color to draw attention to links. They work just as links in Tooltips in Puzzle.
3. Development Progress:
   1. Moved into Square as Overlay on absolute bottom
   2. Very minimized. Only 15 pt high
   3. We keep the segments and the names, but no more numbers
   4. We keep the Tooltips
4. On GitHub Ribbon: Same as before

   Layering

5. Square Image
6. Title, Ribbon, Progress
7. Overlay with Text & Links. Covering entire square

   Separation between V² Intro & V² Overview

   • keep position where it is
   • keep Call-to-Action-Bar "Explore" and its soft scroll behavior
   • remove sticky navigation bar
   • make tabs sticky

     Change of Overlay

     Current Overlay

On hover / tab the current overlay scrolls up from the bottom. Depending on the text it covers more or less of the square image. We already earned very positive feedback on this one. However Lukas thinks he can improve on it, see below:

New Overlay

On hover / tab the new overlay fades in. It covers the entire square (including badge and progress bar). This new design is easier on the eyes and gives more space for the now included links to GitHub and Site.

Color Code (later)

Since the Layout of each slide is identical we are using color code to signify a slide change:

1. Each Slide has its own key color
2. Key color for each slide tab is set in JSON file
3. Key color is used for: 1) Tab, 2) Slide Title, 3) Square Border
4. Colors are consistent with Puzzle

   Compacting Design to fit in one Page (later)

   Motivation

In → #35 we redesign the Portfolio sections so that each section fits into a single page of a tabbed slide show. As such we need to reduce vertical space.

Determining square height

• Key feature is to show one slide without scrolling on screens of minimum 800 px height
• Since adjusting to screen size right now is too difficult, we will design the slides so that they fit into 800 px height screens
• The biggest slide has two rows, so square height is determined by 2 rows fit into 800 px height
• Proposed dimensions:
  • square: ~ 290 px (this is the size right now on second largest instance)
  • Tab + Slide Title + Slide Sub Title: 150 px
  • Clearance between square rows: 40 px

[VillageHubertChen]

Closed for now because it is a nice to have Issue. By closing it we remove it from the Open Issue List. Anybody who like to complete this Issue is welcome. When done, remove from "Nice to Have" milestone and assign to the milestone of the sprint this Issue was finally worked on.