index.86cb37c7.css.map

{"mappings":"AEAA,uCAKA,iGAWA,wBAIA,yBCpBA,oBAIA,kBAIA,oBAIA,qBAIA,yBACI,qBAKJ,yBACI,uBAKJ,0BACI,uBAKJ,0BACI,uBAKJ,kBAMA,6CC9CA,mDAOA,6CAUA,wSA0BA,uHCvCA,8KAgBI,yCAIA,yCAIA,yBC1BJ,0BAGI,wCAIA,8CAKA,+CAKA,4KAWI,uCAKJ,6BAGI,2CCtCR,yEASA,kBAIA,uCAKA,oDAIA,8CAIA,8CAIA,gDAIA,gDAIA,+KAWA,oLAiBI,gIAUI,yBAVJ,4BAeA,0BAKJ,mCAKA,kHASI,8CAKA,2DAMA,4EC7GJ,2BAGI,qJAWA,wGChBJ,8HAUI,sCAKA,6DAKA,6BAIA,2BAKJ,uEAKI,uECjCA,sDAMA,6DCPJ,0LAYI,yCAOA,0LAcI,qBACI,6CAQZ","sources":["index.86cb37c7.css","styles/main.scss","styles/base.scss","styles/typography.scss","styles/animations.scss","styles/background.scss","styles/company.scss","styles/cover.scss","styles/technology.scss","styles/section.scss","styles/interests/interest.scss","styles/interests/code-in-the-dark.scss"],"sourcesContent":["html {\n  height: 100%;\n  background-color: #000;\n}\n\nbody {\n  width: 100%;\n  height: 100vh;\n  color: #fff;\n  margin: 0;\n  padding: 0;\n  font-family: Lato, Helvetica, sans-serif;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nul, li {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2.5rem;\n}\n\nh2 {\n  font-size: 2rem;\n}\n\nh3 {\n  font-size: 1.5rem;\n}\n\nhtml {\n  font-size: .7rem;\n}\n\n@media (min-width: 400px) {\n  html {\n    font-size: 1rem;\n  }\n}\n\n@media (min-width: 720px) {\n  html {\n    font-size: 1.4rem;\n  }\n}\n\n@media (min-width: 1200px) {\n  html {\n    font-size: 1.8rem;\n  }\n}\n\n@media (min-width: 1600px) {\n  html {\n    font-size: 1.4rem;\n  }\n}\n\nh1, h2, h3 {\n  margin: 0;\n}\n\n.linkless {\n  color: inherit;\n  text-decoration: none;\n}\n\n@keyframes flick {\n  from {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n}\n\n@keyframes appear {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes point-right {\n  0% {\n    opacity: 1;\n    transform: translateX(0)scale(1)rotate(-45deg);\n  }\n\n  25% {\n    opacity: 0;\n    transform: translateX(10px)scale(.9)rotate(-45deg);\n  }\n\n  26% {\n    opacity: 0;\n    transform: translateX(-10px)scale(.9)rotate(-45deg);\n  }\n\n  55% {\n    opacity: 1;\n    transform: translateX(0)scale(1)rotate(-45deg);\n  }\n\n  to {\n    transform: rotate(-45deg);\n  }\n}\n\n@keyframes sexy-face {\n  from {\n    opacity: 0;\n    transform: translate(-50%, 100%);\n  }\n\n  20% {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 1;\n    transform: translate(-50%);\n  }\n}\n\n.background {\n  width: 100%;\n  height: 90%;\n  z-index: -1;\n  opacity: .5;\n  object-fit: cover;\n  filter: hue-rotate(45deg);\n  transition: filter .4s ease-in-out;\n  position: absolute;\n  top: 5%;\n  bottom: 5%;\n  left: 0;\n}\n\n.background--1 {\n  filter: hue-rotate(120deg);\n}\n\n.background--2 {\n  filter: hue-rotate(240deg);\n}\n\n.background--3 {\n  opacity: 0;\n}\n\n.company {\n  padding: 8px 16px;\n}\n\n.company:first-of-type {\n  padding-top: 32px;\n}\n\n.company__container {\n  padding: 0;\n  list-style: none;\n}\n\n.company__name {\n  color: #fff;\n  text-decoration: none;\n}\n\n.company__arrow {\n  border: .2rem solid;\n  border-width: 0 .2rem .2rem 0;\n  padding: .2rem;\n  animation: point-right 1.4s ease-in-out infinite;\n  display: inline-block;\n  transform: rotate(-45deg);\n}\n\n.company__arrow--2 {\n  animation-delay: .2s;\n}\n\n.company time {\n  padding: 0 10px;\n}\n\n.company time:first-of-type {\n  padding-left: 0;\n}\n\n.name {\n  word-spacing: 0;\n  align-items: center;\n  padding-bottom: 1rem;\n  display: flex;\n}\n\n.👿 {\n  font-size: 0;\n}\n\n.domain {\n  display: flex;\n  position: relative;\n}\n\n.domain__char {\n  animation: appear .3s ease-in-out both;\n}\n\n.domain__char:first-child {\n  animation-delay: .6s;\n}\n\n.domain__char:nth-child(2) {\n  animation-delay: 1s;\n}\n\n.domain__char:nth-child(3) {\n  animation-delay: 1.3s;\n}\n\n.domain__char:nth-child(4) {\n  animation-delay: 1.7s;\n}\n\n.caret {\n  width: 2px;\n  transform-origin: center;\n  opacity: 0;\n  background-color: #fff;\n  margin-left: 1vw;\n  animation: flick .5s ease-in-out 2.2s infinite alternate-reverse both;\n  transform: scaleY(0);\n}\n\n.face {\n  width: 23%;\n  z-index: -1;\n  opacity: 0;\n  object-fit: contain;\n  border-radius: 48%;\n  animation: sexy-face 1.4s ease-in-out both;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, 100%);\n}\n\n.face__container {\n  width: 20rem;\n  z-index: 0;\n  justify-content: center;\n  margin: 0 auto 2rem;\n  display: flex;\n  position: relative;\n  overflow: hidden;\n}\n\n@media (min-width: 720px) {\n  .face__container {\n    width: 30%;\n  }\n}\n\n.face__wrapper {\n  width: 100%;\n}\n\n.body {\n  width: 100%;\n  position: relative;\n}\n\n.contacts {\n  width: 100%;\n  justify-content: space-evenly;\n  align-items: center;\n  margin-top: 3rem;\n  list-style: none;\n  display: flex;\n}\n\n.contacts__container {\n  width: 100%;\n  display: block;\n}\n\n.contacts__item {\n  color: #fff;\n  align-items: center;\n  display: flex;\n}\n\n.contacts__icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  object-fit: contain;\n  margin: 0 1rem;\n}\n\n.technology {\n  padding: 1.5rem;\n}\n\n.technology__container {\n  max-width: 1050px;\n  flex-flow: wrap;\n  justify-content: space-around;\n  align-items: center;\n  padding-top: 2rem;\n  list-style: none;\n  display: flex;\n}\n\n.technology--frontend + .technology--backend, .technology--backend + .technology--database {\n  padding-left: 2rem;\n}\n\n.section {\n  flex-flow: column wrap;\n  flex: 1 0 auto;\n  padding: 0 16px;\n  transition: opacity .3s ease-in-out;\n  display: flex;\n  position: relative;\n}\n\n.section--full {\n  width: 100%;\n  height: 100%;\n}\n\n.section--centered {\n  justify-content: center;\n  align-items: center;\n}\n\n.section--disabled {\n  opacity: 0;\n}\n\n.section--active {\n  opacity: 1;\n}\n\n.scroll-section {\n  height: 100%;\n  scroll-snap-type: y mandatory;\n  overflow: auto;\n}\n\n.scroll-section__stop {\n  scroll-snap-align: center;\n  scroll-snap-stop: always;\n}\n\n.interest__title {\n  position: absolute;\n  top: 2rem;\n  left: 2rem;\n}\n\n.interest__subtitle {\n  position: absolute;\n  bottom: 2rem;\n  right: 2rem;\n}\n\n.lightbulb {\n  height: 10vh;\n  opacity: .2;\n  filter: grayscale(.9);\n  transition: opacity .3s ease-in-out, filter .3s ease-in-out;\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%)rotate(180deg);\n}\n\n.lightbulb--active {\n  opacity: 1;\n  filter: none;\n}\n\n.cord__container {\n  height: 20vh;\n  cursor: pointer;\n  justify-content: flex-start;\n  align-items: stretch;\n  transition: transform .2s ease-in-out;\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: calc(50% + 6vh);\n}\n\n@media (hover: hover) {\n  .cord__container:hover {\n    transform: scale3d(1.1, 1.1, 1);\n  }\n}\n\n.astronaut {\n  width: 100%;\n  height: 50vh;\n}\n\n/*# sourceMappingURL=index.86cb37c7.css.map */\n","@import \"./base\";\n@import \"./typography\";\n@import \"./animations\";\n@import \"./background\";\n@import \"./company\";\n@import \"./cover\";\n@import \"./technology\";\n@import \"./section\";\n@import \"./interests/index\";\n","html {\n    height: 100%;\n    background-color: black;\n}\n\nbody {\n    width: 100%;\n    height: 100vh;\n\n    margin: 0;\n    padding: 0;\n    color: #fff;\n\n    font-family: \"Lato\", Helvetica, sans-serif;\n}\n\n* {\n    box-sizing: border-box;\n}\n\nul,\nli {\n    margin: 0;\n    padding: 0;\n}\n","h1 {\n    font-size: 2.5rem;\n}\n\nh2 {\n    font-size: 2rem;\n}\n\nh3 {\n    font-size: 1.5rem;\n}\n\nhtml {\n    font-size: 0.7rem;\n}\n\n@media (min-width: 400px) {\n    html {\n        font-size: 1rem;\n    }\n}\n\n@media (min-width: 720px) {\n    html {\n        font-size: 1.4rem;\n    }\n}\n\n@media (min-width: 1200px) {\n    html {\n        font-size: 1.8rem;\n    }\n}\n\n@media (min-width: 1600px) {\n    html {\n        font-size: 1.4rem;\n    }\n}\n\nh1,\nh2,\nh3 {\n    margin: 0;\n}\n\n.linkless {\n    color: inherit;\n    text-decoration: none;\n}\n","@keyframes flick {\n    from {\n        transform: scaleY(1);\n        opacity: 1;\n    }\n}\n\n@keyframes appear {\n    from {\n        opacity: 0;\n    }\n\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes point-right {\n    0% {\n        transform: translateX(0)  scale(1) rotate(-45deg);\n        opacity: 1;\n    }\n\n    25% {\n        transform: translateX(10px) scale(0.9) rotate(-45deg);\n        opacity: 0;\n    }\n\n    26% {\n        transform: translateX(-10px) scale(0.9) rotate(-45deg);\n        opacity: 0;\n    }\n\n    55% {\n        transform: translateX(0) scale(1) rotate(-45deg);\n        opacity: 1;\n    }\n\n    to {\n        transform: rotate(-45deg);\n    }\n}\n\n@keyframes sexy-face {\n    from {\n        transform: translate(-50%, 100%);\n        opacity: 0;\n    }\n\n    20% {\n        opacity: 1;\n    }\n\n    to {\n        transform: translate(-50%, 0);\n        opacity: 1;\n    }\n}\n","$red-hue: 45deg;\n$green-hue: 120deg;\n$blue-hue: 240deg;\n\n.background {\n    position: absolute;\n    top: 5%;\n    bottom: 5%;\n    left: 0;\n    width: 100%;\n    height: 90%;\n\n    z-index: -1;\n\n    opacity: 0.5;\n    object-fit: cover;\n\n    filter: hue-rotate($red-hue);\n    transition: filter 0.4s ease-in-out;\n\n    &--1 {\n        filter: hue-rotate($green-hue);\n    }\n\n    &--2 {\n        filter: hue-rotate($blue-hue);\n    }\n\n    &--3 {\n        opacity: 0;\n    }\n}\n","$arrow-size: 0.2rem;\n\n.company {\n    padding: 8px 16px;\n\n    &:first-of-type {\n        padding-top: 32px;\n    }\n\n    &__container {\n        padding: 0;\n        list-style: none;\n    }\n\n    &__name {\n        color: #fff;\n        text-decoration: none;\n    }\n\n    &__arrow {\n        padding: $arrow-size;\n        transform: rotate(-45deg);\n\n        display: inline-block;\n\n        border: solid currentColor;\n        border-width: 0 $arrow-size $arrow-size 0;\n\n        animation: 1.4s point-right infinite ease-in-out;\n\n        &--2 {\n            animation-delay: 0.2s;\n        }\n    }\n\n    time {\n        padding: 0 10px;\n\n        &:first-of-type {\n            padding-left: 0;\n        }\n    }\n}\n",".name {\n    padding-bottom: 1rem;\n\n    display: flex;\n    align-items: center;\n    word-spacing: 0;\n}\n\n// Not proud, but oh well\n.👿 {\n    font-size: 0;\n}\n\n.domain {\n    position: relative;\n    display: flex;\n}\n\n.domain__char {\n    animation: appear 0.3s ease-in-out both;\n}\n\n.domain__char:first-child {\n    animation-delay: 0.6s;\n}\n\n.domain__char:nth-child(2) {\n    animation-delay: 1s;\n}\n\n.domain__char:nth-child(3) {\n    animation-delay: 1.3s;\n}\n\n.domain__char:nth-child(4) {\n    animation-delay: 1.7s;\n}\n\n.caret {\n    width: 2px;\n    margin-left: 1vw;\n    transform: scaleY(0);\n\n    transform-origin: center center;\n    opacity: 0;\n    background-color: #fff;\n    animation: flick 0.5s ease-in-out alternate-reverse infinite both 2.2s;\n}\n\n.face {\n    position: absolute;\n\n    top: 0;\n    left: 50%;\n    width: 23%;\n\n    z-index: -1;\n\n    transform: translate(-50%, 100%);\n\n    opacity: 0;\n    object-fit: contain;\n    border-radius: 48%;\n\n    animation: sexy-face 1.4s ease-in-out both;\n\n    &__container {\n        position: relative;\n        width: 20rem;\n        z-index: 0;\n        overflow: hidden;\n        margin: 0 auto 2rem;\n\n        display: flex;\n        justify-content: center;\n\n        @media (min-width: 720px) {\n            width: 30%;\n        }\n    }\n\n    &__wrapper {\n        width: 100%;\n    }\n}\n\n.body {\n    position: relative;\n    width: 100%;\n}\n\n.contacts {\n    width: 100%;\n    margin-top: 3rem;\n\n    display: flex;\n    justify-content: space-evenly;\n    align-items: center;\n    list-style: none;\n\n    &__container {\n        width: 100%;\n        display: block;\n    }\n\n    &__item {\n        display: flex;\n        align-items: center;\n        color: white;\n    }\n\n    &__icon {\n        width: 1.5rem;\n        height: 1.5rem;\n        margin: 0 1rem;\n        object-fit: contain;\n    }\n}\n","@import \"./colors\";\n\n.technology {\n    padding: 1.5rem;\n\n    &__container {\n        max-width: 1050px;\n        padding-top: 2rem;\n\n        display: flex;\n        flex-flow: row wrap;\n        justify-content: space-around;\n        align-items: center;\n        list-style: none;\n    }\n\n    &--frontend + &--backend,\n    &--backend + &--database {\n        padding-left: 2rem;\n    }\n}\n",".section {\n    position: relative;\n    padding: 0 16px;\n\n    display: flex;\n    flex: 1 0 auto;\n    flex-flow: column wrap;\n\n    transition: opacity 0.3s ease-in-out;\n\n    &--full {\n        width: 100%;\n        height: 100%;\n    }\n\n    &--centered {\n        justify-content: center;\n        align-items: center;\n    }\n\n    &--disabled {\n        opacity: 0;\n    }\n\n    &--active {\n        opacity: 1;\n    }\n}\n\n.scroll-section {\n    height: 100%;\n    overflow: auto;\n    scroll-snap-type: y mandatory;\n\n    &__stop {\n        scroll-snap-align: center;\n        scroll-snap-stop: always;\n    }\n}\n",".interest {\n    &__title {\n        position: absolute;\n        top: 2rem;\n        left: 2rem;\n    }\n\n    &__subtitle {\n        position: absolute;\n        right: 2rem;\n        bottom: 2rem;\n    }\n}\n",".lightbulb {\n    position: absolute;\n    top: 0;\n    left: 50%;\n\n    height: 10vh;\n\n    transform: translateX(-50%) rotate(180deg);\n    opacity: 0.2;\n    filter: grayscale(0.9);\n    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;\n\n    &--active {\n        opacity: 1;\n        filter: none;\n    }\n}\n\n.cord {\n    &__container {\n        position: absolute;\n        top: 0;\n        left: calc(50% + 6vh);\n        height: 20vh;\n\n        display: flex;\n        justify-content: flex-start;\n        align-items: stretch;\n\n        cursor: pointer;\n\n        transition: transform 0.2s ease-in-out;\n\n        @media (hover: hover) {\n            &:hover {\n                transform: scale3d(1.1, 1.1, 1);\n            }\n        }\n    }\n\n}\n\n.astronaut {\n    width: 100%;\n    height: 50vh;\n}"],"names":[],"version":3,"file":"index.86cb37c7.css.map"}