CSS3 Button Wipe Effect via Bootstrap Nav Pill

Admin 1
Viewed 69

I have created a bootstrap nav-pill that will toggle the job posts per click using the ff codes:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

<div class="row">


<div class="col-md-4">
<!-- Tabs nav -->

<div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <a class="nav-link p-2 active" id="v-pills-job1-tab" data-toggle="pill" href="#v-pills-job1" role="tab" aria-controls="v-pills-job1" aria-selected="true">
        <span class="font-weight-bold small  tab-text">Creative Design Mind</span></a>

    <a class="nav-link p-2" id="v-pills-job2-tab" data-toggle="pill" href="#v-pills-job2" role="tab" aria-controls="v-pills-job2" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

    <a class="nav-link p-2" id="v-pills-job3-tab" data-toggle="pill" href="#v-pills-job3" role="tab" aria-controls="v-pills-job3" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

    <a class="nav-link p-2" id="v-pills-job4-tab" data-toggle="pill" href="#v-pills-job4" role="tab" aria-controls="v-pills-job4" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>


    <a class="nav-link p-2" id="v-pills-job5-tab" data-toggle="pill" href="#v-pills-job5" role="tab" aria-controls="v-pills-job5" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>


        <a class="nav-link p-2" id="v-pills-job6-tab" data-toggle="pill" href="#v-pills-job6" role="tab" aria-controls="v-pills-job6" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2" id="v-pills-job7-tab" data-toggle="pill" href="#v-pills-job7" role="tab" aria-controls="v-pills-job7" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2" id="v-pills-job8-tab" data-toggle="pill" href="#v-pills-job8" role="tab" aria-controls="v-pills-job8" aria-selected="false">
            <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

    </div>
</div>
                  
                
 <div class="col-md-8">
   <!-- Tabs content -->
   <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade shadow rounded bg-white show active p-5" id="v-pills-job1" role="tabpanel" aria-labelledby="v-pills-job1">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>
    
    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job2" role="tabpanel" aria-labelledby="v-pills-job2">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>
    
    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job3" role="tabpanel" aria-labelledby="v-pills-job3">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>
    
    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job4" role="tabpanel" aria-labelledby="v-pills-job4">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>

    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job5" role="tabpanel" aria-labelledby="v-pills-job5">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>

    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job6" role="tabpanel" aria-labelledby="v-pills-job6">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>

    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job7" role="tabpanel" aria-labelledby="v-pills-job7">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>


    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job8" role="tabpanel" aria-labelledby="v-pills-job8">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>

</div>

</div>

</div>
</div>

Right now what it does is that it adds only a background color which is totally fine however, I want to incorporate this wipe effect button as seen here whenever a user hovers or click on the item: https://codepen.io/souporserious/pen/pvbdWe

But I have no idea how to deal with this since its creating it via data attribute.

The JSFIDDLE can be found here: https://jsfiddle.net/40xhy7mp/

Anybody out there that can help?

twitter-bootstrap css html
2 Answers

You can see a simpler example here, on my pen: https://codepen.io/IceWong/pen/ExyxJJd

Your code probably, can be something like this

a.nav-link {
    position: relative;
    display: inline-block;
}

a.nav-link:after {
    position: absolute;
    z-index: 9;
    content: '';
    transition: all 0.20s;
    top: 0;
    width: 0;
    left: 0;
    height: 100%;
    background-color: rgba(77, 77, 77,0.2);
}

a.nav-link:hover:after {
    width: 100%;
    height: 100%;
}

