All solutions

Am I allowed to use this as my portfolio?

FAQ-Accordion component built with React. Hi guys, with this project I was really trying to focus on accessibility and testing. I have one bug I can't figure out. When I run the project on my local machine the background-image works fine, however after deployment it doesn't. It's my first time deploying a react application to github pages, so I'm not sure if its something to do with deployment. I would love some feedback on the following areas:

• My implement of semantic HTML. I tried to make the component accessible, screen reader and keyboard navigation friendly.
• The test suites. Were they rigorous enough? I'd appreciate any feedback honestly.

This was my first Advanced challenge and first time trying to use styled components. It took me two days implement from start to finish. I would love some feedback on my project, specifically on the implementation of the styled-component library and css in general. A few things I think I need clarification on.

1. Is it best practice to have styled components defined in the file they are used, or defined in their own file and imported into the file they are used.
2. What are the actual benefits if you define them in seperate files? Isn't it similar to normal css in this case, only instead of have dynamic classes, you are passing props? But it seems so messy?
3. I tried to use css variables as much as I could. For the colors, font-size, border-radius etc. In this project their are 12 or 13 different font-sizes used across screen sizes and different elements. They don't scale relatively based on screen size (from what i could tell), so you are still left defining font-sizes on every element for every screen size, the only difference being its a variable now. It seems only marginally better than just straight up using the measurement from the figma file. What type of system should I be using in these scenarios? Hope you enjoy my project :)