MLH-Fellowship / prep-portfolio-22.JUL.PREP.3

MLH Prep Portfolio for Pod 22.JUL.PREP.3
https://prep-22-jul-prep-3-portfolio.netlify.app/
MIT License
7 stars 22 forks source link

Issue #10 Add a Map #35

Closed gibbonhug closed 1 year ago

gibbonhug commented 1 year ago

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.

pr-map (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.

netlify[bot] commented 1 year ago

Deploy Preview for prep-22-jul-prep-3-portfolio failed.

Name Link
Latest commit a18fe4b80dfae2b97c9c86840e0f6b577e6354aa
Latest deploy log https://app.netlify.com/sites/prep-22-jul-prep-3-portfolio/deploys/62d053eccad1a30008bfdde0