search

ObolNetwork / obol-site

A landing page for the Obol Network
https://obol.tech
2 stars 5 forks source link

Little UI improvements to boost my job application #96

Closed OleanjiKingCode closed 7 months ago

OleanjiKingCode commented 7 months ago

Little UI improvements on the Obol site to boost my job application

Summary

Details

How to test it

Go to the deployed preview link of this pr and check out the home page of Obol site.

Screenshots

-- Text consistency in navbar and footer : Before : image

After : image

-- How DVs work Section and DV Cluster Section:
Before :

image image

After :

image image

The changes I made in this pr are both for my application and contribution to open source, the UI is really awesome as it took time for me to check for these really atomic issues.

I found another one but i need to do a pr for the obol-ui repo A part of the TeamMemberCard : image

ticket: #000 There is no this for this PR; this is because I did this PR to boost my application for the frontend developer position at Obol. I apologize for the unnecessary tagging. @Arash-Afshar @OisinKyne @f1lander

Thank you Oleanji

netlify[bot] commented 7 months ago

Deploy Preview for obol-landing ready!

Name Link
Latest commit 5a8def8f7e01be6a293b26108fc87c8a3bb12217
Latest deploy log https://app.netlify.com/sites/obol-landing/deploys/65b3cf03fdea340008f5a548
Deploy Preview https://deploy-preview-96--obol-landing.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

sonarcloud[bot] commented 7 months ago

Quality Gate Passed Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud

f1lander commented 7 months ago

Little UI improvements on the Obol site to boost my job application

Summary

  • Improved the following UI : -- Obol Ecosystem Section -- Hero Section -- How DVs work Section and DV Cluster Section

-Text consistency in navbar and footer

  • Added Scroll To Top Component
  • Fixed a very simple typo in the ReadMe file 👀

Details

  • Obol Ecosystem Section: In smaller screens, this section has uneven gaps on the left and right parts and this look isn't all that good; therefore centering the items in this section evens up the gap and this looks much better in smaller screen sizes.
  • Hero Section: The hero section has a little too much gap from the navbar and in some
  • How DVs work Section and DV Cluster Section: These sections' headers and subtext do not utilize their full parent width and therefore are a bit cramped up and shifted to one part of the section.
  • Added Scroll To Top Component: The Obol site has lots of sections and takes some sec to scroll up from the bottom, more so when the core team or backers accordion is collapsed. so to solve this I added a scroll to top button.
  • Text consistency in navbar and footer: In the navbar the navlink for job openings is called "Jobs" while "Careers" in footer. so I changed the navbar's own to careers to stick to a word
  • Fixed a very simple typo in the ReadMe file: I looked for typos all over the site but found none (kudos to the team 👏🏼) but I found a simple one in the Readme file 😂 a "with" text without an h.

How to test it

Go to the deployed preview link of this pr and check out the home page of Obol site.

Screenshots

  • Obol Ecosystem Section: Before : image image

After : image image

-- Hero Section : Before : image

After : image

-- Text consistency in navbar and footer : Before : image

After : image

-- How DVs work Section and DV Cluster Section: Before :

image image

After :

image image

After : https://github.com/ObolNetwork/obol-site/assets/75235148/c2669909-1569-400e-acf4-71931cf02dd3

The changes I made in this pr are both for my application and contribution to open source, the UI is really awesome as it took time for me to check for these really atomic issues.

I found another one but i need to do a pr for the obol-ui repo A part of the TeamMemberCard : image

ticket: #000 There is no this for this PR; this is because I did this PR to boost my application for the frontend developer position at Obol. I apologize for the unnecessary tagging. @Arash-Afshar @OisinKyne @f1lander

Thank you Oleanji

Impressive, thank you for the initiative, all of the changes that you addressed are matching with the designs, but the one that does not match the designs is the offset behavior in the TeamMemberCard component, thanks!

OleanjiKingCode commented 7 months ago

Glad that I was able to help :), Thanks for the reply @f1lander

f1lander commented 7 months ago

No changes are needed here.