Skip to content

Commit f75a155

Browse files
author
Bacon_Space
authored
Update Project.html
1 parent 987df51 commit f75a155

File tree

1 file changed

+73
-152
lines changed

1 file changed

+73
-152
lines changed

‎Project.html

Lines changed: 73 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>TheBaconSpace's Profile</title>
8-
<!-- Include Bootstrap 5.3.0 CSS -->
9-
<link href="https://bootswatch.com/5/quartz/bootstrap.min.css" rel="stylesheet">
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="twitter:card" content="summary_large_image" />
7+
<meta name="description" content="Bacon_Space's Social's" />
8+
<meta name="keywords" content="Twitch, Wrestling, Bacon_Space" />
9+
<meta name="robots" content="noindex, nofollow" />
10+
<meta name="og:image" content="https://avatars.githubusercontent.com/u/16171045?v=4" id="og-image" />
11+
<meta name="twitter:image" content="https://avatars.githubusercontent.com/u/16171045?v=4" id="twitter-image" />
12+
<title>Bacon_Space</title>
13+
<!-- Include Bootstrap 5.3.0 CSS -->
14+
<link href="https://bootswatch.com/5/vapor/bootstrap.min.css" rel="stylesheet" />
1015
<!-- Include Font Awesome 6.4.2 CSS -->
11-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
16+
<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" />
1217
<!-- Custom CSS for styling -->
18+
<link rel="icon" type="image/x-icon" href="default-favicon.ico" id="favicon" />
1319
<style>
1420
body {
1521
font-family: Arial, sans-serif;
@@ -18,23 +24,19 @@
1824
padding: 0;
1925
text-align: -webkit-center;
2026
}
21-
2227
header {
2328
background-color: #007bff;
2429
color: #fff;
2530
text-align: center;
2631
padding: 20px 0;
2732
}
28-
2933
h1 {
3034
font-size: 36px;
3135
margin: 10px 0;
3236
}
33-
3437
p {
3538
font-size: 18px;
3639
}
37-
3840
main {
3941
max-width: 800px;
4042
margin: 20px auto;
@@ -43,80 +45,67 @@
4345
border-radius: 5px;
4446
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
4547
}
46-
4748
footer {
4849
background-color: #007bff;
4950
color: #fff;
5051
text-align: center;
5152
padding: 10px 0;
5253
}
54+
b {
55+
text-align: -webkit-center;
56+
}
5357
</style>
54-
</head>
55-
56-
<body>
57-
<header>
58-
<h1>TheBaconSpace</h1>
59-
<p>Welcome to my profile!</p>
60-
</header>
61-
<main>
62-
<section id="social-links">
63-
<!-- Social links will be dynamically loaded here -->
64-
</section>
65-
</main>
66-
<div class="container mt-3">
67-
<h1>TheBaconSpace's Repositories</h1>
68-
69-
<!-- Placeholder for the list of repositories -->
70-
<div id="repo-cards" class="row">
71-
<!-- Repository cards will be dynamically added here using JavaScript -->
72-
</div>
73-
</div>
74-
<footer>
75-
&copy; <span id="current-year"></span> TheBaconSpace <!-- Update the year here too -->
76-
</footer>
77-
<!-- Include Bootstrap 5.3.0 JS (Popper.js and Bootstrap JS) -->
78-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
79-
<!-- Include Moment.js CDN -->
80-
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
81-
<!-- JavaScript to fetch and display GitHub repositories -->
58+
<!-- JavaScript code starts here -->
8259
<script>
83-
// Function to generate a random color excluding unreadable colors and white
84-
function getRandomColor() {
85-
const letters = '0123456789ABCDEF';
86-
let color = '#';
87-
do {
88-
color = '#';
89-
for (let i = 0; i < 6; i++) {
90-
color += letters[Math.floor(Math.random() * 16)];
91-
}
92-
} while (isUnreadableColor(color) || color === '#FFFFFF'); // Exclude unreadable and white colors
93-
return color;
60+
// Function to get the current year in the specified timezone
61+
function getCurrentYearInTimeZone(timezone) {
62+
const options = { year: 'numeric', timeZone: timezone };
63+
const formatter = new Intl.DateTimeFormat('en-US', options);
64+
const currentYear = formatter.format(new Date());
65+
return currentYear;
9466
}
9567

96-
// Function to check if a color is unreadable
97-
function isUnreadableColor(hexColor) {
98-
// Check if the color is too bright (light text on light background) or too dark (dark text on dark background)
99-
const rgb = parseInt(hexColor.substring(1), 16);
100-
const r = (rgb >> 16) & 0xff;
101-
const g = (rgb >> 8) & 0xff;
102-
const b = (rgb >> 0) & 0xff;
68+
// Fetch TheBaconSpace user's avatar and repository creation date from GitHub API
69+
fetch('https://api.github.com/users/TheBaconSpace')
70+
.then(response => response.json())
71+
.then(data => {
72+
// Extract the avatar URL and repository creation date from the API response
73+
const avatarUrl = data.avatar_url;
74+
const repositoryCreatedAt = new Date(data.created_at);
10375

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

108-
// Function to fetch social links from the specified JSON file
80+
// Update the current year in the specified timezone
81+
const currentYearElement = document.getElementById('current-year');
82+
const timezone = 'America/Toronto'; // Specify your desired timezone here
83+
const currentYear = getCurrentYearInTimeZone(timezone);
84+
currentYearElement.textContent = `${repositoryCreatedAt.getFullYear()} - ${currentYear}`;
85+
86+
// Fetch and render social links initially
87+
fetchAndRenderSocialLinks();
88+
89+
// Automatically refresh social links every 3 minutes (180,000 milliseconds)
90+
setInterval(fetchAndRenderSocialLinks, 3 * 60 * 1000); // 3 minutes in milliseconds
91+
})
92+
.catch(error => {
93+
console.error('Error fetching data from GitHub:', error);
94+
});
95+
96+
// Function to fetch and render social links
10997
function fetchAndRenderSocialLinks() {
110-
fetch("https://thebaconspace.github.io/links.json")
111-
.then(response => response.json())
112-
.then(data => {
98+
// Fetch the social links from the JSON file (replace with your actual JSON file URL)
99+
fetch("https://thebaconspace.github.io/social_links.json")
100+
.then((response) => response.json())
101+
.then((data) => {
113102
const socialLinksSection = document.getElementById("social-links");
114103

115104
// Clear existing social links
116105
socialLinksSection.innerHTML = '';
117106

118107
// Generate buttons for each social link
119-
data.Links.forEach(link => {
108+
data.socialLinks.forEach((link) => {
120109
const socialButton = document.createElement("a");
121110
socialButton.href = link.url;
122111
socialButton.target = "_blank";
@@ -129,95 +118,27 @@ <h1>TheBaconSpace's Repositories</h1>
129118
socialLinksSection.appendChild(socialButton);
130119
});
131120
})
132-
.catch(error => {
121+
.catch((error) => {
133122
console.error("Error loading social links:", error);
134123
});
135124
}
136-
137-
// Function to fetch repositories from GitHub API and render cards
138-
function fetchAndRenderRepositories() {
139-
fetch('https://api.github.com/users/TheBaconSpace/repos')
140-
.then(response => response.json())
141-
.then(repos => {
142-
// Select the container for repository cards
143-
const repoCards = document.getElementById('repo-cards');
144-
145-
// Clear existing repository cards
146-
repoCards.innerHTML = '';
147-
148-
// Iterate through the repositories and create cards
149-
repos.forEach(repo => {
150-
// Create card element
151-
const card = document.createElement('div');
152-
card.classList.add('card', 'mb-3', 'col-md-6');
153-
154-
// Include card header template
155-
card.innerHTML = `
156-
<h3 class="card-header">${repo.name}</h3>
157-
<div class="card-body">
158-
<h5 class="card-title">${repo.description || `My Project`}</h5>
159-
<h6 class="card-subtitle text-muted"></h6>
160-
<ul class="list-group">
161-
<li class="list-group-item d-flex justify-content-between align-items-center">
162-
Stars
163-
<span class="badge bg-primary rounded-pill">${repo.stargazers_count}</span>
164-
</li>
165-
<li class="list-group-item d-flex justify-content-between align-items-center">
166-
Watchers
167-
<span class="badge bg-primary rounded-pill">${repo.watchers_count}</span>
168-
</li>
169-
<li class="list-group-item d-flex justify-content-between align-items-center">
170-
Forks
171-
<span class="badge bg-primary rounded-pill">${repo.forks_count}</span>
172-
</li>
173-
</ul>
174-
</div>
175-
<svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200"
176-
aria-label="${repo.name}" focusable="false" role="img" preserveAspectRatio="xMidYMid slice"
177-
viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
178-
<rect width="100%" height="100%" fill="${getRandomColor()}"></rect>
179-
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">${repo.name}</text>
180-
</svg>
181-
<ul class="list-group list-group-flush">
182-
<li class="list-group-item">${repo.description || `My Project`}</li>
183-
</ul>
184-
<div class="card-body">
185-
<a href="${repo.html_url}" class="card-link">Link</a>
186-
</div>
187-
<div class="card-footer text-muted" id="repo-created-at-${repo.id}"></div>
188-
`;
189-
190-
// Format and set the created_at timestamp using Moment.js
191-
const createdTimestamp = moment(repo.created_at).fromNow();
192-
const createdAtElement = card.querySelector(`#repo-created-at-${repo.id}`);
193-
createdAtElement.textContent = `Created ${createdTimestamp}`;
194-
195-
// Append the card to the container
196-
repoCards.appendChild(card);
197-
});
198-
})
199-
.catch(error => console.error('Error fetching repositories:', error));
200-
}
201-
202-
// Update the current year in the specified timezone
203-
const currentYearElement = document.getElementById('current-year');
204-
const timezone = 'America/Toronto'; // Specify your desired timezone here
205-
const currentYear = getCurrentYearInTimeZone(timezone);
206-
currentYearElement.textContent = `${repositoryCreatedAt.getFullYear()} - ${currentYear}`;
207-
}
208-
209-
// Fetch and render social links initially
210-
fetchAndRenderSocialLinks();
211-
212-
// Fetch and render repositories initially
213-
fetchAndRenderRepositories();
214-
215-
// Automatically refresh social links every 3 minutes (180,000 milliseconds)
216-
setInterval(fetchAndRenderSocialLinks, 3 * 60 * 1000); // 3 minutes in milliseconds
217-
218-
// Update the current year
219-
updateCurrentYear();
220125
</script>
126+
<!-- JavaScript code ends here -->
127+
</head>
128+
<body>
129+
<header>
130+
<h1>Bacon_Space</h1>
131+
<p>Welcome to my profile!</p>
132+
</header>
133+
<main>
134+
<section id="social-links">
135+
<!-- Social links will be dynamically loaded here -->
136+
</section>
137+
</main>
138+
<footer>
139+
&copy; <span id="current-year"></span> Bacon_Space
140+
</footer>
141+
<!-- Include Bootstrap 5.3.0 JS (Popper.js and Bootstrap JS) -->
142+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
221143
</body>
222-
223144
</html>

0 commit comments

Comments
 (0)