A comprehensive guide on creating a Neumorphism website that showcases GitHub projects using the GitHub API.
If you like my project, I would be happy about a like 💌!
I would also appreciate comments!
Screenshots can be found below!
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…
Introduction
In this article, we'll explore the creation of a Neumorphism website that serves as a visual showcase for GitHub projects. The website utilizes the GitHub API to fetch project data and presents it in an appealing and user-friendly format. We'll dive into the story behind the project, its functionality, and the design effects incorporated to enhance the overall experience.
The Story
Motivation and Inspiration
Every developer knows the importance of having a solid portfolio that showcases their work. As a developer myself, I wanted to create a visually stunning website that highlights my GitHub projects and allows visitors to explore them easily. Inspired by the rising trend of Neumorphism design, I decided to incorporate this modern design style into the project to provide a unique and engaging experience.
Project Goals
The primary goal of this project was to build a website that dynamically fetches GitHub project data using the GitHub API. The website would display the projects in an organized and visually appealing manner, with additional design effects to enhance the user experience. The final product would serve as a portfolio and demonstrate my skills as a developer.
Functionality
Fetching GitHub Projects
To fetch GitHub project data, we utilize the power of the GitHub API. By making a request to the API endpoint with the desired username, we retrieve the repositories and their details in a JSON format. This functionality is encapsulated in the getGitHubProjects(username) function, which handles the API call and returns the fetched data.
Creating Project Cards
Once the project data is fetched, we dynamically generate project cards based on the retrieved information. Each card represents a GitHub repository and displays key details such as the project name, a brief description, and a link to view the project on GitHub. The createProjectCards(projects) function takes care of generating these project cards and appending them to the website's Projects section.
Getting README.md Content
To provide more information about each project, we fetch the content of the corresponding README.md file using the GitHub API. The getReadmeContent(username, repoName) function fetches the raw Markdown content from the API and processes it for rendering. This functionality allows visitors to explore the project details, including the project's documentation and usage instructions.
Opening the Overlay
When a project card is clicked, we open an overlay that displays the content of the project's README.md file. This overlay provides a distraction-free reading experience, allowing users to focus on the project details. The overlay is designed to be sleek and modern, centered on the screen, and adjusts its size to fit the content.
Closing the Overlay
Users can easily close the overlay by clicking on the close button or outside the overlay area. The closeOverlay() function gracefully fades out the overlay, providing a smooth transition back to the main projects view.
Automatically Filled About Me Description
One unique feature of this website is the automatically filled About Me section in the sidebar. The content for this section is fetched from the README.md file of the repository that has the same name as the username. This functionality allows developers to provide a brief introduction and share more about themselves with visitors.
Design Effects
To create an engaging and visually appealing experience, we incorporate several design effects into the website:
Neumorphism Design
Neumorphism design is a rising trend that combines elements of skeuomorphism and flat design. It creates a soft and subtle three-dimensional appearance, giving the user interface a modern and elegant look. The project cards, overlays, and other elements of the website are designed with Neumorphism principles to provide a visually pleasing experience.
Responsive Layout [Soon available]
The website features a responsive layout that adapts to different screen sizes. This ensures optimal usability and readability across devices, including desktops, tablets, and mobile devices. Users can explore the GitHub projects seamlessly, regardless of the device they're using.
Smooth Transitions
Opening and closing the overlay is accompanied by smooth transition effects. The overlays gracefully appear and disappear, enhancing the overall user experience. These smooth transitions create a seamless flow between the main projects view and the detailed project information.
Subtle Shadows
To add depth and dimension to the design, subtle box shadows are applied to project cards and the overlay container. These shadows create a visual separation between elements and contribute to the Neumorphism design style.
Attention to Typography
Careful attention has been given to typography throughout the website. Appropriate font styles, sizes, and line heights are used to ensure optimal readability and visual harmony. The choice of fonts complements the overall design aesthetic and contributes to a polished user experience.
Engaging Hover Effects
Interactive hover effects are applied to project cards, providing visual feedback and enhancing the interactive nature of the website. When users hover over a project card, it subtly transforms to create an engaging and dynamic experience.
Conclusion
In this article, we explored the creation of a Neumorphism website that showcases GitHub projects using the GitHub API. We discussed the motivation behind the project, its functionality, and the design effects incorporated to enhance the user experience. By dynamically fetching project data, displaying it in an appealing format, and providing a distraction-free reading experience, the website serves as a powerful portfolio tool for developers.
Feel free to explore the project's GitHub repository to dive into the code and customize it according to your preferences. By leveraging the GitHub API and incorporating modern design trends, you can create your own visually stunning showcase of GitHub projects.
I hope this article has inspired you to create your own Neumorphism website and explore the possibilities of integrating APIs to enhance your projects.
Happy coding!
Top comments (6)
here's some feedback
I like it in general
there's way too much popping out, which is distracting. container certainly doesnt need to pop out. very annoying
not responsive, as seen in codepen preview.
@diomed
Thank you for your feedback!
Personally I think the effects are nice (just MY opinion) but maybe I'll add a button to disable effects soon.
I already wrote about the responsive design above; I'm working on it right now and I hope it will be available soon!
What other features would you like?
Please let me know!
Thank you for your opinion,
schBenedikt
NEW UPDATE:
Neumorphism Website + Github API (🔍;📱)
Benedikt Schächner ・ Jul 16
For the next big feature update I'll write a new post again (it will be a series). But in Codepen you can already see that I have added a search for the repositories (not on Github yet).
effects ARE nice, but you overdid it. container shouldnt pop out.
Not everything should pop out. you gotta find that thin line of not overdoing it.
OK, ich changed it.
👍
In 2023, web design is not just about aesthetics; it's about creating a seamless user experience that captivates your audience from the moment they land on your website. As we delve into the latest website design trends, it's clear that businesses in Dallas and beyond are recognizing the importance of local relevance. Incorporating the unique spirit and culture of Dallas into your web design can truly set your online presence apart. So, when you embark on your next website design project in the heart of Texas, remember that it's not just about pixels and layouts; it's about connecting with your audience on a personal level. After all, in the world of website design, Dallas has a distinct charm that deserves to shine.