<section id="portfolio">
  <!--Title of the section-->
  <div class="title">
    <h2>My Portfolio</h2>
    <p>A small gallery of recent projects chosen by me. I've done them all together with amazing people from companies around the globe. It's only a drop in the ocean compared to the entire list.</p>
  </div>
  <!--Filter-->
  <div class="filters">
    <button>Specify your discoveries about my projects <i class="fas fa-sort-down"></i></button>
    <div class="parameters">
      <!--Fist Line of filters-->
      <!--Tags-->
      <div class="taxonomy">
        <h3>Categories</h3>
        <ul>
          <li class="list active" data-filter="all">All</li>
          <li class="list" data-filter="Design_project">Design project</li>
          <li class="list" data-filter="1rtwork">Artworks</li>
          <li class="list" data-filter="Illustration">Illustrations</li>
          <li class="list" data-filter="Animation">Animations</li>
          <li class="list" data-filter="Illustrator">Illustrator</li>
          <li class="list" data-filter="Photoshop">Photoshop</li>
          <li class="list" data-filter="After_effects">After Effects</li>
          <li class="list" data-filter="Xd">Adobe XD</li>
        </ul>
      </div>  
      <!--Second Line of filters-->
      <div class="sliders">
        <!--Difficulty Range-->
        <div class="sliderContainer">
          <div class="sliderTitle">
            <h3><span>Difficulty</span> of the project</h3><i class="far fa-question-circle"></i>
          </div>
          <div class="slide-range">
            <div class="middle">
              <input type="range" title="rangeSliderLeft" id="input-left1" min="0" max="5" value="1">
              <input type="range" title="rangeSliderRight" id="input-right1" min="0" max="5" value="5">
              <div class="graduation">
                <span>0</span>
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
              </div>
              <div class="slider">
                <div class="track"></div>
                <div class="range"></div>
                <div class="thumb left"></div>
                <div class="thumb right"></div>
              </div>
            </div>
          </div>
        </div>
        <!--Duration Range-->
        <div class="sliderContainer" id="durationRange">
          <div class="sliderTitle">
            <h3><span>Duration</span> of the project</h3><i class="far fa-question-circle"></i>
          </div>
          <div class="slide-range">
            <div class="middle">
              <input type="range" title="rangeSliderLeft" id="input-left2" min="0" max="5" value="1">
              <input type="range" title="rangeSliderRight" id="input-right2" min="0" max="5" value="5">
              <div class="graduation2">
                <span>1 day</span>
                <span>1 week</span>
                <span>1 month</span>
                <span>6 months</span>
                <span>1 year</span>
              </div>
              <div class="slider">
                <div class="track"></div>
                <div class="range"></div>
                <div class="thumb left"></div>
                <div class="thumb right"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Third Line of filters-->
      <div class="search_date_filters">
        <!--Search Input-->
        <div class="search">
          <input type="text" title="Search" id="myInput" placeholder="Search a project"/>
          <div class="icon">
            <i class="fas fa-search"></i>
          </div>
        </div>
        <!--Sort by Date-->
        <div id="date">
          <button id="dateInput">Sort By Date</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Gallery-->
  <div class="galleryContainer" id="blur">      
  </div>
  <!-- Gallery Popup-->
  <div id="popup">
    <ul class="socialicons">
      <li><a href="https://gumroad.com/quentinferet" target="_blank" title="Link to the PSD Files"></a></li>
      <li><a href="https://www.deviantart.com/jackcree" target="_blank" title="Link to the High Resolution Artworks"></a></li>
    </ul>
    <div class="popupContainer">
      <div class="clip clip1">
        <div class="content">
          <h2><span>Final</span> Artwork</h2>
          <p>Here is the final version with color balance effects and gradient color background plus a black square with the inscrustation effect. </p>
        </div>
      </div>
      <div class="clip clip2">
        <div class="content">
          <h2><span>Light</span> phase</h2>
          <p>With the pen tool and white and blue color, the light is added with 2 layers combined with bright and raw light respectly for each one.</p>
        </div>
      </div>
      <div class="clip clip3">
        <div class="content">
          <h2><span>Shadow</span> phase </h2>
          <p>With black and grey color, on 5 differents layers, the shadow is appiled from the strongest to the weakest with 5 levels of opacity (100%, 65%, 50%, 25%, 10%). </p>
        </div>
      </div>
      <div class="clip clip4">
        <div class="content">
          <h2><span>Color</span> phase</h2>
          <p>With the magic wand by adjusting each selection with a dilation of one to two pixels, add the brightest color for the artwork.</p>
        </div>
      </div>
      <div class="clip clip5">
        <div class="content">
          <h2><span>Lineart</span> phase</h2>
          <p>With a 80% smoothing pen and black color, work on the outline and details from the medium pen (4px) then the largest (8px) to finish with the finer2px).</p>
        </div>
      </div>
      <div class="clip clip6">
        <div class="content">
          <h2><span>Sketch</span> phase</h2>
          <p>With a 20% black color smoothing pen, build the pose of the mannequin and then put each elements as a volume without thing about the details, only the shape.</p>
        </div>
      </div>
    </div>        
  </div>
  <!--3D Globe with texture-->
  <div id="shooting_stars"></div>
  <!--Stars Background-->
  <canvas id="stars"></canvas>
