Redesign Site

[thetrevorharmon]

The design of the site is fine, but could be better. A general wishlist of what the site should have:

• Dark code blocks (instead of light ones)
• Light/dark theme
• Blog on homepage (see #33)
• Image zoom on the blog (https://github.com/premieroctet/gatsby-remark-images-zoom)
• More animations
• Maybe a duotone look? (https://webdesignerwall.com/tutorials/create-spotify-colorizer-effects-css-blend-modes, https://jmperezperez.com/duotone-using-css-blend-modes/)

Sites to reference:

• https://mxb.dev/about/
• https://m.signalvnoise.com/
• https://jamischarles.com
• https://daverupert.com
• https://twitter.com/AustinTByrd/status/1114250638001467392
• https://www.taniarascia.com/promise-all-with-async-await/
• https://kevinmartinjose.com/2019/04/08/programming-doing-it-more-vs-doing-it-better/
• https://www.ryanwiemer.com/
• https://nathanbarry.com/hamilton/
• https://frankchimero.com/writing/the-webs-grain/
• https://ethanmarcotte.com/wrote/
• https://chrisbowler.com/

Fonts:

• https://fonts.google.com/specimen/BioRhyme
• https://public-sans.digital.gov
• https://fonts.google.com/specimen/DM+Sans (feels kinda like Circular)

Animation resources (and inspiration):

• https://css-tricks.com/snippets/css/keyframe-animation-syntax/
• https://github.com/TylerBarnes/gatsby-plugin-transition-link
• https://www.gatsbyjs.org/blog/2018-12-04-per-link-gatsby-page-transitions-with-transitionlink/ (related ^^)
• https://www.reddit.com/r/reactjs/comments/be7izt/what_is_best_reactjs_animation_library/
• https://laurosilva.com/newsletter
• https://www.antler.co/

[thetrevorharmon]

Found this starter: https://prist.marguerite.io

Great use of color with black & white. Also really like the sans-serif font:

https://rsms.me/inter/

Also found this great personal site by the creator of Prist^^:
https://marguerite.io

[thetrevorharmon]

Playing around with ideas for an alternate brand. There could be lots of "little squares" all over the site.

[thetrevorharmon]

Also started a Figma design to play around with this:
https://www.figma.com/file/hzsoxemOVXhpdZi5z8hMlN/TTH-v2?node-id=0%3A1

[thetrevorharmon]

Nice gradients:
https://novela.narative.co

[thetrevorharmon]

Free icons/illustrations (pretty limited):
https://shape.so

[thetrevorharmon]

Great design and animations:
https://brittanychiang.com

[thetrevorharmon]

Great font ("Big Shoulders")
https://fonts.google.com/specimen/Big+Shoulders+Display

This has a "A Book Apart" kind of feel to it. This could be a great header font for the blog.

[thetrevorharmon]

CSS Tricks has a great link-animation-to-background tutorial that even handles line breaks. tl;dr use box-shadow.

https://css-tricks.com/link-underlines-that-animate-into-block-backgrounds/

[thetrevorharmon]

When looking at colors, look at accessibility
https://stripe.com/blog/accessible-color-systems
https://usecontrast.com/guide

[thetrevorharmon]

Read through this to understand variable fonts

https://rwt.io/typography-tips/variable-fonts-what-web-authors-need-know

[thetrevorharmon]

Started into implementation (https://github.com/thetrevorharmon/portfolio/tree/redesign), need to figure out dark mode.

• using context & variable: https://medium.com/maxime-heckel/switching-off-the-lights-adding-dark-mode-to-your-react-app-with-context-and-hooks-f41da6e07269
• using context that adds .dark class to body (simple hook from NPM) https://www.gatsbyjs.org/blog/2019-01-31-using-react-context-api-with-gatsby/
• using context (more in depth, looks promising) https://www.gatsbyjs.org/blog/2019-01-31-using-react-context-api-with-gatsby/
• react context post from Kent Dodds https://kentcdodds.com/blog/how-to-use-react-context-effectively

[thetrevorharmon]

Decided to implement dark mode first since that's a big change. PR: #51

[thetrevorharmon]

Added a bunch of components with this PR: #53

[thetrevorharmon]

Grid article:
https://www.sushkelly.co.uk/work/2019/11/21/creating-more-complex-layouts-using-css-grid.html

[thetrevorharmon]

What’s left on this:

• Clean up types. I was using implicit exports/imports and had one giant type file. Need to refactor to export/import types explicitly. Also worth looking for types already out there for things like contentful data.
• Add Form, Navbar, Footer components.
• Look at graphql fragments. Might only need a single fragment for assets.
• Add better layout component that will replace bootstrap grid.
• Fully replace bootstrap margin utilities with <Spacer>.
• Migrate project, blog, and link posts to have a single Post component.
• Turn single case study into a blog post.
• Add “featured” flag to blog post type in Contentful.
• Have only one featured project. Make sure that site only lets you have one featured project (filter by featured, sort by date, unshift the first element).
• Clean up page generation logic. Has some weird logic going on.
• Finish migrating all UI-Kit elements, looking for any gaps.
• Finish all to-dos in code.

[thetrevorharmon]

Closed by #55