Implement profile page

[raymosun]

Info

Closes #29

Description

Implements the user profile page.

Note: the original profile page branch died and wouldn't deploy, possibly because it's too old or something 🤷

Changes

• /profile redirects to /u/[user_handle]
• Creates the UserProfilePage component which renders a user profile page
• Creates the HandleNotFound component which tells users a handle does not exist
• Creates a new page at /u/[handle] which retrieves the current user, the handle's user, and their attendances, then renders the correct component
• Updates the utils.js functions getUserRank() and hashUser() with their real functionality
• Creates the GifSafeImage component which automatically makes next/image Images unoptimized when src is a gif
• Side effect: deleted width and height attributes from some svgs so they can be used at different sizes on this PR; existing usages have (hopefully) all been updated to manually set the size
• /constants/majors.json refactored to a .ts file

Type of Change

• Bug Fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as
  expected)
• Logistics Change (A change to a README, description, or dev workflow setup like
  linting/formatting)
• Continuous Integration Change (Related to deployment steps or continuous integration
  workflows)
• Other: (Fill In)

Testing

I have tested that my changes fully resolve the linked issue ...

• locally on Desktop.
• locally on mobile - use https://ngrok.io to get a copy on a mobile device
• on the live deployment preview on Desktop.
• on the live deployment preview on Mobile.
• I have run and passed all new and existing Cypress tests. Add screenshots below.

Checklist

• I have performed a self-review of my own code.
• I have followed the style guidelines of this project.
• I have documented my code's src/lib functions and commented hard to understand areas
  anywhere else.
• My changes produce no new warnings.

Screenshots

desktop- own profile - light mode

desktop- other's profile - light mode

mobile - other's profile - dark mode

handle not found - dark mode

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
membership-portal-ui-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 19, 2024 5:31am

[farisashai]

I would remove the edit button in the about section since it goes to the same place

[farisashai]

This incentive seems personal so it's strange to see it on someone else's profile. I think we should hide it if they're not viewing their own

Can you also add more gap above the text and left align it

[farisashai]

More gap between the rank and points

Also specify "x All-Time Leaderboard Points"

[farisashai]

Hide the div for social media links if it's empty

[farisashai]

Fun challenge for later: customizing the pink background per user so everyone's looks different

my idea was that you take their past attendances and proportionally use each of the community colors that they're engaged with in some kind of randomly generated blobs or patterns so the background represents them and it could change every time they attend a new event

[farisashai]

left some visual nits as comments in addition to these code comments. code looks excellent very clean and readable and the page also looks great excellent work 🤩

[raymosun]

This incentive seems personal so it's strange to see it on someone else's profile. I think we should hide it if they're not viewing their own

Can you also add more gap above the text and left align it

Have you seen the version on other profiles that uses their name instead of "My Progress"? I think it doesn't feel too weird and helps the page not feel so empty.

[raymosun]

I would remove the edit button in the about section since it goes to the same place

Messing with having the the second edit button link to directly editing the 'About me' section, thoughts?

[raymosun]

Implemented some changes in latest commit 8a0198f but I want to update icons also soon

[farisashai]

couple of tiny nits but amazing work overall 🎉 code quality is very clean and thoughtful and the UI is in great shape

[farisashai]

Closes #33