A small React app using CSS grid with a mobile first workflow

Hi Don, this looks really great, and pretty close to the original! You can probably try changing the line height of the main title to a lower number (maybe 1.2, 1,3?) so that that gap can be decreased a bit. Also I like what you did with the tablet view🙂

About your question, GH pages is meant for static pages or static page generators; with React, I've seen how some people manage to get it to work but usually with a lot of additional configuration, and in the end I think it's just better to use Vercel. I usually keep all my static stuff in my main FEM repo, and then for React I'd create a new repo that I can use for deployment on Vercel.

Once again, great job with your solution!

I think using grid is a better and easier approach here, but my first instinct on achieving this layout is to use positioning style attribute.

Firstly, at the desktop view, I set a max-height and max-width for the cards section and the cards themselves, and set the card container to relative position. Then, I position each cards with absolute positioning and translateX / Y, and adjust the position based on preview.

For example, to position the supervisor cards, I set its position value to absolute, follow by top: 50%, which set the top-left corner part of the card to the left centre of the container. Then, to make sure the card is positioned exactly at the centre, I use transform: translateY(-50%) to position the card itself up of its own height.

Follow by the same logic, you do the same thing to each of the cards, and you would eventually achieve the same layout.

Best, Chee Kian Teoh