DEV Community

Cover image for Neumorphism Website + Github API 🤯
Benedikt Schächner
Benedikt Schächner

Posted on • Updated on

Neumorphism Website + Github API 🤯

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!

GitHub logo SchBenedikt /

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

image image image image


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.


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…


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.


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 Content

To provide more information about each project, we fetch the content of the corresponding 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 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 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.


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!

Image description

Image description

Image description

Top comments (6)

diomed profile image
May Kittens Devour Your Soul

here's some feedback

  1. I like it in general

  2. there's way too much popping out, which is distracting. container certainly doesnt need to pop out. very annoying

  3. not responsive, as seen in codepen preview.

schbenedikt profile image
Benedikt Schächner • Edited

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 profile image
Benedikt Schächner

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).

diomed profile image
May Kittens Devour Your Soul

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.

Thread Thread
schbenedikt profile image
Benedikt Schächner

OK, ich changed it.


luisstrive profile image

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.