Skip to content

Latest commit

 

History

History
127 lines (87 loc) · 3.44 KB

README.md

File metadata and controls

127 lines (87 loc) · 3.44 KB

JonnyPickard.github.io

Please note this is no longer being maintained & links may be broken.

This is the codebase used for my old GITHUB.IO site.

Portfolio Website

The website can be viewed here.
The component library can be viewed here.

The production code (html + bundle) and the codebase are in different repositories:

The production code can be viewed here.
The codebase can be viewed here.

Designs

Homepage Desktop + Mobile

Homepage Desktop & Mobile

Homepage Tablet Hero Variation

Homepage Desktop & Mobile

Project Detail Pages

Project Detail Page

Homepage Desktop Compact Nav Variation

Homepage Desktop Compact Nav Variation

Wireframes

Main View

Example project detail view

App Architecture

Main View

The idea behind this app's architecture is high modularity. The components, key themes/ stylesheets, assets, content and all the shared utility functions are exported as node modules under the @jonnypickardjs scope. As each individual component uses its own specific versioned dependencies you can safely publish changes and updates at will without breaking any existing work.

To make it manageable to develop in this fashion without having to publish/ pull every new change across all of the various locations I am using yarn workspaces.

When the project releases Alpha stage of development I will start using Lerna to version and publish the components to the @jonnypickardjs NPM scope.

Roadmap

Required Components - *MVP

Component Library

Core
  • - Card (o)
  • - Image (a)
  • - ProfilePhoto (m)
  • - HeroSection (o)
  • - NavBar (o)
  • - Icon Caption (o)
  • - Heading (a)
        types:
           [h1 - h6]
  • - Text (a)
        types:
           Body
           HeaderDescription
  • - Divider (a)
  • - Icon (a)

atom - (a)
molecule - (m)
organism - (o)

See Atomic Design by Brad Frost for more information.

HOC
  • - WithLink

Application Level

  • - Templates

    • - MainView
    • - DetailView
  • - Pages

    • - Main
    • - ProjectDetail

Currently Working On

  • Project Detail page

Future Ideas

  • Animations?
  • Sticky HOC
  • Toggle buttons for interesting effects
  • Custom Animations section
  • D3?