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

/* Progress */

.progress {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 75px;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 0px;
}

.progress li {
   position: relative;
   height: 25px;
   width: 25px;
   border-radius: 50%;
   background-color: #d6d6d6;
   color: #f9f9f9;
   margin: 0 15px;
   transition: 0.2s;
   box-shadow: inset 2px 2px 10px #fff,
               0 0 2.5px #262626;
}

.progress li:hover { transform: scale(1.2); }

#meetIndicator { background-color: #262626; }

/*==================================================
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
==================================================*/

/* General Information */

.about-vegetable {
   margin: 50px;
   font-size: 120%;
   opacity: 0;
   transform: scale(0);
   transition: all 1s;
   transition-delay: 2s;
}

/* Opening Animation */

#vegetable-dash:hover .about-vegetable {
   opacity: 1;
   transform: scale(1);
}

.space { width: 10px; }

.smokey {
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
}

.smokey li {
   list-style: none;
   transition: 1.5s;
   transform: rotate(45deg) translateY(-200px);
   opacity: 0;
   filter: blur(50px);
}

#vegetable-dash:hover li {
   transform: rotate(0) translateY(0);
   opacity: 1;
   filter: blur(0);
}

.smokey li:nth-child(2) { transition-delay: .1s; }
.smokey li:nth-child(3) { transition-delay: .2s; }
.smokey li:nth-child(4) { transition-delay: .3s; }
.smokey li:nth-child(5) { transition-delay: .4s; }
.smokey li:nth-child(6) { transition-delay: .5s; }
.smokey li:nth-child(7) { transition-delay: .6s; }
.smokey li:nth-child(8) { transition-delay: .7s; }
.smokey li:nth-child(9) { transition-delay: .8s; }
.smokey li:nth-child(10) { transition-delay: .9s; }
.smokey li:nth-child(11) { transition-delay: 1s; }
.smokey li:nth-child(12) { transition-delay: 1.1s; }
.smokey li:nth-child(13) { transition-delay: 1.2s; }
.smokey li:nth-child(14) { transition-delay: 1.3s; }
.smokey li:nth-child(15) { transition-delay: 1.4s; }

/*==================================================
Gold Rush
==================================================*/

/* General */

#gold-rush h1 {
   margin: 25px;
   letter-spacing: 2px;
}

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

/* Animation */

#gold-rush h1 {
   background: linear-gradient(90deg, #000, #fff, #000);
   background-size: 80%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

#gold-rush:hover h1 { animation: show-text 1.2s 3 forwards; }

@keyframes show-text {
   0% { background-position: -100%; }
   100% { background-position: 250%; }
}

.gold-text {
   animation: bounce-out 3s ease-in forwards;
   transform: translate(1000px, 500px);
   margin: auto;
   transition: 0.8s;
}

#gold-rush:hover .gold-text { animation: bounce-in 3s ease-in forwards; }

@keyframes bounce-in {
   0% {
      transform: translateX(500px) translateY(-80px) scale(0);
      width: 500px;
      opacity: 0.2;
   }
   75% {
      transform: translateX(200px) translateY(80px) scale(0.8);
      width: 500px;
      opacity: .8;
   }
   100% {
      transform: translate(0, 0) scale(1);
      width: 500px;
      opacity: 1;
   }
}

@keyframes bounce-out {
   0% {
      transform: translate(0, 0) scale(1);
      width: 500px;
      opacity: 1;
   }
   25% {
      transform: translateX(200px) translateY(80px) scale(0.8);
      width: 500px;
      opacity: .8;
   }
   100% {
      transform: translateX(500px) translateY(-80px) scale(0);
      width: 500px;
      opacity: 0.2;
   }
}

/*==================================================
Coming Soon!
==================================================*/

.coming {
   display: flex;
   justify-content: center;
   align-items: center;
   list-style-type: none;
}

.coming li {
   transition: 0.2s;
   margin: 0 3px;
}

.coming:hover li {
   animation: shake 1s infinite alternate;
   margin: 0 4px;
   text-shadow: 0 25px 2px #262626;
}

@keyframes shake {
   0% { transform: rotate(10deg) scaleY(1.2); }
   20% { transform: rotate(-10deg) scaleY(1); }
   40% { transform: rotate(10deg) scaleY(1.2); }
   60% { transform: rotate(-10deg) scaleY(1); }
   80% { transform: rotate(10deg) scaleY(1.2); }
   100% { transform: rotate(-10deg) scaleY(1); }
}

.coming:hover li:nth-child(2) { animation-delay: 0.2s; }
.coming:hover li:nth-child(4) { animation-delay: 0.2s; }
.coming:hover li:nth-child(6) { animation-delay: 0.2s; }
.coming:hover li:nth-child(8) { animation-delay: 0.2s; }
.coming:hover li:nth-child(10) { animation-delay: 0.2s; }
.coming:hover li:nth-child(12) { animation-delay: 0.2s; }

/*==================================================
Animations
==================================================

@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; }
}

/*==================================================
Personal
==================================================

.will-not-find-me-at { font-family: Nunito; }
.find-me { margin: 50px 50px 0 50px; }

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

.will-not-find-me-at 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%;
}

.will-not-find-me-at a:hover i {
   transform: scale(1.5) rotate(360deg);
   color: whitesmoke;
}

.will-not-find-me-at 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%;
   background-color: #262626;
   opacity: .2;
   margin: 25px 75px;
}

hr {
   display: block;
   width: 100%;
   background-color: #262626;
   opacity: 0;
   margin: 0 25px;
}

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

/*==================================================
Right Click Menu
==================================================*/

#menu {
   width: 250px;
   position: fixed;
   z-index: 9999;
   display: none;
   font-family: Nunito;
   font-size: 15px;
   background: #fff;
   color: #555;
   border-radius: 5px;
   box-shadow: 0 0 5px #f5f5f5;
}

#menu li {
   list-style-type: none;
   padding: 10px 25px;
   transition: .2s;
}

#menu li:hover {
   text-shadow: 0 .2px .2px #262626;
   background-color: #fafafa;
   border-radius: 5px;
}

#menu hr {
   border: 1px solid #ebebeb;
   border-bottom: 0;
}

/*==========================================================
Links
==========================================================*/

a {
   color: lightblue;
   text-decoration: none;
   position: relative;
}

.no-link:after {
   display: none;
}

a:after {
   content: "";
   display: block;
   height: 1.5px;
   left: 50%;
   position: absolute;
   background: lightblue;
   transition: all .5s;
   width: 0;
}

a:hover:after {
   width: 100%;
   left: 0;
}