search

hackforla / website

Hack for LA's website
https://www.hackforla.org
GNU General Public License v2.0
325 stars 759 forks source link

About Us Page #614

Closed alexandrastubbs closed 3 years ago

alexandrastubbs commented 4 years ago

Overview

Create an 'About Us' page to host information on the organization, primarily built for partner/sponsor audience, but also for individuals or potential volunteers looking to learn more about what we do.

Action Items

Information Needed

Design

Development

Resources/Instructions

Dashboard page: https://hackforla.org/dashboard

ExperimentsInHonesty commented 4 years ago

Partners (past and current): Yale OpenLab, https://openlab.yale.edu/, Empower LA Digital Defense Fund Point Source Youth SPY LADOT City of Santa Monica NDICA EnCiv.org Balotopedia LA City Attorney's office LA Mayors Office LA City Department of Personnel LA County Homeless Initiative LA Metro Hope of the Valley

alexandrastubbs commented 4 years ago

Add in a projects section and include some cards (tiny) similar to Hack Nights page.

leestella748 commented 4 years ago

@ExperimentsInHonesty @alexandrastubbs

I added a projects section and added a few partner logos just to see what it would look like when populated with the actual logos.

Figma: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=2003%3A817

alexandrastubbs commented 4 years ago
leestella748 commented 4 years ago

Icons added! Let me know if this is what you meant and if there are any other changes you'd like to see

image
alexandrastubbs commented 4 years ago

We will be adding the entire want to know more about HfLA section from the current homepage to the bottom of this page. We will also be adding a CTA to the footer that drives here.

alexandrastubbs commented 4 years ago

@leestella748

Bonnie & I took a look at the Figma. Can we make the 'want to know more' section more like the section on the current website with card on card? Screenshot pasted here.

Screen Shot 2020-08-12 at 5 36 21 PM

alexandrastubbs commented 4 years ago

Some other notes -- where we currently have workforce development, we would like to replace with 'Hack for LA Pillars' and then include the following information below (possibly in an accordion format given the quantity of information):

Workforce Development: Enlightened self-interest is a powerful motivator. Our members have access to mentorship, one-on-one help with job searches, and resume coaching. We do project matching to fit skill and subject areas that they wish to develop new skills, gain confidence in newly learned skills, transition from beginner to junior, to mid-level, or expert. And often in areas they wish to add impressive credits to their resume. Impact: We choose and empower projects where there is a demonstrable impact on stakeholders, project partners, our local community and our members. Learning: an environment where every member and the org itself benefit from the shared experiences of the members. From high school students to Ph.D., from novice to expert, there is knowledge to be gained by sharing practices and working collaboratively, making mistakes and learning from them in an environment that values failing fast and learning. Diversity Equity and Inclusion: The diverse experiences of all of our members help us create a better civic tech ecosystem, by bringing their lived experience to our org. Our diversity includes race, sexual orientation, learning modalities, cognitive abilities, and socio-economic experiences. Our model of inclusion requires and inspires empathy and patience, both with others and ourselves. We are all here to learn to work together to create the change we want to see in the world, and that happens one conversation at a time. Giving: We all come together to give freely of our time, expertise and interest and empathy, in an effort to improve our local community through direct action. Agility: There will be impediments, setbacks and disappointments. We embrace change by empowering our members to meet, talk, experiment and achieve enough common consensus to move internal initiatives forward, without rigid structures and oppressive processes. This works on project teams, Communities of Practice and Organizational Stewardship. Sustainability: to create a sustainable community that provides consistent results and experience for stakeholders and a feeling of stability amongst its members. Scalability: In order to scale our impact with people and projects, we experiment, iterate and refine, measure and automate.

@ExperimentsInHonesty will follow-up with the copy for Accomplishments & Metrics.

alexandrastubbs commented 4 years ago

Last note - we need to find a place on this page to say "Hack for LA support’s LA’s Sustainable Development Goals (SDG) movement" and link to https://sdg.lamayor.org/.

We should include the logo as well: https://sdg.lamayor.org/sites/g/files/wph1131/f/styles/medium/public/LA.png?itok=NGcr9CbL

alexandrastubbs commented 4 years ago

During our stand up, we discussed the following:

@daniellen00 :

@ExperimentsInHonesty :

Needs to be assigned to developer:

daniellen00 commented 4 years ago

Progress: Page is almost ready- pending decisions on Table of Contents / HfLA Platform layouts (plus Letter from CEO)

daniellen00 commented 4 years ago

Next steps:

ExperimentsInHonesty commented 4 years ago

need mobile

alexandrastubbs commented 4 years ago

@daniellen00

Notes on mobile (we know it is still a WIP):

  1. For letter, it will be too long to show full letter on mobile, so maybe we use an accordion and just have 'letter from the editor' and then show something along the lines of 'Thank you for coming to the site. This letter is fairly long on mobile. If you'd like to read the whole thing, click here.' Upon clicking, the visitor can read the full letter. Bonnie will explain more during Sunday meeting.
  2. The page will be too long on mobile with all of the content laid out as it is on web. We should employ something similar to what we have on Hack Nights where everything is initially collapsed and you can view the sub-categories from a first glance.
