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 ⭐!
My amazing neumorphism html & css website using Github API hosted with github
Neumorphism Website + Github API
This project showcases my GitHub repositories and allows you to explore the projects I've been working on. It uses the GitHub API to fetch the project data and displays it in a user-friendly format.
❗THERE IS A LIMITED TOKEN REQUEST; WHY IT MAY BE PARTIALLY NOT WORKING!❗
If you like my project, I would appreciate your support with a star ⭐!
Introduction
Welcome to my GitHub Projects showcase! This project highlights the repositories I've been working on and provides a visually appealing and user-friendly interface to explore them. It utilizes the GitHub API to fetch the project data and incorporates various design effects to enhance the overall experience.
Functionality
Fetching GitHub Projects
The getGitHubProjects(username) function leverages the power of the GitHub API to fetch the project data associated with a given username. It retrieves the repositories and their details in a JSON format, allowing…
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!
Good work bro!
still some bugs but I am sure will fix them :)