Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Addition of Social media icons in the footer of the website(all pages) along with hover animation. #106

Open
rajdeepchakraborty-rc opened this issue Oct 8, 2024 · 6 comments · May be fixed by #214
Open

Addition of Social media icons in the footer of the website(all pages) along with hover animation. #106

rajdeepchakraborty-rc opened this issue Oct 8, 2024 · 6 comments · May be fixed by #214
Assignees
@rajdeepchakraborty-rc
Labels
gssoc-ext GSSoc Extended hacktoberfest Hactober Fest 2024 hacktoberfest-accepted Hactober Fest 2024 level1 GSSoc Extended Level 1 Points

Comments

@rajdeepchakraborty-rc
Copy link
Contributor

rajdeepchakraborty-rc commented Oct 8, 2024 •
edited
Loading

Is your proposal related to a problem?

Every website must have socials included for users to contact and visit.

Describe the solution you'd like

I want to add social icons in the footer section of the website(all pages). Now, just adding icons does not make a website attractive. So, I will be adding hover animations(color change and zoom) on the icons to make it look responsive and attractive. I will also add redirects to the icons(o clicking the Facebook icon, it redirects to the Facebook website). Thus the social icons will be added and responsive, making the overall site look attractive.

  • Before

image

  • After

Just a reference image, will send updates once I start working on it.

image

Describe alternatives you've considered

Additional context

None.

Requirement/Document

None.

I would like to work on the issues so that I can contribute to making the repository more accessible and friendly for other Contributors.
Please assign this issue to me under level3, gssoc-ext and hacktoberfest-accepted(if available) labels.
@subhadipbhowmik subhadipbhowmik added gssoc-ext GSSoc Extended hacktoberfest-accepted Hactober Fest 2024 level1 GSSoc Extended Level 1 Points hacktoberfest Hactober Fest 2024 labels Oct 9, 2024
@rajdeepchakraborty-rc
Copy link
Contributor Author

rajdeepchakraborty-rc commented Oct 9, 2024 •
edited
Loading

@subhadipbhowmik I just wanted to know if this issue should not have a level3 tag since I am adding social logos[Twiiter, Linkedin, GitHub, Instagram] in all of the pages of your website and also adding a hover animation(zoom and color) to all of them to look more attractive for the users, thus improving the scalability of your project.

@rajdeepchakraborty-rc
Copy link
Contributor Author

rajdeepchakraborty-rc commented Oct 9, 2024 •
edited
Loading

Also please let me know if you are ok with having the following icons or adding any more:

  • Twitter
  • Linkedin
  • GitHub
  • Instagram

Let me know about any changes you want me to make or If I should continue on these four social media icons.

@rajdeepchakraborty-rc
Copy link
Contributor Author

I have added the logos. This is how it is looking right now. I will add hover animations to it (slight zoom and color change).
image

@rajdeepchakraborty-rc
Copy link
Contributor Author

Also please let me know if you are ok with having the following icons or adding any more:

  • Twitter
  • Linkedin
  • GitHub
  • Instagram

Let me know about any changes you want me to make or If I should continue on these four social media icons.

@subhadipbhowmik I have added the following redirects:

  1. Linkedin - Redirects to your profile.
  2. GitHub - Redirects to this Repository.
  3. Twitter - Provide me a profile if you have.
  4. Instagram - I am thinking of replacing it with Youtube. Let me know your thoughts. Also for the time being provide me with your Instagram account too(if you have any).

@rajdeepchakraborty-rc
Copy link
Contributor Author

rajdeepchakraborty-rc commented Oct 11, 2024 •
edited
Loading

@subhadipbhowmik The following area is looking a lot empty with just the name.
image
I was thinking of adding the project description below the name on the website.
image

Also since you already have a copyright section in the footer area, there's no need to have an extra one in the above section.
image
If you want me to remove the extra one under the Project name, let me know.

Please review the changes requested and let me know your thoughts on this.

@rajdeepchakraborty-rc
Copy link
Contributor Author

rajdeepchakraborty-rc commented Oct 11, 2024 •
edited
Loading

This is the current look with the addition of the following animations on hover:

  • Color change for respective icons.
  • Zoom of Icons
Footer.Social.Logo_Hover.and.Color.change.on.Hover.mp4

Problem encountered: If you see the video, you will notice that the GitHub logo is not visible properly(on hover) due to the footer color. I am thinking of adding a small circle behind the icons that appears on hover.

I am currently working on resolving this problem.

@rajdeepchakraborty-rc rajdeepchakraborty-rc linked a pull request Oct 15, 2024 that will close this issue
Open
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rajdeepchakraborty-rc rajdeepchakraborty-rc

Labels
gssoc-ext GSSoc Extended hacktoberfest Hactober Fest 2024 hacktoberfest-accepted Hactober Fest 2024 level1 GSSoc Extended Level 1 Points
Projects
None yet
Milestone
No milestone
2 participants
@subhadipbhowmik @rajdeepchakraborty-rc