</section>
/*Font Family*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100;300;400;500;600;700;800;900&display=swap');
/*All elements*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
}
body {
  width: 100vw;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/*Section portfolio*/
#portfolio {
  position: relative;
  display: flex;
  align-content: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  /*padding: 10px 40px;*/
  overflow: hidden;
  overflow-y: hidden;
  overflow-x: hidden;
}
#portfolio .title {
  position: relative;
  width:  60%;
  height: 150px;
  margin: 10px auto 0 220px;
  padding: 20px;
  border-radius: 5px;
  border-left: 1px solid rgba(255,255,255,0.2);
  border-top: 1px solid rgba(255,255,255,0.2);
  z-index: 6;
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter:  blur(10px);
}
#portfolio .title h2 {
  position: relative;
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color:  rgba(255,255,255,1);
}
#portfolio .title p {
  position: relative;
  font-size: 1rem;
  width:  87%;
  color:  rgba(255,255,255,1);
  margin-top: 20px;
}

#portfolio .filters {
  position: relative;
  display: flex;
  flex-direction: column;
  width:  70%;
  margin:  10px auto 10px 200px;
  padding: 5px 20px;
  z-index:  4;
} 
#portfolio .filters button.active {
  color: rgba(255,255,255,1);
}
#portfolio .filters button {
  position: relative;
  font-size: 0.8rem;
  font-weight: 300;
  margin: 0;
  width:  275px;
  color: rgba(255,255,255,0.5);
  background: transparent;
  border: none;
  transition: 1s all ease;
}
#portfolio .filters button.active:after {
  width: 200px;
}
#portfolio .filters button:after {
  content: '';
  position: absolute;
  top:  20px;
  left:  8px;
  width: 0px;
  height:  1px;
  background-color: rgba(248,135,255,1);
  transition: 1s width ease-out;
}
#portfolio .filters button.active i {
  transform: rotate(0deg);
  color: rgba(255,255,255,1);
}  
#portfolio .filters i {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-left: 10px;
  transform:  rotate(-90deg);
  transition: 1s all ease;
}
#portfolio .filters .parameters.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
#portfolio .filters .parameters {
  position: relative;
  width:  100%;
  margin:  10px 0 0 0;
  padding:  5px;
  transform: translateY(-200px);
  transition: 2s all ease;
  opacity: 0.01;
  pointer-events: none;
}
#portfolio .filters .parameters.active .taxonomy {
  pointer-events: all;
}
#portfolio .filters .parameters .taxonomy {
  position: relative;
  display: flex;
  flex-direction: column;
  width:  100%;
}
#portfolio .filters .parameters .taxonomy h3 {
  position: relative;
  color:  rgba(255,255,255,0.2);
  font-size: 1rem;
}
#portfolio .filters .parameters .taxonomy ul {
  position: relative;
  display: flex;
  margin: 5px 0 0 0;
}
#portfolio .filters .parameters .taxonomy ul li {
  list-style: none;
  background-color: rgba(255,255,255,0.3);
  padding:  10px;
  margin:  5px;
  font-weight: 200;
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 5;
}
#portfolio .filters .parameters .taxonomy ul li.active {
  background-color: rgba(3,169,244,1);
  color: rgba(255,255,255,1);
}
#portfolio .filters .parameters .sliders {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width:  100%;
  margin: 10px 0 0 0;
  z-index: 5;

}
#portfolio .filters .parameters .sliders .sliderContainer {
  position: relative;
  width: 47%;
}
#portfolio .filters .parameters .sliders .sliderContainer .sliderTitle {
  position: relative;
  display: flex;
  flex-direction: row;
}
#portfolio .filters .parameters .sliders .sliderContainer .sliderTitle h3 {
  position: relative;
  color: rgba(255,255,255,0.2);
  font-size: 1rem;
  font-weight: 300;
}
#portfolio .filters .parameters .sliders .sliderContainer .sliderTitle h3 span {
  text-transform: uppercase;
  font-weight: 700;
  color:  rgba(255,255,255,1);
}
#portfolio .filters .parameters .sliders .sliderContainer .sliderTitle i {
  position: relative;
  color: rgba(255,255,255,0.2);
  font-size: 10px;
  transform: translateX(2px);
  cursor: pointer;
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range {
  margin: 0;
  padding:  10px 0 0 0;
  display: flex;
  height: 20px;
  align-content: center;
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle {
  position: relative;
  width: 80%;
  height: 20px;
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider {
  position: relative;
  z-index:  6;
  height: 10px;
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .track {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom : 0;
  right: 0;  
  border-radius: 5px;
  background-color: rgba(255,255,255,0.2);
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .range {
  position: absolute;
  z-index: 2;
  left: 25%;
  right: 25%;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: rgba(83,93,233,1);  
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .thumb {
  position: absolute;
  z-index: 3;
  width: 30px;
  height: 30px;
  background-color: rgba(0,33,136,1);
  border-radius: 50%;
  box-shadow: 0 0 0 0px rgba(83,93,233,0.1);
  transition: box-shadow .3s ease-in-out;
}

#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider >.thumb.hover {
  box-shadow: 0 0 0 20px rgba(98, 0, 238, .1);
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider >.thumb.active {
  box-shadow: 0 0 0 40px rgba(98, 0, 238, .2);
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .thumb.left {
  left: 25%;
  transform: translate(-15px, -10px);
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .thumb.right {
  right: 25%;
  transform: translate(15px, -10px);
}
input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 5;
  height: 10px;
  width: 100%;
  opacity: 0;
}
input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  z-index: 6;
  width: 30px;
  height: 30px;
  border-radius:0;
  border: 0 none;
  background-color: red;
  -webkit-appearance: none;  
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .graduation {
  position : absolute;
  width: 106%;
  top: 10px;
  left: -10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .graduation2 {
  position : absolute;
  width: 106%;
  top: 0px;
  left: -10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .graduation span {
  color: rgba(186,117,247,1);
  font-size: 8px;
}
#portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .graduation2 span {
  color: rgba(186,117,247,1);
  font-size: 8px;
}

#portfolio .filters .parameters .search_date_filters {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin:  30px 0 0 0;
  padding:  10px;
  display: flex;
  align-content: center;
}
#portfolio .filters .parameters .search_date_filters .search {
  position: relative;
  width: 37%;
  height: 30px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 20px;
  overflow: hidden;
}
#portfolio .filters .parameters .search_date_filters .search input {
  position: absolute;
  top: 0px;
  left: 10px;
  width: 100%;
  height: 30px;
  border: none;
  outline: none;
  font-size: 15px;
  padding: 0 10px;
  color: rgba(255,255,255,1);
  background-color: transparent;
}
#portfolio .filters .parameters .search_date_filters .search input::placeholder {
  color: rgba(255,255,255,0.8);
  font-size: 15px;
  font-weight: 200;
}
#portfolio .filters .parameters .search_date_filters .search .icon {
  position: absolute;
  display: flex;
  justify-content: center;
  align-content: center;
  top: 3px;
  right:  5px;
  cursor: pointer;
  width:  25px;
  height: 25px;
  background-color: rgba(83,93,233,1);
  border-radius: 50%;
}
#portfolio .filters .parameters .search_date_filters .search .icon i {
  position: relative;
  transform: rotate(-270deg) translateY(10px);
}
#portfolio .filters .parameters.active .search_date_filters #date{
  pointer-events: all;
}
#portfolio .filters .parameters .search_date_filters #date {
  position: relative;
  display: flex;
  align-content: center;
  width: 50%;
  height: 30px;
}
#portfolio .filters .parameters .search_date_filters #date button {
  position: relative;
  margin-left: 20px;
  width:  200px;
  height:  30px;
  background-color: rgba(255,255,255,0.2);
}

