file reorganization

src/assets/css/App.css

@@ -0,0 +1,508 @@
+@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")
+}
+
+html, body {
+  background-color: #1b1f27;
+  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;
+}
+
+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 {
+  background: url("../../assets/photos/sun.png") 0/5rem no-repeat;
+  background-size: contain;
+  padding-left: 5.5rem;
+}
+
+.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 {
+  padding-top: 7rem;
+  padding-left: 8rem;
+  width: calc(100%-8rem);
+  min-height: calc(100vh - 8rem);
+  background-color: rgb(44, 44, 44, .5);
+  padding-bottom: 1rem;
+  overflow: hidden;
+  transition: .4s;
+}
+
+.foreground p {
+  line-height: 1.5em;
+  max-width: min(90%, 40rem);
+}
+
+.centerContent {
+  margin-top: 30vh;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+#HomeContent {
+  padding: 3rem;
+  display: inline-block;
+  background-color: rgb(44, 44, 44, .95);
+}
+
+#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);
+}
+
+.projectList {
+  padding: 0px;
+  display: block;
+  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);
+}
+
+.project .topBox, .project .bottomBox {
+  padding-left: 1rem;
+}
+
+.tab {
+  display: inline;
+  float: right;
+}
+
+.project h3 {
+  display: inline-block;
+  border-bottom: black solid .2rem;
+}
+
+.project img {
+  margin-top: auto;
+  height: 3rem;
+}
+
+.topBox {
+  padding-left: .5rem;
+  padding-right: 1rem;
+  height: 75%;
+}
+
+.bottomBox {
+  height: auto;
+  padding-left: 0rem;
+  padding-right: 1rem;
+}
+
+.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;
+  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;
+  }
+}
+
+.fPage {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  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-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.heightBox {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+@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;
+  }
+
+  .centeredForeground {
+    margin-left: -1.5rem;
+    /* remove .foreground excess margin */
+  }
+
+  .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: 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;
+  }
+}

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
+    );
+  }
+}