pdhoopr / website Goto Github PK

I think it goes without saying that CSS will be used to make the site pretty, and tools that extend CSS are very helpful sometimes. PostCSS is one of those tools, and fits the project mentality of pluggability and adding only what is needed. This might include:

• PostCSS (via postcss-cli)
• cssnext
• postcss-import
• Good initial global styles (variables, box-sizing: border-box, etc.)
• npm scripts (building, watching, cleaning)
• Compiling all app CSS to one file and linking to it from the HTML

Some tool configs need to be updated:

• .eslintrc -> .eslintrc.js
• .stylelintrc -> .stylelintrc.js
• Add .postcssrc.js
• Add browserslist

You gotta start somewhere, right? The initial folder structure and utilities for the project need to be laid down, including:

• Initial folder structure
• Basic config files (.gitignore, .editorconfig, etc.)

All the npm scripts needed to make this project work can quickly get out of hand with things like building, watching, cleaning, linting, serving, etc. Some helpful tools for staying organized might include (amongst others yet to be discovered):

• npm-run-all

The "Projects" section of the home page can be presented in a more modern, simplistic way that makes it easier to browse through them and get where you want to go (such as by highlighting the most important calls to action).

v1.0.0 got some updates that now need to be incorporated into v2.0.0:

• Repo name (pdhoopr/patrick-hooper -> pdhoopr/website)
• Domain name (patrickhooper.me)
• Description
• deploy npm script for Netlify (runs lint && build)

It's time to leave the UMich-esque colors behind in favor of something a little more modern and simple. 1 main color alongside a strong accent should look nice, like so:

• Primary color: blue (#00CACA)
• Secondary color: grey (#333)

It's probably time to switch to a new domain name — hoopr.io as a base just isn't cutting it anymore. Once it's changed, it will needed to be changed wherever it's referenced (sites, profiles, resume, etc.).

No need for this anymore - it's just text.

A lot of good work went into the WGIki site, so the screenshots really should be cleaned up so they can be put back up on the site. That involves:

• Remove WGI branding
• Remove any real data (people, names, project info, etc.)

Image names are a bit long and unwieldy right now. A better convention for naming and organizing them would be great.

• Add Twitter
• Add DEV Community

Add a CHANGELOG.md file with details for all previous releases as well as any future ones. Also add these details to the releases page.

New fonts for both the headings and the body would be 💯 . Some good options are:

• Headings: Space Mono or Poppins
• Body: Titillium Web, PT Sans, or Catamaran

• Lighten main gray/blue color in theme to #303E4D and update it in the following places:
  • CSS variables (which may then require changing opacity of about section background pattern)
  • Favicon
  • Resume
• Add font smoothing
• Change buttons to be flat (no bottom border), have a box shadow on hover (not change background color), and maybe be slightly taller/wider

This site uses a lot of images, so at very least they need to get copied over to the destination folder. However, it'd also be cool if they could go through optimization and minification before ending up there, so getting all this set up might include:

• npm scripts (building, watching, minifying)
• Linking to images from the HTML

Some consistency and basic error checking in JavaScript coding style is great, and ESLint is awesome at that. Getting it set up will likely include:

• npm script for linting ESLint
• eslint-config-airbnb and peers (eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react)
• .eslintrc file for overriding any rules from the Airbnb config

Jekyll had a great sitemap plugin, but Jekyll's going away. A Metalsmith plugin for automatically generating a sitemap would be 💯 .

The contact section should be updated slightly as follows:

• Use SVG symbols instead of icon fonts
• Put section in the header instead of the footer

tl;dr: implement the changes from the redesign.

The existing bio is too long! A shorter one is needed and should be replaced on the following sites:

• Airbnb
• GitHub
• Instagram
• LinkedIn
• Twitter
• Website

JavaScript will probably be used for creating some interactions on the site, so it needs to be included. The implementation details are still a little up in the air, but getting it going will possibly include:

• Babel
• npm scripts (building, watching, cleaning)
• Compiling all app JavaScript to one file and linking to it from the HTML

Some consistency and basic error checking in CSS coding style is great, and Stylelint is awesome at that. Getting it set up will likely include:

• npm script for linting CSS
• stylelint-config-standard
• .stylelintrc file for overriding any rules from the standard config

A couple of repos were really a collaborative effort and should be placed in the Hoopr organization to reflect that, then have references to them updated. These repos are:

• wgi-buzz
• jahleh-and-patrick
• ms-omearas-multiage

Roll up all WGI projects into one project item. Link to WGI Informer and WGIki from within WGI.buzz somehow.

No need for it - it's just text.

The existing colors and fonts are changing with the rebrand, so the favicon should be updated, too.

The "About" section on the home page should be simplified as follows:

• Ditch the big hero intro and blend it into this section (photo, taglines)
• Shorten/reword text

tl;dr: implement the changes from the redesign.

Use Gatsby for static site generation instead of homemade React solution.

Use the same layout, style, and content.

Use the system font stack for most body text. See if there's a better monospace font to replace the headings or if Space Mono is the best.

Also update fonts on the résumé to match whatever selections are made for the website.

It's okay to self-close these.

• wgi-buzz to wgi.buzz
• patrick-hooper to website

A lot of good work went into the WGI Informer site, so the screenshots really should be cleaned up so they can be put back up on the site. That involves:

• Remove WGI branding
• Remove any real data (people, names, project info, etc.)

The following aspects of the global navigation should be updated:

• More simplistic name/home page link
• Contact section

tl;dr: implement the changes from the redesign.

Just use npm for managing dependencies (instead of Yarn).

A live reloading (hot reloading for bonus points) web server is super helpful in development. webpack-dev-server will fit in with React and webpack easily.

The resume should be updated as follows:

• Use a good, standard font (like Helvetica)
• Remove icons
• Link to the updated version on the website

Although many CSS vendors probably won't be used, there might be 1 or 2, like Normalize.css.

The site's content will be written primarily in HTML (obviously), so the build system needs to account for this. React + JSX will be a good fit.

The static files produced from the site build need to live somewhere, and that place is Netlify. Getting hosting set up will likely include:

• Turning on Netlify for this repo
• Adding a custom domain
• Adding SSL and forcing to it

It would be cool to have a working example of the WGI.buzz app. This shouldn't be hard to do:

• Remove WGI branding
• Replace real data with fake data
• Relaunch the site, potentially using the same code on Google App Engine, but maybe as a static site