/*Section Background Design*/

#portfolio canvas {
    position: absolute;
    transform: translate(-50%,50%);
    bottom: 0;
    left: 0;
    overflow: hidden;
}
/*Background Elements*/
#portfolio #globe {
  width:  150vw;
  height: 150vh;
  transform: translate(-50%, 70%) scale(1.5);
  z-index: 3;
}
#portfolio #stars {
  width:  200vw;
  height: 200vh;
  z-index: 1;
}
#portfolio #shooting_stars {
  position: absolute;
  width:  100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 2;
}
#portfolio #shooting_stars span {
  position: absolute;
  top:  50%;
  left:  50%;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 
              0 0 0 4px rgba(255, 255, 255, 0.3),
              0 0 0 10px rgba(255, 255, 255, 0.2);
  animation: shooting 3s infinite ease-out;
}
#portfolio #shooting_stars span:before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 1px;
  filter: blur(2px);
  background:  linear-gradient(90deg, #fff, transparent);
}

.galleryContainer#blur.active {
  filter: blur(10px);
  pointer-events: none;
  -webkit-user-select:  none;
  user-select: none;
}
.galleryContainer.moved {
  transform: translateY(0px);
}
.galleryContainer {
  position: relative;
  padding:  0px 20px 0px 125px;
  transform: translateY(-175px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  transition: 0.5s all ease;
  z-index: 6;
}
/*Design of the card*/
.card-wrap:hover,
.card-wrap:hover .card .card-info,
.card-wrap:hover .card .card-info .content {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-wrap {
  margin: 10px;
  transform: perspective(800px);
  transform-style: preserve-3d;
  cursor: pointer;
}
.card-wrap:hover .card {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px;
} 
.card-wrap .card {
  position: relative;
  flex:  0 0 240px;
  width:  220px;
  height: 220px;
  background-color: #333;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.66),
        inset #333 0 0 0 5px,
        inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
/*Design of the img in the card */
.card-wrap:hover .card .card-bg {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0.8;
}
.card-wrap .card .card-bg {
  position: absolute;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  pointer-events: none;
}
.card-wrap .card .card-bg img {
  position: absolute;
  height: 300px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/*Design of the info part in the card */
.card-wrap:hover .card .card-info:after {
  transition: 5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  transform: translateY(0);
}
.card-wrap .card .card-info:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  background-blend-mode: overlay;
  opacity: 0;
  transform:  translateY(100%);
  transition:  5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.card-wrap:hover .card .card-info {
  transform: translateY(0);
}
.card-wrap .card .card-info {
  padding: 20px;
  position: absolute;
  bottom: 0;
  color: #fff;
  transform: translateY(40%);
  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-wrap .card .card-info .header {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 700;
  text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;
}
.card-wrap:hover .card .card-info .contentCard {
  opacity: 1;
}
.card-wrap .card .card-info .contentCard {
  margin-top: 5px;
  opacity: 0;
  line-height: 1.5em;
  text-shadow: black 0 2px 3px;
  transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#popup.active {
  visibility: visible;
  top: 50%;
  opacity: 1;
  z-index: 15;
  transition: 0.5s ease;
}

/*Popup */
#popup:before {
  content: 'TIMELAPSE';
  position: absolute;
  top: 30px;
  left: -40%;
  width: 100%;
  font-size: 8em;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  transform: rotate(-90deg);
  color: rgba(255,255,255,0.2);
  z-index: 7;
  pointer-events: none;
  -webkit-user-select:  none;
  user-select: none;
}
#popup {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:  80vw;
  height: 80vh;
  padding: 50px;
  border-top: 1px solid rgba(255,255,255,0.5);
  border-left: 1px solid rgba(255,255,255,0.5);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow:  0 5px 30px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  border-radius: 5px;
  transition: 0.5s ease;
}
#popup:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 10em;
  background: rgba(255,255,255,0.05);
  -webkit-user-select:  none;
  user-select: none;
  pointer-events: none;
}

#popup .socialicons {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  right: -40px;
  top: 20px;
  padding:  10px;
  z-index: 5;
}
#popup .socialicons li:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 10em;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
  z-index: 6;
}
#popup .socialicons li:nth-child(1):after {
  content: 'PSD';
  position: absolute;
  top: 10px;
  left: -15px;
  width: 100%;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  transform: rotate(-90deg);
  color: rgba(255,255,255,0.2);
  z-index: 8;
}
#popup .socialicons li:nth-child(2):after {
  content: 'HD';
  position: absolute;
  top: 5px;
  left: -15px;
  width: 100%;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  transform: rotate(-90deg);
  color: rgba(255,255,255,0.2);
  z-index: 6;
}
#popup .socialicons li {
  position: relative;
  display: flex;
  justify-content: center;
  color: rgba(255,255,255,0.8);
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,0.5);
  border-left: 1px solid rgba(255,255,255,0.5);
  background-color: rgba(255,255,255,0.1);
  margin-bottom: 10px;
}
#popup .socialicons li:hover img {
  opacity: 1;
}
#popup .socialicons li img {
  position: relative;
  width: 30px;
  height: 30px;
  opacity: 0.5;
}

