Create README.md

init

README.md

@@ -0,0 +1,4 @@
+This repository represents the set up for my uberspace asteroid. I am in the process of pointing my main domain to this page.
+
+I used this theme https://github.com/BuckyMaler/global
+

css/base/_body-element.sass

@@ -0,0 +1,8 @@
+body
+  background-color: $black
+  font-size: 14px
+  line-height: 1.6
+  font-family: "Montserrat", sans-serif
+  color: $white
+  -webkit-font-smoothing: antialiased
+  -webkit-text-size-adjust: 100%

css/base/_fonts.scss

@@ -0,0 +1,33 @@
+// https://www.fontsquirrel.com/fonts/montserrat
+
+@font-face {
+	font-family: 'Montserrat';
+	src: url('fonts/Montserrat-Black.eot');
+	src: local('☺'), url('fonts/Montserrat-Black.woff') format('woff'), url('fonts/Montserrat-Black.ttf') format('truetype'), url('fonts/Montserrat-Black.svg') format('svg');
+	font-weight: 900;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Montserrat';
+	src: url('fonts/Montserrat-Bold.eot');
+	src: local('☺'), url('fonts/Montserrat-Bold.woff') format('woff'), url('fonts/Montserrat-Bold.ttf') format('truetype'), url('fonts/Montserrat-Bold.svg') format('svg');
+	font-weight: 700;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Montserrat';
+	src: url('fonts/Montserrat-Regular.eot');
+	src: local('☺'), url('fonts/Montserrat-Regular.woff') format('woff'), url('fonts/Montserrat-Regular.ttf') format('truetype'), url('fonts/Montserrat-Regular.svg') format('svg');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Montserrat';
+	src: url('fonts/Montserrat-Light.eot');
+	src: local('☺'), url('fonts/Montserrat-Light.woff') format('woff'), url('fonts/Montserrat-Light.ttf') format('truetype'), url('fonts/Montserrat-Light.svg') format('svg');
+	font-weight: 300;
+	font-style: normal;
+}

css/base/_normalize.scss

