codeforpdx / codepdx_website Goto Github PK

Figma link for component:

Volunteer section on homepage

Feature Description:

Create Volunteer section of homepage containing:

• Header text
• Div/Box/Container holding
  1. Text
  2. Icons
  3. Volunteer Button

Screenshots:

Feature Description:

Create a Footer for the site including:

• Logo
• Organization Name
• Social media links
  • GitHub
  • Meetup
  • LinkedIn
  • Discord
• Links
  • About
  • Code of Conduct
  • Contact Us
  • Copyright CODE PDX

Screenshots:

Additional Context:

Link to Navbar in Figma

Describe the Current Behavior/Feature:

Create projects page hero as in Figma (but with white text and the dark gradient overlay that the home page hero uses). It will take me longer to figure out how to change it in Figma so follow styling from home page hero.

Proposed Implementation:

Feature Description:

Create Navbar for site complete with

• Logo
• Org Name
• Links to other pages
  1. Projects
  2. Volunteers
• Toggle for light/dark mode

Screenshots:

Additional Context:

Link to Navbar in Figma

Describe the Current Behavior/Feature:

Footer currently does not actual destinations in legalLinks section.

Proposed Implementation:

• Add proper destination to each link
• Code of conduct can be found here

Important: Code of conduct needs to be updated with CODE PDX-specific language

Describe the Current Behavior/Feature:

Provide a clear and concise description of the current behavior or feature.

Proposed Implementation:

Provide a detailed low level description of how you propose the enhancement should be implemented.

Figma link for component:

Our Partners mini-section of Partners section

I split this into #35 for call to action, and #37 for primary and this one will stay for secondary to make a total of 3 issues -Jared

Feature Description:

Create Partners section of homepage containing 2 mini-sections:

• Our Partners
  • TAO MUST BE ON TOP & DIFFERENT LAYOUT to be a "feature" of sorts
  • Each partner will contain boxs/divs/containers with logos and text

Screenshots:

This section may require multiple components to be built

See in folder structure src > components > home > partners

• Partners.jsx is the entire section which consists of:
  • PrimaryPartner.jsx primary parter in issue #37
  • SecondaryPartner.jsx x2
  • CallToAction.jsx. call to action in issue #35

Describe the Current Behavior/Feature:

• for technologies listed, make the technologies buttons or pills

Mobile:

• reduce padding-top of card
• scale icons or make mobile icons
• center mobile text
• gradient sweep longer

Proposed Implementation:

Provide a detailed low level description of how you propose the enhancement should be implemented.

Describe the Current Behavior/Feature:

create volunteer page hero using styling from home page hero (white text and dark overlay)

Proposed Implementation:

Bug Description:

vite fails to launch development env on mac due to missing vite dependency esbuild

Reproduction Steps:

1. switch to main
2. git pull
3. npm install
4. npm run dev

Expected Behavior:

Should launch vite like normal.

Actual Behavior:

fails to load esbuild dependency

Screenshots (If applicable):

If possible, add screenshots to help explain the problem.

Possible Solution (optional):

restore all esbuild dependencies that were deleted in #32

Feature Description:

Related to #8. Creates a section containing shorter descriptions of each project, to be place on the main page.

• Title
• Logo
• Overview
• Learn More button that links to projects page

Screenshots:

Describe the Current Behavior/Feature:

Create call to action section.

Partner call to action

Proposed Implementation:

Describe the Current Behavior/Feature:

Based on @andycwilliams feedback copied below, my image optimization PR #89 which changed some logos from .pngs to .svgs had some unintended layout side effects on the /projects page

Looking good. The file size reductions may not be huge but it makes it more professional. That at standardizing the names.
My only real comments at the moment are kinda nitpicky ones about consistency in the images rendering.
The new PASS logo is pretty large and much closer to the buttons than the others, in both mobile and desktop versions. In fact, they all seem a bit different. The CODE PDX one is a bit on the big side as well.

I know this is largely because the images themselves are not consistent. But if we could make them more uniform I think that'd look better. Not worth sweating too much over, though. We could come back to it later with higher definition versions, if we wanted.
Also, perhaps this is a good time to organize the images more? There's already a folder just for volunteer images.

@andycwilliams The images you mentioned are both "new" .svgs, and their scale differs from the .png alternates, so it did throw off the layout a little. As for definition the .svgs should scale infinitely so all that should need to happen is for me to adjust their sizes, padding and margin for consistency.

