professional-profile/styles/styles.css

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

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body,
html {
   overflow: hidden;
   scroll-behavior: smooth;
}


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

.block {
   height: 100vh;
   background-color: #f5f5f5;
   display: grid;
   grid-template-columns: 50% 50%;
}

.section-head {
   background-color: #f5f5f5;
}

.section-head,
.section-text {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}

.section-text {
   height: 100vh;
   overflow: scroll;
   background-color: #fff;
   text-align: center;
   font-family: Nunito;
}


/*==================================================
Progress
==================================================*/

.progress-parent {
   position: fixed;
   left: 0;
   bottom: 0;
   right: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-bottom: 10px;
   z-index: 100;
}

.progress {
   background-color: #e2e2e2;
   border-radius: 1em 1em 0 0;
   list-style-type: none;
   padding: 6px 8px 2px 8px;
   transform: translate(0, 10px);
   transition: .1s;
   box-shadow: 0 0 2px #ddd;
}

.progress-parent:hover .progress {
   transform: translate(0, 0);
   box-shadow: 0 1px 4px #bbb;
   border-radius: 1em;
}

.progress span {
   display: inline-block;
   position: relative;
   height: 25px;
   width: 25px;
   border-radius: 50%;
   background-color: #fff;
   color: #f9f9f9;
   transition: 0.1s;
   box-shadow: inset 1px 1px 5px #ddd,
      0 0 1px #bbb;
}

.progress span.active {
   background-color: #262626;
}

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


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

/* Hi Animation */

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

@media only screen and (min-width: 700px) {

   .block: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;
}

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

.block: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;
   }
}


.section-head div {
   display: grid;
   justify-content: center;
}

.section-image {
   display: block;
   object-fit: cover;
   width: 400px;
   height: 400px;
   border-radius: 10px;
}

/* About Me */

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

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



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

a {
   color: #27c878;
}


.fancy-underline {
   text-decoration: none;
   position: relative;
}

.fancy-underline:after {
   content: "";
   display: block;
   height: 1.5px;
   left: 50%;
   position: absolute;
   background: #27c878;
   transition: all .2s;
   width: 0;
}

.fancy-underline:hover:after {
   width: 100%;
   left: 0;
}


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

.will-not-find-me-at {
   font-family: Nunito;
}

.find-me {
   margin: 50px 50px 0 50px;
}

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

.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: #fafafa;
   margin: 10px;
   border-radius: 30%;
   color: #27c878;
   box-shadow: 0 5px 15px -5px #00000050;
   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: #27c878;
}

.contact {
   margin-top: 4em;
}

.contact p {
   font-size: 120%;
   margin: .4em 0;
   padding: 0;
   font-family: monospace;
}


/*==================================================
Hover
==================================================*/

.dynamicHover,
.dynamicHoverDark {
   position: fixed;
   z-index: 10000;
   padding: .4vh .8vw;
   font-family: "Nunito";
   border-radius: 1vh;
   font-size: 2.6vh;
   transition: opacity .1s;
   opacity: 0;
}

.dynamicHover {
   background-color: #e9e9e9;
   color: #2b2b2b;
}

.dynamicHoverDark {
   background-color: #2b2b2b;
   color: #e9e9e9;
}


/*==================================================
Dark
==================================================*/

@media (prefers-color-scheme: dark) {
   .section-head {
      background-color: #000;
      color: #aaa;
   }

   .section-text {
      background-color: #222;
      color: #e9e9e9;
   }

   .progress {
      background-color: #333;
      box-shadow: 0 0 2px #555;
   }

   .progress-parent:hover .progress {
      box-shadow: 0 1px 4px #555;
   }

   .progress span {
      background-color: #222;
      color: #e9e9e9;
      box-shadow: inset 1px 1px 5px #111,
         0 0 1px #000;
   }

   .progress span.active {
      background-color: #666;
   }

   .will-not-find-me-at a {
      background-color: #333;
   }

   .dynamicHoverDark {
      background-color: #e9e9e9;
      color: #2b2b2b;
   }
}


/*==================================================
Mobile
==================================================*/

@media only screen and (max-width: 700px) {
   .block {
      grid-template-columns: 100%;
      grid-template-rows: auto auto;
      height: 90vh;
   }

   .section-head {
      height: 20vh;
      overflow: scroll;
   }

   .section-text {
      height: 70vh;
      overflow: scroll;
      font-size: 105%;
   }

   .section-text .about-me {
      margin: 0 10px;
   }

   #contact {
      background-color: #000;
   }

   #contact .hi {
      padding: 0;
      margin-bottom: 10px;
   }

   #contact .section-head {
      height: 30vh;
   }

   #contact .section-text {
      height: 30vh;
   }

   .contact {
      margin-top: 0;
   }

   .hi::after,
   .hi::before {
      all: unset;
   }

   .progress {
      height: 10vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
      overflow: scroll;
   }

   .progress span {
      height: 50px;
      width: 50px;
      margin: 0 .3em;
   }

   .progress-parent:hover .progress {
      transform: translate(0, 10px);
   }

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