@@ -0,0 +1,221 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+a {
+  background-color: transparent;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+dfn {
+  font-style: italic;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+img {
+  border: 0;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+figure {
+  margin: 1em 40px;
+}
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+pre {
+  overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+button {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+input {
+  line-height: normal;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  border: 0;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+}
+
+optgroup {
+  font-weight: bold;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

css/base/_selection-colors.sass

@@ -0,0 +1,14 @@
+::selection
+  background: #FFF498
+
+::-moz-selection
+  background: #FFF498
+
+img::selection
+  background: transparent
+
+img::-moz-selection
+  background: transparent
+
+body
+  -webkit-tap-highlight-color: #FFF498

css/base/_vars.sass

@@ -0,0 +1,5 @@
+// Colors
+$white: #fff
+$black: #0c0c0c
+$highlight: #0f33ff
+$muted-gray: #282828

css/layouts/_grid.sass

@@ -0,0 +1,50 @@
+.l-viewport
+  position: relative
+  width: 100%
+  height: 100vh
+  box-shadow: 0 0 45px 5px rgba(0,0,0,.85)
+  overflow: hidden
+
+.l-wrapper
+  position: relative
+  width: 1440px
+  max-width: 90%
+  height: 100%
+  margin: 0 auto
+
+.l-side-nav
+  position: absolute
+  left: 0
+  display: flex
+  height: 100%
+  align-items: center
+
+  // placed on layout class due to firefox bug
+  &::before
+    content: ""
+    position: absolute
+    top: 50%
+    left: 0
+    transform: translateY(-50%)
+    width: 2px
+    height: 70%
+    max-height: 750px
+    background-color: #555
+    opacity: .35
+    z-index: 10
+
+  @media (max-width: 1180px)
+    display: none
+
+.l-main-content
+  position: relative
+  width: 100%
+  height: 100%
+  margin: 0
+  padding: 0
+  list-style: none
+
+.l-section
+  position: absolute
+  width: 100%
+  height: 100%

css/main.sass

@@ -0,0 +1,26 @@
+// This is the single file output by sass. It is intended to ONLY @import other files.
+
+
+// BASE
+@import 'base/fonts'
+@import 'base/normalize'
+@import 'base/vars'
+@import 'base/selection-colors'
+@import 'base/body-element'
+
+
+// LAYOUTS
+@import 'layouts/grid'
+
+
+// MODULES
+@import 'modules/device-notification'
+@import 'modules/section'
+@import 'modules/header'
+@import 'modules/side-nav'
+@import 'modules/intro'
+@import 'modules/work'
+@import 'modules/about'
+@import 'modules/contact'
+@import 'modules/hire'
+@import 'modules/outer-nav'

css/modules/_about.sass

@@ -0,0 +1,189 @@
+.about
+  position: relative
+  display: flex
+  width: 900px
+  max-width: 75%
+  height: 100%
+  flex-direction: column
+  justify-content: center
+  margin: 0 auto
+
+  @media (max-width: 1180px)
+    max-width: 100%
+
+  &--banner
+    position: relative
+    height: 475px
+
+    &::before
+      content: ""
+      position: absolute
+      top: 20px
+      left: 200px
+      transform: rotate(-25deg)
+      border: 5px solid $highlight
+      border-right-color: transparent
+      border-bottom-color: transparent
+
+    &::after
+      content: ""
+      position: absolute
+      top: 75px
+      left: 400px
+      transform: rotate(45deg)
+      width: 10px
+      height: 10px
+      background-color: $highlight
+
+    h2
+      position: relative
+      margin-top: 35px
+      font-size: 68px
+      font-weight: 900
+      line-height: 1
+      z-index: 1
+
+      &::before
+        content: ""
+        position: absolute
+        top: 60px
+        left: 268px
+        width: 30px
+        height: 30px
+        background-color: $highlight
+        border-radius: 50%
+
+      &::after
+        content: ""
+        position: absolute
+        top: 255px
+        left: 255px
+        width: 10px
+        height: 10px
+        background-color: $highlight
+
+    a
+      padding: 5px 17px 5px 0
+      text-decoration: none
+      color: $white
+      font-weight: 700
+      text-transform: uppercase
+      background-color: transparent
+
+      &:hover
+        svg
+          left: 10px
+
+      svg
+        position: relative
+        left: 5px
+        width: 15px
+        fill: $white
+        transition: left .2s ease-in-out
+
+    img
+      position: absolute
+      bottom: -90px
+      right: -12px
+
+  &--options
+    display: flex
+    max-width: 600px
+    justify-content: space-between
+    margin: 0
+    padding: 0
+    list-style: none
+
+    & > a
+      position: relative
+      width: 150px
+      height: 75px
+      text-decoration: none
+      color: $white
+      border: 10px solid $highlight
+      background:
+        position: center
+        size: cover
+        repeat: no-repeat
+
+      &:nth-child(1)
+        background-image: url("../img/about-winners.jpg")
+
+      &:nth-child(2)
+        background-image: url("../img/about-philosophy.jpg")
+
+      &:nth-child(3)
+        background-image: url("../img/about-history.jpg")
+
+      &:hover
+        h3
+          bottom: -50px
+
+    h3
+      position: absolute
+      bottom: -38px
+      left: 10px
+      font-size: 16px
+      text-transform: uppercase
+      transition: bottom .2s ease-in-out, left .2s ease-in-out
+
+@media (max-width: 767px)
+
+  .about
+
+    &--banner
+      height: 305px
+
+      &::before
+        top: 0
+        left: 125px
+
+      &::after
+        top: 35px
+        left: 260px
+
+      h2
+        margin-top: 10px
+        font-size: 44px
+
+        &::before
+          top: 28px
+          left: 168px
+
+        &::after
+          top: 163px
+          left: 163px
+
+      img
+        width: 315px
+
+@media (max-width: 600px)
+
+  .about
+
+    &--banner
+      height: auto
+
+      &::before
+        left: 155px
+
+      &::after
+        left: 310px
+
+      h2
+        margin-top: 0
+        font-size: 55px
+
+        &::before
+          top: 43px
+          left: 214px
+
+        &::after
+          top: 205px
+          left: 205px
+
+      img
+        display: none
+
+    &--options
+      display: none

css/modules/_contact.sass

@@ -0,0 +1,75 @@
+// position fixed in order to escape the 1440px wrapper
+.contact
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  background:
+    image: url("../img/contact-visual.png")
+    position: center
+    size: cover
+    repeat: no-repeat
+
+  &--lockup
+    position: relative
+    display: flex
+    width: 900px
+    max-width: 75%
+    height: 100%
+    align-items: center
+    justify-content: flex-end
+    margin: 0 auto
+
+    @media (max-width: 1180px)
+      max-width: 90%
+
+    @media (max-width: 767px)
+      justify-content: center
+
+    .modal
+      padding: 45px 45px
+      text-align: center
+      background-color: $black
+      box-shadow: 0 0 30px 0 rgba(0,0,0,.75)
+
+      &--information
+
+        p,
+        a
+          display: block
+          margin: 14px 0
+          text-decoration: none
+          color: $white
+          font-weight: 700
+
+        p
+          margin-top: 0
+
+      &--options
+        margin: 0
+        padding: 0
+        list-style: none
+
+        & > li
+          width: 130px
+          margin: 0 auto 25px auto
+
+        li:nth-child(1)
+          background-color: #1769ff
+
+        li:nth-child(2)
+          background-color: #ea4c89
+
+        li:nth-child(3)
+          margin-bottom: 0
+          background-color: $highlight
+          text-transform: uppercase
+
+        a
+          display: block
+          width: 100%
+          padding: 8px 0
+          text-decoration: none
+          color: $white
+          font-weight: 700

css/modules/_device-notification.sass

@@ -0,0 +1,44 @@
+// reference media queries at the bottom of this file
+.device-notification
+  display: none
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  background-color: $black
+  z-index: 12
+
+  &--logo
+    display: flex
+    align-items: center
+    text-decoration: none
+    color: $white
+
+    p
+      margin: 0 0 0 10px
+      font-size: 16px
+      font-weight: 700
+      text-transform: uppercase
+
+  &--message
+    width: 70%
+    margin: 30px 0 0 0
+    font-weight: 700
+    text-align: center
+
+  // based on personal content these may need to be adjusted slighlty
+  @media (max-width: 767px) and (min-width: 601px) and (max-height: 680px)
+    display: flex
+
+  @media (max-width: 600px) and (min-width: 480px) and (max-height: 580px)
+    display: flex
+
+  @media (max-width: 736px) and (min-width: 360px) and (orientation: landscape)
+    display: flex
+
+  @media(max-width: 359px)
+    display: flex

css/modules/_header.sass

@@ -0,0 +1,76 @@
+.header
+  position: absolute
+  top: 0
+  left: 0
+  display: flex
+  width: 100%
+  height: 70px
+  align-items: center
+  justify-content: space-between
+  z-index: 10
+
+  &--logo
+    display: flex
+    align-items: center
+    text-decoration: none
+    color: $white
+
+    p
+      margin: 0 0 0 10px
+      font-size: 16px
+      font-weight: 700
+      text-transform: uppercase
+
+  &--nav-toggle
+    display: flex
+    width: 50px
+    height: 50px
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    cursor: pointer
+
+    span,
+    &::before,
+    &::after
+      content: ""
+      position: relative
+      width: 16px
+      height: 2px
+      background-color: $white
+
+    &::before
+      bottom: 5px
+      width: 23px
+
+    &::after
+      top: 5px
+      width: 23px
+
+  &--cta
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+    padding: 0 20px
+    line-height: 30px
+    text-decoration: none
+    color: $white
+    font-weight: 700
+    text-transform: uppercase
+    background-color: $highlight
+    border: none
+    opacity: 0
+    visibility: hidden
+    transition: opacity .4s ease-in-out, visibility 0s .4s
+
+    &:focus
+      outline: none
+
+    &.is-active
+      opacity: 1
+      visibility: visible
+      transition: opacity .4s ease-in-out .4s
+
+    @media (max-width: 767px)
+      display: none

css/modules/_hire.sass

@@ -0,0 +1,167 @@
+.hire
+  position: relative
+  display: flex
+  width: 700px
+  max-width: 75%
+  height: 100%
+  flex-direction: column
+  justify-content: center
+  margin: 0 auto
+
+  @media (max-width: 1180px)
+    max-width: 100%
+
+  h2
+    margin: 0 0 20px 0
+    font-size: 30px
+    text-align: center
+
+.work-request
+  display: flex
+  width: 100%
+  flex-direction: column
+  align-items: center
+  color: $white
+
+  input[type="submit"]
+    width: 400px
+    max-width: 100%
+    line-height: 50px
+    font-size: 16px
+    font-weight: 700
+    text-transform: uppercase
+    background-color: $highlight
+    border: none
+    border-radius: 0
+
+    &:focus
+      outline: none
+
+  &--options
+    display: flex
+    width: 100%
+    flex-direction: column
+    align-items: center
+    margin: 30px 0
+
+    .options-a
+      display: flex
+      width: 100%
+      justify-content: space-between
+
+    .options-b
+      display: flex
+      width: 72%
+      flex-wrap: wrap
+      justify-content: space-around
+
+    label
+      display: block
+      width: 200px
+      margin-bottom: 30px
+      line-height: 50px
+      font-size: 16px
+      font-weight: 700
+      text-align: center
+      border: 2px solid $white
+      cursor: pointer
+      transition: background-color .2s ease-in-out, border-color .2s ease-in-out
+
+      svg
+        position: relative
+        left: -5px
+        width: 0
+        fill: $white
+        transition: width .2s ease-in-out
+
+    input[type="checkbox"]
+      display: none
+
+      &:checked + label
+        background-color: $highlight
+        border-color: $highlight
+
+        & svg
+          width: 15px
+
+  &--information
+    display: flex
+    width: 100%
+    justify-content: space-between
+    margin-bottom: 60px
+
+    .information-name,
+    .information-email
+      position: relative
+      width: 45%
+      height: 50px
+      font-size: 30px
+      font-weight: 300
+
+    input[type="text"],
+    input[type="email"]
+      width: 100%
+      padding: 0 0 5px 0
+      background-color: transparent
+      border: none
+      border-bottom: 1px solid $white
+      border-radius: 0
+
+      &:focus
+        outline: none
+        background-color: $black
+
+    label
+      position: absolute
+      top: 0
+      left: 0
+      pointer-events: none
+      transition: top .2s ease-in-out, font-size .2s ease-in-out
+
+    input:focus + label,
+    input.has-value + label
+      top: -15px
+      font-size: 14px
+
+@media (max-width: 767px)
+
+  .work-request
+
+    &--options
+      flex-direction: row
+      justify-content: space-around
+
+      .options-a,
+      .options-b
+        display: block
+        width: auto
+
+@media (max-width: 600px)
+
+  .work-request
+
+    &--options
+      margin: 20px 0
+
+      @media (max-width: 415px)
+        justify-content: space-between
+
+      label
+        width: 150px
+        margin-bottom: 15px
+        font-size: 14px
+
+      input[type="checkbox"]
+
+        &:checked + label
+
+          & svg
+            width: 12px
+
+    &--information
+      margin-bottom: 30px
+
+      .information-name,
+      .information-email
+        height: 40px
+        font-size: 24px

css/modules/_intro.sass

@@ -0,0 +1,175 @@
+.intro
+  position: relative
+  display: flex
+  width: 900px
+  max-width: 75%
+  height: 100%
+  flex-direction: column
+  justify-content: center
+  margin: 0 auto
+
+  @media (max-width: 1180px)
+    max-width: 100%
+
+  &--banner
+    position: relative
+    height: 475px
+
+    &::before
+      content: ""
+      position: absolute
+      bottom: 20px
+      left: -15px
+      right: 0
+      height: 2px
+      background-color: $muted-gray
+
+    &::after
+      content: ""
+      position: absolute
+      bottom: 18px
+      left: 0
+      width: 30px
+      height: 4px
+      background-color: $highlight
+
+    h1
+      position: relative
+      font-size: 68px
+      font-weight: 900
+      line-height: 1
+      z-index: 1
+
+    button
+      position: relative
+      padding: 5px 17px 5px 12px
+      font-weight: 700
+      text-transform: uppercase
+      background-color: transparent
+      border: none
+
+      .btn-background
+        position: absolute
+        top: 0
+        left: 23px
+        right: 0
+        height: 100%
+        background-color: $highlight
+        z-index: -1
+        transition: left .2s ease-in-out
+
+      &:hover
+        .btn-background
+          left: 0
+
+      &:focus
+        outline: none
+
+      svg
+        position: relative
+        left: 5px
+        width: 15px
+        fill: $white
+
+    img
+      position: absolute
+      bottom: 21px
+      right: -12px
+
+  &--options
+    display: flex
+    justify-content: space-between
+    margin: 0
+    padding: 0
+    list-style: none
+
+    & > a
+      max-width: 250px
+      text-decoration: none
+      color: $muted-gray
+      transition: color .2s ease-in-out
+
+      &:hover
+        color: $white
+
+    h3
+      font-size: 16px
+      text-transform: uppercase
+
+    p
+      margin-bottom: 0
+
+@media (max-width: 900px)
+
+  .intro
+
+    &--banner
+      height: 380px
+
+      h1
+        font-size: 55px
+
+      img
+        width: 430px
+
+    &--options
+
+      & > a
+        margin-right: 30px
+
+        &:last-child
+          margin-right: 0
+
+@media (max-width: 767px)
+
+  .intro
+
+    &--banner
+      height: 305px
+
+      h1
+        font-size: 44px
+
+      img
+        width: 330px
+
+    &--options
+      display: block
+
+      & > a
+        display: block
+        max-width: 100%
+        margin: 0 0 30px 0
+
+        &:last-child
+          margin-bottom: 0
+
+@media (max-width: 600px)
+
+  .intro
+
+    &--banner
+      height: 360px
+
+      h1
+        font-size: 55px
+
+      img
+        display: none
+
+@media (max-width: 600px) and (max-height: 750px)
+
+  .intro
+
+    &--banner
+      height: auto
+
+      &::before,
+      &::after
+        display: none
+
+      h1
+        margin-top: 0
+
+    &--options
+      display: none

css/modules/_outer-nav.sass

@@ -0,0 +1,113 @@
+// tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
+.perspective
+  position: relative
+  width: 100%
+  height: 100%
+  overflow: hidden
+
+  &--modalview
+    position: fixed
+    perspective: 1500px
+
+.container
+  position: relative
+  transform: translateZ(0) translateX(0) rotateY(0deg)
+  min-height: 100%
+  outline: 30px solid $highlight
+  transition: transform .4s
+
+.modalview
+
+  .container
+    position: absolute
+    width: 100%
+    height: 100%
+    overflow: hidden
+    backface-visibility: hidden
+
+.effect-rotate-left
+
+  .container
+    transform-origin: 0% 50%
+    transition: transform .4s
+
+  &--animate
+
+    .container
+      transform: translateZ(-1800px) translateX(-50%) rotateY(45deg)
+      outline: 30px solid $highlight
+
+.outer-nav
+  position: absolute
+  top: 50%
+  left: 55%
+  transform: translateY(-50%)
+  transform-style: preserve-3d
+  margin: 0
+  padding: 0
+  list-style: none
+  text-align: center
+  visibility: hidden
+  transition: visibility 0s .2s
+
+  &.is-vis
+    visibility: visible
+
+  &--return
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    display: none
+    cursor: pointer
+    z-index: 11
+
+    &.is-vis
+      display: block
+
+  & > li
+    transform-style: preserve-3d
+    transform: translateX(350px) translateZ(-1000px)
+    font-size: 55px
+    font-weight: 900
+    opacity: 0
+    cursor: pointer
+    transition: transform .2s, opacity .2s
+
+    &.is-vis
+      transform: translateX(0) translateZ(0)
+      opacity: 1
+      transition: transform .4s, opacity .4s
+
+    &::before
+      content: ""
+      position: absolute
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -25%)
+      width: 110%
+      height: 15px
+      opacity: 0
+      background-color: $highlight
+
+    &.is-active::before
+      opacity: 1
+
+    @media (max-width: 767px)
+      font-size: 44px
+
+    @media (max-width: 600px)
+      font-size: 34px
+
+  li.is-vis:nth-child(2)
+    transition-delay: .04s
+
+  li.is-vis:nth-child(3)
+    transition-delay: .08s
+
+  li.is-vis:nth-child(4)
+    transition-delay: .12s
+
+  li.is-vis:nth-child(5)
+    transition-delay: .16s

css/modules/_section.sass

@@ -0,0 +1,19 @@
+// section transition styles
+.section
+  opacity: 0
+  visibility: hidden
+  transition: opacity .4s ease-in-out, visibility 0s .4s
+
+  &--is-active
+    opacity: 1
+    visibility: visible
+    z-index: 1
+    transition: opacity .4s ease-in-out .4s
+
+  &--next
+    transform: translateY(-45px)
+    transition: transform .4s ease-in-out
+
+  &--prev
+    transform: translateY(45px)
+    transition: transform .4s ease-in-out

css/modules/_side-nav.sass

@@ -0,0 +1,65 @@
+.side-nav
+  position: relative
+  display: flex
+  width: 100px
+  height: 70%
+  max-height: 750px
+  flex-direction: column
+  justify-content: space-around
+  margin: 0
+  padding: 0
+  list-style-position: inside
+  z-index: 10
+
+  & > li
+    position: relative
+    top: -5px
+    color: $white
+    font-size: 6px
+    cursor: pointer
+
+    span
+      position: relative
+      top: 3px
+      left: 10px
+      color: $white
+      font-size: 14px
+      font-weight: 300
+      opacity: 0
+      visibility: hidden
+
+    &::before
+      position: absolute
+      top: 3px
+      left: 10px
+      color: #555
+      font-size: 14px
+      font-weight: 300
+
+  li:nth-child(1)::before
+    content: "01"
+
+  li:nth-child(2)::before
+    content: "02"
+
+  li:nth-child(3)::before
+    content: "03"
+
+  li:nth-child(4)::before
+    content: "04"
+
+  li:nth-child(5)::before
+    content: "05"
+
+  li.is-active
+    color: $highlight
+    transition: color .4s ease-in-out
+
+    span
+      opacity: 1
+      visibility: visible
+      transition: opacity .4s ease-in-out
+
+    &::before
+      left: -33px
+      color: $white

css/modules/_work.sass

@@ -0,0 +1,178 @@
+.work
+  position: relative
+  display: flex
+  width: 960px
+  max-width: 80%
+  height: 100%
+  flex-direction: column
+  justify-content: center
+  margin: 0 auto
+
+  @media (max-width: 1180px)
+    max-width: 100%
+
+  h2
+    margin: 0 0 20px 0
+    font-size: 30px
+    text-align: center
+
+  &--lockup
+    position: relative
+
+    .slider
+      position: relative
+      display: flex
+      width: 80%
+      margin: 0 auto
+      padding: 0
+      list-style: none
+
+      &--item
+        position: absolute
+        display: none
+        text-align: center
+
+        a
+          text-decoration: none
+          color: #858585
+
+        &-title
+          margin-top: 10px
+          font-size: 12px
+          font-weight: 700
+          text-transform: uppercase
+
+        &-description
+          display: none
+          max-width: 250px
+          margin: 0 auto
+
+        &-image
+          width: 150px
+          height: 150px
+          margin: 0 auto
+          border-radius: 50%
+          overflow: hidden
+
+          img
+            width: 100%
+
+        &-left
+          top: 50%
+          left: 0
+          transform: translateY(-50%)
+          display: block
+
+        &-right
+          top: 50%
+          right: 0
+          transform: translateY(-50%)
+          display: block
+
+        &-center
+          position: relative
+          top: 30px
+          left: 50%
+          transform: translateX(-50%)
+          display: block
+
+          a
+            color: $white
+
+          .slider--item-title
+            margin-top: 25px
+            font-size: 16px
+
+          .slider--item-description
+            display: block
+
+          .slider--item-image
+            width: 300px
+            height: 300px
+
+    .slider--next,
+    .slider--prev
+      position: absolute
+      top: 160px
+      display: flex
+      width: 50px
+      height: 50px
+      align-items: center
+      justify-content: center
+      background-color: $muted-gray
+      border-radius: 50%
+      cursor: pointer
+
+      svg
+        width: 20px
+        fill: $white
+
+    .slider--next
+      right: 0
+
+    .slider--prev
+      left: 0
+
+@media (max-width: 900px)
+
+  .work
+
+    &--lockup
+
+      .slider
+
+        &--item
+
+          &-image
+            width: 120px
+            height: 120px
+
+          &-center
+
+            .slider--item-image
+              width: 240px
+              height: 240px
+
+      .slider--next,
+      .slider--prev
+        top: 130px
+
+@media (max-width: 767px)
+
+  .work
+
+    &--lockup
+
+      .slider
+        width: 75%
+
+        &--item
+
+          &-image
+            width: 90px
+            height: 90px
+
+          &-center
+
+            .slider--item-image
+              width: 190px
+              height: 190px
+
+      .slider--next,
+      .slider--prev
+        top: 105px
+
+@media (max-width: 600px)
+
+  .work
+
+    &--lockup
+
+      .slider
+        width: auto
+
+        &--item
+
+          &-left,
+          &-right
+            display: none

css/scroll_gall.css

@@ -0,0 +1,58 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+html, body, #app {
+  width:100%;
+  height:100%;
+  margin:0;
+  padding:0;
+  font-size:0;
+  font-family: 'Montserrat', sans-serif;
+}
+
+#app {
+  opacity:0;
+  height:auto;
+  background:radial-gradient(#ccc, #999);
+}
+
+#app img {
+  display:block;
+}
+
+#detail {
+  position:absolute;
+  width:100%;
+  height:100%;
+  background:#111;
+  top:100%;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:space-evenly;
+}
+
+#detailImg {
+  width:85%;
+  height:85%;
+}
+
+#detailTxt {
+  color:#ccc;
+  font-size:20px;
+  letter-spacing:1px;
+}
+
+svg {
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  left:0;
+}
+
+#headlines {
+  max-width:800px;
+  min-width:450px;
+  left:50%;
+  top:50%;
+  transform:translate(-50%, -50%);
+}

