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:
Gabriel Simmer
parent
4fe5af1978
commit
acabf1815f
|
|
@ -1,3 +1,9 @@
|
|||
# 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 projects = [
|
||||
{
|
||||
"name": "Pogo",
|
||||
"description": "Self hosted podcast blah blah"
|
||||
},
|
||||
{
|
||||
"name": "Database Janitor",
|
||||
"description": "Customized MySQL database dumps"
|
||||
}
|
||||
]
|
||||
let projects = [];
|
||||
window.onload = getProjects;
|
||||
|
||||
/**
|
||||
* Pick random project and place it in the carousel.
|
||||
*/
|
||||
function carouselProjectPicker() {
|
||||
let pointer = Math.round(Math.random() * 10 % projects.length) - 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.
|
||||
*/
|
||||
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 {
|
||||
background-color: var(--secondary);
|
||||
min-height: 100px;
|
||||
}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background-color: #454545;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
filter: drop-shadow(0 0 4px black);
|
||||
}
|
||||
header {
|
||||
color: #f2f2f2;
|
||||
height: 100vh;
|
||||
|
|
@ -22,7 +28,6 @@ header {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
/* filter: drop-shadow(0 0 4px ); */
|
||||
}
|
||||
|
||||
header small {
|
||||
|
|
@ -39,7 +44,6 @@ header small {
|
|||
}
|
||||
|
||||
main {
|
||||
/* margin: 10px 0; */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
|
@ -47,12 +51,13 @@ section {
|
|||
position: relative;
|
||||
}
|
||||
section span {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
bottom: 20px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
filter: drop-shadow(0 0 4px black);
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
}
|
||||
section small {
|
||||
display: block;
|
||||
|
|
|
|||
28
index.html
28
index.html
|
|
@ -9,9 +9,11 @@
|
|||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<h1>Gabriel Simmer <small>TODO: Tagline</small></h1>
|
||||
|
||||
<div class="check-this-out" id="carousel"></div>
|
||||
<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 id="carousel-project"></div>
|
||||
</div>
|
||||
<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>
|
||||
</a></span>
|
||||
|
|
@ -20,47 +22,47 @@
|
|||
<main id="content">
|
||||
<section><img src="assets/project-tiles/gitgalaxy.png" alt="Git Galaxy Logo">
|
||||
<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>
|
||||
</section>
|
||||
<section><img src="assets/project-tiles/pogo.png" alt="Pogo Logo">
|
||||
<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>
|
||||
</section>
|
||||
<section><img src="assets/project-tiles/nodemc.png" alt="NodeMC Logo">
|
||||
<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>
|
||||
</section>
|
||||
<section><img src="assets/project-tiles/alexanders.jpg" alt="Alexander Printing API module Logo">
|
||||
<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>
|
||||
</section>
|
||||
<section><img src="assets/project-tiles/approve.jpg" alt="Commerce Approve module Logo">
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</section>
|
||||
<section><img src="assets/project-tiles/quantity-pricing.jpg" alt="Commerce Approve module Logo">
|
||||
<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>
|
||||
</section>
|
||||
<section><img src="assets/project-tiles/vado.jpg" alt="Commerce Approve module Logo">
|
||||
<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>
|
||||
</section>
|
||||
<section><img src="assets/project-tiles/other.png" alt="GitHub Profile Screenshot">
|
||||
<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>
|
||||
</section>
|
||||
<section class="more-to-come">
|
||||
|
|
|
|||
Loading…
Reference in a new issue