Mostly copy the bulma-templates over to work with.

LICENSE

@@ -0,0 +1 @@
+This project is Museum Source.  Just like a museum, it is full of works of art that you do not own, but you're free to look at.  Copyright (c) Zed A. Shaw from 2020 until the end of copyright.

README.md

@@ -1,3 +1,5 @@
-# learnjsthehardway
+# Learn JavaScript The Hard Way
+
+This is the project you can follow from the live streams as I develop the website for the course.  I initially started this using the awesome Bulma Templates at https://github.com/BulmaTemplates/bulma-templates and will place the code after each live session here.
+
 
-This is the code I'm writing in public as I build the learnjsthehardway.com website to host my new course format.

css/admin.css

@@ -0,0 +1,82 @@
+html, body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  height: 100%;
+  background: #ECF0F3;
+}
+nav.navbar {
+  border-top: 4px solid #276cda;
+  margin-bottom: 1rem;
+}
+.navbar-item.brand-text {
+  font-weight: 300;
+}
+.navbar-item, .navbar-link {
+  font-size: 14px;
+  font-weight: 700;
+}
+.columns {
+  width: 100%;
+  height: 100%;
+  margin-left: 0;
+}
+.menu-label {
+  color: #8F99A3;
+  letter-spacing: 1.3;
+  font-weight: 700;
+}
+.menu-list a {
+  color: #0F1D38;
+  font-size: 14px;
+  font-weight: 700;
+}
+.menu-list a:hover {
+  background-color: transparent;
+  color: #276cda;
+}
+.menu-list a.is-active {
+  background-color: transparent;
+  color: #276cda;
+  font-weight: 700;
+}
+.card {
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
+  margin-bottom: 2rem;
+}
+.card-header-title {
+  color: #8F99A3;
+  font-weight: 400;
+}
+.info-tiles {
+  margin: 1rem 0;
+}
+.info-tiles .subtitle {
+  font-weight: 300;
+  color: #8F99A3;
+}
+.hero.welcome.is-info {
+  background: #36D1DC;
+  background: -webkit-linear-gradient(to right, #5B86E5, #36D1DC);
+  background: linear-gradient(to right, #5B86E5, #36D1DC);
+}
+.hero.welcome .title, .hero.welcome .subtitle {
+  color: hsl(192, 17%, 99%);
+}
+.card .content {
+  font-size: 14px;
+}
+.card-footer-item {
+  font-size: 14px;
+  font-weight: 700;
+  color: #8F99A3;
+}
+.card-footer-item:hover {
+}
+.card-table .table {
+  margin-bottom: 0;
+}
+.events-card .card-table {
+  max-height: 250px;
+  overflow-y: scroll;
+}

css/aside.css

@@ -0,0 +1,21 @@
+.columns {
+    margin-top: 0;
+}
+
+/* Start nav drawer */
+aside.column {
+    padding: 0;
+    box-shadow: 2px 0px 4px #888888;
+}
+.panel-heading, .panel-block {
+    border: 0;
+    border-radius: 0;
+}
+.panel-block {
+    justify-content: center;
+}
+/*End nav drawer  */
+
+section.column {
+    padding: 2rem;
+}

css/blog.css

@@ -0,0 +1,67 @@
+html,body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  background: #F0F2F4;
+}
+.navbar.is-white {
+  background: #F0F2F4;
+}
+.navbar-brand .brand-text {
+  font-size: 1.11rem;
+  font-weight: bold;
+}
+.hero-body
+{background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Plum_trees_Kitano_Tenmangu.jpg/1200px-Plum_trees_Kitano_Tenmangu.jpg);
+background-position: center;
+background-size: cover;
+background-repeat: no-repeat;
+height: 500px;
+}
+.articles {
+  margin: 5rem 0;
+  margin-top: -200px;
+}
+.articles .content p {
+    line-height: 1.9;
+    margin: 15px 0;
+}
+.author-image {
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    width: 60px;
+    height: 60px;
+    margin-left: -30px;
+    border: 3px solid #ccc;
+    border-radius: 50%;
+}
+.media-center {
+  display: block;
+  margin-bottom: 1rem;
+}
+.media-content {
+  margin-top: 3rem;
+}
+.article, .promo-block {
+  margin-top: 6rem;
+}
+div.column.is-8:first-child {
+  padding-top: 0;
+  margin-top: 0;
+}
+.article-title {
+  font-size: 2rem;
+  font-weight: lighter;
+  line-height: 2;
+}
+.article-subtitle {
+  color: #909AA0;
+  margin-bottom: 3rem;
+}
+.article-body {
+  line-height: 1.4;
+  margin: 0 6rem;
+}
+.promo-block .container {
+  margin: 1rem 5rem;
+}

css/cards.css

