Pod Landing Page using React with Emotion

What are you most proud of, and what would you do differently next time?

In this project, I tried the CSS in JS library, Emotion.

It is very intuitive for me to be able to write css in React components. And with the help of the facepaint library, the syntax to handle RWD styling becomes so elegant.

import facepaint from 'facepaint';
const breakpoints = [450, 768];
const mq = facepaint(breakpoints.map((bp) => `@media (min-width: ${bp}px)`));


    mq({
      position: 'absolute',
      margin: ['0px', '0px 40px', '40px 0px'],
      padding: ['24px', '0px', '0px'],
      left: ['0px', '0px', '165px']
   })
  }

What specific areas of your project would you like help with?

I've always struggled with handling images and I have very few experience with making landing pages. Here are some questions I'd like to ask.

1. What's the best practice to handle background image positioning for this kind of landing page? I use `` tag and position the image element with absolute positioning. But I'm not sure how people usually tackle this in real-life projects.

2. When resizing, what is the best practice to position the main content in this scenario?

3. How to ensure I detected the device correctly on first load? I'm still getting familiar with React. This time I use the useEffect hook, but sometimes the detected device is incorrect.

Any other comments would be appreciated. Thank you. :)