Dev: Add the `Our Locations` Information to the About Page
- Dominant language
- JavaScript
- Stars
- 363
- Forks
- 872
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 18
Description
### Overview
We need to add the `Our Locations` information from the events page to the About Us page to highlight that we were an active in person organization that moved to remote meetings.
#### Details
Since Covid 19 shutdowns are no longer active and the team is no longer doing regular in person meetups. We can modify this information and add it to the About page.
ChatGPT mockup of new About page section
### Action Items
- [ ] Identify the `Our Locations` section from the events page (resource 1.03).
- [ ] Create an html file for the `Our Locations' section in the `_includes/about-page` directory (resource 1.04). Title the file:
```
about-card-our-locations.html
```
- [ ] Copy the `our-locations-content.html` file from the `_includes/events-page` directory (resource 1.05) into the `_includes/about-page` directory (resource 1.04). Change the name of the file to `our-locations-images.html`
- [ ] Within `about-card-our-locations.html`, use the new text/layout guidance (resource 1.06) to make the new 'Our Locations' section:
- [ ] Use the other `about-card` html files in the about page directory as a guide for the card formatting
- [ ] Use the text/layout from resource 1.06 and the mockup under Details above as the content of the card
- [ ] The three location images can be included using the `our-locations-images.html` file, as seen on the Events page (resource 1.03). The include statement will need to be edited to reflect the new file name, from
```
{% include events-page/our-locations-content.html %}
```
to
```
{% include about-page/our-locations-images.html %}
```
- [ ] In `pages/about.html` (resource 1.07), use an include statement to add the `about-card-our-locations.html` you created after the `about-card-accomplishments.html` card
- [ ] In the `sticky-nav` element, add a `li` for the new card. Make sure 'Our Locations' is showing on the sticky menu and is highlighted when you scroll to the card.
- [ ] Save/commit the changes.
- [ ] Create a pull request, including screen shots of the new card on the About page.
### Instructions for Merge Team
- [ ] After the PR for this issue is merged, remove the dependency on issue #8432
- [ ] Add a screenshot of the Our Locations section in the About page to #8432
### Resources/Instructions
- 1.01 [Events page](https://www.hackforla.org/events)
- 1.02 [About Us page](https://www.hackforla.org/about)
- 1.03 [Events code](https://github.com/hackforla/website/blob/gh-pages/pages/events.html)
- 1.04 [About Us folder](https://github.com/hackforla/website/tree/gh-pages/_includes/about-page)
- 1.05 [Our Locations` images code](https://github.com/hackforla/website/blob/gh-pages/_includes/events-page/our-locations-content.html)
- 1.06 New text and layout:
```
From In-Person Events to Remote Collaboration
In 2013, Hack for LA began as an in-person civic tech community, hosting events across Los Angeles—including the Westside, Downtown LA, and South LA—bringing volunteers together in shared spaces.
During the COVID-19 pandemic, the organization transitioned to a fully remote operating model, expanding access and enabling broader participation beyond geographic boundaries.
Former in-person event locations across Los Angeles
[ WESTSIDE ] [ DOWNTOWN LA ] [ SOUTH LA ]
(image card) (image card) (image card)
Today, Hack for LA continues to serve Los Angeles as a remote-first organization, supporting a distributed network of contributors.
```
- 1.07 [About page code](https://github.com/hackforla/website/blob/gh-pages/pages/about.html)
Contributor guide
Assessment
This issue has not been assessed yet.