css/style2.css

@@ -0,0 +1,405 @@
+/**
+ * =================================================================== 
+ *
+ *  ResumeTemplate v1.0 ClearCareer
+ *  url: clearcareer.ca
+ *  Design by: Iskender Piyale-Sheard
+ *  website: izzydoesizzy.com
+ *  Created 06-27-2016
+ *  Last Updated: 03-19-2017
+ *  ------------------------------------------------------------------
+ *  Table of Contents:
+
+ *  01. Global Styles
+ *  02. Intro
+ *  03. Social Icons
+ *  04. Icon Fonts
+ *  05. Section Styles
+ *  06. Timeline Styles
+ *  05. Footer
+ EXTRAS
+
+ * =================================================================== 
+ */
+
+/* 01. Basic Styles
+ * =================================================================== */
+
+ html {
+    overflow-x: hidden;
+ }
+ body {
+    font-family: 'Source Sans Pro', sans-serif;
+ }
+
+ h1 {
+    font-weight: bold;
+ }
+
+ h2 {
+ }
+
+ h5 {
+    font-weight: 600;
+ }
+
+ a {
+    cursor: pointer;
+    color: #1abc9c;
+    text-decoration: none;
+ }
+
+ a:hover {
+    text-decoration:none;
+    color: #1abc9c;
+    opacity: 0.9;
+ }
+
+ hr {
+    border-top: 5px solid #1abc9c;
+    width: 80px;
+    padding-bottom: 20px;
+ }
+
+
+ .colour-splash {
+    color: #1abc9c;
+ }
+
+ .section-primary span {
+    color: #1abc9c;
+    font-weight: bolder;
+    opacity: 1;
+ }
+
+
+
+
+
+
+
+
+/* 02. Intro
+ * =================================================================== */
+
+ .section-image {
+ 	background: #151515 url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=1199&h=799&q=80) no-repeat center center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    text-align: center;
+    color: #fff;
+    display:table;
+ }
+
+ .img-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #111111;
+    opacity: .7;
+ }
+
+ .intro {
+    vertical-align: middle;
+    text-align: center;
+    display:table-cell;
+    -webkit-transform: translateY(-2.1rem);
+    -ms-transform: translateY(-2.1rem);
+    transform: translateY(-2.1rem);
+}
+
+.intro .row {
+    margin-right: 0;
+    margin-left:0;
+}
+
+.intro h1 {
+    font-size: 84px;
+}
+
+.intro h5 {
+    color: #1abc9c;
+    font-size: 2.3rem;
+    margin-bottom: 0;
+    text-transform: uppercase;
+    letter-spacing: .3rem;
+    text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
+}
+
+.section-image span {
+    text-transform: uppercase;
+    font-size: 1.4em;
+    padding: 0 10px;
+    font-weight: 100;
+}
+
+.section-image h1 {
+    margin-top: 0;
+}
+
+.section-image p {
+    font-weight: lighter;
+    opacity: 0.9;
+}
+
+
+
+/* 03. Social Icons
+ * =================================================================== */
+
+.social {
+  margin: 0 10px;
+  padding-top: 1.3em;
+  text-align: center;
+  color: #fff;
+  font-size: 0.9em;
+}
+
+.social a {
+  color: white;
+  text-decoration:none;
+  padding: 2em;
+}
+
+.social a:hover{
+  opacity: 0.6;
+}
+
+.social-footer {
+    position: block;
+    padding: 15px;
+}
+
+.social-footer a {
+    color: white;
+    text-decoration: none;
+    padding: 0.6em;
+    font-size: 1.7em;
+}
+
+
+/* 04. Icon Font
+ * =================================================================== */
+
+ .lnr {
+    font-size: 4em !important;
+    color:#fff;
+ }
+
+/* 05. Section Styles
+ * =================================================================== */
+
+section {
+    padding-top: 100px;
+    padding-bottom: 100px;
+}
+
+.profilepic {
+    height: 150px;
+    width: auto;
+    border-radius: 300px;
+}
+
+.section-primary p {
+    text-align: justify;
+}
+
+.section-primary {
+    border: #1abc9c;
+}
+
+.section-colour {
+    background-color: #1abc9c;
+    color: #fff;
+}
+
+.section-colour p {
+    text-align: justify;
+}
+
+.section-heading .lead, .section-heading h2 {
+    text-align: center;
+}
+
+.section-colour {
+    border: #fff;
+}
+
+.section-colour hr {
+    border-top: 5px solid #fff;
+ }
+
+
+
+/* 01. Timeline Styles
+ * =================================================================== */
+
+.timeline-icon .fa {
+    color: white;
+    margin: 14px;
+    font-size: 1.7em;
+}
+
+#skills {
+    background: #151515 url(https://images.unsplash.com/photo-1456983933114-c22026990f4b?dpr=2&auto=format&crop=entropy&fit=crop&w=1280&h=720&q=80) no-repeat center center;
+    height: auto;
+}
+
+
+/* 05. Footer
+ * =================================================================== */
+
+footer {
+    display: block;
+    position: static;
+    bottom: 0;
+    background-color: black;
+    color: #fff;
+    padding: 50px 0;
+
+}
+
+footer p {
+    padding: 15px;
+    opacity: 0.8;
+}
+
+
+/* EXTRAS
+ * =================================================================== */
+
+
+
+        /* Mouse Icon
+         * =================================================================== */
+        .mouse-icon {
+            border: 2px solid #fff;
+            border-radius: 16px;
+            display: block;
+            height: 50px;
+            margin: 100px auto;
+            position: absolute;
+            left: 0;
+            right: 0;
+            width: 30px;
+            z-index: 10;
+        }
+        .mouse-icon .scroll {
+            animation-delay: 0s;
+            animation-duration: 1s;
+            animation-iteration-count: infinite;
+            animation-name: scrolling;
+            animation-play-state: running;
+            animation-timing-function: linear;
+        }
+        .mouse-icon .scroll {
+            background: #fff none repeat scroll 0 0;
+            border-radius: 10px;
+            height: 10px;
+            margin-left: auto;
+            margin-right: auto;
+            position: relative;
+            top: 4px;
+            width: 4px;
+        }
+        @keyframes scrolling {
+        0% {
+            opacity: 0;
+            top: 5px;
+        }
+        30% {
+            opacity: 1;
+            top: 10px;
+        }
+        100% {
+            opacity: 0;
+            top: 25px;
+        }
+        }
+
+        .pad-xl {
+            padding: 200px 0px;
+        }
+
+        .pad-lg {
+            padding: 160px 0px;
+        }
+
+        .pad-sm {
+            padding: 80px 0px;
+        }
+
+        .pad-xs {
+            padding: 30px 0px;
+        }
+
+        /* /Mouse Icon
+         * =================================================================== */
+
+ 
+/* Media Queries
+ * =================================================================== */
+
+@media (max-width: 480px) {
+    .social a {
+        padding: 0.4em;
+        font-size: 0.9em;
+    }
+
+    .social-footer {
+        text-align: center;
+        position:block;
+        text-align: center;
+    }
+
+    .social-footer a {
+        padding: 0.3em;
+        font-size: 1.6em;
+
+    }
+
+    .intro-desc {
+        font-size: 0.7em;
+    }
+
+    .section-image span {
+        font-size: 1em;
+        padding: 0 1px;
+
+}
+
+    .intro h1 {
+        font-size: 50px;
+        padding-top: 15px;
+    }
+
+    footer {
+        text-align: center;
+        padding-bottom: 100px;
+    }
+
+    #skills {
+        background: #151515 url(https://images.unsplash.com/photo-1456983933114-c22026990f4b?dpr=2&auto=format&crop=entropy&fit=crop&w=1280&h=720&q=80) no-repeat center center;
+        background-position: top center;
+
+    }
+}
+
+@media (max-width: 991px) {
+    .social-footer {
+        text-align: center;
+    }
+
+    footer p {
+    text-align: center;
+    }
+
+}
+
+