#popup .popupContainer {
  position: relative;
  width: 1000px;
  height: 100%;
  overflow: hidden;
}

#popup .popupContainer .clip {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s ease-in-out;
}
#popup .popupContainer .clip.clip1 {
  background-size: cover;
  clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%);
}
#popup .popupContainer .clip.clip2 {
  background-size: cover;
  clip-path: polygon(20% 0, 40% 0, 40% 100%, 20% 100%);
} 
#popup .popupContainer .clip.clip3 {
  background-size: cover;
  clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%);
} 
#popup .popupContainer .clip.clip4 {
  background-size: cover;
  clip-path: polygon(60% 0, 80% 0, 80% 100%, 60% 100%);
}
#popup .popupContainer .clip.clip5 {
  background-size:cover;
  clip-path: polygon(80% 0, 90% 0, 90% 100%, 80% 100%);
}
#popup .popupContainer .clip.clip6 {
  background-size: cover;
  clip-path: polygon(90% 0, 100% 0, 100% 100%, 90% 100%);
}
#popup .popupContainer:hover .clip {
  clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
#popup .popupContainer .clip:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
#popup .popupContainer .clip .content {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 70%;
  padding: 20px;
  background: #fff;
  transition: 0.5s ease-in-out;
  opacity: 0;
}
#popup .popupContainer .clip .content h2 {
  font-size: 1.5rem;
  text-transform: uppercase;
}
#popup .popupContainer .clip .content h2 span {
  color: #3B3B98; 
}
#popup .popupContainer .clip .content p {
  font-size: 0.8rem;
  font-weight: 500;
}
#popup .popupContainer .clip:hover .content {
  opacity: 1;
  bottom: 0;
}

