Are you looking to create a personal portfolio that dynamically showcases your GitHub repositories? In this blog post, I'll guide you through building a web project using HTML, CSS, and JavaScript to display your repositories from GitHub. This is a fantastic way to demonstrate your work and technical skills to potential employers or collaborators.

1. Setup Your Environment

Before starting, ensure you have a text editor (such as VSCode), a web browser, and a GitHub account.

Text Editor: Download and install VSCode.
GitHub Account: Ensure your repositories are public or use a GitHub token for private repositories.

2. Create the Basic Structure

Let's start by setting up the basic file structure for our project.

Project Structure:

/github-repos
  |-- index.html
  |-- style.css
  |-- script.js

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My GitHub Repositories</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>My GitHub Repositories</h1>
    </header>
    <main id="repo-container"></main>
    <script src="script.js"></script>
</body>
</html>

style.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}

#repo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.repo {
    background: #fff;
    margin: 10px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 300px;
}

.repo h2 {
    margin: 0 0 10px;
    font-size: 1.5em;
}

.repo p {
    margin: 0 0 10px;
}

3. Fetch GitHub Repositories

In the script.js file, we will fetch repositories from your GitHub account using the GitHub API.

script.js:

document.addEventListener('DOMContentLoaded', function() {
    const username = 'your-github-username';
    const repoContainer = document.getElementById('repo-container');

    async function fetchRepositories() {
        try {
            const response = await fetch(`https://api.github.com/users/${username}/repos`);
            const repos = await response.json();
            displayRepositories(repos);
        } catch (error) {
            console.error('Error fetching repositories:', error);
        }
    }

    function displayRepositories(repos) {
        repos.forEach(repo => {
            const repoElement = document.createElement('div');
            repoElement.classList.add('repo');

            repoElement.innerHTML = `
                <h2>${repo.name}</h2>
                <p>${repo.description || 'No description available'}</p>
                <a href="${repo.html_url}" target="_blank">View Repository</a>
            `;

            repoContainer.appendChild(repoElement);
        });
    }

    fetchRepositories();
});

4. Display Repositories Dynamically

The displayRepositories function dynamically creates HTML elements for each repository and appends them to the repo-container in the DOM. Each repository card includes the name, description, and a link to the repository.

5. Style the Project

The provided CSS styles ensure that the project has a clean, responsive design. You can customize the styles further to match your personal branding.

6. Deploy Your Project

Once your project is complete, you can deploy it using GitHub Pages for free. Here’s how:

Create a Repository: Create a new repository on GitHub and push your project files.
Enable GitHub Pages: Go to the repository settings, scroll down to the "GitHub Pages" section, and select the branch (e.g., main) and folder (e.g., /root) to deploy from.
Access Your Site: Your site will be available at https://<your-username>.github.io/<repository-name>/.

7. Conclusion

You've now created a dynamic web project to showcase your GitHub repositories using HTML, CSS, and JavaScript. This project not only highlights your technical skills but also serves as an interactive portfolio for potential employers and collaborators.

Feel free to expand on this project by adding more features such as filtering repositories by language, sorting by stars, or including your profile information. Happy coding!

Learn to Build a GitHub Repository Showcase Using HTML, CSS, and JavaScript