css/styles.css

@@ -0,0 +1,42 @@
+@font-face {
+    font-family: 'KHGummi';
+    src: url('./fonts/KHGummi.otf') format('opentype');
+}
+
+
+
+.gummi {
+
+    font-family: 'KHGummi';
+
+}
+
+
+.quote-banner {
+    color: #e2e2e2;
+    padding: 20px;
+    font-family: 'KHGummi';
+    
+}
+
+.card-footer {
+    background: transparent;
+    border-top: 0;
+}
+
+.card-link {
+    display: block;
+    margin-top: 15px;
+    text-align: center;
+    color: #007bff;
+}
+
+/* Additional styling for the blockquote */
+.blockquote {
+    font-style: italic;
+    color: #6c757d;
+}
+
+.blockquote-footer {
+    color: #6c757d;
+}

css/timeline.css

@@ -0,0 +1,232 @@
+/**
+ * =================================================================== 
+ *
+ *  ResumeTemplate v1.0 Main ClearCareer
+ *  url: clearcareer.ca
+ *  06-27-2016
+ *  ------------------------------------------------------------------
+ * 
+ * Timeline Tempalte by Bruno Rodriguez
+ * 
+ * https://github.com/itbruno
+ * http://itbruno.com.br
+ * http://www.twitter.com/_brunoweb
+ * 
+ * =================================================================== 
+ */
+
+header:after, #timeline .timeline-item:after, header:before, #timeline .timeline-item:before {
+  content: '';
+  display: block;
+  width: 100%;
+  clear: both;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+body, html {
+  height: 100%;
+}
+
+body {
+  background: #f9f9f9;
+  background-size: cover;
+  margin: 0;
+  padding: 0;
+  font-family: helvetica, arial, tahoma, verdana;
+  line-height: 20px;
+  font-size: 14px;
+  color: #726f77;
+}
+
+img {
+  max-width: 100%;
+}
+
+a {
+  text-decoration: none;
+}
+
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Dosis", arial, tahoma, verdana;
+  font-weight: 500;
+}
+
+.project-name {
+  text-align: center;
+  padding: 10px 0;
+}
+
+header {
+  background: #1abc9c;
+  padding: 10px;
+  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+  -ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+}
+header .logo {
+  color: #1abc9c;
+  float: left;
+  font-family: "Dosis", arial, tahoma, verdana;
+  font-size: 22px;
+  font-weight: 500;
+}
+header .logo > span {
+  color: #f7aaaa;
+  font-weight: 300;
+}
+header .social {
+  float: right;
+}
+header .social .btn {
+  font-family: "Dosis";
+  font-size: 14px;
+  margin: 10px 5px;
+}
+
+
+.timelinedot {
+  margin: 13px;  
+  color:white;
+}
+
+
+#timeline {
+  width: 100%;
+  margin: 30px auto;
+  position: relative;
+  padding: 0 10px;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  -ms-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+}
+#timeline:before {
+  content: "";
+  width: 3px;
+  height: 100%;
+  background: #1abc9c;
+  left: 50%;
+  top: 0;
+  position: absolute;
+}
+#timeline:after {
+  content: "";
+  clear: both;
+  display: table;
+  width: 100%;
+}
+#timeline .timeline-item {
+  margin-bottom: 50px;
+  position: relative;
+}
+#timeline .timeline-item .timeline-icon {
+  background: #1abc9c;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  overflow: hidden;
+  margin-left: -23px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  border-radius: 50%;
+}
+#timeline .timeline-item .timeline-icon svg {
+  position: relative;
+  top: 14px;
+  left: 14px;
+}
+#timeline .timeline-item .timeline-content {
+  width: 45%;
+  background: #fff;
+  padding: 20px;
+  -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+  -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+#timeline .timeline-item .timeline-content h2 {
+  padding: 15px;
+  background: #1abc9c;
+  color: #fff;
+  margin: -20px -20px 0 -20px;
+  font-weight: 300;
+  -webkit-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 0 0;
+  -ms-border-radius: 3px 3px 0 0;
+  border-radius: 3px 3px 0 0;
+}
+
+#timeline .timeline-item .timeline-content p {
+  padding-top: 15px;
+}
+
+#timeline .timeline-item .timeline-content:before {
+  content: '';
+  position: absolute;
+  left: 45%;
+  top: 20px;
+  width: 0;
+  height: 0;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  border-left: 7px solid #1abc9c;
+}
+#timeline .timeline-item .timeline-content.right {
+  float: right;
+}
+#timeline .timeline-item .timeline-content.right:before {
+  content: '';
+  right: 45%;
+  left: inherit;
+  border-left: 0;
+  border-right: 7px solid #1abc9c;
+}
+
+
+@media screen and (max-width: 768px) {
+  #timeline {
+    margin: 30px;
+    padding: 0px;
+    width: 90%;
+  }
+  #timeline:before {
+    left: 0;
+  }
+  #timeline .timeline-item .timeline-content {
+    width: 90%;
+    float: right;
+  }
+  #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
+    left: 10%;
+    margin-left: -6px;
+    border-left: 0;
+    border-right: 7px solid #1abc9c;
+  }
+  #timeline .timeline-item .timeline-icon {
+    left: 0;
+  }
+}
+
+