a.nav-link span {
    position:relative;
    /*z-index: 10;*/
    transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

<div class="row">


<div class="col-md-4">
<!-- Tabs nav -->

<div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <a class="nav-link p-2 active" id="v-pills-job1-tab" data-toggle="pill" href="#v-pills-job1" role="tab" aria-controls="v-pills-job1" aria-selected="true">
        <span class="font-weight-bold small  tab-text">Creative Design Mind</span></a>

    <a class="nav-link p-2" id="v-pills-job2-tab" data-toggle="pill" href="#v-pills-job2" role="tab" aria-controls="v-pills-job2" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

    <a class="nav-link p-2" id="v-pills-job3-tab" data-toggle="pill" href="#v-pills-job3" role="tab" aria-controls="v-pills-job3" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

    <a class="nav-link p-2" id="v-pills-job4-tab" data-toggle="pill" href="#v-pills-job4" role="tab" aria-controls="v-pills-job4" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>


    <a class="nav-link p-2" id="v-pills-job5-tab" data-toggle="pill" href="#v-pills-job5" role="tab" aria-controls="v-pills-job5" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>


        <a class="nav-link p-2" id="v-pills-job6-tab" data-toggle="pill" href="#v-pills-job6" role="tab" aria-controls="v-pills-job6" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2" id="v-pills-job7-tab" data-toggle="pill" href="#v-pills-job7" role="tab" aria-controls="v-pills-job7" aria-selected="false">
        <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2" id="v-pills-job8-tab" data-toggle="pill" href="#v-pills-job8" role="tab" aria-controls="v-pills-job8" aria-selected="false">
            <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

    </div>
</div>
                  
                
 <div class="col-md-8">
   <!-- Tabs content -->
   <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade shadow rounded bg-white show active p-5" id="v-pills-job1" role="tabpanel" aria-labelledby="v-pills-job1">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>
    
    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job2" role="tabpanel" aria-labelledby="v-pills-job2">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>
    
    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job3" role="tabpanel" aria-labelledby="v-pills-job3">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>
    
    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job4" role="tabpanel" aria-labelledby="v-pills-job4">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>

    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job5" role="tabpanel" aria-labelledby="v-pills-job5">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>

    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job6" role="tabpanel" aria-labelledby="v-pills-job6">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>

    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job7" role="tabpanel" aria-labelledby="v-pills-job7">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>


    <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job8" role="tabpanel" aria-labelledby="v-pills-job8">
        <h4 class="title-job">Creative Design Mind</h4>
        <h5 class="title-date">May 2018 - Present</h5>
        <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
        </ul>
    </div>

</div>

</div>

</div>
</div>

user_12550230

See here solution:

.nav-link {
   display: inline-block;
   padding: 12px 18px;
   text-decoration: none;
   position: relative;
   border: 2px solid #445561;
   border-radius: 3px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   text-align: left;
   color: #445561;
   overflow: hidden;
}
 .nav-link:before, .nav-link:after {
   content: attr(data-wipe);
   padding-top: inherit;
   padding-bottom: inherit;
   white-space: nowrap;
   position: absolute;
   top: 0;
   overflow: hidden;
   color: #f1f1f2;
   background: #445561;
}
 .nav-link:before {
   left: 0;
   text-indent: 18px;
   width: 0;
}
 .nav-link:after {
   padding-left: inherit;
   padding-right: inherit;
   left: 100%;
   text-indent: calc(-100% - 36px);
   transition: 0.2s ease-in-out;
}
 .nav-link:hover:before {
   width: 100%;
   transition: width 0.2s ease-in-out;
}
 .nav-link:hover:after {
   left: 0;
   text-indent: 0;
   transition: 0s 1s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">


    <div class="col-md-4">
      <!-- Tabs nav -->

      <div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link p-2" id="v-pills-job1-tab" data-toggle="pill" href="#v-pills-job1" role="tab" aria-controls="v-pills-job1" aria-selected="true" data-wipe="Creative Design Mind">
          <span class="font-weight-bold small  tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2" id="v-pills-job2-tab" data-toggle="pill" href="#v-pills-job2" role="tab" aria-controls="v-pills-job2" aria-selected="false" data-wipe="Creative Design Mind">
          <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2" id="v-pills-job3-tab" data-toggle="pill" href="#v-pills-job3" role="tab" aria-controls="v-pills-job3" aria-selected="false" data-wipe="Creative Design Mind">
          <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2" id="v-pills-job4-tab" data-toggle="pill" href="#v-pills-job4" role="tab" aria-controls="v-pills-job4" aria-selected="false" data-wipe="Creative Design Mind">
          <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>


        <a class="nav-link p-2" id="v-pills-job5-tab" data-toggle="pill" href="#v-pills-job5" role="tab" aria-controls="v-pills-job5" aria-selected="false" data-wipe="Creative Design Mind">
          <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>


        <a class="nav-link p-2" id="v-pills-job6-tab" data-toggle="pill" href="#v-pills-job6" role="tab" aria-controls="v-pills-job6" aria-selected="false" data-wipe="Creative Design Mind">
          <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2" id="v-pills-job7-tab" data-toggle="pill" href="#v-pills-job7" role="tab" aria-controls="v-pills-job7" aria-selected="false" data-wipe="Creative Design Mind">
          <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

        <a class="nav-link p-2" id="v-pills-job8-tab" data-toggle="pill" href="#v-pills-job8" role="tab" aria-controls="v-pills-job8" aria-selected="false" data-wipe="Creative Design Mind">
          <span class="font-weight-bold small tab-text">Creative Design Mind</span></a>

      </div>
    </div>


    <div class="col-md-8">
      <!-- Tabs content -->
      <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade shadow rounded bg-white show active p-5" id="v-pills-job1" role="tabpanel" aria-labelledby="v-pills-job1">
          <h4 class="title-job">Creative Design Mind</h4>
          <h5 class="title-date">May 2018 - Present</h5>
          <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
          </ul>
        </div>

        <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job2" role="tabpanel" aria-labelledby="v-pills-job2">
          <h4 class="title-job">Creative Design Mind</h4>
          <h5 class="title-date">May 2018 - Present</h5>
          <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
          </ul>
        </div>

        <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job3" role="tabpanel" aria-labelledby="v-pills-job3">
          <h4 class="title-job">Creative Design Mind</h4>
          <h5 class="title-date">May 2018 - Present</h5>
          <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
          </ul>
        </div>

        <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job4" role="tabpanel" aria-labelledby="v-pills-job4">
          <h4 class="title-job">Creative Design Mind</h4>
          <h5 class="title-date">May 2018 - Present</h5>
          <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
          </ul>
        </div>

        <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job5" role="tabpanel" aria-labelledby="v-pills-job5">
          <h4 class="title-job">Creative Design Mind</h4>
          <h5 class="title-date">May 2018 - Present</h5>
          <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
          </ul>
        </div>

        <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job6" role="tabpanel" aria-labelledby="v-pills-job6">
          <h4 class="title-job">Creative Design Mind</h4>
          <h5 class="title-date">May 2018 - Present</h5>
          <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
          </ul>
        </div>

        <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job7" role="tabpanel" aria-labelledby="v-pills-job7">
          <h4 class="title-job">Creative Design Mind</h4>
          <h5 class="title-date">May 2018 - Present</h5>
          <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
          </ul>
        </div>


        <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-job8" role="tabpanel" aria-labelledby="v-pills-job8">
          <h4 class="title-job">Creative Design Mind</h4>
          <h5 class="title-date">May 2018 - Present</h5>
          <ul class="title-desc">
            <li><i class="fas fa-briefcase"></i> Write modern, performant, maintainable code for a diverse array of client and internal projects.</li>
            <li><i class="fas fa-briefcase"></i> Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify.</li>
            <li><i class="fas fa-briefcase"></i> Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis.</li>
          </ul>
        </div>

      </div>

    </div>

  </div>
</div>

user_62850540
Related