/*Animations*/
@keyframes shooting {
  0% {
    transform: rotate(340deg) translateX(0px);
    opacity: 0.2;
  }
  25% {
    opacity: 0.8;
  }
  100% {
    transform: rotate(340deg) translateX(-1000px);
    opacity: 0;
  }
}

/*Responsive web */
/*Tablet*/
@media (max-width: 991px) {
  #portfolio .title p {
    font-size: 0.8rem;
    width: 100%;
  }
  #portfolio .filters .parameters .taxonomy ul {
    flex-wrap: wrap;
  }
  #portfolio .filters .parameters .taxonomy ul li {
    font-size: 12px;
  }
  .galleryContainer {
    transform: translateY(-250px);
  }
  .card-wrap .card {
    width:  200px;
    height:  200px;
  }
  .card-wrap .card .card-info .header {
    font-size: 25px;
  }
  .card-wrap .card .card-info .contentCard {
    margin-top: 0;
    font-size: 15px;
  }
  #popup {
    width: 70%;
  }
  #popup:before {
    top: 225px;
  }
  #popup .popupContainer {
    width: 100%;
  }
}
/*Mobile*/
@media (max-width: 480px) {
  #portfolio .title {
    width: 80%;
    margin: 10px 50px 5px;
  }
  #portfolio .title p {
    margin-top: 10px;
  }
  #portfolio .filters {
    margin:  10px auto 0px 0%;
  }
  #portfolio .filters .parameters {
    width:  170%;
  }
  #portfolio .filters .parameters .sliders .sliderContainer .sliderTitle h3 {
    font-size: 0.7rem;
  }
  #portfolio .filters .parameters .sliders .sliderContainer .sliderTitle h3 span {
    font-size: 1rem;
  }
  #portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .thumb.left {
    transform: translate(-15px, -5px);
  }
  #portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .thumb {
    width: 20px;
    height: 20px;
  }
   #portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .thumb.right {
    transform: translate(15px, -5px);
   }
  #portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .graduation2 {
    width: 130%;
    left: -5px;
  }
  #portfolio .filters .parameters .search_date_filters {
    padding: 20px 0px;
  }
  #portfolio .filters .parameters .search_date_filters .search {
    width: 45%;
  }
  #portfolio .filters .parameters .search_date_filters .search .icon {
    top: 2px;
    right: 2px;
  }
  #portfolio .filters .parameters .search_date_filters #date button {
    margin-left: 10px;
  }
  .galleryContainer {
    padding: 0px 20px 0px;
    transform: translateY(-250px);
  }
  .card-wrap .card {
    width:  180px;
    height: 140px;
  }
  .card-wrap .card .card-info {
    transform: translateY(50%);
  }
  .card-wrap .card .card-info .header {
    font-size: 20px;
  }
  .card-wrap .card .card-info .contentCard {
    font-size: 10px;
  }
  #popup:before {
    top: 320px;
    left: -35%;
    font-size: 6em;
  }
  #popup .socialicons {
    right: -25px;
  }
  #popup .popupContainer .clip {
    left: -40%;
  }
  #popup .popupContainer .clip .content {
    left: 27%;
  }
}
/*Mobile*/
@media (max-width: 320px) {
  #portfolio .title p {
    font-size: 0.6rem;
  }
  #portfolio .filters {
    padding:  5px 0px;
  }
  #portfolio .filters i {
    margin-left:  5px;
  }
  #portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .thumb {
    width:  15px;
    height: 15px;
  }
  #portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .thumb.left {
    transform: translate(-10px, -3px);
  }
  #portfolio .filters .parameters .sliders .sliderContainer .slide-range .middle .slider .thumb.right {
    transform: translate(10px, -3px);
  }
  #portfolio .filters .parameters .search_date_filters #date button {
    width:  100px;
  }
  #portfolio .filters .parameters .search_date_filters .search input {
    left: 0;
  }
  .card-wrap {
    margin: 5px;
  }
  .card-wrap .card {
    width:  110px;
    height: 110px;
  }
  .card-wrap .card .card-info .header {
    font-size: 15px;
  }
  .card-wrap .card .card-info .contentCard {
    font-size: 8px;
  }
  #popup:before {
    top: 375px;
    left: -30%;
  }
  #popup .popupContainer .clip .content {
    left: 15%;
  }
  #popup .popupContainer .clip .content p {
    font-size: 0.6rem;
    width: 150px;
    height: 50px;
    overflow: hidden;
  }
}
//Stars Background
const canvas = document.querySelector('#stars')
const c = canvas.getContext('2d')