img/light_crystal.svg

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512.89404"
+   height="353.55396"
+   viewBox="0 0 512.89404 353.55396"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="lightcrystal_ng.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="0.75199792"
+     inkscape:cx="104.38859"
+     inkscape:cy="195.47926"
+     inkscape:window-width="1600"
+     inkscape:window-height="876"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer2" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Layer 2"
+     transform="translate(-266.32157,-312.56322)">
+    <rect
+       style="fill:none;stroke:#115750;stroke-width:13.7126;stroke-linecap:round;stroke-dasharray:13.7126, 27.4252;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect840-3"
+       width="236.28738"
+       height="236.28741"
+       x="661.17816"
+       y="-204.5117"
+       transform="rotate(45)" />
+    <ellipse
+       style="fill:#008080;fill-opacity:1;stroke:none;stroke-width:20;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path1086-6"
+       cx="614.85327"
+       cy="486.15881"
+       rx="36.700439"
+       ry="38.554924" />
+  </g>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-266.32157,-312.56322)">
+    <rect
+       style="fill:none;stroke:#1f9b92;stroke-width:13.713;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:49.3668"
+       id="rect840"
+       width="236.28738"
+       height="236.28741"
+       x="541.19006"
+       y="-85.445923"
+       transform="rotate(45)" />
+    <ellipse
+       style="fill:#00ffff;fill-opacity:1;stroke:none;stroke-width:20;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path1086"
+       cx="448.12054"
+       cy="486.8222"
+       rx="36.700439"
+       ry="38.554924" />
+    <ellipse
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:20;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path1086-7"
+       cx="532.58795"
+       cy="486.43533"
+       rx="36.700439"
+       ry="38.554924" />
+  </g>
+</svg>

img/pci_avatar.svg

@@ -0,0 +1,5 @@
+<svg width="261.12" height="246.72" version="1.1" viewBox="0 0 69.088 65.278" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-174.1 -145.01)">
+  <path d="m174.1 177.65v-32.639h69.088v65.278h-69.088zm34.246 28.13c0.024-0.10478 0.15638-1.0668 0.29418-2.1378 0.21965-1.707 0.94032-7.2036 1.9094-14.563 0.16556-1.2573 0.52785-4.0196 0.80509-6.1383 0.27724-2.1188 0.52896-4.0333 0.55937-4.2545l0.0553-0.40217h-6.5185l-0.18248 1.3758c-0.50988 3.8444-1.9841 15.002-2.2122 16.743-0.14337 1.0943-0.46785 3.5708-0.72108 5.5033-0.25322 1.9325-0.482 3.6375-0.50841 3.7888l-0.048 0.27517h6.5238zm24.716-18.606c3.3379-3.9084 5.4177-8.681 6.1167-14.036 0.17198-1.3176 0.19855-4.6675 0.0468-5.9026-0.32589-2.6529-1.0286-5.3782-1.9596-7.6-1.1171-2.6658-3.0475-5.6301-5.0591-7.7684l-0.6472-0.68797-3.77 3.7672 0.61193 0.6836c0.95608 1.0681 1.2814 1.4867 2.0504 2.6382 1.6043 2.4024 2.7495 5.3112 3.2638 8.2901 0.25226 1.461 0.31337 4.4139 0.12354 5.969-0.54929 4.4999-2.5727 8.85-5.5824 12.002l-0.50538 0.5292 1.8973 1.9106 1.8973 1.9106 0.45054-0.49249c0.24779-0.27086 0.72711-0.81633 1.0652-1.2122zm-45.38-0.24704 1.8543-1.8557-0.61237-0.66313c-2.767-2.9964-4.6339-6.8607-5.3515-11.077-0.22317-1.3113-0.30461-3.9462-0.16506-5.3399 0.4529-4.5231 2.3622-8.882 5.3358-12.182 0.25382-0.28167 0.534-0.59499 0.62261-0.69626l0.16111-0.18414-3.7852-3.7408-0.61426 0.64323c-2.4773 2.5941-4.5952 6.1413-5.7596 9.6465-0.99952 3.0088-1.3953 5.4374-1.3934 8.5513 1e-3 2.4858 0.28501 4.6518 0.90981 6.9507 1.1123 4.0926 3.4445 8.2653 6.254 11.189 0.32439 0.33761 0.61226 0.61384 0.63971 0.61384 0.0275 0 0.88434-0.83507 1.9042-1.8557zm8.007-8.136c5.9e-4 -0.0238-0.2534-0.34768-0.56435-0.71967-1.4452-1.7289-2.3476-3.6184-2.7909-5.8441-0.20797-1.044-0.20976-3.344-3e-3 -4.3783 0.48288-2.4204 1.6614-4.7945 3.132-6.3095l0.35091-0.36149-3.691-3.6797-0.54882 0.59267c-2.4635 2.6603-4.0548 6.1357-4.5154 9.8614-0.13158 1.0644-0.10887 3.323 0.0444 4.4223 0.50881 3.6481 2.1306 7.0467 4.6547 9.7543l0.30888 0.33134 1.811-1.813c0.99603-0.99715 1.8114-1.8325 1.812-1.8563zm30.396 2.7315c2.519-2.9428 3.9175-6.3526 4.2425-10.345 0.3735-4.5873-1.4096-9.6838-4.5676-13.055l-0.56439-0.6025-1.852 1.8265-1.852 1.8265 0.52806 0.57547c1.394 1.5192 2.4638 3.6848 2.9403 5.9518 0.23237 1.1056 0.20682 3.6337-0.0487 4.8223-0.44548 2.072-1.3965 3.9927-2.7972 5.6496l-0.5142 0.60822 1.7868 1.826c0.98276 1.0043 1.8166 1.826 1.8531 1.826 0.0364 0 0.41686-0.40958 0.84537-0.91017zm-26.942-6.2251 1.0368-1.0392-0.46552-0.92925c-0.59961-1.1969-0.73239-1.7077-0.78366-3.0147-0.0641-1.6335 0.20895-2.7422 1.0054-4.0828l0.34635-0.58299-1.046-1.0485c-0.5753-0.57669-1.0845-1.0363-1.1316-1.0214-0.0471 0.0149-0.27115 0.29128-0.49792 0.61415-1.8748 2.6693-2.2919 6.424-1.0628 9.5681 0.40445 1.0347 1.3065 2.5759 1.5076 2.5759 0.0301 0 0.52126-0.46767 1.0915-1.0393zm20.567 0.48237c1.1344-1.6034 1.7577-3.6628 1.7535-5.7931-4e-3 -2.2003-0.62198-4.1696-1.8729-5.9716-0.17604-0.25359-0.35874-0.46152-0.406-0.46207-0.0473-5.9e-4 -0.55586 0.47005-1.1302 1.0458l-1.0442 1.0468 0.2097 0.3322c1.6087 2.5483 1.6062 5.5512-7e-3 8.054-0.11989 0.18604-0.0878 0.22963 0.92091 1.2499 0.57482 0.58143 1.0847 1.0442 1.133 1.0284 0.0484-0.0159 0.24757-0.25446 0.44269-0.53026zm-9.352-0.03c1.1785-0.30141 2.1343-0.90161 2.9733-1.8671 0.54006-0.6215 1.0938-1.6626 1.2824-2.4109 0.17186-0.68192 0.16775-2.2777-8e-3 -2.9545-0.52923-2.0425-2.198-3.708-4.2679-4.2594-0.74352-0.19808-2.2216-0.1978-2.9633 5.9e-4 -2.0768 0.55538-3.7414 2.2181-4.2937 4.289-0.19697 0.73844-0.1925 2.2167 9e-3 2.956 0.54543 2.002 2.2575 3.7257 4.2077 4.2364 0.85937 0.22504 2.2024 0.22945 3.0602 0.0101z" style="fill:#aa0000;stroke-width:.084667"/>
+ </g>
+</svg>

index.html

@@ -1,490 +1,425 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8" />
+  <title>Miguel's Asteroid</title>
-<meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <meta charset="utf-8">
-
+  <meta name="viewport" content="width=device-width, initial-scale=1">
-
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-<title>El Asteroide De Miguel</title>
+  <meta name="description" content="HTML5 website template">
-
+  <meta name="keywords" content="global, template, html, sass, jquery">
-
+  <meta name="author" content="Bucky Maler">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"></link>
+  <link rel="stylesheet" href="/asteroid/css/main.css">
-<link rel="stylesheet" href="./styles.css"></link>
-
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-<script src="./scripts.js"></script>
-
-
-<script>
-
-$('.container').infiniteScroll({
-  // options
-  path: '.pagination__next',
-  append: '.post',
-  history: false,
-});
-
-
-</script>
-
-<style>
-  .bd-placeholder-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-
-  @media (min-width: 768px) {
-    .bd-placeholder-img-lg {
-      font-size: 3.5rem;
-    }
-  }
-
-  .b-example-divider {
-    width: 100%;
-    height: 3rem;
-    background-color: rgba(0, 0, 0, .1);
-    border: solid rgba(0, 0, 0, .15);
-    border-width: 1px 0;
-    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-  }
-
-  .b-example-vr {
-    flex-shrink: 0;
-    width: 1.5rem;
-    height: 100vh;
-  }
-
-  .bi {
-    vertical-align: -.125em;
-    fill: currentColor;
-  }
-
-  .nav-scroller {
-    position: relative;
-    z-index: 2;
-    height: 2.75rem;
-    overflow-y: hidden;
-  }
-
-  .nav-scroller .nav {
-    display: flex;
-    flex-wrap: nowrap;
-    padding-bottom: 1rem;
-    margin-top: -1px;
-    overflow-x: auto;
-    text-align: center;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .btn-bd-primary {
-    --bd-violet-bg: #712cf9;
-    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
-
-    --bs-btn-font-weight: 600;
-    --bs-btn-color: var(--bs-white);
-    --bs-btn-bg: var(--bd-violet-bg);
-    --bs-btn-border-color: var(--bd-violet-bg);
-    --bs-btn-hover-color: var(--bs-white);
-    --bs-btn-hover-bg: #6528e0;
-    --bs-btn-hover-border-color: #6528e0;
-    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-    --bs-btn-active-color: var(--bs-btn-hover-color);
-    --bs-btn-active-bg: #5a23c8;
-    --bs-btn-active-border-color: #5a23c8;
-  }
-
-  .bd-mode-toggle {
-    z-index: 1500;
-  }
-
-  .bd-mode-toggle .dropdown-menu .active .bi {
-    display: block !important;
-  }
-
-.center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 50%;
-}
-
-.photo {
-  float: left;
-}
-
-
-.btn-dark-custom {
-  background-color: #343a40; /* Slightly lighter than the default bg-dark */
-  color: white;
-}
-
-.btn-dark-custom:hover {
-  background-color: #23272b; /* Darken on hover for interaction feedback */
-  color: white;
-}
-
-/* CSS used here will be applied after bootstrap.css */
-.jumbotron{
-  position: relative;
-  z-index:-2;
-}
-
-#namecard{
-  align-content: center; 
-
-}
-
-#video-background { 
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  z-index: -1;
-  width:100%;
-}
-
-.grid-item { width: 200px; }
-.grid-item--width2 { width: 400px; }
-
-.white-bold-text {
-  color: white;
-  font-weight: bold;
-}
-
-
-@font-face {
-
-font-family: KHGummi;
-src: url(./fonts/KHGummi.otf);
-font-weight:400;
-}
-
-video {
-      max-width: 100%; /* Ensure video doesn't exceed the container width */
-      height: auto; /* Maintain aspect ratio */
-    }
-  
-
-.video-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  margin: 0;
-}
-
-.video-container video {
-  max-width: 100%;
-  height: auto;
-}
-
-</style>
   
 </head>
