Add bottled water viz

[hcorson-dosch-usgs]

NOTE: do not merge or rebuild prod until 11/21/23

Changes made:

• Add portfolio card for bottled water site:

• Feature the bottled water site in the 'Recent' section:

Testing:

Pull changes locally and run npm run serve

Before making this pull request, I:

• [X] Cleaned the code the way Vue likes it - run 'npm run lint --fix'
• [ ] Made sure all tests run
• [ ] Ran WAVE plugin 508 compliance tool

I can confirm this has been checked on:

• [X] Chrome
• [ ] Safari
• [X] Edge
• [X] Firefox
• [ ] Samsung Internet
• [ ] Internet Explorer 11 (not supported, but still needs at least a working user redirect page)

[cnell-usgs]

This ran for me, but I think the image under recent could be improved:

We're just seeing two duplicates when we land. That will always be the case when adding a new interactive site with the way the layout is. I can see a few solutions:

1. Make "Recent" and image carousel that auto rotates so it is more variable
2. Use a different image for the "recent" photo. I think this could also be improved by having less text, and there's a big gap between the "recent" image and the other sites that seems to need a different aspect ratio

[hcorson-dosch-usgs]

2. Use a different image for the "recent" photo. I think this could also be improved by having less text, and there's a big gap between the "recent" image and the other sites that seems to need a different aspect ratio

Good point - I've swapped the banner image for a gif.

Static view:

[cnell-usgs]

What about omitting the toggle too? It could be confusing to have the image of it but it's not active

[hcorson-dosch-usgs]

What about omitting the toggle too? It could be confusing to have the image of it but it's not active