Issue 8/create our projects section #32

andycwilliams · 2023-10-27T20:00:37Z

This PR:

Resolves #8

~~Adds both projects sections: a brief one on the main page and more detailed ones on the projects page.~~

This isn't done and I'm not thrilled with it. But I've stretched myself too thin lately and will be out of town for a couple of days, and it's taken long enough already.

Edit: This PR now only updates the detailed section on the projects page. The brief section is detailed under issue #34 and will receive its own PR.

Screenshots (if applicable):

Future Steps/PRs Needed to Finish This Work (optional):

Clean up and optimize coding (e.g. remove what's unnecessary, abstract when helpful, etc.)
Finalize information (i.e. descriptions, tech stacks, etc.)
Improve project logo rendering (e.g. make PASS logo transparent like the others, have them all render in a nicer and more uniform way)
Populate links in projects page
Make sections more responsive and appealing visually

Jared-Krajewski · 2023-10-28T01:12:38Z

Can we split each page into a separate pull request. I had not looked at issue Create Projects Page #8 prior to this PR or would have asked for that to be split into two as well.
The rose logo svg will be used so we need that, it will replace the PNG, just waiting on theme to use.
ESBuild windows is in package-lock.json, not sure what you are using it for but it will possibly cause issues for other devs. It's shouldn't be necessary for this project but if it keeps getting added you can remove it from package.json and delete package-lock.json and npm i to re create package.json without it.

andycwilliams · 2023-10-29T03:01:43Z

This PR should be narrowed to just the Projects page. Can't do a ton of coding at the moment but hopefully this is enough to start testing.

The only change for now is splitting into two branches. All "Futures Steps" that concern this section still apply.

andycwilliams · 2023-10-31T22:14:25Z

Not fully complete yet. Still a couple of things left to finish (namely rendering the icons and finalizing logos). But should be fairly close and I want to see what everyone thinks so far.

Jared-Krajewski

needs a fair amount of work still, I can dissect further when I have more time but would like to see some of the commented changes fixed first.

index.html

package-lock.json

public/assets/roseLogo.svg

Jared-Krajewski · 2023-11-01T16:37:37Z

src/components/projects/projectsList.js

+      {
+        href: 'https://github.com/codeforpdx/recordexpungPDX',
+        icon: '<FaGithub size={45} />',
+        ariaLabel: 'Github link'


I would make these all something more specific by just leading with the project name record sponge github link otherwise to screen reader they will all say the same thing regardless of project.

src/components/projects/projectsList.js

src/components/projects/ProjectBox.jsx

xscottxbrownx

Besides the commented things...

The file structure in general.

It seems you built the full Projects page in another file (ProjectBox.jsx.)

If want to keep ProjectBox separate, then put the <section> and Header Typography in Projects.jsx. But, I think this filename is misleading.

ProjectBox I read as an individual project's box - as in a single project (a reusable component), so that's why there were multiple ProjectBox's in the Projects.jsx page file. Something like:

projectsList.map(project => {
    <ProjectBox .... />
})

creating a ProjectBox for each project.

It's fine, if you envision it different - but then I would change filename to ProjectsBox or ProjectsSection / but again then there's the debate of whether or not that's just the whole page and code should live in the Projects.jsx file.

Just currently no real purpose to Projects.jsx - it has an empty Typography and just a container wrapping your ProjectBox.jsx. The ProjectBox as is, isn't really a reusable component - it's the whole section.

src/components/projects/ProjectBox.jsx

andycwilliams · 2023-11-04T22:50:19Z

Made the edits Scott recommended, including making the Chip and Typography more legible as well as semantically consistent.

I also moved the code from ProjectBox directly to the Projects page. I'm of the opinion that since this is the only unique section on the page then there's no real point in separating it. But we can keep discussing. I pushed this change up to show what it looks like this way. Can be changed back.

If we do decide to keep it this way, would we then want to move projectsList.js since it would then be in a folder by itself? It seems unnecessary to have a folder for a single file, but it's very low priority for me.

Next is working on rendering the icons.

xscottxbrownx · 2023-11-05T02:42:07Z

I will dig into the icons in the array of objects tomorrow!

This looks great though.

The only thing that bothered me was mobile view - the lack of spacing/delineation from the chip to the Overview...

What do you think of this?

which translates to this on large screen:

If liking this ⬆️:

uses MUI <Divider /> for line
added marginBottom of 1rem to the <Stack> holding the <Chip>
the Overview and Technology Used <Typography>'s got mb: 2, mt: 4 instead of just my

Jared-Krajewski · 2023-11-05T23:45:37Z

To fix the Icons. react is expecting a JSX element not a string.

change projectList.js to projectList.jsx
remove ' from icons in link so they look like

links: [
      {
        href: 'https://github.com/codeforpdx/recordexpungPDX',
        icon: <FaGithub size={45} />
      },
      {
        href: 'https://discord.gg/x6b573et',
        icon: <FaDiscord size={45} />
      },
      {
        href: 'https://codeforpdx.github.io/recordexpungPDX',
        icon: <FaEarthAmericas size={45} />
      }
    ]

on a side note in links.map:
1. react router expects to not href so href={href} becomes to={href}
2. add noreferrer to rel for security
3. I know I commented on changing it before but not sure what I was thinking. No alt is needed as this function is for icons not img

andycwilliams · 2023-11-06T00:32:28Z

Okay should (hopefully) be very nearly complete. Just need some (hopefully) final feedback. Icons are ready and I did some coding abstraction, which may not even be necessary Logos should look a little nicer now too.

I added a divider, per Scott's suggestion. Looks good but I could could go either way with it. Also, a few commits ago I hid the title on small viewports since it felt redundant. Looks better in my opinion but it can be put back.

Otherwise I did a whole bunch of messing with padding, margins, spacing, and all that. If we agree there's more to be done with that, perhaps we can hold until the next meeting? We're already planning on discussing layout more there, as I understand.

I'm pretty content with this. Let me know what you all think.

xscottxbrownx · 2023-11-06T01:07:18Z

I added a divider, per Scott's suggestion. Looks good but I could could go either way with it. Also, a few commits ago I hid the title on small viewports since it felt redundant. Looks better in my opinion but it can be put back.

I think for these projects, hiding the title works (could even do it sooner at md vs sm) due to the logos having the titles in them - but that may not be the case for all projects/logos.

xscottxbrownx

In my opinion, we can discuss codestyle throughout full app at meeting (consistency with what to abstract and what not to & what to pull into own file vs leave in parent.)

Think this looks good

Jared-Krajewski

Talked in discord, pushing changes to merge.

Jared-Krajewski · 2023-11-06T03:11:28Z

src/pages/Projects.jsx

+        <Typography
+          variant="body1"
+          // TODO: Keep textAlign here?
+          sx={{ textAlign: 'justify' }}


This weirdly gaps the text and we don't do that anywhere else. Don't see any reason to keep it.

Jared-Krajewski · 2023-11-06T03:23:07Z

src/pages/Projects.jsx

+  minWidth: { xs: '95vw', sm: '80vw' },
+  maxWidth: { sm: '85vw' },
+  background:
+    index % 2 === 0


something you had commented on secondary partners, can we make the gradient go up and down on smaller viewports. If we want to change how the gradient looks after that we can figure out at the meeting but at least it will be consistent for now.

background: { md: index % 2 === 0 ? 'linear-gradient(270deg, rgba(217, 217, 217, 0) 38.54%, rgba(217, 217, 217, 0.4) 82.29%)' : 'linear-gradient(90deg, rgba(217, 217, 217, 0) 38.54%, rgba(217, 217, 217, 0.4) 82.29%)', xs: 'linear-gradient(0deg, rgba(217, 217, 217, 0) 38.54%, rgba(217, 217, 217, 0.4) 82.29%)' }

Jared-Krajewski · 2023-11-06T03:50:27Z

src/pages/Projects.jsx

+  mb: { xs: 5, sm: 15 },
+  p: 5,
+  borderRadius: '25px',
+  minWidth: { xs: '95vw', sm: '80vw' },


This Doesn't constrain within the xl containers and needs to be refactored to cap.

the padding is too much for mobile. This styling fixes these issues.

const boxStyle = (index) => ({ mb: { xs: 5, sm: 15 }, py: 5, px: 2, borderRadius: '25px', background: { md: index % 2 === 0 ? 'linear-gradient(270deg, rgba(217, 217, 217, 0) 38.54%, rgba(217, 217, 217, 0.4) 82.29%)' : 'linear-gradient(90deg, rgba(217, 217, 217, 0) 38.54%, rgba(217, 217, 217, 0.4) 82.29%)', xs: 'linear-gradient(0deg, rgba(217, 217, 217, 0) 38.54%, rgba(217, 217, 217, 0.4) 82.29%)' } });

Jared-Krajewski · 2023-11-06T03:52:57Z

src/pages/Projects.jsx

-      </Container>
+      <Box
+        as="section"
+        sx={{


needs to have max size container, currently content can go full width.

Jared-Krajewski

spoke in discord, pushed fixes for merge.

andycwilliams added the enhancement New feature or request label Oct 27, 2023

andycwilliams requested review from ogorman89, xscottxbrownx and Jared-Krajewski October 27, 2023 20:00

andycwilliams self-assigned this Oct 27, 2023

Refactoring branch to narrower scope

ea7b2cd

andycwilliams added 4 commits October 30, 2023 12:56

Merge branch 'main' into issue-8/create-our-projects-section

65e4e60

Small changes, continuing work on icons

164ad18

Merge branch 'main' into issue-8/create-our-projects-section

f15b9dc

Preparing latest draft

ece57d1

Stopgap measure to render links

2ef2ce2

andycwilliams marked this pull request as ready for review October 31, 2023 22:42

Jared-Krajewski requested changes Nov 1, 2023

View reviewed changes

andycwilliams added 5 commits November 1, 2023 14:58

Adjusting layout

0f8349d

More tweaking layout, matching Figma styling

a219c0c

Consolidating changes with issue 34 branch

9fa5d48

Fixing image rendering error

a118f05

Testing hiding title on small screens

08b45e0

xscottxbrownx requested changes Nov 3, 2023

View reviewed changes

Small changes and refactoring file structure

eb344a2

Changing projectsList index to id

65514ab

andycwilliams mentioned this pull request Nov 4, 2023

Issue 34/create our projects brief #39

Merged

andycwilliams added 2 commits November 4, 2023 15:59

Testing text alignment

14f8456

Abstracting styling

153a9ac

Merge branch 'main' into issue-8/create-our-projects-section

f4fc02d

Further abstraction

a11912b

Fixing icons, various styling adjustments

d3345da

andycwilliams requested review from Jared-Krajewski and xscottxbrownx November 6, 2023 00:59

xscottxbrownx approved these changes Nov 6, 2023

View reviewed changes

Jared-Krajewski requested changes Nov 6, 2023

View reviewed changes

flex and styling fixes

fb0f52f

Jared-Krajewski approved these changes Nov 6, 2023

View reviewed changes

Jared-Krajewski merged commit e999d20 into main Nov 6, 2023

Jared-Krajewski deleted the issue-8/create-our-projects-section branch November 6, 2023 03:56

ogorman89 mentioned this pull request Nov 6, 2023

Missing vite dependency esbuild #46

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue 8/create our projects section #32

Issue 8/create our projects section #32

andycwilliams commented Oct 27, 2023 •

edited

Loading

Jared-Krajewski commented Oct 28, 2023 •

edited

Loading

andycwilliams commented Oct 29, 2023

andycwilliams commented Oct 31, 2023 •

edited

Loading

Jared-Krajewski left a comment

Jared-Krajewski Nov 1, 2023

xscottxbrownx left a comment

andycwilliams commented Nov 4, 2023

xscottxbrownx commented Nov 5, 2023

Jared-Krajewski commented Nov 5, 2023 •

edited

Loading

andycwilliams commented Nov 6, 2023

xscottxbrownx commented Nov 6, 2023

xscottxbrownx left a comment

Jared-Krajewski left a comment

Jared-Krajewski Nov 6, 2023

Jared-Krajewski Nov 6, 2023

Jared-Krajewski Nov 6, 2023

Jared-Krajewski Nov 6, 2023

Jared-Krajewski left a comment

Issue 8/create our projects section #32

Issue 8/create our projects section #32

Conversation

andycwilliams commented Oct 27, 2023 • edited Loading

This PR:

Screenshots (if applicable):

Future Steps/PRs Needed to Finish This Work (optional):

Jared-Krajewski commented Oct 28, 2023 • edited Loading

andycwilliams commented Oct 29, 2023

andycwilliams commented Oct 31, 2023 • edited Loading

Jared-Krajewski left a comment

Choose a reason for hiding this comment

Jared-Krajewski Nov 1, 2023

Choose a reason for hiding this comment

xscottxbrownx left a comment

Choose a reason for hiding this comment

The file structure in general.

andycwilliams commented Nov 4, 2023

xscottxbrownx commented Nov 5, 2023

I will dig into the icons in the array of objects tomorrow!

This looks great though.

What do you think of this?

which translates to this on large screen:

If liking this ⬆️:

Jared-Krajewski commented Nov 5, 2023 • edited Loading

andycwilliams commented Nov 6, 2023

xscottxbrownx commented Nov 6, 2023

xscottxbrownx left a comment

Choose a reason for hiding this comment

Jared-Krajewski left a comment

Choose a reason for hiding this comment

Jared-Krajewski Nov 6, 2023

Choose a reason for hiding this comment

Jared-Krajewski Nov 6, 2023

Choose a reason for hiding this comment

Jared-Krajewski Nov 6, 2023

Choose a reason for hiding this comment

Jared-Krajewski Nov 6, 2023

Choose a reason for hiding this comment

Jared-Krajewski left a comment

Choose a reason for hiding this comment

andycwilliams commented Oct 27, 2023 •

edited

Loading

Jared-Krajewski commented Oct 28, 2023 •

edited

Loading

andycwilliams commented Oct 31, 2023 •

edited

Loading

Jared-Krajewski commented Nov 5, 2023 •

edited

Loading