This pull request addresses Issue #10 and adds an SVG map with 'pins' on countries where our fellows live. Clicking a pin brings up the cards of fellows who live in that country. This feature is important because it adds some interactivity to our static site and shows the diversity of our Pod.
I was still waiting for the finished Google Form data so I couldn't add everybody. There might be some issues because some people entered both their first and last names and I tested it with only first names, but I can easily refactor. I ended up hardcoding some things instead of using Liquid because I don't know how the final data will be structured.
I put the JS file in the 'assets' folder because I saw that's a common practice for Jekyll projects.
(I changed the names in the placeholder data temporarily while testing this out to show what it will look like when implemented.)
I used an SVG for the map so it would not be pixelated. However SVGs cannot use :after pseudo-elements, which meant I could not easily add a tooltip on hover.
I wanted to display an imported tooltip SVG on hover, but that got pretty complicated and time consuming and I wanted to go ahead and roll out this feature.
[x] My Pod Leader knows I'm working on this Pull Request
[x] I've explained what the Pull Request is adding.
This pull request addresses Issue #10 and adds an SVG map with 'pins' on countries where our fellows live. Clicking a pin brings up the cards of fellows who live in that country. This feature is important because it adds some interactivity to our static site and shows the diversity of our Pod.
I was still waiting for the finished Google Form data so I couldn't add everybody. There might be some issues because some people entered both their first and last names and I tested it with only first names, but I can easily refactor. I ended up hardcoding some things instead of using Liquid because I don't know how the final data will be structured.
I put the JS file in the 'assets' folder because I saw that's a common practice for Jekyll projects.
I used an SVG for the map so it would not be pixelated. However SVGs cannot use :after pseudo-elements, which meant I could not easily add a tooltip on hover. I wanted to display an imported tooltip SVG on hover, but that got pretty complicated and time consuming and I wanted to go ahead and roll out this feature.