canvas.width = innerWidth
canvas.height = innerHeight

const mouse2 = {
  x: innerWidth / 2,
  y: innerHeight / 2
}

const colors = ['#F887FF', '#DE004E', '#860029', '#321450', '#29132E']

addEventListener('resize', () => {
  canvas.width = innerWidth
  canvas.height = innerHeight

  init()
})

// class particles
class Particle {
  constructor(x, y, radius, color) {
    this.x = x
    this.y = y
    this.radius = radius
    this.color = color
  }

  draw() {
    c.beginPath()
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    //Add glow effect
    c.shadowColor = this.color
    c.shadowBlur = 20 
    c.fillStyle = this.color
    c.fill()
    c.closePath()
  }

  update() {
    this.draw()
  }
}

// Implementation : 1- Population of the canvas with random particles 
let particles
function init() {
  particles = []

  for (let i = 0; i < 1500; i++) {
    const canvasWidth = canvas.width + 1000
    const canvasHeight = canvas.height + 1000

    const x = Math.random() * canvasWidth - canvasWidth / 2
    const y = Math.random() * canvasHeight - canvasHeight / 2
    const radius = Math.random() * 1
    const color = colors[Math.floor(Math.random() * 5)]
    particles.push(new Particle(x, y, radius, color))
  }
}

// Animation Loop : 1 
let radians = 0
let alpha = 1

function animate2() {
  requestAnimationFrame(animate2)
  //Add background
  c.fillStyle = `rgba(10,10,10,${alpha})`
  c.fillRect(0, 0, canvas.width, canvas.height)
  c.save()
  c.translate(canvas.width /2, canvas.height /2)
  c.rotate(radians)
  //Draw the stars
  particles.forEach(particle => {
    particle.update()
  })
  c.restore()
  radians += 0.001
}

init()
animate2()

//ShootingStar
function createStars() {
  const shootingsection = document.querySelector('#shooting_stars')
  const createElement = document.createElement('span')

  var size = Math.floor(Math.random() * 4)

  createElement.style.width = size + 'px'
  createElement.style.height = size + 'px'
  createElement.style.left = innerWidth / 2 + Math.random() * innerWidth / 2 + 'px'
  createElement.style.top = innerHeight / 3 + Math.random() * innerHeight / 2 + 'px'
  createElement.style.borderRadius = "50%"
  createElement.style.animationDelay = Math.random() * 2
  createElement.style.animationDuration = Math.random() * 3
  shootingsection.appendChild(createElement)

  setTimeout(()=> {
  createElement.remove()
  }, 6000)
}
setInterval(createStars, 4000)

//Print the parameters on click
const filters = document.querySelector('.filters button')
const parameters = document.querySelector('.parameters')
const galleryContent = document.querySelector('.galleryContainer')

filters.addEventListener('click', () => {
  parameters.classList.toggle('active')
  filters.classList.toggle('active')
  galleryContent.classList.toggle('moved')
})