@@ -0,0 +1,107 @@
+body {
+background: #041221;
+}
+/* Card start*/
+.card {overflow:hidden}
+.card.large {
+height: 600px;
+-webkit-backface-visibility: hidden;
+backface-visibility: initial;
+border-radius: 5px;
+}
+/* Card end */
+.media-content {
+overflow: hidden;
+}
+.title.no-padding {
+margin-bottom: 0 !important;
+}
+#flow span {
+display: block;
+width: 200vw;
+height: 200vw;
+position: absolute;
+top: -180vw;
+left: -50vw;
+border-radius: 90vw;
+opacity: 0.6;
+}
+.flow-1 {
+background: #3281ff;
+-webkit-animation: rotating 20s linear infinite;
+-moz-animation: rotating 20s linear infinite;
+-ms-animation: rotating 20s linear infinite;
+-o-animation: rotating 20s linear infinite;
+animation: rotating 20s linear infinite;
+}
+.flow-2 {
+background: #f442ee;
+position: absolute;
+-webkit-animation: rotating 15s linear infinite;
+-moz-animation: rotating 15s linear infinite;
+-ms-animation: rotating 15s linear infinite;
+-o-animation: rotating 15s linear infinite;
+animation: rotating 15s linear infinite;
+}
+.flow-3 {
+background: #42eef4;
+position: absolute;
+-webkit-animation: rotating 7s linear infinite;
+-moz-animation: rotating 7s linear infinite;
+-ms-animation: rotating 7s linear infinite;
+-o-animation: rotating 7s linear infinite;
+animation: rotating 7s linear infinite;
+}
+@-webkit-keyframes rotating {
+from {
+-ms-transform: rotate(0deg);
+-moz-transform: rotate(0deg);
+-webkit-transform: rotate(0deg);
+-o-transform: rotate(0deg);
+transform: rotate(0deg);
+}
+to {
+-ms-transform: rotate(360deg);
+-moz-transform: rotate(360deg);
+-webkit-transform: rotate(360deg);
+-o-transform: rotate(360deg);
+transform: rotate(360deg);
+}
+}
+@keyframes rotating {
+from {
+-ms-transform: rotate(0deg);
+-moz-transform: rotate(0deg);
+-webkit-transform: rotate(0deg);
+-o-transform: rotate(0deg);
+transform: rotate(0deg);
+}
+to {
+-ms-transform: rotate(360deg);
+-moz-transform: rotate(360deg);
+-webkit-transform: rotate(360deg);
+-o-transform: rotate(360deg);
+transform: rotate(360deg);
+}
+}
+.rotating {
+-webkit-animation: rotating 2s linear infinite;
+-moz-animation: rotating 2s linear infinite;
+-ms-animation: rotating 2s linear infinite;
+-o-animation: rotating 2s linear infinite;
+animation: rotating 2s linear infinite;
+}
+.footer{
+background-color: #222831;
+color: lemonchiffon;
+}
+.footer p, strong
+{color: lemonchiffon}
+.footer a:hover
+{color: crimson;}
+.fa
+{color: lemonchiffon;
+    margin: 10px}
+
+::selection 
+{background-color:#DEF4FF}

css/cheatsheet.css

@@ -0,0 +1,55 @@
+body,
+html {
+  background: #f2f2f2;
+}
+
+pre,
+.message {
+  max-width: 960px;
+}
+
+li {margin: 10px}
+
+.hero.is-primary {
+background: linear-gradient(to top right, #524ad0 10%, #D099FA);
+}
+
+.box {
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+}
+
+.box span.icon {
+  float: right;
+  font-size: 1.7em;
+  padding: 2rem 2rem 0 0;
+}
+
+.is-large.fab {
+  font-size: 7em;
+}
+
+.is-large.fas {
+  font-size: 5em;
+  margin-left: 0.2em;
+}
+
+.media-content {overflow: hidden;}
+
+.menu-list li a:hover {
+  background: #d9d9d9;
+}
+
+.token.number {
+  display: inline;
+  padding: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  text-align: inherit;
+  vertical-align: inherit;
+  border-radius: inherit;
+  font-weight: inherit;
+  white-space: inherit;
+  background: inherit;
+  margin: inherit;
+}
+.footer {background-color: white;}

css/contact.css

@@ -0,0 +1,19 @@
+.social-media {
+  margin-top: 30px;
+}
+
+.social-media a {
+  margin-right: 10px;
+}
+
+.field:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+@media screen and (min-width: 768px) {
+  .navbar {
+    padding: 10px 0;
+    position: fixed;
+    width: 100%;
+  }
+}

css/forum.css

@@ -0,0 +1,59 @@
+html,body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  background: #F2F6FA;
+}
+footer {
+  background-color: #F2F6FA !important;
+}
+.topNav {
+  border-top: 5px solid #3498DB;
+}
+.topNav .container {
+  border-bottom: 1px solid #E6EAEE;
+}
+.container .columns {
+  margin: 3rem 0;
+}
+.navbar-menu .navbar-item {
+  padding: 0 2rem;
+}
+aside.menu {
+  padding-top: 3rem;
+}
+aside.menu .menu-list {
+  line-height: 1.5;
+}
+aside.menu .menu-label {
+  padding-left: 10px;
+  font-weight: 700;
+}
+.button.is-primary.is-alt {
+  background: #00c6ff;
+  background: -webkit-linear-gradient(to bottom, #0072ff, #00c6ff);
+  background: linear-gradient(to bottom, #0072ff, #00c6ff);
+  font-weight: 700;
+  font-size: 14px;
+  height: 3rem;
+  line-height: 2.8;
+}
+.media-left img {
+  border-radius: 50%;
+}
+.media-content p {
+  font-size: 14px;
+  line-height: 2.3;
+  font-weight: 700;
+  color: #8F99A3;
+}
+article.post {
+  margin: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #E6EAEE;
+}
+article.post:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+.menu-list li{
+  padding: 5px;
+}

css/hero.css

@@ -0,0 +1,74 @@
+html,body {
+  background: #EFF3F4;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+.hero-body .container {
+  max-width: 700px;
+}
+.hero-body .title {
+  color: hsl(192,17%,99%) !important;
+}
+.hero-body .subtitle {
+  color: hsl(192,17%,99%) !important;
+  padding-top: 2rem;
+  line-height: 1.5;
+}
+.features {
+  padding: 5rem 0;
+}
+.box.cta {
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+}
+.card-image > .fa {
+  font-size: 8rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  color: #209cee;
+}
+.card-content .content {
+  font-size: 14px;
+  margin: 1rem 1rem;
+}
+.card-content .content h4 {
+  font-size: 16px;
+  font-weight: 700;
+}
+.card {
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
+  margin-bottom: 2rem;
+}
+.intro {
+  padding: 5rem 0;
+  text-align: center;
+}
+.sandbox {
+  padding: 5rem 0;
+}
+.tile.notification {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.is-shady {
+animation: flyintoright .4s backwards;
+background: #fff;
+box-shadow: rgba(0, 0, 0, .1) 0 1px 0;
+border-radius: 4px;
+display: inline-block;
+margin: 10px;
+position: relative;
+transition: all .2s ease-in-out;
+}
+.is-shady:hover {
+box-shadow: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .19);
+}
+/*adds font awesome stars*/
+footer li:before {
+  content: '\f1b2';
+  font-family: 'FontAwesome';
+  float: left;
+  margin-left: -1.5em;
+  color: #147efb;
+}

css/inbox.css

@@ -0,0 +1,209 @@
+html,body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  height: 100%;
+  background-color: #fff;
+}
+.nav.is-dark {
+  background-color: #232B2D;
+  color: #F6F7F7;
+}
+.nav.is-dark .nav-item a, .nav.is-dark a.nav-item {
+    color: #F6F7F7;
+}
+.nav.is-dark .nav-item a.button.is-default {
+    color: #F6F7F7;
+    background-color: transparent;
+    border-width: 2px;
+}
+.nav.menu {
+  border-bottom: 1px solid #e1e1e1;
+}
+.nav.menu .nav-item .icon-btn {
+  border: 3px solid #B7C6C9;
+  border-radius: 90px;
+  padding: 5px 7px;
+  color: #B7C6C9;
+}
+.nav.menu .nav-item.is-active .icon-btn {
+  color: #2EB398;
+  border: 3px solid #2EB398;
+}
+.nav.menu .nav-item .icon-btn .fa {
+  font-size: 20px;
+  color: #B7C6C9;
+}
+.nav.menu .nav-item.is-active .icon-btn .fa {
+  color: #2EB398;
+}
+.aside {
+  display:block;
+  background-color: #F9F9F9;
+  border-right: 1px solid #DEDEDE;
+}
+.messages {
+  display:block;
+  background-color: #fff;
+  border-right: 1px solid #DEDEDE;
+  padding: 40px 20px;
+}
+.message {
+  display:block;
+  background-color: #fff;
+  padding: 40px 20px;
+}
+.aside .compose {
+  height: 95px;
+  margin:0 -10px;
+  padding: 25px 30px;
+}
+.aside .compose .button {
+  color: #F6F7F7;
+}
+.aside .compose .button .compose {
+  font-size: 14px;
+  font-weight: 700;
+}
+.aside .main {
+  padding: 40px;
+  color: #6F7B7E;
+}
+.aside .title {
+  color: #6F7B7E;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.aside .main .item {
+  display: block;
+  padding: 10px 0;
+  color: #6F7B7E;
+}
+.aside .main .item.active {
+  background-color: #F1F1F1;
+  margin: 0 -50px;
+  padding-left: 50px;
+}
+.aside .main .item:active,.aside .main .item:hover {
+  background-color: #F2F2F2;
+  margin: 0 -50px;
+  padding-left: 50px;
+}
+.aside .main .icon {
+  font-size: 19px;
+  padding-right: 30px;
+  color: #A0A0A0;
+}
+.aside .main .name {
+  font-size: 15px;
+  color: #5D5D5D;
+  font-weight: 500;
+}
+.messages .action-buttons {
+  padding: 0;
+  margin-top: -20px;
+}
+.message .action-buttons {
+  padding: 0;
+  margin-top: -5px;
+}
+.action-buttons .control.is-grouped {
+  display: inline-block;
+  margin-right: 30px;
+}
+.action-buttons .control.is-grouped:last-child {
+  margin-right: 0;
+}
+.action-buttons .control.is-grouped .button:first-child {
+  border-radius: 5px 0 0 5px;
+}
+.action-buttons .control.is-grouped .button:last-child {
+  border-radius: 0 5px 5px 0;
+}
+.action-buttons .control.is-grouped .button {
+  margin-right: -5px;
+  border-radius: 0;
+}
+.pg {
+  display: inline-block;
+  top:10px;
+}
+.action-buttons .pg .title {
+  display: block;
+  margin-top: 0;
+  padding-top: 0;
+  margin-bottom: 3px;
+  font-size:12px;
+  color: #AAAAA;
+}
+.action-buttons .pg a{
+  font-size:12px;
+  color: #AAAAAA;
+  text-decoration: none;
+}
+.is-grouped .button {
+  background-image: linear-gradient(#F8F8F8, #F1F1F1);
+}
+.is-grouped .button .fa {
+  font-size: 15px;
+  color: #AAAAAA;
+}
+.inbox-messages {
+  margin-top:60px;
+}
+.message-preview {
+  margin-top: 60px;
+}
+.inbox-messages .card {
+  width: 100%;
+}
+.inbox-messages strong {
+  color: #5D5D5D;
+}
+.inbox-messages .msg-check {
+  padding: 0 20px;
+}
+.inbox-messages .msg-subject {
+  padding: 10px 0;
+  color: #5D5D5D;
+}
+.inbox-messages .msg-attachment {
+  float:right;
+}
+.inbox-messages .msg-snippet {
+  padding: 5px 20px 0px 5px;
+}
+.inbox-messages .msg-subject .fa {
+  font-size: 14px;
+  padding:3px 0;
+}
+.inbox-messages .msg-timestamp {
+  float: right;
+  padding: 0 20px;
+  color: #5D5D5D;
+}
+.message-preview .avatar {
+  display: inline-block;
+}
+.message-preview .top .address {
+  display: inline-block;
+  padding: 0 20px;
+}
+.avatar img {
+  width: 40px;
+  border-radius: 50px;
+  border: 2px solid #999;
+  padding: 2px;
+}
+.address .name {
+  font-size: 16px;
+  font-weight: bold;
+}
+.address .email {
+  font-weight: bold;
+  color: #B6C7D1;
+}
+.card.active {
+  background-color:#F5F5F5;
+}

css/index.css

@@ -0,0 +1,27 @@
+html, body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  background: #F0F2F4;
+}
+.card {
+  margin-bottom: 3rem;
+}
+.content-wrapper {
+  margin-top: 3rem;
+}
+.card-footer-item {
+  font-size: 12px;
+  font-weight: bold;
+  color: #666;
+}
+.card-header-title {
+  display: block;
+}
+.card-content p {
+  margin-bottom: 2rem;
+}
+.container {
+  max-width: 95%;
+}
+.fa-code, .fa-search {
+  margin-right: 0.5vw;
+}

css/instaAlbum.css

@@ -0,0 +1,55 @@
+.navbar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    background-color: white;
+    justify-content: space-around;
+    width: 100%;
+    border-bottom: 1px solid lightgray;
+}
+.navbar-menu {
+    flex-grow: 0.5;
+    justify-content: center;
+}
+.navbar-menu .navbar-item {
+    flex-grow: 1;
+    justify-content: center;
+}
+.navbar-menu .navbar-item .control {
+    width: 50%;
+}
+.body-columns {
+    margin-top: 10vh;
+}
+.card {
+    margin-top: 5rem;
+}
+.card .header {
+    padding: 5px 10px;
+}
+.card-footer .columns {
+    width: 100%;
+}
+.card-footer .columns input {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+}
+.card-footer .columns .column:last-child {
+    display: flex;
+    align-items: center;
+}
+.card-footer .columns .column:last-child button {
+    border: none;
+}
+.footer {
+    margin-top: 10vh;
+    padding: 2rem 1.5rem;
+}
+
+/* @media screen and (max-width: 786px){
+    .navbar {
+        justify-content: space-between;
+    }
+} */

css/kanban.css

@@ -0,0 +1,35 @@
+#sectioncontainer {
+  margin-top: 20px;
+}
+
+/* Keep from sticking to sides */
+.cards-container {
+  max-width: 95%;
+}
+
+.board-item {
+  margin: 5px 0;
+  will-change: transform;
+}
+
+.board-item-content {
+  word-break: break-all;
+  position: relative;
+  padding: 20px;
+  background: #fff;
+  border-radius: 4px;
+  font-size: 17px;
+  text-align: center;
+  cursor: pointer;
+  -webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
+  box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
+  margin: 5px;
+}
+
+.delete {
+  pointer-events: auto;
+}
+
+footer {
+  margin-top: 2rem;
+}

