Try this

Name: Making your porfolio and dont know how to fill the gaps ?
Rating: 1.9 (1061 reviews)
Author: alicheikh

i call it the GCCE

GITHUB CONTRIBUTION CALENDAR EMBED

Ali-Cheikh / GCCE

GitHub contribution calendar for the past 30 days, providing a visual representation of your GitHub activity.

30 Days GitHub Contribution Calendar

- first let me tell you why i made this all the old one's out there have 0 styling in them and takes a lot of time experience and effort to understand,
my layout is simple my code is vanilla its perfect for just putting it in your portfolio but still i do have a problem wich is that you can't commit it
on github without creating a .env file with the token and setting a react and node comunication server thingy wich may risk the code base by adding
tons of modules also can risk your account by making the token not only visible but also setting it up to be usable at least in my layout the token is
just there to read it wont do anyone any good hhhh
+ hope who's reading this can help

…

View on GitHub

index.html


    <div class="calender">
        <p class="port-text"> This is Github My Contribution Calendar of the month </p>
        <center>
            <div class="calendar-container">
                <div id="days-of-week" class="days-of-week"></div>
                <div id="calendar-grid" class="calendar-grid"></div>
                <div class="legend">
                    less
                    <div class="legend-item low" title="Low contributions"></div>
                    <div class="legend-item medium" title="Medium contributions"></div>
                    <div class="legend-item high" title="High contributions"></div>
                    <div class="legend-item very-high" title="Very high contributions"></div>
                    more
                </div>
            </div>
        </center>
      <p class="port-text"> Ali Cheikh 
       <br> <u>using your personal <a href="https://github.com/settings/tokens" class="alink">Github Token</a> you can see your's </p></u>
    </div>

script.js



document.addEventListener('DOMContentLoaded', () => {
    const token = '<u>Replace with your GitHub token</u>'; // replace the text inside the brackets

    const daysOfWeek = document.getElementById('days-of-week');
    const calendarGrid = document.getElementById('calendar-grid');

    const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    let currentDate = new Date();

    function fetchGitHubContributions() {
        const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toISOString();
        const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toISOString();

        const query = `
        {
            viewer {
                contributionsCollection {
                    contributionCalendar {
                        weeks {
                            contributionDays {
                                date
                                contributionCount
                            }
                        }
                    }
                }
            }
        }`;

        return fetch('https://api.github.com/graphql', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ query })
        }).then(response => response.json());
    }

    function renderCalendar(contributions) {
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth();
        const firstDayOfMonth = new Date(year, month, 1).getDay();
        const lastDateOfMonth = new Date(year, month + 1, 0).getDate();

        // Clear previous content
        daysOfWeek.innerHTML = '';
        calendarGrid.innerHTML = '';

        // Render days of the week
        dayNames.forEach(day => {
            const dayElement = document.createElement('div');
            dayElement.className = 'day-of-week';
            dayElement.textContent = day;
            daysOfWeek.appendChild(dayElement);
        });

        // Add empty cells for the days before the first day of the month
        for (let i = 0; i < firstDayOfMonth; i++) {
            const emptyCell = document.createElement('div');
            emptyCell.className = 'date-cell';
            calendarGrid.appendChild(emptyCell);
        }

        // Add cells for each day of the month with contribution levels
        const contributionsMap = new Map(contributions.map(c => [new Date(c.date).getDate(), c.contributionCount]));
        for (let day = 1; day <= lastDateOfMonth; day++) {
            const dateCell = document.createElement('div');
            dateCell.className = 'date-cell';
            dateCell.textContent = day;

            // Set contribution level based on fetched data
            const contributionCount = contributionsMap.get(day) || 0;
            const level = getContributionLevel(contributionCount);
            dateCell.classList.add(level);

            calendarGrid.appendChild(dateCell);
        }
    }

    function getContributionLevel(count) {
      if (count >= 12) return 'very-high';  // For the darkest green
      if (count >= 8) return 'high';        // For the dark green
      if (count >= 1) return 'medium';      // For the light green
      return 'low';                         // For the lightest gray
  }


    function updateCalendar() {
        fetchGitHubContributions().then(data => {
            if (data.data) {
                const contributions = data.data.viewer.contributionsCollection.contributionCalendar.weeks.flatMap(week => week.contributionDays);
                const filteredContributions = contributions.filter(c => {
                    const contributionDate = new Date(c.date);
                    return contributionDate.getFullYear() === currentDate.getFullYear() &&
                           contributionDate.getMonth() === currentDate.getMonth();
                });
                renderCalendar(filteredContributions);
            } else {
                console.error('No contribution data found');
            }
        }).catch(error => console.error('Error fetching data:', error));
    }

    // Initial render
    updateCalendar();
  });

