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 Tablet Hero Variation

Project Detail Pages

Homepage Desktop Compact Nav Variation

Wireframes

App Architecture

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?