-
-
-
 <body>
 
-  <header>
+<!-- notification for small viewports and landscape oriented smartphones -->
-  <nav class="navbar navbar-dark bg-dark fixed-top">
+<div class="device-notification">
-    <div class="container-fluid">
+  <a class="device-notification--logo" href="#0">
-      <img src="./img/Highwind1_opt.png" href="index.html"  alt="GummiShip" style="transform: scale(0.9)";>
+    <img src="assets/img/Highwind1_opt.png" alt="Global">
-      
+    <p>Miguel's Asteroid</p>
-     <h4 class="navbar-brand" href="#" style="color: aliceblue; font-family: KHGummi;">Miguel's Asteroid</h4>
+  </a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
+  <p class="device-notification--message">Try viewing on a bigger screen.</p>
-        <span class="navbar-toggler-icon"></span>
+</div>
-      </button>
-
-      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
-        
-        <div class="offcanvas-header">
-          <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel" style="font-family: KHGummi;">Cockpit</h5>
-        
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 
+<div class="perspective effect-rotate-left">
+  <div class="container"><div class="outer-nav--return"></div>
+    <div id="viewport" class="l-viewport">
+      <div class="l-wrapper">
+        <header class="header">
+        <!-- <button class="header--cta cta">Work with Me</button>-->
+          <div class="header--nav-toggle">
+            <span></span>
           </div>
+        </header>
+        <nav class="l-side-nav">
+          <ul class="side-nav">
+            <li class="is-active"><span>Home</span></li>
+            <li><span>Interests</span></li>
+            <li><span>About</span></li>
+            <li><span>Contact</span></li>
+            <!--Here I am commenting out a menu item from the vertical side nav, reducing from 4 to 5-->
+            <!--<li><span>Work with Me</span></li>-->
+          </ul>
+        </nav>
+        <ul class="l-main-content main-content">
+          <li class="l-section section section--is-active">
+            <div class="intro">
+              <div class="intro--banner">
+                <h1>Welcome<br>to my<br>asteroid.</h1>
                 
-        
+                <a href="https://library.miguelalmodo.com/">
-        <div class="offcanvas-body">
+                <button class="cta">Check out a book
-
+                  <svg version="1.1" id="Layer_1" href="https://library.miguelalmodo.com" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
-          <div class="text-center">
+                  <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
-            <div class="d-inline-block text-center">
+                    <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
-              <img src="./img/WEPA.png" alt="headshot of miguel yelling WEPA!" 
+                  </g>
-              style="width: 300px; height: 300px; object-fit: cover;" alt="Headshot of Miguel"></img>
+                  </svg>
-                
+                  <span class="btn-background"></span>
-              <br>
+                </button></a>
-              <h2>Public Interest Communications </h2>
-              <a href="mailto:contact@miguelalmodo.com"><img src="./img/email.png" alt="mail icon" style="width: 50px; height: 50px;"></a>
-              <a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw"><img src="./img/running-nostr.gif" alt="running nostrich gif" style="width: 50px; height: 50px;"></a>
-              <a href="https://www.linkedin.com/in/miguelalmodo/"><img src="./img/LinkedIN.png" alt="linkedin logo" style="width: 50px; height: 50px;"></a>
-              <a href="https://www.github.com/miggymofongo/"><img src="./img/Github.png" alt="github logo" style="width: 50px; height: 50px;"></a>
-              <img src="./img/lightning.png" style="width: 80px; height: 80px; align-items: center;">
                 <br><br>
-              <h6>Zap me Bitcoin!<br>ancientwildflower33459@getalby.com</h6> <img src="./img/code.png" style="width: 100px; height:100px;">
-              <div style= "text-align: end;">
 
+                <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
+                <button class="cta">Bookmarks
+                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
+                  <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
+                    <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
+                  </g>
+                  </svg>
+                  <span class="btn-background"></span>
+                </button>
+              </a>
+                
+
+                <img src="img/introduction-visual.png" alt="Welcome">
+              </div>
+              <div class="intro--options">
+                <a href="https://uberspace.de">
+                  <h3>Deploying Web Apps in Space
+                  </h3>
+                  <p>This website is hosted on Uberspace, a cool worker owned business that rents out server space.</p>
+                </a>
+                <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
+                  <h3>Creator Residency</h3>
+                  <p>I'm in the Content Creator Residency with nos.social. Find me on Nostr!</p>
+                </a>
+                <a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9">
+                  <h3>#CubaSIBloqeuoNO</h3>
+                  <p>Read about my recent trips to Cuba, where I attended this year's May Day celebrations in Havana with organizers and union members from around
+                    the world.
+                  </p>
+                </a>
+              </div>
+            </div>
+          </li>
+          <li class="l-section section">
+            <div class="work">
+              <h2>Public Interest Communications</h2>
+              <div class="work--lockup">
+                <ul class="slider">
+                  <li class="slider--item slider--item-left">
+                    <a href="https://forge.lightcrystal.systems/migs">
+                      <div class="slider--item-image">
+                        <img src="img/light_crystal.svg" alt="light crystal systems logo">
+                      </div>
+                      <p class="slider--item-title">Web Development</p>
+                      <p class="slider--item-description">Weilding open source protocols in the battle for the Internet</p>
+                    </a>
+                  </li>
+                  <li class="slider--item slider--item-center">
+                    <a href="https://podcastindex-org.github.io/docs-api/#overview--example-code">
+                      <div class="slider--item-image">
+                        <img src="img/pci_avatar.svg" alt="Podcasting Index logo">
+                      </div>
+                      <p class="slider--item-title">Podcast 2.0</p>
+                      <p class="slider--item-description">The next generation of podcasts is here. Learn about the podcast index and RSS.</p>
+                    </a>
+                  </li>
+                  <li class="slider--item slider--item-right">
+                    <a href="https://nostrmeet.me/_@migs.uber.space">
+                      <div class="slider--item-image">
+                        <img src="img/nostr-icon-white-256x256.png" alt="Alex Nowak">
+                      </div>
+                      <p class="slider--item-title">Social Media</p>
+                      <p class="slider--item-description">Social Media is evolving. Ask me about alternative social media
+                       protocols.</p>
+                    </a>
+                  </li>
+                </ul>
+                <div class="slider--prev">
+                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                  viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
+                  <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
+                    <path d="M561,1169C525,1155,10,640,3,612c-3-13,1-36,8-52c8-15,134-145,281-289C527,41,562,10,590,10c22,0,41,9,61,29
+                    c55,55,49,64-163,278L296,510h575c564,0,576,0,597,20c46,43,37,109-18,137c-19,10-159,13-590,13l-565,1l182,180
+                    c101,99,187,188,193,199c16,30,12,57-12,84C631,1174,595,1183,561,1169z"/>
+                  </g>
+                  </svg>
+                </div>
+                <div class="slider--next">
+                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
+                  <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
+                    <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
+                  </g>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="l-section section">
+            <div class="about">
+              <div class="about--banner">
+                <h2>Communications for the <br> public interest.</h2>
+                <a href="https://migs.uber.space/resumes/PIC.pdf">Resume
+                  <span>
+                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
+                    <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
+                      <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
+                    </g>
+                    </svg>
+                  </span>
+                </a><br>
+                <a href="https://migs.uber.space/resumes/PIC.pdf">In the news
+                  <span>
+                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
+                    <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
+                      <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
+                    </g>
+                    </svg>
+                  </span>
+                </a><br>
+
+                <a href="https://migs.uber.space/portfolio">Portfolio
+                  <span>
+                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
+                    <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
+                      <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
+                    </g>
+                    </svg>
+                  </span>
+                </a>
+                
+                <video src="https://v.nostr.build/xE7Vl.webm" alt="video of miguel soliciting cuba donations" style="padding-left: 40%; padding-bottom: 80%;" width="70%" height="70%" controls>
+              </div>
+              <div class="about--options">
+                <a href="#0">
+                  <h3>Philosophy</h3>
+                </a>
+                <a href="#0">
+                  <h3>Who is Miguel</h3>
+                </a>
+                <a href="#0">
+                  <h3>Garden</h3>
+                </a>
+              </div>
+            </div>
+          </li>
+          <li class="l-section section">
+            <div class="hire">
+              <h2>Got an idea? I want to hear about it.</h2>
+              <!-- checkout formspree.io for easy form setup -->
+              <form class="work-request">
+
+                <div class="work-request--options">
+                  <span class="options-a">
+                    <input id="opt-1" type="checkbox" value="app design">
+                    <label for="opt-1">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Content Creation
+                    </label>
+                    <input id="opt-2" type="checkbox" value="graphic design">
+                    <label for="opt-2">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Training
+                    </label>
+                    <input id="opt-3" type="checkbox" value="motion design">
+                    <label for="opt-3">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Tech Consultation
+                    </label>
+                  </span>
+                  <span class="options-b">
+                    <input id="opt-4" type="checkbox" value="ux design">
+                    <label for="opt-4">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Cooking
+                    </label>
+                    <input id="opt-5" type="checkbox" value="webdesign">
+                    <label for="opt-5">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Communication Strategy
+                    </label>
+                    <input id="opt-6" type="checkbox" value="marketing">
+                    <label for="opt-6">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Marketing
+                    </label>
+                    <input id="opt-6" type="checkbox" value="marketing">
+                    <label for="opt-6">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Just sayin hi
+                    </label>
+                  </span>
+                </div>
+
+
+                <div class="work-request--information">
+                  <div class="information-name">
+                    <input id="name" type="text" spellcheck="false">
+                    <label for="name">Name</label>
+                  </div>
+                  <div class="information-email">
+                    <input id="email" type="email" spellcheck="false">
+                    <label for="email">Email</label>
+                  </div>
+                </div>
+                <input type="submit" value="Send Request">
+              </form>
             
             </div>
 