document.querySelectorAll('.legend-item').forEach(item => {
  item.addEventListener('click', () => {
    const level = item.classList[1]; // Get the level class (e.g., "low", "medium", "high", "very-high")
    const newThreshold = prompt(`Enter the new threshold for ${level} contributions:`);
    if (newThreshold !== null) {
      contributionLevels[level] = parseInt(newThreshold);
      updateCalendar();
    }
  });
});

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
  }
.alink:link{
 color:#da3e3e !important;
}
  :root {
    --color-primary: #191d2b;
    --color-secondary: #da3e3e;
    --color-white: #FFFFFF;
    --color-black: #000;
    --color-grey0: #f8f8f8;
    --color-grey-1: #dbe1e8;
    --color-grey-2: #b2becd;
    --color-grey-3: #6c7983;
    --color-grey-4: #a98114;
    --color-grey-5: #2a2e35;
    --color-grey-6: #12181b;
    --br-sm-2: 14px;
    --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);


  }

  body {
    background-color: var(--color-primary);
    font-family: "Poppins", sans-serif;
    font-size: 1.1rem;
    color: var(--color-white);
    transition: all 0.4s ease-in-out;
  }
  .timeline-blog{
      color:var(--color-primary) ;
      font-family: cursive;
  }

  .timeline-blog {
    color:black ;
    font-family: cursive;
    .content-blog{
      background-color: #94bb3b;
    }
  }

  a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
  }

  header {
    min-height: 100vh;
    color: var(--color-white);
    overflow: hidden;
    padding: 0 !important;
  }

  section {
    min-height: 100vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 3rem 18rem;
  }

  .container {
    display: none;
    transform: translateY(-100%) scale(0);
    transition: all 0.4s ease-in-out;
    background-color: var(--color-primary);
  }

  .active {
    display: block;
    animation: appear 1s ease-in-out;
    transform: translateY(0) scaleY(1);
  }
  @keyframes appear {
    0% {
      transform: translateY(-100%) scaleY(0);
    }
    100% {
      transform: translateY(0) scaleY(1);
    }
  }

  body.loaded { overflow: overlay; }

  body.nav-active { overflow: hidden; }

  ::-webkit-scrollbar { width: 5px; }

  ::-webkit-scrollbar-track { background: transparent; }

  ::-webkit-scrollbar-thumb {
    background-color: var(--white);
    border-radius: 20px;
}

.calendar {
    background-color: #1a202c; /* Dark background */
    color: #cbd5e0; /* Light text color */
    display: flex;
    justify-content: center;
    align-items: center;display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    margin-top: 3rem;
  }
  .port-text {
    padding: 2rem 0;
    text-align: center;
  }

  .calendar-container {
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    padding: 10px;
    padding-bottom: 20px;
    position: relative; /* Needed for positioning the legend */
  }

  .days-of-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: #2b2b2b; /* Background for days of the week */
    border-bottom: 1px solid #444;
  }

  .day-of-week {
    text-align: center;
    padding: 5px;
    font-weight: bold;
    font-size: 0.8em; /* Smaller font size for days of the week */
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 10px;
  }

  .date-cell {
    width: 100%;
    height: 20px; /* Smaller height for date cells */
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    background-color: #2e2e2e;
    font-size: 0.8em; /* Smaller font size for dates */
  }
  .date-cell.low {
    background-color: #312f2f; /* Fade gray */
  }

  .date-cell.medium {
    background-color: #c6e48b; /* Light green */
    color: #0009;
  }

  .date-cell.high {
    background-color: #7bc96f; /* Medium green */
    color: #0017;
  }

  .date-cell.very-high {
    background-color: #239a3b; /* Dark green */
  }

  .date-cell:hover {
    background-color: #00ccff2f; /* Light cyan on hover */
  }

  /* New legend styles */
  .legend {
    position: absolute;
    display: flex;
    gap: 5px;
    background-color: #1a202c;
    border-radius: 2px;
    font-size: small;
  }

  /* Styling for individual legend items */
  .legend-item {
    margin-top: 5px;
    width: 10px;
    height: 10px;
    border: 1px solid #444; /* Border color to match the calendar */
  }

  /* Color styles for legend items */
  .legend-item.low {
    background-color: #312f2f; /* Fade gray */
  }

  .legend-item.medium {
    background-color: #c6e48b; /* Light green */
  }

  .legend-item.high {
    background-color: #7bc96f; /* Medium green */
  }

  .legend-item.very-high {
    background-color: #239a3b; /* Dark green */
  }

  /* Optional: Add hover effect for legend items */
  .legend-item:hover {
    border-color: #00ccff; /* Change border color on hover */
  }

/* Additional styles for responsiveness */
@media screen and (max-width: 768px) {
  .calendar-container {
    width: 95%;
  }
  .date-cell {
    height: 30px;
    font-size: 1em;
  }
}

Making your porfolio and dont know how to fill the gaps ?

Try this

links:

Ali-Cheikh / GCCE

GitHub contribution calendar for the past 30 days, providing a visual representation of your GitHub activity.

30 Days GitHub Contribution Calendar