archive ReactApp

react_OLD/src/assets/chesscom-embed/default.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 400 400" xml:space="preserve"><style>.st2{fill:#bcbbb7}</style><path fill="#e7e5e3" d="M0 0h400v400H0z"/><path d="M275.8 269.6c-52.8-40.2-46.9-75.2-47.6-89.5h32.2c3.8-6.6 5.7-14 5.7-21.5l-36.5-24c22.6-16.3 27.8-47.9 11.5-70.5-5.6-7.7-13.2-13.8-22.1-17.3-5.9-2.4-47.2 133.4-47.2 133.4-.1 3.1-.2 7.2-.2 12.1 0 13.5 33.1 11.4 31.4 23.4-2.6 17.8-3.2 31.3-18.5 74.1-10.4 28.9-79.4 0-84.3 14.2-3.6 10.6-5.3 21.7-5.2 32.8 0 1.3 2.7 20.4 105.1 20.4s105.1-19.1 105.1-20.4c-.1-29.2-10.9-53.1-29.4-67.2z" fill="#898785"/><path class="st2" d="M198.1 287.6c5.7-25.9 10.7-53.5 13.8-70 3.8-20.6-27.5-24.3-40.3-26.2-.6 17.6-5.5 46.2-47.4 78.2-11.3 8.6-19.7 20.9-24.6 35.8 11.3 5.5 26.4 8.8 49.7 8.8 14.9 0 42.6 1.8 48.8-26.6zM220.1 180.1c5-12.9 4.3-21.5 4.3-21.5l-20.7-24c22-9.4 35.2-27 35.2-47.5 0-15.8-7.4-30.6-19.9-40.2-25.8-10.5-55.3 1.9-65.9 27.7-8.8 21.6-1.7 46.4 17.2 60l-36.5 24c0 7.6 1.9 15 5.7 21.5h80.6z"/><path d="M197.1 53.3c29.1 4.5-13.4 38.4-26.9 36.8-12.7-1.6-.4-41 26.9-36.8z" fill="#dad7d5"/></svg>

react_OLD/src/assets/css/App.css

