Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign Site #35

Closed
thetrevorharmon opened this issue Jul 23, 2019 · 16 comments
Closed

Redesign Site #35

thetrevorharmon opened this issue Jul 23, 2019 · 16 comments
Labels
Projects

Comments

@thetrevorharmon
Copy link
Owner

@thetrevorharmon thetrevorharmon commented Jul 23, 2019

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

Sites to reference:

Fonts:

Animation resources (and inspiration):

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Aug 6, 2019

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

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Aug 6, 2019

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

Screen Shot 2019-08-05 at 3 22 51 PM

Screen Shot 2019-08-05 at 3 22 43 PM

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Aug 6, 2019

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

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Aug 6, 2019

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

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Aug 7, 2019

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

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Oct 3, 2019

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

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Oct 14, 2019

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

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Oct 14, 2019

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

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Oct 22, 2019

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Oct 29, 2019

Read through this to understand variable fonts

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

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Nov 4, 2019

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Nov 12, 2019

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

@thetrevorharmon thetrevorharmon added this to Backlog in Redesign Nov 13, 2019
@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Nov 22, 2019

Added a bunch of components with this PR: #53

@thetrevorharmon

This comment has been minimized.

@thetrevorharmon

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Nov 22, 2019

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

This comment has been minimized.

Copy link
Owner Author

@thetrevorharmon thetrevorharmon commented Jan 9, 2020

Closed by #55

@thetrevorharmon thetrevorharmon moved this from To Do to Done in Redesign Jan 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Redesign
  
Done
1 participant
You can’t perform that action at this time.