profile-site/styles.css

/*==================================================
Main
==================================================*/

* {
   padding: 0;
   margin: 0;
}

html, body {
   margin: 0;
   padding: 0;
   overflow: hidden;
}

::-webkit-scrollbar {
   display: none;
}

/*==================================================
Common Classes
==================================================*/

.block {
   height: 100vh;
   background-color: #f5f5f5;
}

.next {
   height: 80px;
   width: 80px;
   background-color: #fff;
   color: aquamarine;
   position: fixed;
   bottom: 50px;
   right: 50px;
   box-shadow: 0 0 8px #262626;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 250%;
   border-radius: 50%;
   transition: 0.8s;
   font-weight: 900;
}

.last {
   height: 80px;
   width: 80px;
   background-color: #fff;
   color: aquamarine;
   position: fixed;
   bottom: 50px;
   left: 50px;
   box-shadow: 0 0 8px #262626;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 250%;
   border-radius: 50%;
   transition: 0.8s;
   font-weight: 900;
   opacity: 0;
}

.next:hover {
   transform: rotate(720deg);
}

.last:hover {
   transform: rotate(720deg);
}

.arrow {
   animation: nudge 3s linear infinite;
   transition: .2s;
   transform: scale(1);
}

@keyframes nudge {
   0% {
      margin-right: 0px;
   }
   20% {
      margin-right: -8px;
   }
   40% {
      margin-right: -2px;
   }
   60% {
      margin-right: -8px;
   }
   80% {
      margin-right: 0px;
   }
   100% {
      margin-right: 0px;
   }
}

/* Links */

/* Should have nice hover that shows some content from link */

/*==================================================
Landing
==================================================*/

.landing {
   height: 100vh;
   background-color: #f5f5f5;
}

.text {
   text-align: center;
   font-family: Nunito;
}

/* Hi Animation */

.hi {
   padding: 50px;
   font-size: 250%;
   display: inline-block;
   transition: all .3s;
   transition-delay: .3s;
}

.landing:hover .hi {
   color: #f9f9f9;
   font-size: 280%;
   background-color: #262626;
   border-radius: 2%;
}

.hi:before, .hi:after {
   content: "";
   position: absolute;
   height: 50px;
   width: 50px;
   background-color: #262626;
   border-radius: 50%;
   transition: all 0.3s;
   opacity: 0;
}

.hi:before {
   left: -50px;
}

.hi:after {
   right: -50px;
}

.landing:hover .hi:before {
   left: 50%;
   transform: scale(1.5);
   animation: hi-opacity .6s 1 forwards;
}

.landing:hover .hi:after {
   right: 50%;
   transform: scale(1.5);
   animation: hi-opacity .6s 1 forwards;
}

@keyframes hi-opacity {
   0% {
      opacity: 0;
   }
   50% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}

/* About Me */

.about-me {
   margin: 0 80px;
   font-size: 120%;
   transform: translateY(-50px);
   opacity: 0;
   transition: all 1.5s;
   transition-delay: .6s;
}

.landing:hover .about-me {
   transform: translateY(2px);
   opacity: 1;
}

/*==================================================
Vegetable Dash
==================================================*/

/* Opening Animation */

.meet-vegetable {
   text-shadow: 0 0 2px #262626;
}
/* 
.meet-vegetable {
   border: 2px solid tomato;
   background: none;
   color: tomato;
   padding: 20px 40px;
   font-size: 25px;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.5s;
   position: relative;
   overflow: hidden;
}

.meet-vegetable:hover {
   color: #fff;
}

.meet-vegetable:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: tomato;
   z-index: -1;
   border-radius: 0 0 50% 50%;
   height: 0%;
   transition: all 0.8s;
} */

.meet-vegetable:hover:before {
   height: 190%;
}


/* General Information */

.about-vegetable {
   margin: 50px;
   font-size: 120%;
}

