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 ⭐!
SchBenedikt
/
schbenedikt.github.io
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!
Top comments (15)
Good work bro!
still some bugs but I am sure will fix them :)
Thanks for the compliment @mannu,
what problems do you mean? I may have overlooked some of them.
PS: If you like, you can also simply add them to Github, then I'll keep track of them!
Thanks alot,
shBenedikt!
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.
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 givenusername. It retrieves the repositories and their details in a…okiee just let me finish reading the posts
😂
Give yourself as much time as you need!
I appreciate everyone reading this!
@mannu
Without sounding pushy:
Are you still thinking about reporting the bugs?
Thanks!
💀 I am not getting time 😭
OK, never mind!
Now I know!
Yeah thank u
I'll try to do it in free time
@mannu
have you checked out the latest features yet?
Yeah the bug is fixed that I was facing before good work
Ok, then it fits!
If you have any suggestions for improvement, please let me know here or in Github!
Hey @schbenedikt, great project, I really love your idea and I think it is very cool. However, I do agree there are still some improvements on the styling and framework. Are you thinking of making it as Open Source Project?
@laansday
What do you mean if I consider making it open source? The code is already available on Github. Is there anything else I need to consider/change?
Thanks!
Hi, you do not need to change anything, it's more like I am asking if I could contribute to your project, sorry for the misunderstanding
Yes! I would even be happy if you would like to help me with the project!
I once added you as a collaborator on Github - I don't know exactly what you can do there, but I know that it's there for other people to work on the project too!