Skip to content

Commit

Permalink
Create project.html
Browse files Browse the repository at this point in the history
  • Loading branch information
Bacon_Space committed Jan 6, 2024
1 parent 9d89e8c commit e635eed
Showing 1 changed file with 223 additions and 0 deletions.
223 changes: 223 additions & 0 deletions project.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TheBaconSpace's Profile</title>
<!-- Include Bootstrap 5.3.0 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include Font Awesome 6.4.2 CSS -->
<meta property="twitter:card" content="summary_large_image" />
<meta name="description" content="TheBaconSpace's Social Links">
<meta name="keywords" content="Twitch, Wrestling, TheBaconSpace">

<meta name="robots" content="noindex, nofollow">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- Custom CSS for styling -->
<link rel="icon" type="image/x-icon" href="default-favicon.ico" id="favicon">
<meta name="og:image" content="https://avatars.githubusercontent.com/u/16171045?v=4" id="og-image">
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/16171045?v=4" id="twitter-image">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
text-align: -webkit-center;
}

header {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 20px 0;
}

h1 {
font-size: 36px;
margin: 10px 0;
}

p {
font-size: 18px;
}

main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

footer {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 10px 0;
}

b {
text-align: -webkit-center;
}
</style>
</head>

<body>
<header>
<h1>TheBaconSpace</h1>
<p>Welcome to my profile!</p>
</header>
<main>
<section id="social-links">
<!-- Social links will be dynamically loaded here -->
</section>
</main>
<div class="container mt-3">
<h1>TheBaconSpace's Repositories</h1>

<!-- Placeholder for the list of repositories -->
<div id="repo-cards" class="card-columns">
<!-- Repository cards will be dynamically added here using JavaScript -->
</div>
</div>
<footer>
&copy; <span id="current-year"></span> TheBaconSpace <!-- Update the year here too -->
</footer>
<!-- Include Bootstrap 5.3.0 JS (Popper.js and Bootstrap JS) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Include Moment.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- JavaScript to fetch and display GitHub repositories -->
<script>
// Function to generate a random color excluding unreadable colors and white
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
do {
color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
} while (isUnreadableColor(color) || color === '#FFFFFF'); // Exclude unreadable and white colors
return color;
}

// Function to check if a color is unreadable
function isUnreadableColor(hexColor) {
// Check if the color is too bright (light text on light background) or too dark (dark text on dark background)
const rgb = parseInt(hexColor.substring(1), 16);
const r = (rgb >> 16) & 0xff;
const g = (rgb >> 8) & 0xff;
const b = (rgb >> 0) & 0xff;

const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 200 || brightness < 50; // Modify these thresholds as needed
}

// Fetch and render social links
function fetchAndRenderSocialLinks() {
// Fetch the social links from the JSON file
fetch("https://thebaconspace.github.io/social_links.json")
.then((response) => response.json())
.then((data) => {
const socialLinksSection = document.getElementById("social-links");

// Clear existing social links
socialLinksSection.innerHTML = '';

// Generate buttons for each social link
data.socialLinks.forEach((link) => {
const socialButton = document.createElement("a");
socialButton.href = link.url;
socialButton.target = "_blank";
socialButton.style.textAlign = "-webkit-center";
socialButton.className = "btn btn-outline-primary mr-2 mb-2"; // Add margin to the right and bottom
socialButton.innerHTML = `${link.name} <i class="${link.icon}"></i>`;

socialLinksSection.appendChild(socialButton);
});
})
.catch((error) => {
console.error("Error loading social links:", error);
});
}

// Fetch repositories from GitHub API
fetch('https://api.github.com/users/TheBaconSpace/repos')
.then(response => response.json())
.then(repos => {
// Select the container for repository cards
const repoCards = document.getElementById('repo-cards');

// Iterate through the repositories and create cards
repos.forEach(repo => {
// Create card element
const card = document.createElement('div');
card.classList.add('card', 'mb-3');

// Include card header template
card.innerHTML = `
<h3 class="card-header">${repo.name}</h3>
<div class="card-body">
<h5 class="card-title">${repo.description || `Plugin For Fivem Server Called TheBaconSpace`}</h5>
<h6 class="card-subtitle text-muted"></h6>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Stars
<span class="badge bg-primary rounded-pill">${repo.stargazers_count}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Watchers
<span class="badge bg-primary rounded-pill">${repo.watchers_count}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Forks
<span class="badge bg-primary rounded-pill">${repo.forks_count}</span>
</li>
</ul>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200"
aria-label="${repo.name}" focusable="false" role="img" preserveAspectRatio="xMidYMid slice"
viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
<rect width="100%" height="100%" fill="${getRandomColor()}"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">${repo.name}</text>
</svg>
<ul class="list-group list-group-flush">
<li class="list-group-item">${repo.description || `Plugin For Fivem Server Called TheBaconSpace`}</li>
</ul>
<div class="card-body">
<a href="${repo.html_url}" class="card-link">Link</a>
</div>
<div class="card-footer text-muted" id="repo-created-at-${repo.id}"></div>
`;

// Format and set the created_at timestamp using Moment.js
const createdTimestamp = moment(repo.created_at).fromNow();
const createdAtElement = card.querySelector(`#repo-created-at-${repo.id}`);
createdAtElement.textContent = `Created ${createdTimestamp}`;

// Append the card to the container
repoCards.appendChild(card);
});
})
.catch(error => console.error('Error fetching repositories:', error));

// Update the current year in the specified timezone
const currentYearElement = document.getElementById('current-year');
const timezone = 'America/Toronto'; // Specify your desired timezone here
const currentYear = getCurrentYearInTimeZone(timezone);
currentYearElement.textContent = currentYear;

// Fetch and render social links initially
fetchAndRenderSocialLinks();

// Automatically refresh social links every 3 minutes (180,000 milliseconds)
setInterval(fetchAndRenderSocialLinks, 3 * 60 * 1000); // 3 minutes in milliseconds
</script>
</body>

</html>

0 comments on commit e635eed

Please sign in to comment.