// Fetch and render projects section from JSON file
const projects = document.querySelector(".galleryContainer");
const renderProjects = async () => {
  //Data only woks inside these brackets
  try {
    const data = await fetch("https://raw.githubusercontent.com/JackCree/CSSexercices/main/portfolio2021/portfolio_data.json");
    const references = await data.json();
    let item = "";
    for (let i = 0; i < references.length; i++) {
      //Define the item model
      item +=  `<div class="card-wrap" data-difficulty=${references[i].difficulty} data-duration=${references[i].duration} data-date=${references[i].date} >
                  <div class="card">
                    <div class="card-bg"><img src=${references[i].url} alt=${references[i].alt}/>
                    </div>
                    <div class="card-info">
                      <h3 class="header">${references[i].name}</h3>
                      <p class="content">${references[i].content}</p>
                    </div>
                  </div>
                </div>`
    }
    //Add all the items from the json file
    projects.innerHTML = item;
    //Add a new class as filter for the taxonomu
    for (var i = 0; i <= references.length; i++) {
      $(".card-wrap").each(function(i, object) {
            $(this).attr("id","card-"+ i)
            $(this).addClass(references[i].filters)
      })
    }

    //Blur Effeect & Popup Apparition
    var blur = document.getElementById('blur')
    var popup = document.getElementById('popup')
    var gallery = document.querySelectorAll('.card-wrap')
    var popupImg01 = document.querySelector('#popup .clip.clip1')
    var popupImg02 = document.querySelector('#popup .clip.clip2')
    var popupImg03 = document.querySelector('#popup .clip.clip3')
    var popupImg04 = document.querySelector('#popup .clip.clip4')
    var popupImg05 = document.querySelector('#popup .clip.clip5')
    var popupImg06 = document.querySelector('#popup .clip.clip6')

    function toggle() {
      blur.classList.add('active')
      popup.classList.add('active')
    }
    function close() {
      blur.classList.remove('active')
      popup.classList.remove('active')
    }

    //Card Hover Effects animations:  1- Rotation of the card with the mouse
    //                                2- Translation of the img
    //                                3- Add Blur Effect on click 
    gallery.forEach( card => {
      card.addEventListener("mouseover", (e) => {

        let backgroundImage = card.querySelector(".card .card-bg img")
        let xAxis = (window.innerWidth / 2 - e.pageX) / 20;
       let yAxis = (window.innerHeight / 2 - e.pageY) / 20;

        card.style.transform = `rotateX(${yAxis}deg) rotateY(${xAxis}deg)`
        
        let tX = xAxis / 4
        let tY = yAxis / 4

        backgroundImage.style.transform = `translateX(${tX}px) translateY(${tY}px)`
        backgroundImage.style.transition = 'all 0.5s ease';
      })
      //Add a delay when the mouse leaves the card
      card.addEventListener("mouseleave", (e) => { 
        setTimeout( function(){
          card.style.transform = `rotateY(0deg) rotateX(0deg)`
          card.style.transition = 'all 0.5s ease';

          let backgroundImage = card.querySelector(".card-bg")
          backgroundImage.style.transform = `translateX(-10px) translateY(-10px)`

        }, 1000)
      })
      //apparition of the popup
      card.addEventListener("click", (e) => {
        toggle()
      })
    })

    //Disparition of the popup
    $(document).mouseup(function(e){
        var container = $("#popup");
        // if the target of the click isn't the container nor a descendant of the container
        if (!container.is(e.target) && container.has(e.target).length === 0){
            close();
        }
    })

    //Convert the nodelist object into an array object
    var arr = Array.prototype.slice.call(gallery)

    //loop through array with forEach function to return the index of clicked element
    arr.forEach((item, index) => {
        item.addEventListener('click', () => {
          let imgSize = 1000
          if (window.innerWidth <= 480) {
            imgSize = 480
          }
          popupImg01.style.background = `url(${references[index].process[0]})`
          popupImg01.style.backgroundSize = "cover"
          popupImg01.style.width = imgSize + "px"
          popupImg02.style.background = `url(${references[index].process[1]})`
          popupImg02.style.backgroundSize = "cover"
          popupImg02.style.width = imgSize + "px"
          popupImg03.style.background = `url(${references[index].process[2]})`
          popupImg03.style.backgroundSize = "cover"
          popupImg03.style.width = imgSize + "px"
          popupImg04.style.background = `url(${references[index].process[3]})`
          popupImg04.style.backgroundSize = "cover"
          popupImg04.style.width = imgSize + "px"
          popupImg05.style.background = `url(${references[index].process[4]})`
          popupImg05.style.backgroundSize = "cover"
          popupImg05.style.width = imgSize + "px"
          popupImg06.style.background = `url(${references[index].process[5]})`
          popupImg06.style.backgroundSize = "cover"
          popupImg06.style.width = imgSize + "px"
        })
    })

  } catch (error) {
    console.log("projects error ===>>>", error);
  }
};

//Load the Json File when the window is laoding
window.addEventListener("load", () => {
  renderProjects();
});

//Filters:  01- Difficulty
var inputLeft = document.getElementById("input-left1");
var inputRight = document.getElementById("input-right1");

var thumbLeft = document.querySelector(".thumb.left");
var thumbRight = document.querySelector(".thumb.right");
var range = document.querySelector(".range");

function setLeftValue(){
  var _this = inputLeft,
    min = parseInt(_this.min),
    max = parseInt(_this.max);
  
  _this.value = Math.min(parseInt(_this.value),parseInt(inputRight.value) - 1);
  
  var percent = ((_this.value - min) / (max-min)) * 100;
  
  thumbLeft.style.left = percent + "%";
  range.style.left = percent + "%";    
}
setLeftValue();
  
function setRightValue(){
  var _this = inputRight,
    min = parseInt(_this.min),
    max = parseInt(_this.max);
  
  _this.value = Math.max(parseInt(_this.value),parseInt(inputLeft.value) + 1);
  
  var percent = ((_this.value - min) / (max-min)) * 100;
  
  thumbRight.style.right = (100 - percent) + "%";
  range.style.right = (100 - percent) + "%";    
}
setRightValue();
inputLeft.addEventListener("input", setLeftValue);
inputRight.addEventListener("input", setRightValue);

inputLeft.addEventListener("mouseover", function(){
  thumbLeft.classList.add("hover");
});
  inputLeft.addEventListener("mouseout", function(){
  thumbLeft.classList.remove("hover");
});
  inputLeft.addEventListener("mousedown", function(){
  thumbLeft.classList.add("active");
});
  inputLeft.addEventListener("mouseup", function(){
  thumbLeft.classList.remove("active");
});

  inputRight.addEventListener("mouseover", function(){
  thumbRight.classList.add("hover");
});
  inputRight.addEventListener("mouseout", function(){
  thumbRight.classList.remove("hover");
});
  inputRight.addEventListener("mousedown", function(){
  thumbRight.classList.add("active");
});
  inputRight.addEventListener("mouseup", function(){
  thumbRight.classList.remove("active");
});

