search

smaranjitghose / awesome-portfolio-websites

A community maintained open source project aimed at making a personal portfolio for researchers, developers, and analysts simple, fast, and less cumbersome. We make sure you have a full-fledged website to showcase your work while you can spend time on your learning and innovative endeavors.
https://portfolio.smaranjitghose.com/
MIT License
2.36k stars 1.49k forks source link

Micro animations for social media icons #536

Closed smaranjitghose closed 3 years ago

smaranjitghose commented 3 years ago

Reference

Please use your creativity

For example:

achalesh27022003 commented 3 years ago

@smaranjitghose sir I can do this. Please assign me this issue.

smaranjitghose commented 3 years ago

@smaranjitghose sir I can do this. Please assign me this issue.

Assigned for next 4 days. If required, we can extend the deadline!

achalesh27022003 commented 3 years ago

Sir I want to ask few questions that: is it necessary to keep medium, kaggle icons etc? Can we change them for our conveience or not? Secondly I think i have to use svg animation bcz throough i tag i am oly able to fly twitter bird only...github and linked in ball are through svg animations. So can I use svg for all icons?

smaranjitghose commented 3 years ago

Sir I want to ask few questions that: is it necessary to keep medium, kaggle icons etc? Can we change them for our conveience or not? Secondly I think i have to use svg animation bcz throough i tag i am oly able to fly twitter bird only...github and linked in ball are through svg animations. So can I use svg for all icons?

Sure. Feel free to use SVG animations

We are adding options for Kaggle, Medium, etc because this project is meant to be a generalized template for a wide variety of audience from different backgrounds. As per one's choice, one can comment or uncomment the related code later.

Don't worry, give PRs for one social media icon microanimation at a time

Abhijay007 commented 3 years ago

@smaranjitghose sir, I did some changes to micro animations.

micro-animations

can I work on this issue?

anushbhatia commented 3 years ago

This looks too main stream and not minimal try keeping it minimal with micro animations

smaranjitghose commented 3 years ago

@smaranjitghose sir, I did some changes to micro animations.

micro-animations

can I work on this issue?

Have a look at what I have suggested in the issue description and what you are producing!

If you were an HR and wanted to visit a candidate's portfolio, don't you think this looks absolutely weird?😅

sherin527 commented 3 years ago

Sir, I want to try this out, could you assign me this task also.

Abhijay007 commented 3 years ago

Have a look at what I have suggested in the issue description and what you are producing!

If you were an HR and wanted to visit a candidate's portfolio, don't you think this looks absolutely weird?😅

ok @smaranjitghose sir I will try to improve this and try to work on a particular icon at a time.

smaranjitghose commented 3 years ago

Have a look at what I have suggested in the issue description and what you are producing! If you were an HR and wanted to visit a candidate's portfolio, don't you think this looks absolutely weird?😅

ok @smaranjitghose sir I will try to improve this and try to work on a particular icon at a time.

No offense to you @Abhijay007 brother. It was an honest suggestion w.r.t to ui/ux

smaranjitghose commented 3 years ago

Sir, I want to try this out, could you assign me this task also.

Assigned for 4 days

Abhijay007 commented 3 years ago

@smaranjitghose sir I am done with Twitter SVG it looks like this. now

twitter

but sir I am facing a problem now, that this Twitter SVG has a very big code.

code

now the problem I am facing is that this code does not look that good in the main file it reduces code readability. I try to link SVG to an HTML document by using an image, object, SVG tag but that doesn't work.

I read some blogs and answers related to this on StackOverflow and w3schools but not able to find any optimized solution they also suggest using SVG directly on the page if you want to edit its CSS.

Sir, can you suggest me something related to this.

Abhijay007 commented 3 years ago

I am also done with the micro animation of GitHub icon.

Abhijay007 commented 3 years ago

github one:

github-icon

anushbhatia commented 3 years ago

Keep the wings of the twitter bird blue don't make it mix of white and blue

Abhijay007 commented 3 years ago

Ok sir I will keep those wings blue

On Mon, 15 Feb 2021, 00:32 Anush Bhatia, notifications@github.com wrote:

