• reduce padding in the x direction on mobile
• line height on <h2> is too large on mobile
• make links a different color and underline to make it clear that it's a link

@sarthaktexas

The Learn more button on the homepage should link to another page /about to explain what the project is to new visitors to the site.

Whoever gets assigned this should finish the Card Component according to the design specifications on the Figma. Make sure you put the component on the index.js page with some dummy data, so we can see it in the Preview Deployment.

Create categories/ filter labels for the project data --- to give art students a place to post their projects as well.

Convert Git tutorials to a page on the website

If you want to add dark mode to the site, please dm me on Slack or Discord, and we can make a design together, and you can code dark mode in using the dark: utility. This should be too hard, but I don't want to keep requesting changes without a design so let me know.

For when we start accepting projects that people have created to be showcased on our website, we need to come up with some clear and concise acceptance guidelines and criteria.

Create the footer component according to the design specifications on the Figma. You can put the component on the index.js page afterwards, so we can see it in the preview deployment.

Thought we had links from project cards to the individual repositories in an open PR but seeing as there are currently no PRs open and no links on the cards on open.fiveable.me, I guess we still need that!

This issue can be separated into 2 separate PRs if desired:

• Add links to project preview cards so it's easy to visit each project repo.
• Add a details view for the project cards so it's easy to see a quick synopsis of the project without diving in. Submissions in the Google form should already have this information, so minimal work needed there to flow it into the site.

For the details view, I think this could be a great opportunity to experiment with animations or CSS tricks. A couple ideas:

• A slide-out dark background on hover with white text.
• A card-flip animation on hover. There's a free tutorial preview of this in this course: Natours Project — Using Advanced CSS and Sass (Part 2) ("Building the Tours Section - Part 1/2/3"). I'm sure there's also libraries out there to make this a piece of cake.
• A pop-out modal or some kind of FLIP transformation on the card. See react-flip-toolkit (personal favorite of mine— very powerful & very easy to use, at least depending on what you're doing). Tutorial for it here.

Currently only the Contact button highlights on hover. It would be nice to make the styles on all the footer buttons the same on hover.

create the contributor component in the components directory

Add GIFs to CONTRIBUTING.md demonstrating the steps outlined in the document. This may include forking, commiting, pushing, making a pr, fetching upstream

Create an FAQ to help out those getting into open source 👀

this is the second variant of the project card component

Change perfect-next-theme to fiveable-open.

We currently hard code the data for ./data/PROJECTS.json and ./data/CONTRIBUTORS.json. In the future, post MVP stage, I'd like to dynamically fetch this data, either from the Github API or our own proxy (probably overcomplicating this).

This is finally where the backend bois rise up.

Current link previews look like this:

Similar opportunity to improve page titles:

Might as well add a <meta description="..."/> while we're at it, since Google will likely be able to pick this up :)

Purpose:

Contributing to a repo takes a lot of courage, and coming face to face with a repo full of code with no clue what it does is a very intimidating thing. It is a priority to comment out our code base so that new people who wish to contribute aren't in the dark regarding how the code works, what components do what, what each of the classes do, or why we do something a certain way.
This can also serve as an addition resource to #6.

To make it easier to navigate the project & get started contributing, there should be a link to the repo from the main site.

Do we need to update designs before this issue is ready to be picked up? Not sure what the workflows should look like with design (do we make a new label for "design needed" ?)

Instead of redirecting to third-party Google Forms, perhaps use something like Formik. It's super easy to use and you can drop some styles and bam! Easy to make form. Probably also setup an API path and some notification service (maybe emailing with nodemailer?)

Make the svg wave animation infinite by making it symmetrical

When I generally see a link I expect that it has an underline, as is the general internet semantic with links, however on the MDX rendered documents there doesn't seem to be any styles added to links except bolding because of **...**.

The reason I recognize they link somewhere (besides being curious enough to click) is because you use action words such as "this" or "here" or a URL schema-like text is present. This may be fine in this situation (to an extent) but it is generally a better idea to have underlines when styling links.

Possible fixes:

• Add underlines to links
• Maybe change the color to a different one (blue?) to provide contrast and make them stand out