alexandrastubbs commented 4 years ago

@daniellen00 do you have an update on this?

daniellen00 commented 4 years ago

@alexandrastubbs Hi Alex, I'm really sorry about the delay, thank you for checking in- it's been a little crazy catching up since returning from my camping trip- thank you for the notes above, I completely agree. I am 95% finished with the full expanded mobile page, and after that I will finish the collapsed version right next to it, which should be really simple. I should be done early tomorrow (Sat) morning (tonight I just have Rosh hoshana). I'll post an update here as soon as I finish tomorrow morning.

daniellen00 commented 4 years ago

@alexandrastubbs @ExperimentsInHonesty I am almost finished but I just wanted to get your thoughts (link) - in the collapsed version do you want every section collapsed, or should I keep sections like the quote and links always expanded (as currently shown in the Figma)?

ExperimentsInHonesty commented 4 years ago

@ExperimentsInHonesty will provide preview text for letter for mobile version

ExperimentsInHonesty commented 4 years ago
    • platform
    • sponsors
    • usability hub test for donating
alexandrastubbs commented 4 years ago

We are moving the Join Us information to a new page. I will make an issue for this.

ExperimentsInHonesty commented 4 years ago

I have signed off on design and this page can go to development

drubgrubby commented 3 years ago

@alexandrastubbs @ExperimentsInHonesty - The header text for the about us page and the getting started page is almost identical, yet not quite identical. Is that intentional? Do we want them to be more different? More the same?

I got the text for this off of the figma. (I'm just getting started, so please don't judge anything else yet ;-)

Screen Shot 2020-10-14 at 7 54 06 PM Screen Shot 2020-10-14 at 7 54 20 PM
daniellex0 commented 3 years ago

@drubgrubby Hi David, sorry I know this isn't directed at me but I got an alert about this comment- the header title seems to be the same (48px bold) but do you mean the left-aligned header paragraph and text size? Or the layout with the image to the right? If you mean those, yes this page's header layout is meant to look slightly different from the Getting Started page one so it should be fine, but thank you for double checking! if you meant something else though, let me know!

drubgrubby commented 3 years ago

@daniellex0 - Thanks for responding. I'm actually talking about the content of the text that's under the title. The About us page is, "We bring together civic-minded volunteers to build digital products...", and the Getting Started page says, "Hack for LA brings together civic-minded volunteers who build digital products...". It seems strange to me that the text on these two pages is so close, but not identical. It seems they should either be more the same or more different.

But thanks for your answers to questions that I would have gotten around to asking at some point and now I don't have to.

alexandrastubbs commented 3 years ago

@drubgrubby the text is intentional! There will ultimately be a rewrite of the getting started page later so we can make them consistent then. Thanks for flagging!

drubgrubby commented 3 years ago

Progress: Getting up and running on this. The header is done and I have a "lorem ipsum" page up with all of the sections. I'm working on the sticky navigation and making each section open and close for mobile, and hope to have at least that done this week. After that I will begin to populate the sections with the appropriate information, cursing as I go, no doubt.

Blockers: Other than the things I don't yet know and the skills I don't yet have, and the annoying need for sleep, there are no blockers.

ETA I do not yet have a reliable ETA; it lies shrouded in the mist of the future. My guess is two weeks, which probably means three.

drubgrubby commented 3 years ago

Progress The JavaScript for the sticky side nav-bar is (mostly) done. I hit some roadblocks along the way and ended up re-doing the content part of the page in grid, rather than flexbox, so it took longer than I hoped.

Next up: Doing the mobile coding so the content appears and disappears as per the figma. After that I'll fill in the content for the various section.

Blockers Still working on the coding to make time pass more slowly, or perhaps to have more hours in the day. That, and that PG&E is likely to shut off our power for two days this week.

ETA Let's say two more weeks.

drubgrubby commented 3 years ago

Progress The JavaScript programming for nav, accordion, and misc other things is done.

I have begun adding content to the various sections...well, more accurately, I've added content to one section. The beatings will continue until morale improves. (I'll keep adding content until all of the content has been added).

Blockers Overwhelming pre-election anxiety.

ETA Hopefully I'll have a PR by next week.

drubgrubby commented 3 years ago

Progress To paraphrase Kirsten Dunst in Elizabethtown, "I failed. I failed, I failed, I failed, I failed, I failed. I failed."

For a variety of reasons, both internal and external, I did not get this page completed this week. Rather than spend the coming week wearing a hair-shirt and enumerating my failings, I will instead redouble my efforts to complete this issue.

Blockers I love the design of this page and think it's going to be really beautiful. However, the fact that each section of this design has a different layout makes doing each section only slightly less work than doing a whole page that is a single design. That's not in any way a criticism - as I said, I love the design of this page - but just something to be aware of when designing pages.