css/landing.css

@@ -0,0 +1,18 @@
+html,body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+.hero.is-info {
+  background: linear-gradient(
+      rgba(0, 0, 0, 0.5),
+      rgba(0, 0, 0, 0.5)
+    )
+}
+.hero .nav, .hero.is-success .nav {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.hero .subtitle {
+  padding: 3rem 0;
+  line-height: 1.5;
+}
+

css/login.css

@@ -0,0 +1,51 @@
+html,body {
+  font-family: 'Questrial', sans-serif;
+  font-size: 14px;
+  font-weight: 300;
+}
+.hero.is-success {
+  background: #F2F6FA;
+}
+.hero .nav, .hero.is-success .nav {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.box {
+  margin-top: 5rem;
+}
+.avatar {
+  margin-top: -70px;
+  padding-bottom: 20px;
+}
+.avatar img {
+  padding: 5px;
+  background: #fff;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
+  box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
+}
+input {
+  font-weight: 300;
+}
+p {
+  font-weight: 700;
+}
+p.subtitle {
+  padding-top: 1rem;
+}
+
+.login-hr{
+  border-bottom: 1px solid black;
+}
+
+.has-text-black{
+  color: black;
+}
+
+.field{
+  padding-bottom: 10px;
+}
+
+.fa{
+  margin-left: 5px; 
+}

css/personal.css

@@ -0,0 +1,42 @@
+.has-same-height .card {
+  height: 320px;
+  overflow: hidden;
+}
+
+.card-content h3 {
+  text-align: center;
+}
+
+.table-profile td,
+th {
+  border: none !important;
+}
+
+.table-profile td:first-of-type {
+  font-weight: bold;
+}
+
+.skills-content .media {
+  margin: 0 !important;
+  padding: 4px !important;
+  border: 0 !important;
+}
+
+.skills-content .progress {
+  height: 4px !important;
+}
+
+.custom-tags {
+  text-align: center !important;
+  display: block;
+}
+
+.portfolio-container .card {
+  margin-bottom: 2em;
+}
+
+.section-heading {
+  text-align: center;
+  margin-top: 1em;
+  margin-bottom: 6em;
+}

css/prism.css

@@ -0,0 +1,147 @@
+code[class*='language-'],
+pre[class*='language-'] {
+  color: rgb(215, 236, 255);
+  background: none;
+  font-family: 'Operator Mono', 'Roboto Mono', Menlo, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
+    monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 2;
+  font-size: 1rem;
+  -webkit-overflow-scrolling: touch;
+  margin: 0;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+  text-shadow: none;
+  background: #131824;
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  text-shadow: none;
+  background: #131824;
+}
+
+@media print {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  overflow: auto;
+  padding: 0.75rem 1.25rem;
+}
+
+pre.is-option {
+  margin: 0;
+  padding: 0;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: linear-gradient(-30deg, #273149, #1c273f);
+  border-radius: 0.25rem;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #8ca2d3;
+}
+
+.token.selector,
+.token.attr-name {
+  color: #c7f683;
+}
+
+.token.punctuation {
+  color: #5ac8e3;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.tag {
+  color: #2cefd8;
+}
+
+.token.property,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #85b4ff;
+}
+
+.token.string,
+.language-css .token.string,
+.token.url,
+.token.attr-value,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #ffd694;
+}
+
+.token.operator,
+.token.entity,
+.style .token.string {
+  color: #ff9bbe;
+}
+
+.token.important,
+.token.atrule,
+.token.keyword {
+  color: #b7adff;
+}
+
+.token.function {
+  color: #25d0e5;
+}
+
+.token.regex,
+.token.variable {
+  color: #00a8d4;
+}
+
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

css/showcase.css

@@ -0,0 +1,342 @@
+@import url("https://fonts.googleapis.com/css?family=Lato|Poppins|Kaushan+Script");
+.has-vertically-aligned-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: 'Poppins', Lato, Tahoma, sans-serif;
+  width: 100%;
+  min-height: 100%;
+}
+
+.header-wrapper {
+  padding-bottom: 30px;
+}
+
+.hero {
+  background-image: url(https://picsum.photos/id/381/1920/1080);
+  background: linear-gradient(rgba(31, 44, 108, 0.65), rgba(31, 44, 108, 0.65)), rgba(0, 0, 0, 0.55) url("https://picsum.photos/id/381/1920/1080") no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  color: white;
+  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  font-family: 'Poppins', sans-serif;
+}
+
+.hero .title {
+  font-family: 'Kaushan Script', sans-serif;
+  transform: rotate(-5deg);
+  font-size: 5rem;
+  color: whitesmoke;
+}
+
+.hero .subtitle {
+  padding: 5px;
+  color: whitesmoke;
+}
+
+.hero .profession {
+  padding-top: 50px;
+  font-size: 1.7rem;
+  text-transform: uppercase;
+}
+
+.hero .hero-foot {
+  height: 50px;
+  background: white;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.082);
+}
+
+@media (max-width: 599px) {
+  .hero .hero-foot {
+    display: none;
+  }
+}
+
+.hero .hero-foot .hero-foot--wrapper {
+  margin: 7px auto;
+  height: 50px;
+}
+
+.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop {
+  line-height: 38px;
+  font-weight: 600;
+  text-transform: lowercase;
+  letter-spacing: 1px;
+  font-size: 1rem;
+}
+
+.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li {
+  display: inline-block;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li.is-active a {
+  border-bottom: 2px solid #1f2c6c;
+}
+
+.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li a {
+  color: #1f2c6c;
+}
+
+.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li a:hover {
+  color: #1f2c6c;
+  transition: all .2s ease-in-out;
+  border-bottom: 2px solid #1f2c6c;
+}
+
+.main-content {
+  padding-top: 2rem;
+  color: #3c4172;
+  font-family: 'Poppins', sans-serif;
+}
+
+.main-content .section-dark {
+  background-color: #f0f3f5;
+  padding: 60px 0px;
+}
+
+.main-content .section-dark.resume {
+  height: 400px;
+  padding-top: 100px;
+}
+
+@media (max-width: 599px) {
+  .main-content .section-dark.resume {
+    padding-top: 75px;
+  }
+}
+
+.main-content .section-dark.resume .title {
+  padding: 20px;
+}
+
+.main-content .section-dark.resume button {
+  border: 2px solid #43485c;
+  background: white;
+  color: #43485c;
+  height: 50px;
+  width: 250px;
+  font-size: 1rem;
+  text-transform: uppercase;
+}
+
+.main-content .section-dark.resume .fa-download {
+  color: #1f2c6c;
+}
+
+.main-content .section-dark.my-work {
+  padding: 120px;
+}
+
+@media (max-width: 599px) {
+  .main-content .section-dark.my-work {
+    padding: 75px 20px;
+  }
+}
+
+.main-content .section-dark.my-work .work-item {
+  margin-bottom: 1rem;
+  -webkit-transition: all .1s ease-in-out;
+  transition: all .1s ease-in-out;
+  border-radius: 5px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3);
+}
+
+.main-content .section-dark.my-work .work-item:hover {
+  -webkit-transform: scale(1.055) translateY(-2px);
+  transform: scale(1.055) translateY(-2px);
+  -webkit-box-shadow: 0 2px 25px 0 rgba(30, 30, 30, 0.1);
+  box-shadow: 0 2px 25px 0 rgba(30, 30, 30, 0.1);
+}
+
+.main-content .section-light {
+  padding: 30px;
+}
+
+.main-content .section-light.about-me {
+  padding-bottom: 100px;
+}
+
+.main-content .section-light.about-me .is-larger {
+  font-size: 1.2rem;
+}
+
+@media (max-width: 599px) {
+  .main-content .section-light.about-me .about-links {
+    text-align: center;
+  }
+}
+
+.main-content .section-light.about-me .right-image img {
+  border-radius: 11px;
+  margin: 20px;
+  box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3);
+}
+
+@media (max-width: 599px) {
+  .main-content .section-light.about-me .right-image img {
+    margin: auto;
+  }
+}
+
+.main-content .section-light.skills {
+  padding: 100px;
+}
+
+@media (max-width: 599px) {
+  .main-content .section-light.skills {
+    padding: 50px 20px 40px 20px;
+    padding-bottom: 20px;
+  }
+}
+
+.main-content .section-light.skills h1 {
+  padding: 10px;
+}
+
+.main-content .section-light.contact {
+  padding: 200px;
+}
+
+.main-content .section-light.contact button {
+  width: 100%;
+  background-color: #43485c;
+  color: white;
+  height: 50px;
+  font-size: 1.1rem;
+  text-transform: uppercase;
+  font-family: 'Poppins', sans-serif;
+}
+
+@media (max-width: 599px) {
+  .main-content .section-light.contact {
+    padding: 60px 20px;
+  }
+}
+
+.main-content .section-color.services {
+  padding: 100px;
+  background-color: #43485c;
+  color: white;
+}
+
+.main-content .section-color.services .title,
+.main-content .section-color.services .subtitle {
+  color: white;
+}
+
+.main-content .section-color.services i {
+  font-size: 3rem;
+  padding: 20px;
+}
+
+.main-content .section-title {
+  color: #43485c;
+  text-transform: uppercase;
+  font-size: 1.8rem;
+  letter-spacing: 2px;
+  padding-bottom: 30px;
+}
+
+.footer {
+  bottom: 0;
+  width: 100vw;
+  padding: 0;
+  height: 80px;
+  line-height: 25px;
+  text-align: center;
+  background: #1f2c6c;
+  color: whitesmoke;
+  padding-top: 2rem;
+}
+
+.footer a {
+  padding: 0rem 1rem 1rem 1rem;
+  color: lightgrey;
+}
+
+.footer a i {
+  font-size: 1.5rem;
+  padding: 0px 10px;
+}
+
+.footer a .nav-item {
+  color: whitesmoke;
+}
+
+.fa-download {
+  color: #43485c;
+}
+
+#toTop {
+  height: 50px;
+  width: 50px;
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  border: none;
+  outline: none;
+  background-color: rgba(31, 44, 108, 0.65);
+  color: white;
+  cursor: pointer;
+  border-radius: 50%;
+  font-size: 2rem;
+  box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3);
+}
+
+#toTop a {
+  color: white;
+}
+
+#toTop:hover {
+  background-color: #43485c;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: rgba(245, 245, 245, 0);
+}
+
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #43485c;
+}
+
+body.preloader-site {
+  overflow: hidden;
+}
+
+.preloader-wrapper {
+  height: 100%;
+  width: 100%;
+  background: #1f2c6c;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999999;
+}
+
+.preloader-wrapper .preloader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 120px;
+}
+
+.white
+{color:ghostwhite}

