Inspired by Brad Frost—who I guess was inspired by me?—I’ve taken a pass at a new Project Hub.
Here are a few details on what I thought needed improvement:
- Seeing the future. Good Project Hubs document the past in a way that makes it easy for a client—or you—to keep track of the process. However, I’ve started to pre-populate the entire process for my clients so that they know not only what’s happened but also what’s coming up.
- Focusing on a moment in time. Though this Project Hub lets you see an entire project timeline, it’s still really valuable to know where you currently are in the process. By default, each milestone is labeled with a class name of
entry-future, which keeps the upcoming milestone grayed out. Once you’ve completed a milestone, remove this class name; that will darken the text and place a checkmark next to it. Lastly, add a class ofentry-latestto the latest milestone to auto-scroll the page. (You can also change this class name on line 18 of the JavaScript file.)
You can see the finished result here: projecthub.superfriendly.work
You can deploy this using Netlify with the button below:
Pull request or fork at your leisure. Happy Project Hubbing!
This Project Hub is set up as a Jekyll static site coupled with a Netlify CMS for easy administration. It also includes an integration with Arcade.
To get started, make sure you have Ruby and Jekyll installed in your local environment. Then clone this repository to your local environment and run:
npm installThe project comes with a few handy scripts you can use when compiling the project:
npm run arcadenpm run stylesThe site will be served at http://127.0.0.1:4001/
npm run serveThe site will be served at http://127.0.0.1:4001/
npm run watchThis command cleans up the styles and is also used by Netlify whenever the site is (re)-deployed.
npm run build