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 new file mode 100644 index 0000000..2f0088e --- /dev/null +++ b/assets/app.js @@ -0,0 +1,48 @@ +const carousel = document.getElementById("carousel"); +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; + + // 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); +} + +/** + * 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 1077afe..adda661 100644 --- a/assets/custom.css +++ b/assets/custom.css @@ -1,112 +1,92 @@ -body, html { - font-family: 'Open Sans', sans-serif; - background-color: #2D2D2D; - color: #F6F6F6; - font-weight: bolder; - margin: 0 auto; padding: 0; +* { + --primary: #412554; + --secondary: #008B52; + --highlight: #FFE4A8; + padding: 0; margin: 0; + scroll-behavior: smooth; } - -.name { - opacity: 0; - position: absolute; - left:7vw; - top: 5vh; - font-size: 3vh; - padding: 10px; - background-color: lightgrey; - color:black; - border-radius: 20px; - transition: opacity .25s ease-in-out; - -moz-transition: opacity .25s ease-in-out; - -webkit-transition: opacity .25s ease-in-out; +.more-to-come { + background-color: var(--secondary); + min-height: 100px; } - -.profile-img { - margin: 10px; - max-width: 5vw; +body { + font-family: sans-serif; + background-color: #454545; + color: #f2f2f2; +} +.profile-image { + width: 100px; + height: 100px; border-radius: 50%; - border: 0.20vw solid #4F4F51; - -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); - -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); + filter: drop-shadow(0 0 4px black); } - -.profile-img:hover + .name { - opacity: 1; - transition: opacity .25s ease-in-out; - -moz-transition: opacity .25s ease-in-out; - -webkit-transition: opacity .25s ease-in-out; -} - -.status { - position: absolute; - right:5vw; - top: 6vh; - font-size: 3vh; -} -.status span { - margin-right: 10px; -} -hr { - color: #FFFFFF; - width: 99vw; -} - -.games { - margin-top: 10vh; - padding-left: 5%; +header { + color: #f2f2f2; + height: 100vh; + background-color: var(--primary); display: flex; - overflow: auto; + justify-content: center; + align-items: center; + flex-direction: column; } -.project { - margin: 10px; - /*background-color: white;*/ - height: 37vh; - text-align: center; +header small { + font-size: 16px; } -.project-img { - max-width: 30vh; - -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); - -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); +.check-this-out h2, .check-this-out small { + display: block; } -.projectname { - color: #34ABE5; - opacity: 0; - transition: opacity .25s ease-in-out; - -moz-transition: opacity .25s ease-in-out; - -webkit-transition: opacity .25s ease-in-out; +.check-this-out small { + color: var(--highlight); } - -.project:hover .projectname { - opacity: 1; - transition: opacity .25s ease-in-out; - -moz-transition: opacity .25s ease-in-out; - -webkit-transition: opacity .25s ease-in-out; -} - -.buttons { - display: flex; - justify-content: center; - margin-top: 10vh; - margin-bottom: 5vh; +.check-this-out { text-align: center; } -.button { - margin: 0 0.5vw; - background-color: #505050; - width: 11vh; - height: 11vh; - border: 1px solid #4F4F51; - font-size: 8vh; - border-radius: 50%; - -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); - -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75); -} +main { + display: grid; + grid-template-columns: repeat(4, 1fr); +} +section { + position: relative; +} +section span { + padding: 10px 0; + text-align: center; + bottom: 0; + left: 0; + width: 100%; + position: absolute; + background-color: rgba(0,0,0,0.8); +} +section small { + display: block; +} +img { + width: 100%; + height: 100%; +} +.scroll { + position: absolute; + bottom: 10%; +} a { text-decoration: none; - color: #F6F6F6 ; + color: var(--highlight); } + +@media only screen and (max-width: 850px) { + main { + grid-template-columns: repeat(2, 1fr); + } +} +@media only screen and (max-width: 430px) { + main { + display: block; + } +} +@media only screen and (min-width: 1921px) { + main { + grid-template-columns: repeat(6, 1fr); + } +} \ No newline at end of file diff --git a/assets/project-tiles/alexanders.jpg b/assets/project-tiles/alexanders.jpg new file mode 100644 index 0000000..966ca0e Binary files /dev/null and b/assets/project-tiles/alexanders.jpg differ diff --git a/assets/project-tiles/approve.jpg b/assets/project-tiles/approve.jpg new file mode 100644 index 0000000..332a0a0 Binary files /dev/null and b/assets/project-tiles/approve.jpg differ diff --git a/assets/gitgalaxy.png b/assets/project-tiles/gitgalaxy.png similarity index 100% rename from assets/gitgalaxy.png rename to assets/project-tiles/gitgalaxy.png diff --git a/assets/nodemc.png b/assets/project-tiles/nodemc.png similarity index 100% rename from assets/nodemc.png rename to assets/project-tiles/nodemc.png diff --git a/assets/other.png b/assets/project-tiles/other.png similarity index 100% rename from assets/other.png rename to assets/project-tiles/other.png diff --git a/assets/platypus.png b/assets/project-tiles/platypus.png similarity index 100% rename from assets/platypus.png rename to assets/project-tiles/platypus.png diff --git a/assets/pogo.png b/assets/project-tiles/pogo.png similarity index 100% rename from assets/pogo.png rename to assets/project-tiles/pogo.png diff --git a/assets/project-tiles/quantity-pricing.jpg b/assets/project-tiles/quantity-pricing.jpg new file mode 100644 index 0000000..5d4da51 Binary files /dev/null and b/assets/project-tiles/quantity-pricing.jpg differ diff --git a/assets/project-tiles/quicklook.jpg b/assets/project-tiles/quicklook.jpg new file mode 100644 index 0000000..f30b6b6 Binary files /dev/null and b/assets/project-tiles/quicklook.jpg differ diff --git a/assets/project-tiles/vado.jpg b/assets/project-tiles/vado.jpg new file mode 100644 index 0000000..14ba83e Binary files /dev/null and b/assets/project-tiles/vado.jpg differ diff --git a/index.html b/index.html index 002213f..34c80cc 100644 --- a/index.html +++ b/index.html @@ -1,87 +1,77 @@ + + + + Gabriel Simmer - - - - - - -
-
- Github Profile Picture - Gabriel Simmer -
- 10:32 AM - - 100% + -
-
-
-