css/tabs.css

@@ -0,0 +1,51 @@
+.tabs {
+margin-bottom: -1px !important;
+position: relative;
+}
+.tab-content {
+padding: 60px;
+top: 197px;
+color: #000;
+background-color: white;
+}
+.tab-pane {
+display: none;
+}
+.tab-pane.is-active {
+display: block;
+width: 50%;
+position: relative;
+left: 50%;
+transform: translateX(-50%);
+}
+.is-active {
+display: initial;
+}
+
+.cent{
+display: block;
+margin: 10px auto;
+padding: 5px;
+border: 1px solid #ccc}
+
+.video
+{display: block;
+margin: 0 auto;}
+
+/* CSS from http://embedresponsively.com */
+.embed-container {
+	position: relative;
+	padding-bottom: 56.25%;
+	height: 0;
+	overflow: hidden;
+	max-width: 100%;
+}
+.embed-container iframe,
+.embed-container object,
+.embed-container embed {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}

index.css

@@ -0,0 +1,26 @@
+html, body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  background:  #DCDCDC;
+}
+.card {
+  margin-bottom: 3rem;
+}
+.content-wrapper {
+  margin-top: 3rem;
+}
+.card-footer-item {
+  font-size: 12px;
+  font-weight: normal;
+}
+.card-header-title {
+  display: block;
+}
+.card-content p {
+  margin-bottom: 2rem;
+}
+.container {
+  max-width: 95%;
+}
+.fa-code, .fa-search {
+  margin-right: 0.5vw;
+}

