rickyjian/inception

inception's Issues

test

footer

Footer

active line chart

template

template

• banner
  1. image (optional)
• navigation
  1. title (<5)
  2. search (option)
• content
  1. about
  2. news
  3. skills

content

Content

when click navigation item, it will fade in correspond content and fade out last content.

Web

• grid (left description, right picture)
  effect:
  * hover - change cursor, and show read more text
• tag (below content, > 2 , < 8 )
  effect:
  * hover - light color
• card (top picture, below description)
  effect:
  * hover - top picture, change to line chart show recently topic

Mobile

• grid (top picture, middle description, bottom tag , < 3 )
• card (top picture, below description)

---

Optional Component

• parse javascript graph
• parse markdown

theme

Theme

font

color

8 main color (4 light, 4 dark), every main color has two relative colors, one is light another is dark.

reference:

• Light Fawn to White Color Palette
• Design for the Dark Theme

button

shape: rounded, rectangle
color: fill up, transparency

content

topic

content-grid

header: with top left
description: left/right
image: left/right
tag: shape: rounded, color: fill up, transparency

content-card

3 cards
4 cards

navigation

Navigation

Web

• icon
  effect:
  * click - reload page
  * hover - show root url

• item ( > 2 , < 5 )
  effect:
  * hover - show underscore
  * active - fixed underscore

Mobile

when click navigation icon, it will show full screen view which contains icon, and nav items.

• icon
• item ( > 2 , < 5 )

---

Optional Component

search bar

remove unused css/js library

TODO

• bootstrap
• webfonts

banner

Banner

Web

• tile
• short bio
• icon ( < 5 )
• button
  effect: hover - show down arrow

Mobile

• title
• description
• down arrow
  effect: animation down arrow