@@ -0,0 +1,894 @@
+@import "~react-image-gallery/styles/css/image-gallery.css";
+
+@font-face {
+  font-family: "neon-future";
+  src: url("../fonts/Neon\ Future.ttf")
+}
+
+@font-face {
+  font-family: "starixo";
+  src: url("../fonts/Starixo.otf")
+}
+
+@font-face {
+  font-family: "independent";
+  src: url("../fonts/INDEPENDENT.ttf")
+}
+
+@font-face {
+  font-family: "sunset-club";
+  src: url("../fonts/SunsetClub.otf")
+}
+
+@font-face {
+  font-family: "robotoreg";
+  src: url("../fonts/RobotoCondensed-Regular.ttf")
+}
+
+html, body {
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  /* background-image: url('../photos/plexus.jpg'); */
+  /*url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')*/
+  background-attachment: fixed;
+  background-size: 100% auto;
+  background-clip: border-box;
+}
+
+* {
+  font-family: "Roboto Condensed", sans-serif;
+}
+
+#menu {
+  height: 2rem;
+  display: none;
+  filter: brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(1%) hue-rotate(151deg) brightness(95%) contrast(86%);
+  float: right;
+  margin-right: 1rem;
+  margin-top: .25rem;
+  cursor: pointer;
+}
+
+h1, h2 {
+  color: #ecebeb;
+}
+
+h2 {
+  font-size: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+h3, h4 {
+  color: #a8a8a8;
+}
+
+strong {
+  color: #ecebeb;
+}
+
+p, li {
+  color: rgb(212, 212, 212);
+  font-size: 1rem;
+}
+
+a {
+  color: #a0a0a0a0;
+  text-decoration: none;
+}
+
+.header h1 {
+  display: inline-block;
+  transition: .4s;
+  margin-bottom: 0px;
+  margin-top: .5rem;
+  margin-left: 1rem;
+  font-size: 2rem;
+}
+
+.header {
+  margin-bottom: 0px;
+  margin-left: 0rem;
+  background-color: #1a1a1a;
+  width: 100%;
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  left: 0;
+  transition: .4s;
+  overflow: hidden;
+}
+
+#name-container {
+  display: inline;
+}
+
+.name {
+  display: inline;
+  background: url("../../assets/photos/sun.png") 0/5rem no-repeat;
+  background-size: contain;
+  padding-left: 5.5rem;
+}
+
+.glitch {
+  display: inline;
+}
+
+.textGrad {
+  font-family: "sunset-club" !important;
+}
+
+.navControl {
+  transition: .4s;
+}
+
+.navBar {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 0px;
+  margin: 0px;
+  width: 100%;
+}
+
+.navElement {
+  border: solid black .2rem;
+  width: 25vw;
+  text-align: center;
+  font-size: 1.2rem;
+  font-size: 1rem;
+  background-color: rgb(156, 49, 45, .4);
+}
+
+.navElement:hover {
+  background-color: rgb(156, 49, 45, .8);
+}
+
+.navElement * {
+  color: white;
+  margin: 0px;
+  display: block;
+  padding-top: .3rem;
+  padding-bottom: .3rem;
+  transition: .4s;
+}
+
+#home {
+  /* height: 100vh; */
+  overflow-y: hidden;
+}
+
+.concentratedHead {
+  display: inline-block;
+  padding-right: 4rem;
+  border-bottom: #0f0f0f solid 5px;
+  color: white;
+}
+
+.foreground {
+  position: relative;
+  padding-top: 7rem;
+  padding-left: 8rem;
+  width: calc(100%-8rem);
+  min-height: calc(100vh - 8rem);
+  background-color: rgb(44, 44, 44, .85);
+  padding-bottom: 1rem;
+  overflow: hidden;
+  transition: .4s;
+}
+
+.foreground p {
+  line-height: 1.5em;
+  max-width: min(90%, 40rem);
+}
+
+.homeground {
+  position: relative;
+  padding-top: 7rem;
+  min-height: calc(100vh - 8rem);
+  padding-bottom: 1rem;
+  overflow: hidden;
+  transition: .4s;
+}
+
+.noBackground {
+  background: none;
+}
+
+.relative {
+  position: relative;
+}
+
+.noPad {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+
+.centerContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.centerContent>div {
+  margin-top: 30vh;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+#HomeContent {
+  padding: 3rem;
+  display: inline-block;
+  background-color: rgb(44, 44, 44, .75);
+  border: solid black 4px;
+  text-align: center;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-around;
+}
+
+.vFlex {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.spaceBetween {
+  justify-content: space-between;
+}
+
+.start {
+  justify-content: left;
+}
+
+.onRight {
+  position: absolute;
+  right: 0;
+  top: 0;
+  max-width: 100vw;
+}
+
+.onRight > * {
+  margin: auto;
+}
+
+.bgi {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-y: center;
+  opacity: 0.4;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+}
+
+#Vertical {
+  margin-left: auto;
+  margin-right: auto;
+  width: 0;
+  height: 3rem;
+  border-right: rgb(156, 49, 45) solid 1px;
+}
+
+.sideimg {
+  float: right;
+  top: 0;
+  right: 0;
+  display: block;
+  max-width: min(40rem, 80%);
+  max-height: min(30rem, 100%);
+}
+
+.col {
+  float: left;
+  margin-right: 3rem;
+  width: calc(50% - 3rem);
+}
+
+.boxedImg {
+  border: .5rem solid rgba(22, 22, 22, .8);
+  max-width: calc(90% - 1rem);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.carousel-container {
+  margin-left: 10%;
+  max-width: 80%;
+}
+
+.elementBlock {
+  margin-top: 3rem;
+}
+
+.skills {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.3);
+  border: solid rgba(156, 49, 45, .8) .3rem;
+  text-align: center;
+  padding: 1rem;
+}
+
+.skill {
+  display: inline-block;
+  border: rgba(156, 49, 45, .8) solid .15rem;
+  padding: .2rem;
+  margin: .5rem;
+  background-color: rgba(11, 11, 11, .8);
+  color: rgb(212, 212, 212);
+}
+
+#skillList {
+  color: white;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#skillDisp {
+  width: 30em;
+  position: relative;
+}
+
+#skillDisp::after {
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: right top;
+  opacity: .2;
+  position: absolute;
+  height: 60%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  content: "";
+  z-index: -1;
+}
+
+#skillDisp.python::after {
+  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png')
+}
+
+#skillDisp.js::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-PTty3CfTGnA%2FTpZOEjTQ_WI%2FAAAAAAAAAeo%2FKeKt_D5X2xo%2Fs1600%2Fjs.jpg&f=1&nofb=1&ipt=c8ae673676226ae40a5cd1408a5c7607e6b9725025888f4994a705309a16d1c3&ipo=images')
+}
+
+#skillDisp.html::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Flogos-download.com%2Fwp-content%2Fuploads%2F2017%2F07%2FHTML5_badge.png&f=1&nofb=1&ipt=db644f64f96f334aad37d31dc1c9dab28021476f6effaa0cb682297f8fd14240&ipo=images')
+}
+
+#skillDisp.sql::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn3.iconfinder.com%2Fdata%2Ficons%2Fbasicolor-computer-tech%2F24%2F091_database_data_sql-512.png&f=1&nofb=1&ipt=cffc17203486b92c9733b992733e6934c03f984bc530c94b75bed278bc73477d&ipo=images')
+}
+
+#skillDisp.cpp::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fen.nokiawroclaw.pl%2Fwp-content%2Fuploads%2Fsites%2F5%2F2018%2F11%2Fcpp_logo.png&f=1&nofb=1&ipt=5fc23951b00bcbdec1977f3bc4591a7b8511ab29f5982963c541526902c0b4fd&ipo=images')
+}
+
+#skillDisp.other::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.freebiesupply.com%2Flogos%2Flarge%2F2x%2Fgit-icon-logo-png-transparent.png&f=1&nofb=1&ipt=834c5a11f63e26429713be2b7d9c9d1e45ce53d771862b9ab49bc35571513894&ipo=images')
+}
+
+#skillDisp.tools::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages.g2crowd.com%2Fuploads%2Fproduct%2Fimage%2Flarge_detail%2Flarge_detail_64636a5c446c22391d4ed719e0987cd2%2Farcgis-pro.png&f=1&nofb=1&ipt=812a2905dd03e5c68f55a9f095bfe7a54feb801bf7f3f11cc01352f45f8a4f8d&ipo=images')
+}
+
+.hex-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: 50px;
+}
+
+.hex-row {
+  display: flex;
+}
+
+.hex {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  margin: 0px 5px;
+}
+
+.hex:hover {
+  transform: scaleX(1.1) scaleY(1.1);
+}
+
+.hex>* {
+  position: absolute;
+}
+
+.hex-odd {
+  margin: 0px 55px;
+}
+
+.hex-border {
+  border-left: solid black 3px;
+  border-right: solid black 3px;
+  width: 100%;
+  height: 58%;
+}
+
+.hex>.hex-border:nth-child(1) {
+  rotate: 60deg;
+}
+
+.hex>.hex-border:nth-child(2) {
+  rotate: 120deg;
+}
+
+.projectList {
+  padding: 0px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  text-align: center;
+}
+
+.project {
+  display: inline-block;
+  text-align: left;
+  margin: 1rem;
+  width: 20rem;
+  height: 22rem;
+  border: .3rem rgba(156, 49, 45, .8) solid;
+  background-color: rgba(22, 22, 22, .8);
+  transition: .3s;
+  overflow: hidden;
+}
+
+.projTitle > * {
+  margin-bottom: 0;
+}
+
+.projBody {
+  position: relative;
+  z-index: 3;
+}
+
+.project .topBox, .project .bottomBox, .project .projTitle {
+  padding: 0 1rem;
+  z-index: inherit;
+}
+
+.backedBody {
+  background-color: #1a1a1a;
+  padding: .25em;
+}
+
+.tab {
+  display: inline;
+  float: right;
+}
+
+.project h3 {
+  display: inline-block;
+  border-bottom: black solid .2rem;
+}
+
+.project img {
+  margin-top: auto;
+  height: 3rem;
+}
+
+.bottomBox a, .placeholding {
+  vertical-align: middle;
+  display: inline;
+  text-align: left;
+  height: unset;
+}
+
+.project a img, .project a p {
+  padding: .5rem;
+  filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(52deg) brightness(106%) contrast(101%);
+}
+
+.project a img:hover, .project a p:hover {
+  filter: invert(66%) sepia(0%) saturate(3964%) hue-rotate(99deg) brightness(100%) contrast(105%);
+}
+
+.incomplete {
+  color: red;
+}
+
+.WIP {
+  color: yellow;
+}
+
+.complete {
+  color: green;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+.socials {
+  margin-left: 1rem;
+  width: 0px;
+}
+
+.socials img {
+  height: 2rem;
+  margin-bottom: 1rem;
+  filter: invert(29%) sepia(20%) saturate(1786%) hue-rotate(314deg) brightness(101%) contrast(110%);
+  transition: .2s;
+}
+
+.socials img:hover {
+  opacity: .5;
+}
+
+#vertLine {
+  border-right: 1px solid rgb(156, 49, 45);
+  margin-left: 1rem;
+  height: 10rem;
+}
+
+.neon {
+  display: inline-block;
+  font-family: "neon-future";
+  color: #fff;
+  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #5271ff,
+    0 0 82px #5271ff, 0 0 92px #5271ff, 0 0 102px #5271ff, 0 0 151px #5271ff;
+  animation: pulsate 0.11s ease-in-out infinite alternate;
+}
+
+.neonBox h1 {
+  font-size: min(4em, 12vw);
+}
+
+.neonBox h3 {
+  font-size: min(2em, 6vw);
+}
+
+.neonBox {
+  border: 0.2rem solid #fff;
+  border-radius: 2rem;
+  padding: 2em;
+  margin: 2em;
+  box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #5271ff,
+    0 0 0.8rem #5271ff, 0 0 2.8rem #5271ff, inset 0 0 1.3rem #5271ff;
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thedermacompany.co.uk%2Fwp-content%2Fuploads%2F2020%2F11%2Fblack-brick-scaled.jpg&f=1&nofb=1&ipt=d10be6df79141da1b4ec0c725575cef0f7b67e957e391662226d66cff02d25e6&ipo=images');
+  /* background-blend-mode: ; */
+  text-align: center;
+}
+
+@keyframes pulsate {
+  100% {
+    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff,
+      0 0 40px #5271ff, 0 0 80px #5271ff, 0 0 90px #5271ff,
+      0 0 100px #5271ff, 0 0 150px #5271ff;
+  }
+
+  0% {
+    text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 18px #fff,
+      0 0 38px #5271ff, 0 0 73px #5271ff, 0 0 80px #5271ff, 0 0 94px #5271ff,
+      0 0 140px #5271ff;
+  }
+}
+
+@keyframes swipeIn {
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+}
+
+.swipeIn {
+  animation: swipeIn 1s 1;
+}
+
+.fPage {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.heightBox {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.chess {
+  width: 300px;
+  border: none;
+  /* transform: scale(.8);
+  float: right; */
+}
+
+#chessProfile {
+  border-radius: 5px;
+  width: 300px;
+  height: calc(125px + 2em);
+  color: #AAAAAA;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  cursor: pointer;
+}
+
+.chessInfo {
+  background-color: rgba(0, 0, 0, .3);
+  ;
+  margin: 1em;
+}
+
+.bottomtext {
+  font-size: x-small;
+  margin: 3px;
+  color: white;
+  text-align: right;
+}
+
+.black {
+  background-color: black;
+}
+
+.identity {
+  margin-right: 0px;
+}
+
+.identity h5 {
+  margin: 0px;
+  margin-top: -25px;
+  background: black;
+  z-index: 50;
+  position: relative;
+  width: 90%;
+  margin-left: 10px;
+
+}
+
+.pfpContainer {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
+
+.pfpContainer>div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.pfp {
+  border-radius: 50%;
+  width: 100px;
+  text-align: center;
+}
+
+.vContainer {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.vItem {
+  display: inline-block;
+}
+
+.vItem p {
+  margin: 0px;
+  display: inline;
+}
+
+.chessIcon {
+  display: inline-block;
+  font-family: Chess New;
+  font-size: x-large;
+  width: 25px;
+  text-align: center;
+}
+
+.rapid {
+  color: #6c9d41;
+}
+
+.blitz {
+  color: #f7c045;
+}
+
+.bullet {
+  color: #a58a45;
+}
+
+.puzzles {
+  color: #db7e3b;
+}
+
+.timeitem {
+  transition: .4s;
+  overflow-y: clip;
+  height: auto;
+  max-height: 500px;
+}
+
+.timeitem a {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  text-decoration: underline;
+}
+
+.timeline-item{
+  border-left: solid #AAAAAA 3px;
+}
+
+.timeline-item h2{
+  margin-top: 0px;
+  margin-left: .5em;
+  font-family: robotoreg;
+}
+
+.timeline-item p{
+  margin-bottom: 0px;
+  padding-bottom: 2em;
+  padding-left: 3em;
+  font-family: robotoreg;
+}
+
+/* .timeline-item::before{
+  content: "";
+  background-color: red;
+  border: solid black 3px;
+  border-radius: 100%;
+  padding: 5px;
+  position: absolute;
+  margin-left: -8px;
+} */
+
+.datetext {
+  margin: .25em;
+  font-size: small;
+  margin-left: -1.5em;
+  font-family: robotoreg;
+}
+
+@font-face {
+  font-family: Chess New;
+  src: url('https://www.chess.com/bundles/web/fonts/chessglyph-new.0cc8115c.woff2');
+}
+
+@media screen and (max-width: 1200px) {
+
+  #menu {
+    display: unset;
+  }
+
+  .header {
+    background-color: #1a1a1a;
+    border-bottom: solid 3px rgb(156, 49, 45, .4);
+  }
+
+  .header h1 {
+    font-size: 1.5rem;
+  }
+
+  .navBar {
+    flex-direction: column;
+  }
+
+  .navElement {
+    width: 100vw;
+  }
+
+  .navControl {
+    max-height: 0px;
+  }
+
+  .projectList {
+    width: 95%;
+  }
+
+  .sideimg {
+    position: relative;
+  }
+
+  body {
+    background-size: auto 100%;
+  }
+
+  .foreground {
+    width: 100%;
+    padding-left: 2rem;
+    /* centered objects will need to remove 1.5 of this to center */
+    padding-right: .5rem;
+    padding-bottom: 36px;
+  }
+
+  .homeground {
+    width: 90%;
+    padding-bottom: 36px;
+    display: flex;
+    margin: auto;
+    overflow: visible;
+  }
+
+  .centeredForeground {
+    margin-left: -1.5rem;
+    /* remove .foreground excess margin */
+  }
+
+  .onRight {
+    position: unset;
+    margin-top: 3rem;
+  }
+
+  .col {
+    width: 90%;
+    margin-bottom: 3rem;
+  }
+
+  #aboutMe {
+    float: none;
+    display: block;
+    width: 90%;
+  }
+
+  #skills {
+    float: none;
+    margin-right: auto;
+    display: block;
+    width: 90%;
+  }
+
+  .footer {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+    background-color: rgb(156, 49, 45);
+  }
+
+  .socials {
+    display: flex;
+    justify-content: space-around;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    margin-right: auto;
+    margin-left: auto;
+    width: min(100vw, 400px);
+  }
+
+  .socials * {
+    display: inline;
+    text-align: center;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .socials img {
+    height: 2rem;
+    margin-bottom: 0px;
+    filter: none;
+  }
+
+  #vertLine {
+    display: none;
+    height: 0px;
+  }
+}

