Portfolio Resume Scrolling Container

By Kevin Ball

F6
#
portfolio resume content feature flexbox
How do I use This?

A simple portfolio resume container with fixed left and scrolling right on larger screens, simple stacked scroll on small screens

HTML
<div class="portfolio-resume-scrolling-container row">
  <div class="columns small-12 medium-5 portfolio-resume-overview">
    <div class="portfolio-resume-overview-content">
      <h3 class="portfolio-resume-name">Name</h3>
      <p>I'm kind of awesome. No really.</p>
      <a class="button primary expanded" href="#">Contact Me</a>
    </div>
  </div>
  <div class="columns small-12 medium-7 portfolio-resume-scrolling">
    <h3>SKILLS</h3>
    <ul class="portfolio-resume-side-list">
      <li>Foundation</li>
      <li>Moar Foundation</li>
      <li>SCSS</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>HTML</li>
    </ul>
    <h3>EXPERIENCE</h3>
    <p>Look at all this amazing stuff that I've done!</p>
    <ul>
      <li>Just one damned thing</li>
      <li>After another</li>
      <li>Like history</li>
      <li>One thing</li>
      <li>After another</li>
    </ul>
    <h3>WORK</h3>
    <p>I've done work too</p>
    <ul>
      <li>A Site</li>
      <li>Another Site</li>
    </ul>
  </div>
</div>


$portfolio-resume-scrolling-container-height: 400px;
$portfolio-resume-scrolling-container-content-width: 300px;
$portfolio-resume-scrolling-container-padding: 10px;

.portfolio-resume-scrolling-container {
  height: $portfolio-resume-scrolling-container-height;
  border: 1px solid $medium-gray;
}

.portfolio-resume-overview {
  height: $portfolio-resume-scrolling-container-height;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 1;
  z-index: 0;

  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('https://placeimg.com/400/400/animals');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: 0;
  }
}

.portfolio-resume-overview-content {
  max-width: $portfolio-resume-scrolling-container-content-width;
  z-index: 1;
}

.portfolio-resume-scrolling {
  padding-top: $portfolio-resume-scrolling-container-padding;
  padding-bottom: $portfolio-resume-scrolling-container-padding;

  @include breakpoint(medium) {
    height: $portfolio-resume-scrolling-container-height;
    overflow-y: auto;
  }
}



.portfolio-resume-scrolling-container {
  height: 400px;
  border: 1px solid #cacaca;
}

.portfolio-resume-overview {
  height: 400px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  opacity: 1;
  z-index: 0;
}

.portfolio-resume-overview:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://placeimg.com/400/400/animals");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.3;
  z-index: 0;
}

.portfolio-resume-overview-content {
  max-width: 300px;
  z-index: 1;
}

.portfolio-resume-scrolling {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media print, screen and (min-width: 40em) {
  .portfolio-resume-scrolling {
    height: 400px;
    overflow-y: auto;
  }
}
JS

Similar Building Blocks

containers

Engadget footer

F6
by Kevin Neal
containers

CSS Masonry Grid

F6
by Rafi
containers

Responsive Portfolio Resume

F6
by Laurel Beyers