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 @@