react_OLD/src/assets/css/checkbox.css

@@ -0,0 +1,70 @@
+.hidden {
+    display: none;
+}
+
+.hiddenup {
+    max-height: 0px !important;
+}
+
+.checkbox-wrapper > div {
+    display: inline-block;
+    margin-right: 1em;
+    margin-bottom: 1em;
+}
+
+.checkbox-wrapper > div:last-child {
+    margin-bottom: 0;;
+}
+
+.checkbox-wrapper .switch {
+    display: flex;
+    position: relative;
+    cursor: pointer;
+}
+
+.checkbox-wrapper .switch > * {
+    align-self: center;
+}
+
+.checkbox-wrapper .switch input {
+    display: none;
+}
+
+
+.checkbox-wrapper .slider {
+    background-color: #ccc;
+    transition: 0.4s;
+    height: 34px;
+    width: 60px;
+}
+
+.checkbox-wrapper .slider:before {
+    background-color: #fff;
+    bottom: 4px;
+    content: "";
+    height: 26px;
+    left: 4px;
+    position: absolute;
+    transition: 0.4s;
+    width: 26px;
+}
+
+.checkbox-wrapper input:checked+.slider {
+    background-color: #66bb6a;
+}
+
+.checkbox-wrapper input:checked+.slider:before {
+    transform: translateX(26px);
+}
+
+.checkbox-wrapper .slider.round {
+    border-radius: 34px;
+}
+
+.checkbox-wrapper .slider.round:before {
+    border-radius: 50%;
+}
+
+.checkbox-wrapper strong {
+    margin-left: .5em;
+}