I can easily adjust this, but would prefer to do it in a separate PR. I was going to propose a slight layout change for the project logos on the project page as well, so I could submit those together.

We could certainly add more folders to /assets. How does folders for /heroImages, /partnerLogos, and /projectLogos sound? That would just leave more generic CODE PDX assets in /assets

Images are always finicky. The struggle is eternal.

I'm down if you want to create a separate issue.

I see in the original issue that in assets create desktop and mobile folders is proposed anyway, so it's a good time to add more folders. And yeah those names look fine with me.

Originally posted by @andycwilliams in #89 (comment)

Proposed Implementation:

Make size and layout adjustments as needed to make the /projects page look consistent.

Describe the Current Behavior/Feature:

• remove button from hero

Proposed Implementation:

Describe the Current Behavior/Feature:

Create Primary Partner Component. split from issue #12

Proposed Implementation:

Describe the Current Behavior/Feature:

• Cards should all be the same min-height
• Reduce padding below logos and text
• Change codePDX logo to new SVG with CODE PDX
• Make a clearer SVG of the PASS logo

Proposed Implementation:

Describe the Current Behavior/Feature:

currently all page content has no container to limit max width

Proposed Implementation:

Add container over main content in layout and fix bugs that it causes.

Bug Description:

Footer seems to be fixed to bottom of viewport, overlapping content.

Reproduction Steps:

1. Open the website

Expected Behavior:

If page content is shorter than screen, footer should be at base of screen.
If content is longer than screen, footer should be after content.

Screenshots (If applicable):

Possible Solution (optional):

Only give fixed position if content is less than screen height.

Describe the Current Behavior/Feature:

Update Vite version to close XSS vulnerability recorded in the last npm audit run.

Proposed Implementation:

npm audit fix 😎

Describe the Current Behavior/Feature:

This issue will need nav bar merged in first to update supporting code.

