refactor(homepage): project card refinement

[ben196888]

Refine project card design

Major

• remove project card images and replace them with job avatars

minor

• remove deprecated style and components
• adjust the layout design on large and medium screen

Impaction

Screenshots

Before

After

Performance

Build and deploy time

item	Before	After
w/ Cached	00m00s	00m00s
w/o Cached	00m00s	00m00s

[netlify]

✅ Deploy Preview for openstartervillage ready!

Name	Link
🔨 Latest commit	027eca5
🔍 Latest deploy log	https://app.netlify.com/sites/openstartervillage/deploys/654119a68d9ce60008e39e45
😎 Deploy Preview	https://deploy-preview-298--openstartervillage.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 93 (🟢 up 11 from production) Accessibility: 95 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for openstartervillage-canary ready!

Name	Link
🔨 Latest commit	027eca5
🔍 Latest deploy log	https://app.netlify.com/sites/openstartervillage-canary/deploys/654119a6a9695d0008f1c005
😎 Deploy Preview	https://deploy-preview-298--openstartervillage-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 88 (🟢 up 1 from production) Accessibility: 95 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[ben196888]

Very nice proof of concept idea. I think we should consider these two methods to make this pull request better.

1. Split Cards component into two or three Cards components. Project cards are styling differently from job and event cards. It's nice to have more Cards component to render different card styling
2. Move off the colour mapping logic from client side to server side. The colour of background and border should be provided from CMS items. Hardcoded the colour mapping in the server side and render accordingly in the client side makes migrating colour property to CMS items easier.

[ben196888]

The Card component renders ProjectCard and non-ProjectCard differently. The naming of those files are confusing.
I think it would make more sense if we specify a new ProjectCard component and make a DefaultCard component to support the other card types.

Please extract out the ProjectCard JSX to be ProjectCard component and rename nonProjectCard component to be DefaultCard component.

The pseudo code in Card component will be something like follows.

const Card = (props) => {
  if (props.data.type === 'project_card') {
    return <ProjectCard {...props} />
  }
  return <DefaultCard {...props} />
}

[ljc1991]

The Card component renders ProjectCard and non-ProjectCard differently. The naming of those files are confusing. I think it would make more sense if we specify a new ProjectCard component and make a DefaultCard component to support the other card types.

Please extract out the ProjectCard JSX to be ProjectCard component and rename nonProjectCard component to be DefaultCard component.

The pseudo code in Card component will be something like follows.

const Card = (props) => {
  if (props.data.type === 'project_card') {
    return <ProjectCard {...props} />
  }
  return <DefaultCard {...props} />
}

Yes, Sir! 🫡