POGO

- Pogo Logo -
-
-

PLATYPUS

- Platypus Logo -
-
-

GIT GALAXY

- Git Galaxy Logo -
-
-

NODEMC

- NodeMC Logo -
-
-

MORE

- Other Stuff -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
+
Git Galaxy Logo + +

Git Galaxy Open source driven blog

 + +
+
Pogo Logo + +

Pogo Self hosted podcast publishing and RSS

 + +
+
NodeMC Logo + +

NodeMC Minecraft server wrapper for Nodejs

 + +
+
Alexander Printing API module Logo + +

Alexanders Alexanders Printing API module for Drupal

 + +
+
Commerce Approve module Logo + +

Commerce Approve Require manual approval of Commerce orders.

 + +
+
Entity quicklook module Logo + +

Entity Quicklook Quicklook modal for entity displays.

 + +
+
Commerce Approve module Logo + +

Commerce Quantity Pricing Allow bulk discounts on order items.

 + +
+
Commerce Approve module Logo + +

Commerce Vado Add-on product variations for order items.

 + +
+
GitHub Profile Screenshot + +

GitHub Projects Misc. open source projects

 + +
+
+ +

More to come ...

+ +
-
-

Hand built with by Gabriel Simmer

Buy me a coffeeBuy me a coffee
-
- - - - - - \ No newline at end of file + + + \ No newline at end of file