react_OLD/src/assets/css/head.scss

@@ -0,0 +1,60 @@
+.line {
+  &:not(:first-child) {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  
+  @for $i from 1 through 10 {
+    &:nth-child(#{$i}) {
+      animation:
+        clip 6000ms $i * -600ms linear infinite,
+        glitch#{$i} 2500ms random(1000) * -1ms linear infinite;
+
+      @keyframes glitch#{$i} {
+        0% {
+          transform: translateX(0);
+        }
+        96% {
+          transform: translateX(0);
+          color: #fff;
+        }
+        97% {
+          transform: translateX(random(10) - 5px);
+          color: #4E9A26;
+        }
+        98% {
+          transform: translateX(random(10) - 5px);
+          color: #AC1212;
+        }
+        99% {
+          transform: translateX(random(10) - 5px);
+          color: #fff;
+        }
+        100% {
+          transform: translateX(0);
+        }
+      }
+    }
+  }
+}
+
+@keyframes clip {
+  0% {
+    clip-path: polygon(
+      0 100%,
+      100% 100%,
+      100% 120%,
+      0 120%
+    );
+  }
+  
+  100% {
+    clip-path: polygon(
+      0 -20%,
+      100% -20%,
+      100% 0%,
+      0 0
+    );
+  }
+}

