Skip to content

Commit

Permalink
Update Project.html
Browse files Browse the repository at this point in the history
  • Loading branch information
Bacon_Space committed Jan 6, 2024
1 parent 987df51 commit f75a155
Showing 1 changed file with 73 additions and 152 deletions.
225 changes: 73 additions & 152 deletions Project.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
<!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://bootswatch.com/5/quartz/bootstrap.min.css" rel="stylesheet">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="description" content="Bacon_Space's Social's" />
<meta name="keywords" content="Twitch, Wrestling, Bacon_Space" />
<meta name="robots" content="noindex, nofollow" />
<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" />
<title>Bacon_Space</title>
<!-- Include Bootstrap 5.3.0 CSS -->
<link href="https://bootswatch.com/5/vapor/bootstrap.min.css" rel="stylesheet" />
<!-- Include Font Awesome 6.4.2 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-FJYwNIZOrZoEryj6Oo9VpokExWz9tG+QN/wdoAXTxFImAOoCh4vBuG3AI3fzJWXISL+1RMryU+X1g19WNwEM8g==" crossorigin="anonymous" />
<!-- Custom CSS for styling -->
<link rel="icon" type="image/x-icon" href="default-favicon.ico" id="favicon" />
<style>
body {
font-family: Arial, sans-serif;
Expand All @@ -18,23 +24,19 @@
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;
Expand All @@ -43,80 +45,67 @@
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="row">
<!-- 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 -->
<!-- JavaScript code starts here -->
<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 get the current year in the specified timezone
function getCurrentYearInTimeZone(timezone) {
const options = { year: 'numeric', timeZone: timezone };
const formatter = new Intl.DateTimeFormat('en-US', options);
const currentYear = formatter.format(new Date());
return currentYear;
}

// 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;
// Fetch TheBaconSpace user's avatar and repository creation date from GitHub API
fetch('https://api.github.com/users/TheBaconSpace')
.then(response => response.json())
.then(data => {
// Extract the avatar URL and repository creation date from the API response
const avatarUrl = data.avatar_url;
const repositoryCreatedAt = new Date(data.created_at);

const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 200 || brightness < 50; // Modify these thresholds as needed
}
// Update the href attribute of the favicon link
const favicon = document.getElementById('favicon');
favicon.href = avatarUrl;

// Function to fetch social links from the specified JSON file
// 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 = `${repositoryCreatedAt.getFullYear()} - ${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
})
.catch(error => {
console.error('Error fetching data from GitHub:', error);
});

// Function to fetch and render social links
function fetchAndRenderSocialLinks() {
fetch("https://thebaconspace.github.io/links.json")
.then(response => response.json())
.then(data => {
// Fetch the social links from the JSON file (replace with your actual JSON file URL)
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.Links.forEach(link => {
data.socialLinks.forEach((link) => {
const socialButton = document.createElement("a");
socialButton.href = link.url;
socialButton.target = "_blank";
Expand All @@ -129,95 +118,27 @@ <h1>TheBaconSpace's Repositories</h1>
socialLinksSection.appendChild(socialButton);
});
})
.catch(error => {
.catch((error) => {
console.error("Error loading social links:", error);
});
}

// Function to fetch repositories from GitHub API and render cards
function fetchAndRenderRepositories() {
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');

// Clear existing repository cards
repoCards.innerHTML = '';

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

// Include card header template
card.innerHTML = `
<h3 class="card-header">${repo.name}</h3>
<div class="card-body">
<h5 class="card-title">${repo.description || `My Project`}</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 || `My Project`}</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 = `${repositoryCreatedAt.getFullYear()} - ${currentYear}`;
}

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

// Fetch and render repositories initially
fetchAndRenderRepositories();

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

// Update the current year
updateCurrentYear();
</script>
<!-- JavaScript code ends here -->
</head>
<body>
<header>
<h1>Bacon_Space</h1>
<p>Welcome to my profile!</p>
</header>
<main>
<section id="social-links">
<!-- Social links will be dynamically loaded here -->
</section>
</main>
<footer>
&copy; <span id="current-year"></span> Bacon_Space
</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>
</body>

</html>

0 comments on commit f75a155

Please sign in to comment.