Keep the wings of the twitter bird blue don't make it mix of white and blue

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/smaranjitghose/awesome-portfolio-websites/issues/536#issuecomment-778824697, or unsubscribe https://github.com/notifications/unsubscribe-auth/APLHP3SHYUP6M5C5BML4VVTS7AM27ANCNFSM4W7C6AFQ .

Abhijay007 commented 3 years ago

Keep the wings of the twitter bird blue don't make it mix of white and blue

bluw-wings

done with the changes @smaranjitghose and @anushbhatia Sir.

can I open a PR for these two for now?

smaranjitghose commented 3 years ago

Keep the wings of the twitter bird blue don't make it mix of white and blue

bluw-wings

done with the changes @smaranjitghose and @anushbhatia Sir.

can I open a PR for these two for now?

Definitely brother! Go ahead and give a PR.

Try to incorporate it in the footer icons too

Abhijay007 commented 3 years ago

Try to incorporate it in the footer icons too

@smaranjitghose Sir , footer section is also done:

footer

smaranjitghose commented 3 years ago

Try to incorporate it in the footer icons too

@smaranjitghose Sir , footer section is also done:

footer

Fantastic give a PR please

smaranjitghose commented 3 years ago

Also, I hope that this was a nice learning experience for your @Abhijay007. @anushbhatia and I can be strict at times but the main motive is to ensure that all you get to learn something more useful.😊

smaranjitghose commented 3 years ago

Sir, I want to try this out, could you assign me this task also.

You can take the dribble and medium icons if you wish

Abhijay007 commented 3 years ago

Also, I hope that this was a nice learning experience for your @Abhijay007. @anushbhatia and I can be strict at times but the main motive is to ensure that all you get to learn something more useful.😊

No problem 😄 @smaranjitghose sir I learned a lot about SVG manipulation using CSS during this PR. And I know as a mentor you always want contributors to learn more and give their best 😊.

And Sir if you wouldn't point out my mistakes then maybe I am never able to do this task. It was a great learning experience.

smaranjitghose commented 3 years ago

@Abhijay007 you can continue with the LinkedIN (and additional Instagram Icon, keep the original colors) using this reference. Do a CTRL+F on the reference website to look for the desired animation.

@anushbhatia could you please give some suggestions for dribble(perhaps dribbling across the horizontal plane to distinguish it from LinkedIn), google scholar(perhaps similar to the facebook microanimation given above)?

Abhijay007 commented 3 years ago

@Abhijay007 you can continue with the LinkedIN (and additional Instagram Icon, keep the original colors) using this reference. Do a CTRL+F on the reference website to look for the desired animation.

ok @smaranjitghose sir

Abhijay007 commented 3 years ago

@Abhijay007 you can continue with the LinkedIN (and additional Instagram Icon, keep the original colors) using this reference. Do a CTRL+F on the reference website to look for the desired animation.

done with Instagram icon:

instagram1

instagram2

@smaranjitghose sir out of these two which one you prefer more? should I include that outer ring?

smaranjitghose commented 3 years ago

The first one is a sure no!

As I had pointed out earlier, boundaries around social media icons don't look good

For the second one, make sure the motion starts with something(I mean it should not become blank on hover and then appear)

Something I can suggest is not doing much with the square(perhaps lifting it a bit) and filling the internal circle with pink to give an effect similar to the shutter closing of a dslr

smaranjitghose commented 3 years ago

For the LinkedIn one take direct reference

Check out the icon of Google Scholar and Kaggle (and use the Facebook reference for them)

For the medium, one check out their official reveal animation here

For codeforces it would be fairly simple, just vary the length of the bars

Abhijay007 commented 3 years ago

Ok sir

On Tue, 16 Feb 2021, 21:38 Smaranjit Ghose, notifications@github.com wrote:

For the LinkedIn one take direct reference

Check out the icon of Google Scholar and Kaggle (and use the Facebook reference for them)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/smaranjitghose/awesome-portfolio-websites/issues/536#issuecomment-779938390, or unsubscribe https://github.com/notifications/unsubscribe-auth/APLHP3UHKEJMKKMDBJP57TLS7KJ75ANCNFSM4W7C6AFQ .