react_OLD/src/assets/icons/email.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 0 11.755 v 66.489 h 90 V 11.755 H 0 z M 45 50.49 L 7.138 15.755 h 75.724 L 45 50.49 z M 33.099 45 L 4 71.695 V 18.304 L 33.099 45 z M 36.058 47.714 L 45 55.918 l 8.943 -8.204 l 28.919 26.53 H 7.138 L 36.058 47.714 z M 56.901 45 L 86 18.304 v 53.392 L 56.901 45 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

react_OLD/src/assets/icons/github.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="48px" height="48px">    <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>

react_OLD/src/assets/icons/globe.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 205.229 205.229" style="enable-background:new 0 0 205.229 205.229;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M102.618,205.229c-56.585,0-102.616-46.031-102.616-102.616C0.002,46.031,46.033,0,102.618,0
+					C159.2,0,205.227,46.031,205.227,102.613C205.227,159.198,159.2,205.229,102.618,205.229z M102.618,8.618
+					c-51.829,0-94.002,42.166-94.002,93.995s42.17,93.995,94.002,93.995c51.825,0,93.988-42.162,93.988-93.995
+					C196.606,50.784,154.444,8.618,102.618,8.618z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<rect x="5.746" y="98.304" style="fill:#010002;" width="193.734" height="8.618"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M104.941,62.111c-48.644,0-84.94-10.704-87.199-11.388l2.494-8.253
+					c0.816,0.247,82.657,24.336,164.38-0.004l2.452,8.26C158.405,59.266,130.021,62.111,104.941,62.111z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M20.416,160.572l-2.459-8.26c84.271-25.081,165.898-1.027,169.333,0l-2.494,8.256
+					C183.976,160.318,102.142,136.24,20.416,160.572z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M69.399,196.168C26.933,96.747,63.584,8.604,63.959,7.727l7.927,3.378
+					c-0.365,0.845-35.534,85.756,5.44,181.677L69.399,196.168z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<path style="fill:#010002;" d="M135.168,196.168l-7.927-3.382c40.971-95.92,5.801-180.832,5.436-181.677l7.927-3.378
+					C140.973,8.604,177.627,96.747,135.168,196.168z"/>
+			</g>
+		</g>
+		<g>
+			<g>
+				<rect x="98.306" y="5.744" style="fill:#010002;" width="8.614" height="197.302"/>
+			</g>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

