[FEATURE] `generic-context` and `generic-text`

[DandyLyons]

generic-context and generic-text

In the Figma design you will see two frame named generic-context and generic-text. We will be implementing these.

If you would like to be assigned to this Issue please comment below. Please comment with any questions you have.

React Component vs. straight up TSX

NOTE: I am currently undecided on if these frames should be implemented in React as a separate React Component or just plain TSX code. I'm learning towards TSX code. Try it out and decide for yourself.
CONSIDERATIONS: Typically the point of a Component is when you want the code to be reusable in other parts of the project or when you want to encapsulate functionality so that it doesn't accidentally bleed into other parts of the codebase.

User Story:

As a potential employer,
I want to see interesting projects made by this developer
so that I can decide if I want to hire them.

Description:

In a real portfolio site, this would be the section to showcase projects that you have worked on. Here, a potential employer could click on these links and see your talent.

Acceptance Criteria:

• Maybe?: There should be a new file in the src directory.
• This section does NOT need to navigate to other pages
• Your code should follow the design as closely as possible, inclu. same fonts, layout, icon assets, colors etc.
• Buttons should have some sort of highlight effect when the mouse is hovering over it so that the user can see that it is clickable.
• For consistency, try to follow the structure of the figma design as closely as possible, unless there is a good reason to deviate:
  • e.g. If there is a sub container in Figma, consider putting a sub container in your code.
  • e.g. Try to make sure that the names of your containers and Components in React match the names in Figma.

Design Mockup/Assets:

Go to this link: generic-context and generic-text Design in Figma

Additional Information:

• Use Figma Dev Mode as a STARTING POINT. It will generate CSS code on your behalf. However, don't blindly use the code it generates. Read it yourself, understand it, and make any necessary changes.
• Please watch this video to learn more about Figma Dev Mode: https://www.youtube.com/embed/__ABPkb0aF8?si=5HWSAZS3FwvNVO95

Priority:

High

Linked Issues/PRs:

Due Date:

Try to complete this before mid-November.