With the nav bar is a dark mode toggle. Right now there is basically enough of a dark mode theme to test that it was set up properly. Needs a full dark mode theme using [MUI dark mode colors] (https://mui.com/material-ui/customization/dark-mode/).

Proposed Implementation:

All of the magic goes in theme.js

Feature Description:

Create the Our Projects section that lists info for active and in-development projects.

• Title
• Logo
• Links
  • Deployment page
  • GitHub
  • Social media links (if applicable)
• Status (Active or In Development label)
• Overview
• Technology Used

Screenshots:

Describe the Current Behavior/Feature:

• The background color of the volunteer card should be the same color as the project cards
• volunteer card styling and projects cards should be styled consistently
• Is there a thinner icon in MUI?
• Button text overlays button in mobile

Proposed Implementation:

Figma link for component:

About component of homepage

Feature Description:

Create About section of the homepage containing:

• Header text
• Paragraph text
• Photos of key team (layout and photos may vary from below screenshot)

Screenshots:

Figma link for component:

Hero section on Figma

Feature Description:

Create Hero section of homepage containing:

• Header text
• Contact Us button
• St. John's Bridge photo

Screenshots:

Describe the Current Behavior/Feature:

CODE PDX logo in Navbar and Footer don't have enough contrast at some viewports either due to blobs rendering or not, OR light mode vs dark mode.

Proposed Implementation:

Maybe just functionally determining the src file of the image based on conditions?

Describe the Current Behavior/Feature:

Mobile

• reduce text size
• reduce padding

General

• Increase gradient vertical for TAO
• reduce padding between value-titles and content in the TAO card

Proposed Implementation:

Describe the Current Behavior/Feature:

Full accessibility review

Proposed Implementation:

• All images should have alt tags
• All asserts should have labels

Describe the Current Behavior/Feature:

Currently user receives no feedback when submitting contact form.

Proposed Implementation:

Could be a toast or dialog pop-up, anything really.

Describe the Current Behavior/Feature:

• Events cards full-width center on mobile
• Add Google Calendar
• Fix card styling (to be consistent
• Center text on mobile
• Add Calendar title

Proposed Implementation:

Describe the Current Behavior/Feature:

• Reduce padding between text and Author
• Try to reduce card height while keeping them all symmetrical

Proposed Implementation:

Ian's strong options on testimonial Author

• Remove dash
• Bold author
• Center author

Updating readme and contributing documentation.

When adding tests, calls to window.matchMedia bleed over to all following tests within a file. Each test should be isolated to itself to ensure that the tests are consistent and not affected by unrelated tests or tests in close proximity.

Reproduction Steps:

1. Run a test on test/components/NavBar/NavMenu.test.jsx. See that it passes.
2. In test/components/NavBar/NavMenu.test.jsx, move the test named it('renders contacts and civic profile links below 600px' above it('does not render contacts and civic profile links above 600px'.
3. Run the test on test/components/NavBar/NavMenu.test.jsx again. See that it fails.

Expected Behavior:

The tests should not change their outcomes based on functions/behavior in unrelated tests.

Actual Behavior:

Functions/behavior in tests affect other unrelated tests.

Possible Solution (optional):

1. Implement an afterEach in a vitest setups file that handles a resetting of window.matchMedia.
2. Other tests with complex and/or global modifications should be examined to ensure their behaviors are isolated.

Feature Description:

Create the contribution chart for new members including:

• Steps 1 through 4
• Additional Onboarding Info
• Link graphic

Screenshots:

Additional Context:

Link to Navbar in Figma

Describe the Current Behavior/Feature:

Adding website to github pages

Describe the Current Behavior/Feature:

Update Desktop Navbar

• update logo and brand implementation
• Fix color contrast
• Add home navigation link
• Donate badge or Support Code PDX for navbar?

Update Mobile Navbar

• Switched position of hamburger and darkmode switch or move darkmode to hamburger menu
• Maybe reduce some height of the mobile navbar

Proposed Implementation:

Figma link for component:

None designed yet.

Feature Description:

Creating a 404 page w/ button to navigate back.

Proposed Solution:

Currently, idea is just to have a centered card that says "Page not found" and a button labeled "go back" that works just like browser back button.

Alternative Solutions:

Team discussion and design.

Screenshots (if applicable):

Something to start with like this:

Then, open up for discussion.

Figma link for component:

Events section of homepage

Feature Description:

Create Upcoming Events section of homepage containing:

• Header text
• Divs/Boxs/Containers of paragraph text
• Integrate a Google calendar (embed/iframe/etc)

Screenshots (if applicable):

Describe the Current Behavior/Feature:

Current 'contact us' links use mailto links. We want to replace them with an email webform that pops up in a modal

Proposed Implementation:

Maybe email.js

Describe the Current Behavior/Feature:

• Render the smallest possible image for each viewpoint
• Two versions of each image, break on
• Webp conversions for all jpgs

Proposed Implementation:

• in assets create desktop and mobile folders

Describe the Current Behavior/Feature:

• Remove the card so the 404 page is full width.
• Maybe a cool 404 image

Proposed Implementation:

• Maybe serve some NASA API image/info, if you use some API make sure there is a fallback.

Describe the Current Behavior/Feature:

Full code review when styling for each section is seemingly complete.

Optimization/Refactors, Spacing (margin/padding in sections and between sections), Text styling/sizing, Buttons.

Most of this being for some sort of consistency/design guide.

Proposed Implementation:

Decide on margin/padding before hand - have base (e.g. 1rem),
Then, decide on design guide - (e.g. triple space between sections {3rem}, double space between header and info in a single section {2rem}, single space between header/text below {1rem}, etc)

Feature Description:

Start MaterialUI styling by creating the theme.js file and implementing it in the app. Apply any styling that is already decided.

Screenshots:

Additional Context:

Link to Navbar in Figma

We use the axe linter at work all the time to implement regression testing, and I think using it in our test suite would be super helpful. I found a matcher for vitest, too.

A lot of work would need to be done to be able to even implement these tests, as I think we would need to bring our pages up to be at 0 failures when using the matchers, first (see #55). But this would be huge for clamping down on pages that are already there and for pages where we've done the work to make them completely accessible.

Describe the Current Behavior/Feature:

Add CETI to partners as a secondary partner in secondaryPartnerList.js mapping from seconardaryPartners.js should populate it onto page.
https://ceti.institute/

Proposed Implementation:

Do whatever it takes!

Describe the Current Behavior/Feature:

• Change breakpoint so the image collage and text box stack before the collage starts stacking.
• Vertically center the text & header section to the image collage

Mobile:

• Standardize the top/bottom padding between stacked images so it is symmetrical (when they stack there is a gap between the top images and bottom and needs padding change on breakpoint)
• remove left size text padding on mobile