-              <!--
+<!--
-                <button class="btn btn-secondary" href="#" disabled>View biography &raquo;</button>
+            <div class="contact">
+              <div class="contact--lockup">
+                
+                <div class="modal">
+                  <div class="modal--information">
+                    <p>Aguadilla, Puerto Rico</p>
+                    <a href="mailto:contact@miguelalmodo.com">contact@miguelalmodo.com</a>
+                   </div>
+                  <ul class="modal--options">
+                    <li><a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">Nostr</a></li>
+                    <li><a href="https://linkedin/in/miguelalmodo">LinkedIn</a></li>
+                    <li><a href="mailto:contact@miguelalmodo.com">Send me an email</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
           -->
 
-            
-              </div>
-            </div>
-          
-<br>
-
-
-          
-          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
-
-  
-            <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="#">Home</a>
           </li>
-            <li class="nav-item dropdown">
+         <!-- <li class="l-section section">
-              <a class="nav-link" href="https://migs.uber.space/about.html">About</a>
+            <div class="hire">
-  
+              <h2>Available for hire</h2>
-              </li>
+               checkout formspree.io for easy form setup
-
+              <form class="work-request">
-              <li class="nav-item">
-                <a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a>
-              </li>
-
-
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                Collaborate
-              </a>
-              <ul class="dropdown-menu dropdown-menu-dark">
-                <!-- <li><a class="dropdown-item" href="#">Content Production</a></li> -->
-                <li><a class="dropdown-item" href="https://www.github.com/miggymofongo/">Code</a></li>  
-               <!--<li><a class="dropdown-item" href="#">Campaign Strategy</a></li> -->       
-              </ul>
-            </li>
-
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                Resumes
-              </a>
-              <ul class="dropdown-menu dropdown-menu-dark">
-                <!--<li><a class="dropdown-item" href="#">Hospitality</a></li>-->
-                <li><a class="dropdown-item" href="https://migs.uber.space/resumes/PIC.pdf">Public Interest Communications</a></li>          
-              </ul>
-            </li>
-
-
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                Garden
-              </a>
-              <ul class="dropdown-menu dropdown-menu-dark">
-                 <li><a class="dropdown-item" href="https://library.miguelalmodo.com/#">Bookshelf</a></li>
-                <li><a class="dropdown-item" href="https://migs.uber.space/blog">Chronicles</a></li> 
-                <li><a class="dropdown-item" href="https://github.com/miggymofongo/asteroid/blob/main/scripts.js">Quote Shuffler</a></li>         
-              </ul>
-            </li>
-            
-            
-
-
-           
-          </ul>
 
+                <div class="work-request--options">
+                  <span class="options-a">
+                    <input id="opt-1" type="checkbox" value="app design">
+                    <label for="opt-1">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Content Creation
+                    </label>
+                    <input id="opt-2" type="checkbox" value="graphic design">
+                    <label for="opt-2">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Web Development
+                    </label>
+                    <input id="opt-3" type="checkbox" value="motion design">
+                    <label for="opt-3">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Tech Consultation
+                    </label>
+                  </span>
+                  <span class="options-b">
+                    <input id="opt-4" type="checkbox" value="ux design">
+                    <label for="opt-4">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Cooking
+                    </label>
+                    <input id="opt-5" type="checkbox" value="webdesign">
+                    <label for="opt-5">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Communication Strategy
+                    </label>
+                    <input id="opt-6" type="checkbox" value="marketing">
+                    <label for="opt-6">
+                      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                      viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
+                      <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
+                        <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
+                      </g>
+                      </svg>
+                      Marketing
+                    </label>
+                  </span>
                 </div>
 
+
+                <div class="work-request--information">
+                  <div class="information-name">
+                    <input id="name" type="text" spellcheck="false">
+                    <label for="name">Name</label>
+                  </div>
+                  <div class="information-email">
+                    <input id="email" type="email" spellcheck="false">
+                    <label for="email">Email</label>
                   </div>
                 </div>
-  </nav>
+                <input type="submit" value="Send Request">
-</header>
-
-
-<section>
-  <div class="my-5">
-    <div class="p-5 text-center bg-body-tertiary">
-      <div class="container py-5">
-        <h1 class="text-body-emphasis quote-banner">All aboard the Gummi Ship!</h1>
-        
-        <p class="col-lg-8 mx-auto lead">
-          Thanks for visiting my asteroid. Explore the depths of uberspace
-          while we battle space pirates and save worlds from corporate tech!
-                 </p>
-
-          <button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://migs.uber.space/about.html';">About</button>
-          <button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://github.com/miggymofongo';">Git</button>
-          <button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://library.miguelalmodo.com';">Bookshelf</button>
-      
-        
-        </div>
-    </div>
-  </div>
-</section>
-
-<section>
-  <h1> Carta de Presentacion para PlenitudPR </h1>
-<div class="video-container">
-  <video src="https://v.nostr.build/7GeB3.mp4" style="align-items: center;" controls>
-Carta de Presentacion para PlenitudPR
-  </video>
-</div>
-</section>
-
-
-<section style="background-color: #23272b;">
-
-
-
-  <div class="container px-4 py-5" style="background-color: #23272b;">
-  <h2 class="pb-2 border-bottom" style="color: aliceblue; font-family: KHGummi;">Let's collaborate.
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-     &nbsp;&nbsp;&nbsp;&#160;&#160;&#160;&#160; 
-     &nbsp;&nbsp;&nbsp;&#160;&#160;&#160;&#160;  
-   
-     <img src="img/leroy_opt.png" alt="pic of leroy from the movie leroy and stich">   </h2>
-
-    <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
-      <div class="d-flex flex-column align-items-start gap-2">
-        <h3 class="fw-bold" style="color: aliceblue;">Communications for the Public Good</h3>
-        <p style="color: rgb(255, 255, 255);">The <a
-           href="https://migs.uber.space/blog/corporate-social-media-is-killing-us">
-           corporate social media landscape looks grim.</a>
-          They are tearing our society apart apart with the constant 
-          bombardment of advertising and antagonizing algorithms. 
-          Movements in 2024 need a robust communication strategy and the power of a 
-          decentralized internet. It's on us to take back the digital commons once and for all. 
-          </a></p>
-          <!-- <div class="container">         
-         
-          <form onsubmit="sendEmail()" style="color: rgb(255, 255, 255);">
-            <h4 style="color: rgb(255, 255, 255);">Send me an email and get a response back
-          within 48 hours! </h4>
-            <label for="text">Your Name:</label>
-            <input type="text" id="name" placeholder="Your name" required>
-
-            <label for="email">Email ID:</label>
-            <input type="email" id="email" placeholder="Email id" required>
-            
-            <label for="message">Your Message:</label>
-            <textarea id="message" rows="4" placeholder="What are your thoughts?" required></textarea>
-            
-
-            <button type="submit">Send Message</button>
               </form>
-        <script src="./smtp.js"></script>
-        <script>
-            function sendEmail(){
-              Email.sendEmail({
-                Host: "smtppro.zoho.com",
-                Username : "contact@miguelalmodo.com",
-                Password : "EUfnEQ47d7iM",
-                To : "recipient@example.com",
-                From : document.getElementById("email").value,
-                Subject: "We met at the protest",
-                Body : "Free Palestine!"
-              }).then(
-                message => alert(message)
-              );
-
-            }
-
-
-        </script>
-      
-
-          </div>-->
-
-          
-
-        <a href="mailto:contact@miguelalmodo.com" class="btn btn-light btn-lg">
-          Click to open a self - addressed email message in your favorite
-           client.</a>
-      
-      
-      
-      
-      
             
             </div>
-      <div class="row row-cols-1 row-cols-sm-2 g-4">
-        <div class="d-flex flex-column gap-2">
 
-          <h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Move beyond strategic sharing.</h4>
+          </li> -->
-          <p style="color: rgb(255, 255, 255);">
+        </ul>
-          Craft your message with intention and authenticity. Find
-           the right medium and multiply its impact with tech. 
-        </div>
-
-        <div class="d-flex flex-column gap-2">
-         
-          <h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Open source strategy.</h4>
-          <p style="color: rgb(255, 255, 255);">Break the tech monopoly with open source software.
-            Power map your "big bosses" and chart your path to sustainable change.
-            
-          </p>
-        </div>
-
-        <div class="d-flex flex-column gap-2">
-          
-          <h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Cocreate meaning with your community.</h4>
-          <p style="color: rgb(255, 255, 255);">Rally your 
-          community around shared values using a VPSA (Values, Problem, Solution, Action)
-          framework.</p>
-        </div>
-
-        <div class="d-flex flex-column gap-2">
-          
-          
-          <h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Training</h4>
-          <p style="color: rgb(255, 255, 255);">It seems like there's a new thing every couple months.
-          Have questions about crypto or decentralized social media? 
-          Request a training to stay ahead of the curve.</p>
-        </div></div>
       </div>
     </div>
   </div>
+  <ul class="outer-nav">
+    <a href="https://uberspace.de/en"><img src="https://dashboard.uberspace.de/static/img/badge_dark.png"></a>
+    <li class="is-active">Home</li>
+    <li>Interests</li>
+    <li>About</li>
+    <li>Contact</li>
     
