From 90a06f8f7a557276119a3de9b903a282ac21501a Mon Sep 17 00:00:00 2001
From: Ben Larson <10101828+ben-larson@users.noreply.github.com>
Date: Mon, 11 Nov 2019 19:04:47 -0600
Subject: [PATCH] Index (#1)
---
.github/CODEOWNERS | 1 +
.prettierrc | 3 ++
index.html | 0
src/index.html | 20 +++++++++++++
src/main.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++
src/main.js | 26 +++++++++++++++++
6 files changed, 122 insertions(+)
create mode 100644 .github/CODEOWNERS
create mode 100644 .prettierrc
delete mode 100644 index.html
create mode 100644 src/index.html
create mode 100644 src/main.css
create mode 100644 src/main.js
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 0000000..c0c655d
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @ben-larson
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..544138b
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+ "singleQuote": true
+}
diff --git a/index.html b/index.html
deleted file mode 100644
index e69de29..0000000
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..c36459e
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,20 @@
+
+
+
+ Ben Larson
+
+
+
+ Ben Larson
+ Projects
+
+
+
+
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 0000000..79658d6
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,72 @@
+* {
+ font: inherit;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: lingua-franca-bold;
+ font-weight: bold;
+ font-size: 1.5em;
+ background: #ddd;
+ color: #333;
+}
+
+h1 {
+ font-size: 2em;
+ padding: 1em 1em;
+}
+
+h2 {
+ font-size: 1.3em;
+ padding-left: 1.5em;
+ padding-left: calc(2em / 1.3);
+ color: #777;
+}
+
+.shelf {
+ overflow-x: scroll;
+ white-space: nowrap;
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+}
+
+a {
+ text-decoration: none;
+}
+
+.card {
+ width: 50%;
+ padding-top: 40%;
+ position: relative;
+ height: 0;
+ margin: 2em 2em 3em 2em;
+ display: inline-block;
+}
+
+.card iframe {
+ box-sizing: border-box;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ box-shadow: 0 0 1em -0.5em rgba(0, 0, 0, 0.5);
+ border-radius: 1em;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ transition: all 0.2s;
+}
+
+.card:hover iframe {
+ box-shadow: 0 0 1em -0.25em rgba(0, 0, 0, 0.5);
+}
+
+.github {
+ float: right;
+ padding: 0.5em 0;
+ color: #999;
+ transition: all 0.1s;
+}
+
+.github:hover {
+ color: #555;
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..f7ebd4b
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,26 @@
+const repos = ['Event Creator', 'JS Playground'];
+
+const element = (tagName, attrs = {}, ...children) => {
+ const result = document.createElement(tagName);
+ Object.keys(attrs).forEach(key => result.setAttribute(key, attrs[key]));
+ children.forEach(child => {
+ if (typeof child === 'object') result.appendChild(child);
+ else result.innerHTML += child;
+ });
+ return result;
+};
+
+const shelves = document.querySelectorAll('.shelf');
+repos.forEach(title => {
+ const name = title.toLowerCase().replace(' ', '-');
+ const url = `https://benlarson.xyz/${name}/`;
+
+ const iframe = element('iframe', { src: url });
+ const githubLink = element(
+ 'a',
+ { href: `https://github.com/ben-larson/${name}/`, class: 'github' },
+ 'View on GitHub ↗'
+ );
+ const card = element('a', { href: url, class: 'card' }, iframe, githubLink);
+ shelves[0].appendChild(card);
+});
--
2.45.2