All solutions

Hello!

This was a neat challenge, as I got to utilize React Context for the first time. I'm not sure how I would feel using it in a larger application (over, say, Redux), but it went fairly smooth. It's also the first React App I've deployed without using CRA, so there were a few growing pains.

Two general questions:

1. How does the site look? I used mobile-first, but noted that the desktop app felt weird around 900px. The layout of each card smashed together, and it felt kind of messy, hence why I set the media query to 900px.
2. SVG bundling - The longest part of this project was figuring out how to load the SVGs without manually placing them in dist/ or build/. I eventually just placed them with the components, and imported each into index.js one at a time. Is there a better way to do that?

As far as I could tell, I couldn't automate the import in JobInfo.js.

const JobInfo = ({ listing }) => {
    return (
        <div className="job__info--container">
            <img src={listing.logo} className="job__info--picture"/>
            <div className="job__info--listing-container">
                <p className="job__info--company">{listing.company}</p>
                <div className="job__info--extra-container">

listing.logo is the company logo photo, a SVG file, pulled from State from the parent component.

So I did this in index.js:

import './public/styles/main.scss';
import './components/listings/images/account.svg';
import './components/listings/images/eyecam-co.svg';
import './components/listings/images/faceit.svg';
import './components/listings/images/insure.svg';
import './components/listings/images/loop-studios.svg';
...

Is this the intended way to access assets like this? Thanks for any feedback!

I had quite a bit of trouble with the toggler on mobile view. I was able to persist the mobile layout design until ~370px, and then it just goes haywire. Should I lower the font-size, even though it doesn't seem like it is lowered in the design file? Is there something I'm missing in the design file to make the toggler design not fall apart?

Also, any general feedback would be greatly appreciated. Thank you!

Hello!

I made the accordion with JS, pretty much just adding/removing different classes. My main issue, as with my prior project, is with the background images.

I spent far more time than I'd like to admit getting the background images to look as they do in the desktop view. I'm not entirely sure how I got the background squares to where they are, and frankly I don't understand how the numbers I wound up using made it work.

This is the code that contains the square background image for the desktop view.

    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    background-image: url("images/bg-pattern-desktop.svg");
    background-position: 115% 60%;
    background-repeat: no-repeat;
    background-size: auto;
    overflow: hidden;
  }

  .svg__desktop {
    position: relative;
    left: -15%;
    max-width: 100%;
  }```

For the background-position, I thought I would need something like

```background-position: -15% 50%;
background-size: 100%;```

No documents I saw said 115% was a valid value for background position. I played with the numbers in Dev Tools and got that, but from my understanding, 115% would place the image outside the right edge of the container and 15% more outside. Instead, it went to the left? 

Any suggestions on how to improve the layout of any of the images are greatly appreciated!

Hello!

This was a bit more time consuming, mainly because I had problems with the background and SVGs. I don't feel as if I utilized them properly, as can be seen by some of the SVGs in the HTML, and some as background images. For instance, the following is how I set up the SVG for the person picture:

    background-image: url("./images/pattern-bg.svg");
    background-size: 100% 95%;
    background-position: top;
    background-repeat: no-repeat;
}```

But for the quotation marks, I just placed it in the HTML and positioned it like so:

 ``` .testimonial__quote--svg {
    position: absolute;
    bottom: 64%;
    left: 14%;
  }```

Which feels very jank to me. Any tips on how to more properly set up these SVGs?

Thank you!