From acabf1815f625088547870387c13c063b9dce9c0 Mon Sep 17 00:00:00 2001 From: Gabriel Simmer Date: Sun, 24 Mar 2019 21:50:27 -0700 Subject: [PATCH] Dynamic fetching of repos from github, link static projects. --- README.md | 8 ++++++- assets/app.js | 56 +++++++++++++++++++++++++++++++++-------------- assets/custom.css | 15 ++++++++----- index.html | 28 +++++++++++++----------- 4 files changed, 72 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 2879e99..de0bb66 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,9 @@ # GabrielSimmer.com -A port of the Nintendo Switch's interface to HTML :) \ No newline at end of file +## Rewrite goals + + - [x] Cleaner, original interface + - [x] Scaling, breakpoints + - [x] More dynamic + - [ ] Easier to maintain + - [x] No fancy frameworks \ No newline at end of file diff --git a/assets/app.js b/assets/app.js index d0a9493..2f0088e 100644 --- a/assets/app.js +++ b/assets/app.js @@ -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 = "

" + project.name + "" + project.description + "

"; + // 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(); - -setInterval(carouselProjectPicker, 10000); \ No newline at end of file +/** + * 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); + }); +} \ No newline at end of file diff --git a/assets/custom.css b/assets/custom.css index 6011abb..adda661 100644 --- a/assets/custom.css +++ b/assets/custom.css @@ -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; diff --git a/index.html b/index.html index 15ffa88..34c80cc 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,11 @@