create the team page.

[nisarhassan12]

Fixes #2401

• Can be tested on /about/team

Todos

• Add the scrollbar to life at Gitpod.

[nisarhassan12]

The map does not look as exactly in the mockup i.e because it's an embed coming from Google data studio i.e we can't make it compatible with the dark mode or remove the widgets that are part of the embed.

[nisarhassan12]

Are the numbers of Gitpodders displayed on the map up to date, and who is responsible to update them? 😅

I got the map from Isin Pesch so I guess she is the one responsible for updating them.

[nisarhassan12]

@jacobparis Do you know what direction we could take to fix the map here embed here? Thanks

[jacobparis]

@nisarhassan12 Rather than setting heights based on the breakpoints, I set the aspect ratio so the height is automatically calculated. Experimented a bit and 64/50 seems to be the shortest height that does not trigger scrollbars. Tested on Chrome and Safari with a variety of screen widths and zoom levels

This fix has been pushed directly to your branch

[jacobparis]

I also added the open graph meta copy

[nisarhassan12]

Thanks, @jacobparis I just tested the deploy preview while it works for Chrome/Safari I still see the scrollbars across various screen sizes see the below:

https://user-images.githubusercontent.com/46004116/189643863-33e74585-d711-4eda-961f-dda84d975698.mov

[jacobparis]

I don't get that at any screen size, can you try incrementing the aspect ratio until they go away? Not sure exactly what the difference would be between my screen and yours

[nisarhassan12]

can you try incrementing the aspect ratio until they go away?

@jacobparis They go away when it is 72/72 or 50/50 on larger screen sizes and as I go to smaller screen sizes they come back again.

[chrifro]

Review cc @nisarhassan12 :

• [x] the world map takes quite long to load. Is there anything we can do to reduce the time?

• [x] enable vertical scrolling for the pictures under "life at Gitpod".

• [x] the loading for new pictures under "life at Gitpod" takes quite long and the layout changes.

• [x] mobile design: remove image so that the text has more space

• [x] mobile: adjust images for mobile (radius: 8px, spacing 8px)

idea regarding the world map: could we export an updated png of the world map and implement that instead of the embed? we don't need the interaction on hover if that's too complicated. We could set a reminder to update the image every 6 months. The purpose of the image is to underline that we are working remotely from everywhere in the world. Accurate data at all time is not needed for that.

When do you think we can get this merged @nisarhassan12 (it's open for a long time)

[nisarhassan12]

• [ ] the world map takes quite long to load. Is there anything we can do to reduce the time?

@chrifro unfortunately we can't do anything to make it load faster i.e we don't control the code that gets shipped with the embed. The only thing that we could do is that we implement it ourselves or else as you suggested use a png image.

[chrifro]

unfortunately we can't do anything to make it load faster i.e we don't control the code that gets shipped with the embed. The only thing that we could do is that we implement it ourselves or else as you suggested use a png image.

Let's go for the png version then as a skateboard 🛹

[nisarhassan12]

When do you think we can get this merged @nisarhassan12

@chrifro It is ready to go from my side. I have made the requested changes.

Not sure whether we should wait for Isin to get back from vacation for a better quality of map screenshots.

[chrifro]

Not sure whether we should wait for Isin to get back from vacation for a better quality of map screenshots.

• [x] Could you decrease the image size to be closer to the mockup? 🙏

• [x] update the cropped image as discussed in Figma

• [x] update the image order as marked in Figma

Afterwards I'd share the preview with the team to get the personal images approved. The world map image can be swapped out once Isin is back next week.

[nisarhassan12]

@chrifro I have made the requested changes.

[chrifro]

@nisarhassan12 Can you get in contact with Isin to resolve the world map issue once she is back from vacation?

I'll take care of the approval of the images

[nisarhassan12]

Yeah sure. I can do that.

[chrifro]

Could you delete this section as suggested by Philipp? [1]

[chrifro]

Outstanding to-do's:

• [x] remove this section [1]
• [x] update world map with SVG image (see Figma)

Very sorry about the multiple world map versions. Hope this one will work fine now. Thanks for your patience 🙏

Once that has been addressed we can merge the page.

@nisarhassan12 do you still have time to take care of this? 🙏