var inputLeft = document.getElementById("input-left1");
var inputRight = document.getElementById("input-right1");

 function showProducts (minDifficulty, maxDifficulty) {
  $(".card-wrap").hide().filter(function(){
    var difficulty = parseInt($(this).data("difficulty"), 10);
    return difficulty >= minDifficulty && difficulty <= maxDifficulty;
  }).show();
}
  showProducts( inputLeft.value, inputRight.value);
  $('#input-left1').change(function() {
   showProducts( inputLeft.value, inputRight.value);
});
$('#input-right1').change(function() {
   showProducts( inputLeft.value, inputRight.value);
});

//Filters     02- Duration
var inputLeft2 = document.getElementById("input-left2");
var inputRight2 = document.getElementById("input-right2");

var thumbLeft2 = document.querySelector("#durationRange .slide-range .slider .thumb.left");
var thumbRight2 = document.querySelector("#durationRange .slide-range .slider .thumb.right");
var range2 = document.querySelector("#durationRange .slide-range .slider .range");

function setLeftValue2(){
  var _this = inputLeft2,
    min = parseInt(_this.min),
    max = parseInt(_this.max);
  
  _this.value = Math.min(parseInt(_this.value),parseInt(inputRight2.value) - 1);
  
  var percent = ((_this.value - min) / (max-min)) * 100;
  
  thumbLeft2.style.left = percent + "%";
  range2.style.left = percent + "%";    
}
setLeftValue2();
  
function setRightValue2(){
  var _this = inputRight2,
    min = parseInt(_this.min),
    max = parseInt(_this.max);
  
  _this.value = Math.max(parseInt(_this.value),parseInt(inputLeft2.value) + 1);
  
  var percent = ((_this.value - min) / (max-min)) * 100;
  
  thumbRight2.style.right = (100 - percent) + "%";
  range2.style.right = (100 - percent) + "%";    
}
setRightValue2();
inputLeft2.addEventListener("input", setLeftValue2);
inputRight2.addEventListener("input", setRightValue2);

inputLeft2.addEventListener("mouseover", function(){
  thumbLeft2.classList.add("hover");
});
  inputLeft2.addEventListener("mouseout", function(){
  thumbLeft2.classList.remove("hover");
});
  inputLeft2.addEventListener("mousedown", function(){
  thumbLeft2.classList.add("active");
});
  inputLeft2.addEventListener("mouseup", function(){
  thumbLeft2.classList.remove("active");
});

  inputRight2.addEventListener("mouseover", function(){
  thumbRight2.classList.add("hover");
});
  inputRight2.addEventListener("mouseout", function(){
  thumbRight2.classList.remove("hover");
});
  inputRight2.addEventListener("mousedown", function(){
  thumbRight2.classList.add("active");
});
  inputRight2.addEventListener("mouseup", function(){
  thumbRight2.classList.remove("active");
});

var inputLeft2 = document.getElementById("input-left2");
var inputRight2 = document.getElementById("input-right2");

 function showProducts2 (minDuration, maxDuration) {
  $(".card-wrap").hide().filter(function(){
    var duration = parseInt($(this).data("duration"), 10);
    return duration >= minDuration && duration <= maxDuration;
  }).show();
}
  showProducts( inputLeft2.value, inputRight2.value);
  $('#input-left2').change(function() {
   showProducts2( inputLeft2.value, inputRight2.value);
});
$('#input-right2').change(function() {
   showProducts2( inputLeft2.value, inputRight2.value);
});

//Filters     03-  Taxonomy
$(document).ready(function(){  
    $('.list').click(function(){
      const value = $(this).attr('data-filter');
      if (value == 'all'){
        $('.card-wrap').show('1000');
      }
      else {
        $('.card-wrap').not('.'+value).hide('1000');
        $('.card-wrap').filter('.'+value).show('1000');
      }
    })
  //add active class on selected item
  $('.list').click(function(){
    $(this).addClass('active').siblings().removeClass('active');    
    })
  })
//Filter 04: search
function mySearchFunction() {
    var input, filter, ul, li, item, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementsByClassName("galleryContainer");
    li = document.querySelectorAll(".card-wrap");
    for (i = 0; i < li.length; i++) {
      item = li[i];
      txtValue = item.textContent || item.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  }
$(document).ready(function(){ 
  document.querySelector(".search input").addEventListener("keyup", mySearchFunction)
})
//Filter 05: Date
$( "#dateInput" ).click(function() {
  var gallery = document.querySelectorAll(".card-wrap")
  var points = Array.prototype.slice.call(gallery)
  points.sort(function(a, b){
    return a.dataset.date-b.dataset.date
  })
  $('.galleryContainer').html(points);
  $("#dateInput").disabled = 'disabled';
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js