ETA I am recommitting to my intention of finishing this page by next week. (Wish me luck).

drubgrubby commented 3 years ago

@alexandrastubbs @daniellex0 - I just want to confirm that this text from the figma is the correct text for "National Day of Civic Hacking" ;-) If not, where might I find actual text to use?

Screen Shot 2020-11-09 at 6 22 41 PM
ExperimentsInHonesty commented 3 years ago

@drubgrubby lol

alexandrastubbs commented 3 years ago

Definitely not the right text lol... I did not create copy for this page, @daniellen00 any thoughts here?

daniellex0 commented 3 years ago

@drubgrubby haha yikes, I think that was what the original copy said and I forgot to point it out, good catch! @ExperimentsInHonesty @alexandrastubbs Should I move it under the 2020 column and include some of these details from this year's event?

Something like: "In 9/2020 Hack for LA joined over 40 Code for America brigades in bringing together civic leaders, public servants, designers, coders, and engaged citizens to partner with local government and community groups to help those most in need of a social safety net services during COVID-19."

For context here are all the other blurbs:

Screen Shot 2020-11-10 at 10 02 31 AM
ExperimentsInHonesty commented 3 years ago

Sorry all. I created the copy. It's just a placeholder. We really should make it so this section gets its text from a markdown file so I can change it out as needed @drubgrubby @daniellen00 @alexandrastubbs

drubgrubby commented 3 years ago

@ExperimentsInHonesty - It would be great to pull the content for this section from a markdown file of some sort. I'm going to suggest that we make that a later version of the page and a separate issue.

drubgrubby commented 3 years ago

@alexandrastubbs @daniellex0 @ExperimentsInHonesty Where do the links in this point to? -> Survey results -> See app -> Learn more

Screen Shot 2020-11-11 at 5 36 16 PM
ExperimentsInHonesty commented 3 years ago

There used to be info in the figma file about where the links go. Can you check to see if it's missing now. If so I'll redocument, but would prefer not to. Sent from my phone @drubgrubby

daniellex0 commented 3 years ago

Sorry just saw this- @drubgrubby I just copied and pasted the links right next to the final figma mockup for your reference

drubgrubby commented 3 years ago

Progress The About Us page is ABD (All but done). All of the content has been added to the various sections, there is programming in place for the various things that need programming...with the exception of: 1) The little arrow on the sticky navigation isn't where it's supposed to be (hopefully the dev team can help me sort that out today). 2) The accordion javascript needs to be amended for the special circumstance of the "Letter..."

Punch list These are the things that I can think of that are currently standing between now and a Pull Request:

The code-changing magic of tidying up In the push to get this "done" I created more than a few unnecessary classes and wrote some ugly javaScript. This doesn't need to be cleaned up for the page to work, but I'm uncomfortable with the future cursing of my name that will come from the next person to work on this page if I don't do a bit of cleanup.

ETA One week plus the amount of time it takes to get the text for the Letter from the Executive Director ;-)

drubgrubby commented 3 years ago

Progress So close...

I put in a PR. There are still a couple of things to complete before code review, and merging.

https://github.com/hackforla/website/pull/811#issue-525327993

Blockers The linear nature of time.

ETA Wednesday this should be ready for code review and follow-up visual review.

ExperimentsInHonesty commented 3 years ago

@drubgrubby - confirming that you saw the comment on the PR https://github.com/hackforla/website/pull/811#issuecomment-733452961

drubgrubby commented 3 years ago

Progress: I have completed the corrections from Danielle's visual review.

I have to re-do the script for the accordion on the letter from the executive director as that section is different and I don't seem to be able to shoehorn the current code into it.

I cannot figure out how to make the about-us.js file work from the assets folder. It is currently in the _includes folder. Need some help with this.

Still need:

Questions Are the titles in the "Accomplishments" section supposed to be hyperlinks?

ETA I'll have the javascript done by Tuesday. Then waiting on things.

ExperimentsInHonesty commented 3 years ago

@drubgrubby yes the project titles on the accomplishment section should be links to the project pages

drubgrubby commented 3 years ago

@cnk - https://github.com/drubgrubby/website/tree/dar_about-us-page I'm trying to figure out how to move the _includes/about-us.js into the assets folder, but can't make it work. All of the things I've tried are at the bottom of about-us.html.

ExperimentsInHonesty commented 3 years ago

@daniellen00 to add animated gif to google drive and put the link here

drubgrubby commented 3 years ago

@ExperimentsInHonesty - I'm adding hyperlinks to the accomplishments page. For most of them I linked to the project page on hackforla.org. There were two that I wasn't sure where to point the link. This is what I did, let me know if you would like to link to anything else.

National Day of Civic Hacking: https://www.codeforamerica.org/events/national-day-of-civic-hacking-2020 Climate Collabathon: https://www.collabathon.openclimate.earth/

drubgrubby commented 3 years ago

I'm done with everything I can do (or everything I'm going to do) until I hear from reviewers and get the couple of things I'm waiting on.

Waiting on:

Thank you for your support.