mirror of
https://github.com/gmemstr/gmemstr.github.io.git
synced 2024-09-20 04:31:09 +01:00
Dynamic fetching of repos from github, link static projects.
This commit is contained in:
parent
4fe5af1978
commit
acabf1815f
|
@ -1,3 +1,9 @@
|
||||||
# GabrielSimmer.com
|
# GabrielSimmer.com
|
||||||
|
|
||||||
A port of the Nintendo Switch's interface to HTML :)
|
## Rewrite goals
|
||||||
|
|
||||||
|
- [x] Cleaner, original interface
|
||||||
|
- [x] Scaling, breakpoints
|
||||||
|
- [x] More dynamic
|
||||||
|
- [ ] Easier to maintain
|
||||||
|
- [x] No fancy frameworks
|
|
@ -1,24 +1,48 @@
|
||||||
const carousel = document.getElementById("carousel");
|
const carousel = document.getElementById("carousel");
|
||||||
const projects = [
|
let projects = [];
|
||||||
{
|
window.onload = getProjects;
|
||||||
"name": "Pogo",
|
|
||||||
"description": "Self hosted podcast blah blah"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Database Janitor",
|
|
||||||
"description": "Customized MySQL database dumps"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pick random project and place it in the carousel.
|
||||||
|
*/
|
||||||
function carouselProjectPicker() {
|
function carouselProjectPicker() {
|
||||||
let pointer = Math.round(Math.random() * 10 % projects.length) - 1;
|
let pointer = Math.round(Math.random() * 10 % projects.length) - 1;
|
||||||
if (pointer < 0) pointer = 1;
|
if (pointer < 0) pointer = 1;
|
||||||
console.log(pointer);
|
|
||||||
let project = projects[pointer];
|
|
||||||
|
|
||||||
carousel.innerHTML = "<h2>" + project.name + "<small>" + project.description + "</small></h2>";
|
// Create initial anchor element.
|
||||||
|
let project = projects[pointer];
|
||||||
|
let projectElement = document.createElement("a");
|
||||||
|
projectElement.href = project.html_url;
|
||||||
|
projectElement.target = "_blank";
|
||||||
|
projectElement.id = "carousel-project";
|
||||||
|
|
||||||
|
// Create project title element.
|
||||||
|
let projectHeader = document.createElement("h2");
|
||||||
|
let projectHeaderText = document.createTextNode(project.name);
|
||||||
|
projectHeader.appendChild(projectHeaderText);
|
||||||
|
|
||||||
|
// Create project description element.
|
||||||
|
let projectHeaderSmall = document.createElement("small");
|
||||||
|
let projectHeaderSmallText = document.createTextNode(project.description);
|
||||||
|
projectHeaderSmall.appendChild(projectHeaderSmallText);
|
||||||
|
projectHeader.appendChild(projectHeaderSmall);
|
||||||
|
projectElement.appendChild(projectHeader);
|
||||||
|
|
||||||
|
let oldProject = document.getElementById("carousel-project");
|
||||||
|
carousel.replaceChild(projectElement, oldProject);
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = carouselProjectPicker();
|
/**
|
||||||
|
* Fetch projects from GitHub and trigger carousel event and interval.
|
||||||
setInterval(carouselProjectPicker, 10000);
|
*/
|
||||||
|
function getProjects() {
|
||||||
|
fetch("https://api.github.com/users/gmemstr/repos")
|
||||||
|
.then(function (response) {
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(function (apiResult) {
|
||||||
|
projects = apiResult;
|
||||||
|
carouselProjectPicker();
|
||||||
|
setInterval(carouselProjectPicker, 10000);
|
||||||
|
});
|
||||||
|
}
|
|
@ -7,13 +7,19 @@
|
||||||
}
|
}
|
||||||
.more-to-come {
|
.more-to-come {
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
|
min-height: 100px;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
background-color: #454545;
|
background-color: #454545;
|
||||||
color: #f2f2f2;
|
color: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
.profile-image {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: drop-shadow(0 0 4px black);
|
||||||
|
}
|
||||||
header {
|
header {
|
||||||
color: #f2f2f2;
|
color: #f2f2f2;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
@ -22,7 +28,6 @@ header {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
/* filter: drop-shadow(0 0 4px ); */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header small {
|
header small {
|
||||||
|
@ -39,7 +44,6 @@ header small {
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
/* margin: 10px 0; */
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
}
|
}
|
||||||
|
@ -47,12 +51,13 @@ section {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
section span {
|
section span {
|
||||||
|
padding: 10px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
bottom: 20px;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
filter: drop-shadow(0 0 4px black);
|
background-color: rgba(0,0,0,0.8);
|
||||||
}
|
}
|
||||||
section small {
|
section small {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
28
index.html
28
index.html
|
@ -9,9 +9,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header id="header">
|
<header id="header">
|
||||||
<h1>Gabriel Simmer <small>TODO: Tagline</small></h1>
|
<img src="https://avatars2.githubusercontent.com/u/1878840?s=100&v=4" class="profile-image" alt="Github profile image">
|
||||||
|
<h1>Gabriel Simmer</h1>
|
||||||
<div class="check-this-out" id="carousel"></div>
|
<div class="check-this-out" id="carousel">
|
||||||
|
<div id="carousel-project"></div>
|
||||||
|
</div>
|
||||||
<span class="scroll"><a href="#content">
|
<span class="scroll"><a href="#content">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#FFE4A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#FFE4A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
|
||||||
</a></span>
|
</a></span>
|
||||||
|
@ -20,47 +22,47 @@
|
||||||
<main id="content">
|
<main id="content">
|
||||||
<section><img src="assets/project-tiles/gitgalaxy.png" alt="Git Galaxy Logo">
|
<section><img src="assets/project-tiles/gitgalaxy.png" alt="Git Galaxy Logo">
|
||||||
<span>
|
<span>
|
||||||
<h2>Git Galaxy <small>Open source driven blog</small></h2>
|
<a href="https://gitgalaxy.com" target="_blank"><h2>Git Galaxy <small>Open source driven blog</small></h2></a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section><img src="assets/project-tiles/pogo.png" alt="Pogo Logo">
|
<section><img src="assets/project-tiles/pogo.png" alt="Pogo Logo">
|
||||||
<span>
|
<span>
|
||||||
<h2>Pogo <small>Self hosted podcast publishing and RSS</small></h2>
|
<a href="https://github.com/gmemstr/pogo" target="_blank"><h2>Pogo <small>Self hosted podcast publishing and RSS</small></h2></a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section><img src="assets/project-tiles/nodemc.png" alt="NodeMC Logo">
|
<section><img src="assets/project-tiles/nodemc.png" alt="NodeMC Logo">
|
||||||
<span>
|
<span>
|
||||||
<h2>NodeMC <small>Minecraft server wrapper for Nodejs</small></h2>
|
<a href="https://github.com/nodemc" target="_blank"><h2>NodeMC <small>Minecraft server wrapper for Nodejs</small></h2></a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section><img src="assets/project-tiles/alexanders.jpg" alt="Alexander Printing API module Logo">
|
<section><img src="assets/project-tiles/alexanders.jpg" alt="Alexander Printing API module Logo">
|
||||||
<span>
|
<span>
|
||||||
<h2>Alexanders <small>Printing API module for Drupal</small></h2>
|
<a href="https://drupal.org/project/alexanders" target="_blank"><h2>Alexanders <small>Alexanders Printing API module for Drupal</small></h2></a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section><img src="assets/project-tiles/approve.jpg" alt="Commerce Approve module Logo">
|
<section><img src="assets/project-tiles/approve.jpg" alt="Commerce Approve module Logo">
|
||||||
<span>
|
<span>
|
||||||
<h2>Commerce Approve <small>Printing API module for Drupal</small></h2>
|
<a href="https://drupal.org/project/commerce_approve" target="_blank"><h2>Commerce Approve <small>Require manual approval of Commerce orders.</small></h2></a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section><img src="assets/project-tiles/quicklook.jpg" alt="Commerce Approve module Logo">
|
<section><img src="assets/project-tiles/quicklook.jpg" alt="Entity quicklook module Logo">
|
||||||
<span>
|
<span>
|
||||||
<h2>Commerce Approve <small>Printing API module for Drupal</small></h2>
|
<a href="https://drupal.org/project/entity_quicklook" target="_blank"><h2>Entity Quicklook <small>Quicklook modal for entity displays.</small></h2></a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section><img src="assets/project-tiles/quantity-pricing.jpg" alt="Commerce Approve module Logo">
|
<section><img src="assets/project-tiles/quantity-pricing.jpg" alt="Commerce Approve module Logo">
|
||||||
<span>
|
<span>
|
||||||
<h2>Commerce Approve <small>Printing API module for Drupal</small></h2>
|
<a href="https://drupal.org/project/commerce_quantity_pricing" target="_blank"><h2>Commerce Quantity Pricing <small>Allow bulk discounts on order items.</small></h2></a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section><img src="assets/project-tiles/vado.jpg" alt="Commerce Approve module Logo">
|
<section><img src="assets/project-tiles/vado.jpg" alt="Commerce Approve module Logo">
|
||||||
<span>
|
<span>
|
||||||
<h2>Commerce Approve <small>Printing API module for Drupal</small></h2>
|
<a href="https://drupal.org/project/commerce_vado" target="_blank"><h2>Commerce Vado <small>Add-on product variations for order items.</small></h2></a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section><img src="assets/project-tiles/other.png" alt="GitHub Profile Screenshot">
|
<section><img src="assets/project-tiles/other.png" alt="GitHub Profile Screenshot">
|
||||||
<span>
|
<span>
|
||||||
<h2>GitHub Projects <small>Misc. open source projects</small></h2>
|
<a href="https://github.com/gmemstr" target="_blank"><h2>GitHub Projects <small>Misc. open source projects</small></h2></a>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<section class="more-to-come">
|
<section class="more-to-come">
|
||||||
|
|
Loading…
Reference in a new issue