/*==================================================
Main Sectors
==================================================

.project {
   height: 100vh;
   overflow: scroll;
   scroll-snap-align: start;
}

#vegetable-dash {
   height: 100vh;
   width: 100%;
   background-color: #272727;
   position: relative;
}

#glish-translate {
   height: 100vh;
   width: 100%;
   background-color: #f5f5f5;
   position: relative;
}

#gold-rush {
   height: 100vh;
   width: 100%;
   background-color: #272727;
   position: relative;
}

#incremental {
   height: 100vh;
   width: 100%;
   background-color: #f5f5f5;
   position: relative;
}

#style {
   height: 100vh;
   width: 100%;
   background-color: #282828;
   position: relative;
}

#hillside {
   height: 100vh;
   width: 100%;
   background-color: #f5f5f5;
   position: relative;
}

#schoolarly-bay {
   height: 100vh;
   width: 100%;
   background-color: #282828;
   position: relative;
}

#squirrel {
   height: 100vh;
   width: 100%;
   background-color: #f5f5f5;
   position: relative;
   scroll-snap-align: start;
}

#personal {
   height: auto;
   width: 100%;
   background-color: #f5f5f5;
   position: relative;
   overflow: scroll;
   scroll-snap-align: start;
   text-align: center;
   overflow-y: hidden;
}

/*==================================================
Project Contents
==================================================

.project h2, .project h4, .project p {
   margin: 25px 25px;
}

/*==================================================
Other
==================================================

@keyframes heavenly-glow {
   0% {
      box-shadow: none;
   }
   50% {
      box-shadow: 5px 5px 5px whitesmoke,
                  5px -5px 5px whitesmoke,
                  -5px 5px 5px whitesmoke,
                  -5px -5px 5px whitesmoke;
   }
   100% {
      box-shadow: none;
   }
}

@keyframes darkness-grows {
   0% {
      box-shadow: none;
   }
   50% {
      box-shadow: 5px 5px 5px #262626,
                  5px -5px 5px #262626,
                  -5px 5px 5px #262626,
                  -5px -5px 5px #262626;
   }
   100% {
      box-shadow: none;
   }
}

@keyframes rainbow-glow {
   0% {
      box-shadow: none;
   }
   50% {
      box-shadow: 2px 2px 1px red,
                  4px 4px 1px orange,
                  6px 6px 1px yellow,
                  8px 8px 1px lightgreen,
                  10px 10px 1px lightblue,
                  12px 12px 1px purple,

                  2px -2px 1px red,
                  4px -4px 1px orange,
                  6px -6px 1px yellow,
                  8px -8px 1px lightgreen,
                  10px -10px 1px lightblue,
                  12px -12px 1px purple,

                  -2px 2px 1px red,
                  -4px 4px 1px orange,
                  -6px 6px 1px yellow,
                  -8px 8px 1px lightgreen,
                  -10px 10px 1px lightblue,
                  -12px 12px 1px purple,

                  -2px -2px 1px red,
                  -4px -4px 1px orange,
                  -6px -6px 1px yellow,
                  -8px -8px 1px lightgreen,
                  -10px -10px 1px lightblue,
                  -12px -12px 1px purple;
   }
   100% {
      box-shadow: none;
   }
}

/*==================================================
Display Images
==================================================

.display-image-dark {
   width: 150px;
   position: absolute;
   bottom: 30px;
   right: 60px;
   border-radius: 50%;
   transition: all .8s;
   animation: darkness-grows 3s infinite;
}

.display-image-dark:hover {
   transform: rotateX(360deg);
}

.display-image-light {
   width: 150px;
   height: 150px;
   position: absolute;
   bottom: 30px;
   right: 60px;
   border-radius: 50%;
   transition: all .8s;
   animation: heavenly-glow 3s infinite;
}

.display-image-light:hover {
   transform: rotateY(360deg);
}

#schoolarly-bay img:nth-child(2) {
   bottom: 25%;
   left: 5%;
   width: 175px;
   height: 175px;
}

#schoolarly-bay img:nth-child(3) {
   bottom: 20%;
   right: 10%;
}

#schoolarly-bay img:nth-child(4) {
   bottom: 10%;
   left: 25%;
   width: 125px;
   height: 125px;
}

/*==================================================
End Section
==================================================

.find-me {
   display: flex;
   justify-content: center;
   text-align: center;
   flex-wrap: wrap;
   margin: auto;
}

.find-me a {
   width: 90px;
   height: 90px;
   background-color: #f1f1f1;
   margin: 10px;
   border-radius: 30%;
   color: #10ac84;
   box-shadow: 0 5px 15px -5px #00000070;
   position: relative;
   overflow: hidden;
   transition: all 0.2s;
}

i {
   line-height: 90px;
   font-size: 25px;
   transition: all 0.2s;
   margin-top: 35%;
}

.find-me a:hover i {
   transform: scale(1.5);
   color: whitesmoke;
}

.find-me a:hover {
   background-color: #262626;
}

#linux-rainbow {
   size: auto;
   max-width: 60%;
   max-height: 60%;
   border-radius: 50px;
   animation: rainbow-glow 5s infinite;
   margin-bottom: 75px;
}

hr {
   display: block;
   width: 100%;
}