smaranjitghose commented 3 years ago

@Abhijay007 checkout AnimeJS and let me know if it is relevant to your task in terms of better readability and ease of use

Abhijay007 commented 3 years ago

@Abhijay007 checkout AnimeJS and let me know if it is relevant to your task in terms of better readability and ease of use

ok @smaranjitghose sir I will try to convert all SVG in this format after I am done with all the icons micro animations.

Abhijay007 commented 3 years ago

sir @smaranjitghose sir out of these two which one you prefer more?

instagram1

insta2

do I need to change something?

Abhijay007 commented 3 years ago

LinkedIn animation is also done, sir:

linkedin1

linkedin2

@smaranjitghose sir out of these two which one you want me to implement?

achalesh27022003 commented 3 years ago

@Abhijay007 you are doing good work bro. I just go

achalesh27022003 commented 3 years ago

got twitter and linked in animation though😅

smaranjitghose commented 3 years ago

LinkedIn animation is also done, sir:

linkedin1

linkedin2

@smaranjitghose sir out of these two which one you want me to implement?

LinkedIn go for the second one

Change it in footer too

anushbhatia commented 3 years ago

Don't fill the internal colour for it. Keep the logo for Instagram is same. On hover make that click animation. As soon as animation is over keep the logo same.

Abhijay007 commented 3 years ago

Don't fill the internal colour for it. Keep the logo for Instagram is same. On hover make that click animation. As soon as animation is over keep the logo same.

internal color for Linkedin icon?

Abhijay007 commented 3 years ago

@anushbhatia @smaranjitghose sir done with all the changes take a look

changes

smaranjitghose commented 3 years ago

@anushbhatia @smaranjitghose sir done with all the changes take a look

changes

Pitch Perfect!

For the instagram, one last tweak would be if we could continuously have the shutter closing and opening with a small interval

Abhijay007 commented 3 years ago

For the instagram, one last tweak would be if we could continuously have the shutter closing and opening with a small interval

@smaranjitghose sir done with the changes take a look:

insta

sir, can I open a PR for these two now?

smaranjitghose commented 3 years ago

Yes, it's perfect!

Replace the medium icon in the footer with Instagram.

Comment elaborately too!

Abhijay007 commented 3 years ago

Yes, it's perfect!

Replace the medium icon in the footer with Instagram.

Comment elaborately too!

@smaranjitghose sir done with the changes take a look

icons

Abhijay007 commented 3 years ago

@smaranjitghose sir can you please share some references for the Kaggle icon, I have something in mind for the dribble icon but don't know about Kaggle much.

smaranjitghose commented 3 years ago

@smaranjitghose sir can you please share some references for the Kaggle icon, I have something in mind for the dribble icon but don't know about Kaggle much.

Do it similar to the Facebook micro animation reference I gave above

Abhijay007 commented 3 years ago

@smaranjitghose @anushbhatia sir done with the dribble animation: dribbble

do you want to me change something?

Abhijay007 commented 3 years ago

@smaranjitghose @anushbhatia sir code forces also done:

codeforces

can I open a PR for these two for now?

smaranjitghose commented 3 years ago

@smaranjitghose @anushbhatia sir code forces also done:

codeforces

can I open a PR for these two for now?

Definitely brother. Please give a PR.

Proceed with medium as per their official animation. Make kaggle and google scholar as per the facebook animation in the reference.

Abhijay007 commented 3 years ago

@smaranjitghose @anushbhatia sir code forces also done: codeforces can I open a PR for these two for now?

Definitely brother. Please give a PR.

Proceed with medium as per their official animation. Make kaggle and google scholar as per the facebook animation in the reference.

ok @smaranjitghose sir I will open a PR for these two now and try to complete medium, kaggel, and google scholar by tomorrow

smaranjitghose commented 3 years ago

@smaranjitghose @anushbhatia sir code forces also done: codeforces can I open a PR for these two for now?

Definitely brother. Please give a PR. Proceed with medium as per their official animation. Make kaggle and google scholar as per the facebook animation in the reference.

ok @smaranjitghose sir I will open a PR for these two now and try to complete medium, kaggel, and google scholar by tomorrow

Cool