DEV Community

Cover image for Neumorphism Website + Github API (Part 3)
schBenedikt
schBenedikt

Posted on

Neumorphism Website + Github API (Part 3)

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 ⭐!



GitHub logo 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 ⭐!


image image image image


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)

Collapse
 
mannu profile image
Mannu

Good work bro!
still some bugs but I am sure will fix them :)

Collapse
 
schbenedikt profile image
schBenedikt

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!


GitHub logo 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 !


Screenshot Screenshot Screenshot Screenshot


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…

Collapse
 
mannu profile image
Mannu

okiee just let me finish reading the posts

Thread Thread
 
schbenedikt profile image
schBenedikt

😂
Give yourself as much time as you need!
I appreciate everyone reading this!

Collapse
 
schbenedikt profile image
schBenedikt

@mannu
Without sounding pushy:
Are you still thinking about reporting the bugs?
Thanks!

Collapse
 
mannu profile image
Mannu

💀 I am not getting time 😭

Thread Thread
 
schbenedikt profile image
schBenedikt

OK, never mind!
Now I know!

Thread Thread
 
mannu profile image
Mannu

Yeah thank u
I'll try to do it in free time

Thread Thread
 
schbenedikt profile image
schBenedikt

@mannu
have you checked out the latest features yet?

Thread Thread
 
mannu profile image
Mannu

Yeah the bug is fixed that I was facing before good work

Thread Thread
 
schbenedikt profile image
schBenedikt

Ok, then it fits!
If you have any suggestions for improvement, please let me know here or in Github!

Collapse
 
laansday profile image
Tony Do

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?

Collapse
 
schbenedikt profile image
schBenedikt

@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!

Collapse
 
laansday profile image
Tony Do

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

Thread Thread
 
schbenedikt profile image
schBenedikt

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!

Image description