feat: add bio component to profile page

[shootermv]

bio section of the profile page
desktop:

mobile:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

related to #48234

[ahmaxed]

Thanks for the pr and sorry for the confusion. those three dots (

) are the current socials, and the image should be on the left. Also I would be great if you could look into the failing tests.

[shootermv]

ahmaxed

here is some problem with those icons: they only shown when user has some data at those fields,
currently development user has no data - so the no icons will display...
does this means - i should create some PR with modified seed scripts in a way the development user will have for example -github account?

[Sembauke]

here is some problem with those icons: they only shown when user has some data at those fields, currently development user has no data - so the no icons will display... does this means - i should create some PR with modified seed scripts in a way the development user will have for example -github account?

Hey @shootermv,
It is possible to add your own info to the developer account by going to the settings. There you should see a couple of fields were you can put your GitHub link etc..

[Sembauke]

Hey @shootermv,

A couple of things:

1. We should only add new classes when absolutely necessary, meaning the colour classes are redundant as we use predefined colours. You can view these colours in the developer console:

or in the global.css file. We do this to prevent duplication and to make sure that colours are both fit for light and dark theme.
2. The new component should have a width that correlates to the others. Meaning the bio components seems to have a larger width than say, the points component.

Again, thank you for working on this. If you have any questions let me know here.

[Sembauke]

view comment above.