about-mikayla/src/App.scss

// STYLESHEET FOR ABOUT MIKAYLA SITE
// STRUCTURE OF THIS FILE AS FOLLOWS:

// font imports
// variable declarations
// main app styles:
// ---- navbar
// welcome page
// technologies page
// about me page
// projects page

////////////////
////////////////
////////////////
////////////////
////////////////

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

$pink50: #fce4ec;
$purple100: #e1bee7;
$purple200: #ce93d8;

.App {
  text-align: center;
  .app-navbar {
    background-color: $purple200;
    height: 4.5rem;
    display: flex;
    border-bottom: 1px solid black;
    font-family: 'Open Sans', sans-serif;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 9;

    .navbar-left {
      display: flex;
      flex-direction: row;
      width: 50%;
      justify-content: flex-start;
      align-items: baseline;
    }

    .navbar-right {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding-right: 1rem;
      width: 50%;
    }

    a {
      transition: color 150ms ease;
      color: black;
      font-weight: 900;
      font-size: 2rem;
      padding-left: 1rem;
      border-right: 1px solid black;
      padding-right: 1rem;
      text-decoration: none;
      &:visited {
        color: inherit;
      }
      &:hover {
        color: purple;
        transition: color 150ms ease;
      }
    }
    h2 {
      font-weight: 400;
      position: relative;
      padding-left: 1rem;
    }
  }
  main {
    position: relative;
    top: 4.5rem;
  }
}

.welcome-page {
  @keyframes sideToSide {
    from {
      transform: rotate(-1deg);
    }

    50% {
      transform: rotate(1deg);
    }

    to {
      transform: rotate(-1deg);
    }
  }

  #header-card {
    height: 18rem;
    animation: sideToSide 10s infinite;
  }
  #welcome-info {
    margin: 2rem 0;
    width: 75%;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.6rem;
    animation: sideToSide 15s infinite;
  }
}

.technologies-page {
  .tech-scrollbar {
    height: 5rem;
    min-width: 60rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 0;
    overflow-x: hidden;
    animation: 30s linear tech-scroll infinite;
    .tech-bar-item {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      left: 0;
      top: 0.3rem;
      font-size: 1.2rem;
      font-weight: 700;
      margin: 0 0.3rem;
      padding: 1rem;
      background-color: $purple200;
      height: 5rem;
      width: 20rem;
    }

    @keyframes hide-until-start {
      from {
        opacity: 0;
      }
      99% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @keyframes tech-scroll {
      from {
        left: -60rem;
      }
      100% {
        left: 60rem;
      }
    }
    
    @keyframes from-right {
      from {
        left: 60rem;
      }
      100% {
        left: -60rem;
      }
    }
  }
  
  .backup-bar {
    bottom: 5rem;
    animation: 30s linear 15s tech-scroll infinite, 15s hide-until-start;
  }
  
  .from-right {
    animation: 30s linear from-right infinite;
  }
  .backup-from-right {
    bottom: 5rem;
    animation: 30s linear 15s from-right infinite, 15s hide-until-start;
  }
  
  .variant-2 {
    background-color: #62286d !important;
    color: white !important;
  }
}

.about-me-page {
  h1 {
    color: darkblue;
    font-weight: 800;
    font-size: 4rem;
  }
  a {
    color: white;
    border-radius: 12px;
    transition: color 0.3s linear;
    text-decoration: none;
    &:hover {
      color: $purple200;
      transition: color 0.3s linear;
    }
  }
  .card-title {
    text-transform: uppercase;
  }
  
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @mixin staggered-entry($interval) {
    animation: 0.5s fade-in #{$interval}s linear forwards;
  }
  
  .fade {
    opacity: 0;
    transition: 0.5s transform ease;

    &.one {
      @include staggered-entry(0);
    }
    &.two {
      @include staggered-entry(0.6);
    }
    &.three {
      @include staggered-entry(1.2);
    }
  }
}

.projects-page {
  .filter-panel {
    display: flex;
    position: static;
    flex-direction: column;
    background-color: white;
    align-items: center;
    padding: 1rem;
    width: 40vw;
    border-radius: 12px;
    margin-bottom: 2rem;
    transition: align-items 1s ease,
                position 1s ease
    ;

    .filter-controls {
      display: flex;
      justify-content: space-between;
      width: 80%;
    }

  }
  .filter-anim-one {
    position: sticky;
    left: 2rem;
    top: 6rem;
    justify-content: flex-start;
  }
  .filter-anim-two {

  }

  .project-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;

    > * {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: lightblue;
      width: 80%;
      height: auto;
      margin-bottom: 2rem;
      .links {
        display: flex;
        width: 75%;
        align-items: baseline;
        justify-content: space-around;
      }
      a:last-child {
        margin-bottom: 1rem;
      }
    }
  }
}