index.html

@@ -0,0 +1,102 @@
+<oDOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Learn JavaScript The Hard Way</title>
+    <link rel="shortcut icon" href="/images/fav_icon.png" type="image/x-icon">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
+    <!-- Bulma Version 0.8.x-->
+    <link rel="stylesheet" href="/css/bulma.min.css" />
+    <link rel="stylesheet" type="text/css" href="/css/landing.css">
+</head>
+
+<body>
+    <section class="hero is-info is-fullheight">
+        <div class="hero-head">
+            <nav class="navbar">
+                <div class="container">
+                    <div class="navbar-brand">
+                        <a class="navbar-item" href="/">
+                            <h2 class="is-size-2">LJSTHW</h2>
+                        </a>
+                        <span class="navbar-burger burger" data-target="navbarMenu">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </span>
+                    </div>
+                    <div id="navbarMenu" class="navbar-menu">
+                        <div class="navbar-end">
+                            <span class="navbar-item">
+                                <a class="button is-white is-outlined" href="#">
+                                    <span class="icon">
+                                        <i class="fa fa-home"></i>
+                                    </span>
+                                    <span>Home</span>
+                                </a>
+                            </span>
+                            <span class="navbar-item">
+                                <a class="button is-white is-outlined" href="#">
+                                    <span class="icon">
+                                        <i class="fa fa-superpowers"></i>
+                                    </span>
+                                    <span>Examples</span>
+                                </a>
+                            </span>
+                            <span class="navbar-item">
+                                <a class="button is-white is-outlined" href="#">
+                                    <span class="icon">
+                                        <i class="fa fa-book"></i>
+                                    </span>
+                                    <span>Documentation</span>
+                                </a>
+                            </span>
+                            <span class="navbar-item">
+                                <a class="button is-white is-outlined" href="https://github.com/BulmaTemplates/bulma-templates/blob/master/templates/landing.html">
+                                    <span class="icon">
+                                        <i class="fa fa-github"></i>
+                                    </span>
+                                    <span>View Source</span>
+                                </a>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            </div>
+
+            <div class="hero-body">
+                <div class="container has-text-centered">
+                    <div class="column is-6 is-offset-3">
+                        <h1 class="title is-size-2 has-text-white">
+                            Learn JavaScript the Hard Way
+                        </h1>
+                        <h1 class="title">
+                            Coming Soon
+                        </h1>
+                        <h2 class="subtitle has-text-white-bis">
+                            Zed is cooking up a whole new website to run the Learn JavaScript the Hard Way course, and you get to watch him code it <b>live</b>.  Sign up for the mailing list to be notified of the next live stream.
+                        </h2>
+
+
+
+                        <div class="box">
+                        <div data-mailtrain-subscription-widget data-url="https://train.learnjsthehardway.com/subscription/">
+                            <a href="https://train.learnjsthehardway.com/subscription/">Subscribe to our list</a>
+                        </div>
+                        <script src="https://train.learnjsthehardway.com/subscription/widget.js"></script>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+    </section>
+    <script async type="text/javascript" src="/js/bulma.js"></script>
+</body>
+
+</html>