react_OLD/src/assets/icons/instagram.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="60px" height="60px">    <path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"/></svg>

react_OLD/src/assets/icons/linkedin.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 45 0 C 20.147 0 0 20.147 0 45 c 0 24.853 20.147 45 45 45 c 24.853 0 45 -20.147 45 -45 C 90 20.147 69.853 0 45 0 z M 31.187 69.956 H 20.822 V 36.617 h 10.365 V 69.956 z M 26.005 32.062 c -3.32 0 -6.005 -2.692 -6.005 -6.007 c 0 -3.318 2.685 -6.011 6.005 -6.011 c 3.313 0 6.005 2.692 6.005 6.011 C 32.01 29.37 29.317 32.062 26.005 32.062 z M 70 69.956 H 59.643 V 53.743 c 0 -3.867 -0.067 -8.84 -5.385 -8.84 c -5.392 0 -6.215 4.215 -6.215 8.562 v 16.491 H 37.686 V 36.617 h 9.939 v 4.559 h 0.141 c 1.383 -2.622 4.764 -5.385 9.804 -5.385 C 68.063 35.791 70 42.694 70 51.671 V 69.956 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

react_OLD/src/assets/icons/menu.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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 377 377" style="enable-background:new 0 0 377 377;" xml:space="preserve">
+<g>
+	<circle cx="15" cy="88.5" r="15"/>
+	<rect x="75" y="73.5" width="302" height="30"/>
+	<circle cx="15" cy="288.5" r="15"/>
+	<rect x="75" y="273.5" width="302" height="30"/>
+	<circle cx="15" cy="188.5" r="15"/>
+	<rect x="75" y="173.5" width="302" height="30"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>