Eductation Section

[jay-liu-x]

Summary

Add a section "Education" below the first section.

What's new?

A new section that has owner's education background (college / university, degree, diploma, etc.)

Motivation

Education background has always been a vital part of one's professional webpage. It gives the viewers of your website a better undertstanding of your capabilities and skills.

[jay-liu-x]

By the way, if you think it is a good idea, I will be more than happy to work on this new feature!

[saadpasta]

@Ergouzii That's a great idea. ✌ I am assigning you this issue.

[kartikcho]

Hey @Ergouzii that could be a really nice addition! If possible, drop some mocks or screenshots of the new component's design before opening a PR. That way, we can iterate and review before you start coding. Thanks!

[jay-liu-x]

Hey @saadpasta @kartikcho I have created the new component in my forked repository.

Deployed it here.

A quick preview:

Feel free to play around the test build and please let me know if you have any feedback :)

[naveen521kk]

That test deploy isn't yet mobile optimised. It enables vertical scrolling which should not happen. @Ergouzii

[kartikcho]

Hey @Ergouzii the illustration looks great but I think we should update the card to be a bit different and original than the work experience card, maybe something that takes less space too? If I can find any inspo, I'll post it here but we should look for a different design!

[jay-liu-x]

Thank you all for bringing up these valuable feedback!

Updated my code and please see the test application here

@naveen521kk Now the component is reponsive and mobile-friendly.

@kartikcho Can you please look at the new design and let me know you have suggestions/example designs? (I'm really bad at designing stuff lol).

[kartikcho]

Hey again @Ergouzii , I really like this new layout!

Some ideas I had after looking at it,

• Maybe we can remove the on hover 'card-like' effects for these since they don't fit the card aesthetic here exactly.

• We can either extend the education column to full screen (to fit design hierarchy) which would look better imo, or have the illustration scroll down along the page (which could make it more interactive but not exactly uniform since none of the other illustrations are dynamic)

• The mobile design isn't exactly responsive, we can move the university icon to the top of a section if possible, like the job cards.

• We should use a faded shade of black instead of italics for the education institution time duration as that isn't something prominent to look at.

I really like this component design, good stuff!

[jay-liu-x]

@kartikcho Hey thanks for these great points!

Again, the updated version is here.

My response:

1. Hover effects are removed
2. Not sure if I get this, do you mean that we can discard the illustration and give the education section full width like this:
3. Please see the deployed site and let me know if it looks good on mobile for you.
4. Changed it to a less-dark color :)

[kartikcho]

The mobile layout looks great!

I was playing around with your deployment and tested a few things.

An illustration that equally covers the section height looks good but on adding more 'cards' it suffers from the same problem.

Do you mean that we can discard the illustration and give the education section full width like this?

Yes, I tweaked around a bit from your deployment and removed the illustration column, we go with this I think.

Changed it to a less-dark color

I couldn't find this change in your new preview so I switched colors from the <ul> (check the image above) to the dates and it looks fine imo, let me know what you think!

Great work, open a PR whenever this is ready so we can take the discussion there!

[jay-liu-x]

@kartikcho Sounds good! Just created the PR :)