js/bulma.js

@@ -0,0 +1,10 @@
+// The following code is based off a toggle menu by @Bradcomp
+// source: https://gist.github.com/Bradcomp/a9ef2ef322a8e8017443b626208999c1
+(function() {
+    var burger = document.querySelector('.burger');
+    var menu = document.querySelector('#'+burger.dataset.target);
+    burger.addEventListener('click', function() {
+        burger.classList.toggle('is-active');
+        menu.classList.toggle('is-active');
+    });
+})();

js/kanban-switch.js

@@ -0,0 +1,413 @@
+const app = new Vue({
+
+  el: '#app',
+
+
+  data: {
+    search: "",
+    isSwitched: false,
+    isSwitchedCustom: "Pleasant feelings",
+    title: "PLEASANT FEELINGS",
+    aos: "UNPLEASANT FEELINGS",
+    cards: [
+      {
+        name: "OPEN",
+        cardColor: "dark",
+        items: [
+          "understanding",
+          "confident",
+          "reliable",
+          "easy",
+          "amazed",
+          "free",
+          "sympathetic",
+          "interested",
+          "satisfied",
+          "receptive",
+          "accepting",
+          "kind",
+        ]
+      },
+      {
+        name: "HAPPY",
+        cardColor: "info",
+        items: [
+          "great",
+          "gay",
+          "joyous",
+          "lucky",
+          "fortunate",
+          "delighted",
+          "overjoyed",
+          "gleeful",
+          "thankful",
+          "important",
+          "festive",
+          "ecstatic",
+          "satisfied",
+          "glad",
+          "cheerful",
+          "sunny",
+          "merry",
+          "elated",
+          "jubilant"
+        ]
+      },
+      {
+        name: "ALIVE",
+        cardColor: "primary",
+        items: [
+          "playful",
+          "curageous",
+          "energetic",
+          "liberated",
+          "optimistic",
+          "provocative",
+          "impulsive",
+          "free",
+          "frisky",
+          "animated",
+          "spirited",
+          "thrilled",
+          "wonderful"
+        ]
+      },
+      {
+        name: "GOOD",
+        cardColor: "info",
+        items: [
+          "calm",
+          "peaceful",
+          "at ease",
+          "comfortable",
+          "pleased",
+          "encouraged",
+          "clever",
+          "surprised",
+          "content",
+          "quiet",
+          "certain",
+          "relaxed",
+          "serene",
+          "free and easy",
+          "bright",
+          "blessed",
+          "reassured"
+        ]
+      },
+      {
+        name: "LOVE",
+        cardColor: "danger",
+        items: [
+          "loving",
+          "considerate",
+          "affectionate",
+          "sensitive",
+          "tender",
+          "devoted",
+          "attracted",
+          "passionate",
+          "admiration",
+          "warm",
+          "touched",
+          "sympathy",
+          "close",
+          "loved",
+          "comforted",
+          "drawn toward"
+        ]
+      },
+      {
+        name: "INTERESTED",
+        cardColor: "info",
+        items: [
+          "concerned",
+          "affected",
+          "fascinated",
+          "intrigued",
+          "absorbed",
+          "inquisitive",
+          "nosy",
+          "snoopy",
+          "engrossed",
+          "curious",
+        ]
+      },
+      {
+        name: "POSITIVE",
+        cardColor: "success",
+        items: [
+          "eager",
+          "keen",
+          "earnest",
+          "intent",
+          "anxious",
+          "inspired",
+          "determined",
+          "excited",
+          "enthusiastic",
+          "bold",
+          "brave",
+          "daring",
+          "challenged",
+          "optimistic",
+          "re-enforced",
+          "confident",
+          "hopeful",
+        ]
+      },
+      {
+        name: "STRONG",
+        cardColor: "primary",
+        items: [
+          "impulsive",
+          "free",
+          "sure",
+          "certain",
+          "rebellious",
+          "unique",
+          "dynamic",
+          "tenacious",
+          "hardy",
+          "secure"
+        ]
+      },
+    ],
+    emotions: [
+      {
+        name: "ANGRY",
+        cardColor: "danger",
+        items: [
+          "irritated",
+          "enraged",
+          "hostile",
+          "insulting",
+          "sore",
+          "annoyed",
+          "upset",
+          "hateful",
+          "unpleasant",
+          "offensive",
+          "bitter",
+          "aggressive",
+          "resentful",
+          "inflamed",
+          "provoked",
+          "incensed",
+          "infuriated",
+          "cross",
+          "worked up",
+          "boiling",
+          "fuming",
+          "indignant"
+        ]
+      },
+      {
+        name: "DEPRESSED",
+        cardColor: "dark",
+        items: [
+          "lousy",
+          "disappointed",
+          "discouraged",
+          "ashamed",
+          "powerless",
+          "diminished",
+          "guilty",
+          "dissatisfied",
+          "miserable",
+          "detestable",
+          "repugnant",
+          "despicable",
+          "disgusting",
+          "abominable",
+          "terrible",
+          "in despair",
+          "sulky",
+          "bad",
+          "a sense of loss"
+        ]
+      },
+      {
+        name: "CONFUSED",
+        cardColor: "info",
+        items: [
+          "upset",
+          "doubtful",
+          "uncertain",
+          "ashamed",
+          "indecisive",
+          "perplexed",
+          "embarassed",
+          "hesitant",
+          "shy",
+          "stupefied",
+          "disillusioned",
+          "unbelieving",
+          "skeptical",
+          "distrustful",
+          "misgiving",
+          "lost",
+          "unsure",
+          "uneasy",
+          "pessimistic",
+          "tense"
+        ]
+      },
+
+      {
+        name: "HELPLESS",
+        cardColor: "info",
+        items: [
+          "incapable",
+          "alone",
+          "paralyzed",
+          "fatigued",
+          "useless",
+          "inferior",
+          "vulnerable",
+          "empty",
+          "forced",
+          "hesitant",
+          "despair",
+          "frustrated",
+          "distressed",
+          "woeful",
+          "pathetic",
+          "tragic",
+          "in a stew",
+          "dominated"
+        ]
+      },
+      {
+        name: "INDIFFERENT",
+        cardColor: "info",
+        items: [
+          "dull",
+          "nonchalant",
+          "neutral",
+          "reserved",
+          "weary",
+          "bored",
+          "preoccupied",
+          "cold",
+          "disinterested",
+          "lifeless"
+        ]
+      },
+      {
+        name: "AFRAID",
+        cardColor: "info",
+        items: [
+          "fearful",
+          "terrified",
+          "suspicious",
+          "anxious",
+          "alarmed",
+          "panic",
+          "nervous",
+          "scared",
+          "worried",
+          "frightened",
+          "timid",
+          "shaky",
+          "restless",
+          "doubtful",
+          "threatened",
+          "cowardly",
+          "quaking",
+          "menaced",
+          "wary"
+        ]
+      },
+
+      {
+        name: "HURT",
+        cardColor: "info",
+        items: [
+          "crushed",
+          "tormented",
+          "pained",
+          "tortured",
+          "dejected",
+          "rejected",
+          "injured",
+          "offended",
+          "afflicted",
+          "aching",
+          "victimized",
+          "heartbroken",
+          "agonized",
+          "humiliated",
+          "wronged",
+          "alienated"
+        ]
+      },
+
+      {
+        name: "SAD",
+        cardColor: "info",
+        items: [
+          "tearful",
+          "sorrowful",
+          "pained",
+          "grief",
+          "anguish",
+          "desolate",
+          "desperate",
+          "pessimistic",
+          "unhappy",
+          "lonely",
+          "grieved",
+          "mournful",
+          "dismayed"
+        ]
+      },
+    ]
+  },
+
+
+
+  computed: {
+    filteredCards() {
+
+      var _this = this
+      if (this.isSwitched) {
+
+
+        if (this.search.length === 0) return this.emotions
+        return this.emotions.map(function (card) {
+          return {
+            name: card.name,
+            cardColor: card.cardColor,
+            items: card.items.filter(function (item) {
+              return item.includes(_this.search)
+            })
+          }
+        })
+      } else {
+
+        if (this.search.length === 0) return this.cards
+        return this.cards.map(function (card) {
+          return {
+            name: card.name,
+            cardColor: card.cardColor,
+            items: card.items.filter(function (item) {
+              return item.includes(_this.search)
+            })
+          }
+        })
+      }
+
+    }
+  },
+
+  methods: {
+    removeCard(card) {
+      this.cards.splice(this.cards.indexOf(card), 1)
+    },
+    clearSearchField() {
+      this.search = ''
+    }
+  }
+});
+app.$mount("#app");

js/kanban.js

@@ -0,0 +1,159 @@
+var App = new Vue({
+  el: "#app",
+  data() {
+    return {
+      search: "",
+      title: "Game of Thrones",
+      cards: [
+        {
+          name: "Season One",
+          cardColor: "dark",
+          items: [
+            "winter is coming",
+            "the kingsroad",
+            "lord snow",
+            "cripples, bastards and broken things",
+            "the wolf and the lion",
+            "a golden crown",
+