In this article, I want to share with you a cool feature I added to my GitHub project gallery. Now, users can enter their GitHub username and see their own projects along with their profile picture. It's a great way to personalize the gallery and showcase your work. Let's dive into the details of how I implemented this feature.

If you like my project, I would appreciate your support with a star ⭐!

Step 1: Create HTML structure

First things first, I started by creating the HTML structure for my project gallery. I added an input field where users can enter their GitHub username. This will allow us to fetch their projects and profile picture using the GitHub API.

Step 2: Add JavaScript Functions

To make the magic happen, I wrote some JavaScript functions to handle the user input and automatically retrieve the profile picture. The key function here is updateUsername(), which is triggered when the user clicks the "Update" button. Inside this function, I read the username entered by the user, make an API call to GitHub, and load the user's profile picture.

Step 3: Adjust CSS styling

To give the project gallery a polished look, I made some tweaks to the CSS styling. I adjusted existing CSS rules and added some new ones to achieve the desired appearance. Feel free to get creative and customize the styling according to your own taste.

Conclusion:

I'm really excited about this new feature in my GitHub project gallery. Allowing users to enter their GitHub username and automatically retrieve their profile picture adds a personal touch to the gallery. It's a great way to showcase your work and let visitors connect with you on a more personal level. I hope this article inspires you to implement a similar feature in your own projects.

I had a lot of fun working on this feature, and I encourage you to give it a try. Happy coding and exploring the possibilities!