For some reason even though it's the same style class the last paragraph of text just won't align like the ones above. See picture below for reference. This is for all screen sizes

Just now made a build & encountered following issues:

1. (low priority?) npm audit "high" errors (& npm warnings, gatsy develop/lint warnings)
2. (low priority) browser console errors
3. navbar overlaps when pg scrolled up - see attached img
   

Both local and deployed version of the site has the issue of slow rendering of images. For instance,

This seems to be very bad UX - we don't want user just see images like that.

Solution (to this specific problem): Created a Render a Spinner image while waiting for the main image to load.

Global problem => This is more like a local solution only as it only helps to mask the slow rendering of the main images... You guys can also notice that even while the main images are loading (showing Spinner instead), you cannot click nor navigate to other pages at all. I believe this probably due to the fact that the SVG is quite high in term of quality so browser takes a while to render it?

If you guys want to test this out, pull the branch knguyen/slow-img-load. Anyone has any suggestion on how tackle this problem?

It seems like there was a TimelineSection.js file added 14 days ago in the root folder. Is there a reason why its here? Can we delete?

@hanlinc27 If the screen is resized, there will be huge spacing here.

This is a diagram I drew that represents the basic folder structure of our current codebase. Let me know what you think.

Link to diagram: https://www.autodraw.com/share/GE9913USMGPH
Trello link: https://trello.com/c/oYu5WzzF

It should say:
"Thank you for partnering with us...
The Accelerator Project is part of an ecosystem of programs aimed at addressing homelessness in Toronto. Our delivery partners help facilitate our programs, and provide wrap-around support to allow our clients to focus on learning tech skills and building their futures."

It currently says:
"Thank you for partnering with us...
The Accelerator Project is an entirely volunteer-run organization. All donations go directly into offering tech mentoring to young people who have faced adversity."

For this section the middle image does not get imported. It seems to be an issue with how it is made in Figma. It is different from the other two images on each card. Trying the other two images leads to the correct result so the conclusion is that it is to do with the image itself and being rendered as an SVG but not optimised as one.

The other issue is that the background blobs are being imported as white and mesh with the card background.

This issue has been closed without being resolved. Maybe easyer to resolve without the absolute positioning inside the timeline section.

@gh0stl0nely and @hanlin I removed the modifications made as per Khoi wishes. But it should be a priority as the position absolute affect the entire layout.

Observations on branch: bboutet/herotext-refactor (will become master soon) as on 11-oct-2020

• Footer doesn't have contact-us button
• Donate button hover pointer needs to be "hand" instead of arrow like for other navtab items
• Text size of navbar and footer items is visibly different (can be consistent/same)
• Footer text says "Partner" instead of "Partners" (pluralism)
• Title of pages not working I think?
• Why tech text is going out of figure
• Why tech body has double-dashes "driven by technology -- it’s"
• "We are a values-driven" - incomplete heading of blurb
• "How we are different" images have stars overlapping inside them rather than surrounding them
• the 2 skyline images are not identical
• "entrepreneurial or personal goals" - language can be "and/or"
• "We support the client in setting their own career, entrepreneurial or personal." - grammar
• "the bottom line" cheetoh lines are not symmetrically distanced
• "the bottom line" Contact us button doesnt work
• "Lorem ipsum" text still there in "see how we've grown" section
• "Donate" confetti open's up a horizontal scrollbar
• "Donate" button functionality is pending

I noticed this on Medium screen.

Footer's icons seem odds.

@all-contributors please add @rishFilet for infrastructure, code, project management

Steps to reproduce:

1. Open burgermenu
2. Click tab key to navigate through the menu items

Expected result:
Each menu item is jumped one-by-one on each tabkey press

Actual result:
Each jump requires 2 tab key clicks

Observations/Speculation:
burgerMenu sets tabindex=0 to its list items; and each list item is composed of <li><a>item</a></li> tags - so both <li> & <a> tags have their tabbing enabled
Even if we set <li>'s tabindex=-1 to disable it, burgerMenu package overwrites it everytime the menu is slid open

If anyone is refactoring this section, can you guys add a margin-top to the bottom line section to create some space on medium - small screen?

See image below, noticed it for Large Screen Size

Image quality is low on mobile and when zoomed in on web.
Consider:

• exporting as SVG vs. PNG directly from the Figma

Click on burger menu you will always see "Client"'s border being blue

The page height is not responsive too. As a result the navbar position is no more sticky. Could be fixed by removing the absolute positioning.
@gh0stl0nely please make removing the position absolute in Timeline a priority as it affects the entire page. I removed my modifications as you wished.