feat: [#30] all existing project content import

* feat: new thumbnails

* feat: added voxco identity project for testing

* feat: gbjam-12 content

* feat: credit section

* feat: space program project content

* feat: kiriko and interval content

* feat: tank project content

* feat: you are two project content

* feat: typograzoo project content

* feat: literal project content

* feat: swan lake, the fall and switcher project contents

* feat: specter project content

Author: cd-bash

src/components/thumbnail-project/index.ts

@@ -0,0 +1,55 @@
+import './styles.css';
+import {EVENT_BUS} from "../../core";
+
+
+export type thumbnailContent = {
+    readonly thumbnail: string;
+    readonly title: string;
+    readonly summary: string;
+    readonly tag: string;
+    readonly thumbnailColor: string;
+    readonly path: string;
+}
+
+//-----------------------------------------------------------------------
+
+export function projectThumbnail(content: thumbnailContent, showcase: boolean) {
+    const itemBox = document.createElement('li');
+    const itemThumbnail = document.createElement('img');
+    const itemTitle = document.createElement('h5');
+    const itemTag = document.createElement('p');
+    const hoverBox = document.createElement('div');
+    const projectLink = document.createElement('a');
+    const itemSummary = document.createElement('p');
+    const clearFix = document.createElement('div');
+
+    itemBox.id = 'item-box';
+    itemBox.style.backgroundColor = content.thumbnailColor;
+    itemTag.className = 'tag';
+    hoverBox.className = 'hover-box';
+    clearFix.className = 'clearfix';
+
+    if (showcase) {
+        itemBox.className += 'showcase';
+    }
+
+    itemThumbnail.src = content.thumbnail;
+    itemTitle.textContent = content.title;
+    itemTag.textContent = content.tag;
+    itemSummary.textContent = content.summary;
+    projectLink.textContent = "View Project";
+
+    itemBox.appendChild(itemTitle);
+    itemBox.appendChild(itemTag);
+    hoverBox.appendChild(itemSummary);
+    hoverBox.appendChild(projectLink);
+    itemBox.appendChild(hoverBox);
+    itemBox.appendChild(itemThumbnail);
+    itemBox.appendChild(clearFix);
+
+    itemBox.addEventListener('click', () => {
+        EVENT_BUS.dispatch('page_navigation', { pageReference: 'interactive/' + content.path });
+    });
+
+    return itemBox;
+}

src/components/thumbnail-project/styles.css

@@ -0,0 +1,104 @@
+ul {
+    width: 100%;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+#item-box {
+    width: 31%;
+    margin-right: 1%;
+    height: 265px;
+    color: white;
+    float: left;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    padding: 30px 25px;
+    border-radius: 10px;
+}
+
+#item-box img {
+    position: absolute;
+    bottom: -10%;
+    right: 0;
+    width: 100%;
+    height: auto;
+    z-index: 1;
+    transition: filter 0.3s;
+}
+
+#item-box h5, #item-box p, #item-box a {
+    position: relative;
+    z-index: 2;
+}
+
+#item-box h5 {
+    font-family: Cabin, sans-serif;
+    color: white;
+    text-transform: lowercase;
+    font-size: 2.25em;
+    line-height: 75%;
+    font-weight: bold;
+    margin: 0;
+}
+
+#item-box .tag {
+    font-family: "Handjet", serif;
+    text-transform: lowercase;
+    font-size: 1em;
+    font-weight: bold;
+    color: #505050;
+    margin-top: 10px;
+}
+
+#item-box p {
+    color: white;
+    font-size: 1em;
+}
+
+#item-box a {
+    display: block;
+    width: 100%;
+    font-family: "Handjet", serif;
+    font-size: 1.2em;
+    padding: 20px 0;
+    border-radius: 0 0 5px 5px;
+    border: none;
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    text-transform: uppercase;
+    text-align: center;
+    background-color: #FF523B;
+}
+
+#item-box .hover-box {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transform: translateY(100%);
+    transition: transform 0.3s;
+    z-index: 20;
+}
+
+#item-box .hover-box p {
+    padding: 10px 25px;
+}
+
+.clearfix {
+    clear: both;
+}
+
+#item-box:hover {
+    cursor: pointer;
+}
+
+#item-box:hover img {
+    filter: blur(25px);
+}
+
+#item-box:hover .hover-box {
+    transform: translateY(0);
+}