+    <!-- <li>Work with Me</li> -->
+  </ul>
+</div>
 
-
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
-
+<script>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
-
+<script src="js/functions-min.js"></script>
-</section>
+</body>
-
-
-
-
-
-
-
-
-
- 
-
-
-
-<footer class="footer">
-  <div class="container">
-    <span class="text-muted">© 2024 Miguel Almodóvar</span> <span style="font-weight: bolder;"><a href="https://uberspace.de/en/about/";>This website is hosted on an asteroid in uberspace!</a></span>
-          
-    </p>
-  </div>
-</footer>
-
-  
-
-
-
-
-
-  </body>
 </html>

js/functions.js

@@ -0,0 +1,280 @@
+// @codekit-prepend "/vendor/hammer-2.0.8.js";
+
+$( document ).ready(function() {
+
+  // DOMMouseScroll included for firefox support
+  var canScroll = true,
+      scrollController = null;
+  $(this).on('mousewheel DOMMouseScroll', function(e){
+
+    if (!($('.outer-nav').hasClass('is-vis'))) {
+
+      e.preventDefault();
+
+      var delta = (e.originalEvent.wheelDelta) ? -e.originalEvent.wheelDelta : e.originalEvent.detail * 20;
+
+      if (delta > 50 && canScroll) {
+        canScroll = false;
+        clearTimeout(scrollController);
+        scrollController = setTimeout(function(){
+          canScroll = true;
+        }, 800);
+        updateHelper(1);
+      }
+      else if (delta < -50 && canScroll) {
+        canScroll = false;
+        clearTimeout(scrollController);
+        scrollController = setTimeout(function(){
+          canScroll = true;
+        }, 800);
+        updateHelper(-1);
+      }
+
+    }
+
+  });
+
+  $('.side-nav li, .outer-nav li').click(function(){
+
+    if (!($(this).hasClass('is-active'))) {
+
+      var $this = $(this),
+          curActive = $this.parent().find('.is-active'),
+          curPos = $this.parent().children().index(curActive),
+          nextPos = $this.parent().children().index($this),
+          lastItem = $(this).parent().children().length - 1;
+
+      updateNavs(nextPos);
+      updateContent(curPos, nextPos, lastItem);
+
+    }
+
+  });
+
+  $('.cta').click(function(){
+
+    var curActive = $('.side-nav').find('.is-active'),
+        curPos = $('.side-nav').children().index(curActive),
+        lastItem = $('.side-nav').children().length - 1,
+        nextPos = lastItem;
+
+    updateNavs(lastItem);
+    updateContent(curPos, nextPos, lastItem);
+
+  });
+
+  // swipe support for touch devices
+  var targetElement = document.getElementById('viewport'),
+      mc = new Hammer(targetElement);
+  mc.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
+  mc.on('swipeup swipedown', function(e) {
+
+    updateHelper(e);
+
+  });
+
+  $(document).keyup(function(e){
+
+    if (!($('.outer-nav').hasClass('is-vis'))) {
+      e.preventDefault();
+      updateHelper(e);
+    }
+
+  });
+
+  // determine scroll, swipe, and arrow key direction
+  function updateHelper(param) {
+
+    var curActive = $('.side-nav').find('.is-active'),
+        curPos = $('.side-nav').children().index(curActive),
+        lastItem = $('.side-nav').children().length - 1,
+        nextPos = 0;
+
+    if (param.type === "swipeup" || param.keyCode === 40 || param > 0) {
+      if (curPos !== lastItem) {
+        nextPos = curPos + 1;
+        updateNavs(nextPos);
+        updateContent(curPos, nextPos, lastItem);
+      }
+      else {
+        updateNavs(nextPos);
+        updateContent(curPos, nextPos, lastItem);
+      }
+    }
+    else if (param.type === "swipedown" || param.keyCode === 38 || param < 0){
+      if (curPos !== 0){
+        nextPos = curPos - 1;
+        updateNavs(nextPos);
+        updateContent(curPos, nextPos, lastItem);
+      }
+      else {
+        nextPos = lastItem;
+        updateNavs(nextPos);
+        updateContent(curPos, nextPos, lastItem);
+      }
+    }
+
+  }
+
+  // sync side and outer navigations
+  function updateNavs(nextPos) {
+
+    $('.side-nav, .outer-nav').children().removeClass('is-active');
+    $('.side-nav').children().eq(nextPos).addClass('is-active');
+    $('.outer-nav').children().eq(nextPos).addClass('is-active');
+
+  }
+
+  // update main content area
+  function updateContent(curPos, nextPos, lastItem) {
+
+    $('.main-content').children().removeClass('section--is-active');
+    $('.main-content').children().eq(nextPos).addClass('section--is-active');
+    $('.main-content .section').children().removeClass('section--next section--prev');
+
+    if (curPos === lastItem && nextPos === 0 || curPos === 0 && nextPos === lastItem) {
+      $('.main-content .section').children().removeClass('section--next section--prev');
+    }
+    else if (curPos < nextPos) {
+      $('.main-content').children().eq(curPos).children().addClass('section--next');
+    }
+    else {
+      $('.main-content').children().eq(curPos).children().addClass('section--prev');
+    }
+
+    if (nextPos !== 0 && nextPos !== lastItem) {
+      $('.header--cta').addClass('is-active');
+    }
+    else {
+      $('.header--cta').removeClass('is-active');
+    }
+
+  }
+
+  function outerNav() {
+
+    $('.header--nav-toggle').click(function(){
+
+      $('.perspective').addClass('perspective--modalview');
+      setTimeout(function(){
+        $('.perspective').addClass('effect-rotate-left--animate');
+      }, 25);
+      $('.outer-nav, .outer-nav li, .outer-nav--return').addClass('is-vis');
+
+    });
+
+    $('.outer-nav--return, .outer-nav li').click(function(){
+
+      $('.perspective').removeClass('effect-rotate-left--animate');
+      setTimeout(function(){
+        $('.perspective').removeClass('perspective--modalview');
+      }, 400);
+      $('.outer-nav, .outer-nav li, .outer-nav--return').removeClass('is-vis');
+
+    });
+
+  }
+
+  function workSlider() {
+
+    $('.slider--prev, .slider--next').click(function() {
+
+      var $this = $(this),
+          curLeft = $('.slider').find('.slider--item-left'),
+          curLeftPos = $('.slider').children().index(curLeft),
+          curCenter = $('.slider').find('.slider--item-center'),
+          curCenterPos = $('.slider').children().index(curCenter),
+          curRight = $('.slider').find('.slider--item-right'),
+          curRightPos = $('.slider').children().index(curRight),
+          totalWorks = $('.slider').children().length,
+          $left = $('.slider--item-left'),
+          $center = $('.slider--item-center'),
+          $right = $('.slider--item-right'),
+          $item = $('.slider--item');
+
+      $('.slider').animate({ opacity : 0 }, 400);
+
+      setTimeout(function(){
+
+      if ($this.hasClass('slider--next')) {
+        if (curLeftPos < totalWorks - 1 && curCenterPos < totalWorks - 1 && curRightPos < totalWorks - 1) {
+          $left.removeClass('slider--item-left').next().addClass('slider--item-left');
+          $center.removeClass('slider--item-center').next().addClass('slider--item-center');
+          $right.removeClass('slider--item-right').next().addClass('slider--item-right');
+        }
+        else {
+          if (curLeftPos === totalWorks - 1) {
+            $item.removeClass('slider--item-left').first().addClass('slider--item-left');
+            $center.removeClass('slider--item-center').next().addClass('slider--item-center');
+            $right.removeClass('slider--item-right').next().addClass('slider--item-right');
+          }
+          else if (curCenterPos === totalWorks - 1) {
+            $left.removeClass('slider--item-left').next().addClass('slider--item-left');
+            $item.removeClass('slider--item-center').first().addClass('slider--item-center');
+            $right.removeClass('slider--item-right').next().addClass('slider--item-right');
+          }
+          else {
+            $left.removeClass('slider--item-left').next().addClass('slider--item-left');
+            $center.removeClass('slider--item-center').next().addClass('slider--item-center');
+            $item.removeClass('slider--item-right').first().addClass('slider--item-right');
+          }
+        }
+      }
+      else {
+        if (curLeftPos !== 0 && curCenterPos !== 0 && curRightPos !== 0) {
+          $left.removeClass('slider--item-left').prev().addClass('slider--item-left');
+          $center.removeClass('slider--item-center').prev().addClass('slider--item-center');
+          $right.removeClass('slider--item-right').prev().addClass('slider--item-right');
+        }
+        else {
+          if (curLeftPos === 0) {
+            $item.removeClass('slider--item-left').last().addClass('slider--item-left');
+            $center.removeClass('slider--item-center').prev().addClass('slider--item-center');
+            $right.removeClass('slider--item-right').prev().addClass('slider--item-right');
+          }
+          else if (curCenterPos === 0) {
+            $left.removeClass('slider--item-left').prev().addClass('slider--item-left');
+            $item.removeClass('slider--item-center').last().addClass('slider--item-center');
+            $right.removeClass('slider--item-right').prev().addClass('slider--item-right');
+          }
+          else {
+            $left.removeClass('slider--item-left').prev().addClass('slider--item-left');
+            $center.removeClass('slider--item-center').prev().addClass('slider--item-center');
+            $item.removeClass('slider--item-right').last().addClass('slider--item-right');
+          }
+        }
+      }
+
+    }, 400);
+
+    $('.slider').animate({ opacity : 1 }, 400);
+
+    });
+
+  }
+
+  function transitionLabels() {
+
+    $('.work-request--information input').focusout(function(){
+
+      var textVal = $(this).val();
+
+      if (textVal === "") {
+        $(this).removeClass('has-value');
+      }
+      else {
+        $(this).addClass('has-value');
+      }
+
+      // correct mobile device window position
+      window.scrollTo(0, 0);
+
+    });
+
+  }
+
+  outerNav();
+  workSlider();
+  transitionLabels();
+
+});