Colorful Portfolio

In this example below you will see how to do a Colorful Portfolio with some HTML / CSS and Javascript

Responsive projects presentation from former portfolio. The view has an original horizontal scroll, thanks to jquery mousewheel plugin, a filter for categorization of the projects, and a smooth effect on load. Each project panel has a different color dynamically loaded in order to have a gradient effect which changes each time the page is loaded. On mobile view, the page changes from horizontal to vertical navigation.

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Colorful Portfolio</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body class="home intro">

	<header id="header">
		<a href="">		 
			<h1>TAMLAND</br>BRICK</h1>
			<h2>48 I.Q. &</br> Chief Meteorologist</h2>
		</a>
	</header>

	<ul id="filtres" classe="cbp-spmenu-push-totop">
		<li><a id="all">All</a></li>
		<li><a id="cat1">Category 1</a></li>
		<li><a id="cat2">Category 2</a></li>
		<li><a id="cat3">Category 3</a></li>
	</ul>

	<div class="content" id="content">

		<section id="machin" class="panels">

			<div class="blocker"></div>
			
			<article class="panel-wrapper cat2 cat3 cat1 all medium">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project A </div> 
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>
			<article class="panel-wrapper cat1 all up">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project B </div> 
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>
			<article class="panel-wrapper cat1 all medium">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project C </div> 
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>
			<article class="panel-wrapper cat1 all down">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project D</div> 
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>

			<article class="panel-wrapper cat1 all down">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project E</div> 
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>

			<article class="panel-wrapper cat2 cat3 all medium">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project F</div>
              				<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>
			
			<article class="panel-wrapper cat2 cat3 cat1 all up">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project G </div>
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>

			
			<article class="panel-wrapper cat3 all down">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project H</div>
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>

			<article class="panel-wrapper cat1 cat2 all medium">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project I </div>
           					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>
		
			<article class="panel-wrapper cat1 all up">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project J</div>
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>

			<article class="panel-wrapper cat1 all medium">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project K </div> 
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>

			<article class="panel-wrapper cat2 cat3 all down">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project L</div>
          					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
          					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>

			<article class="panel-wrapper cat3 all medium">
				<div class="color-bg">
					<a href="">
						<div class="panel">
							<div class="title">Project M</div> 
	      					<div class="viewout"><img class="img" src="http://placehold.it/80x80" alt="logo texte"/><img class="img-hover" src="https://tibomahe.com/codepen/img-hover.png" alt="image hover"/></div>
	      					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
						</div>
					</a>
				</div>
			</article>
			
		</section>

	</div> <!-- end content -->
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
<script src='https://tibomahe.com/codepen/jquery.mousewheel.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/colorful-portfolio-vEXrxm */
@import url(https://fonts.googleapis.com/css?family=Fredoka+One); 
@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700);

/* ---------------------------------------------------------------- */
    /* HEADER */
/* ---------------------------------------------------------------- */

header {
  height: 180px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
@media screen and (max-width: 700px) {
  header {
    position: absolute;
    height: 400px;
  }
}
header h1 {
  position: absolute;
  font-family: 'Fredoka One', Helvetica;
  font-size: 42px;
  color: #999;
  left: 30px;
  top: 20px;
  text-align: right;
}
header h2 {
  position: absolute;
  color: black;
  font-weight: normal;
  font-family: 'Fredoka One', Helvetica;
  font-size: 19px;
  top: 100px;
  left: 60px;
  padding-top: 5px;
  text-align: right;
}
@media screen and (max-width: 700px) {
  header h1 {
    text-align: center;
    font-size: 42px;
    left: 50%;
    margin-left: -113px;
    top: 20px;
  }
  header h2 {
    text-align: center;
    font-size: 25px;
    top: 110px;
    left: 50%;
    margin-left: -130px;
  }
}

/* ---------------------------------------------------------------- */
    /* FILTRES */
/* ---------------------------------------------------------------- */
ul#filtres {
  position: fixed;
  top: 165px;
  left: 20px;
  right: 10px;
  z-index: 1000;
  width: 435px;
  border-top: 1px solid rgb(63,63,63);
  border-bottom : 1px solid rgb(63,63,63);
}
ul#filtres li {
  float: left;
  width: auto;
  padding: 5px;
  margin-right: 30px;
}
ul#filtres li a {
  font-family: 'Amatic SC', Helvetica;
  font-size: 25px;
  font-weight: bold;
  color: rgb(63,63,63);
  cursor: pointer;
}
ul#filtres li a:hover {
  color: black;
}
@media screen and (max-width: 700px) {
  ul#filtres{
    display: none;
  }
}

/* ---------------------------------------------------------------- */
    /* PANELS */
/* ---------------------------------------------------------------- */

.panels {
  height: 100%;
  min-height: 560px;
  overflow: hidden;
  position: absolute;
  top: 215px;
  bottom: 20px;
  z-index: 101;
}
@media screen and (max-width: 700px) {
  .panels {
    height: auto;
    min-height: auto;
    overflow: visible;
    position: relative; 
    width: 100%;
    top: 260px;
  }
}

.panel-wrapper {
  height: 100%;
  position: absolute;
  -webkit-transition: width 0.3s, opacity 0.3s, margin 0.3s, top 0.35s;
  -moz-transition: width 0.3s, opacity 0.3s, margin 0.3s, top 0.35s;
  -ms-transition: width 0.3s, opacity 0.3s, margin 0.3s, top 0.35s;
  -o-transition: width 0.3s, opacity 0.3s, margin 0.3s, top 0.35s;
  transition: width 0.3s, opacity 0.3s, margin 0.3s, top 0.35s;
  z-index: 1; 
  width: 250px;
  left:3px;
}
@media screen and (max-width: 700px) {
  .panel-wrapper {
    height: auto;
    overflow: hidden;
    position: relative; 
    width: 100%;
  }
}
@media screen and (min-width: 701px) {
  .panel-wrapper {
    -moz-border-top-left-radius: 40px; 
    -khtml-border-top-left-radius: 40px;
    -webkit-border-top-left-radius: 40px; 
    border-top-left-radius: 40px;
    -moz-border-top-right-radius: 40px; 
    -khtml-border-top-right-radius: 40px;
    -webkit-border-top-right-radius: 40px; 
    border-top-right-radius: 40px;
    border: dashed rgb(63, 63, 63) 1px;
  }
  article.down {
    margin-top: 70px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    moz-transition: all 1s ease;
  }
  article.down:hover {
    margin-top: 40px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    moz-transition: all 1s ease;
  }
  article.medium {
    margin-top: 30px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    moz-transition: all 1s ease;
  }
  article.medium:hover {
    margin-top: 0;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    moz-transition: all 1s ease;
  }
  article.up {
    margin-top: 0;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    moz-transition: all 1s ease;
  }
  article.up:hover {
    margin-top: 30px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    moz-transition: all 1s ease;
  }
  article.down .color-bg a .panel .title {
    padding-top: 10px;
  }
  article.medium .color-bg a .panel .title {
    padding-top: 50px;;
  }
  article.up .color-bg a .panel .title {
    padding-top: 80px;
  }
}

@media screen and (min-width: 701px) {
  .color-bg {
    height: 100%;
    width: 244px;
    position: relative;
    margin: 3px;
    -moz-border-top-left-radius: 40px; 
    -khtml-border-top-left-radius: 40px;
    -webkit-border-top-left-radius: 40px; 
    border-top-left-radius: 40px;
    -moz-border-top-right-radius: 40px; 
    -khtml-border-top-right-radius: 40px;
    -webkit-border-top-right-radius: 40px; 
    border-top-right-radius: 40px;
  }
}
             
.panel { 
  bottom: 0;
  top: 0;
  font-size: 15px;
  left: 0;
  padding: 0 25px 0 25px;
  position: absolute;
  -webkit-transition: left 0.3s, opacity 0.3s, top 0.3s, bottom 0.3s;
  -moz-transition: left 0.3s, opacity 0.3s, top 0.3s, bottom 0.3s;
  -ms-transition: left 0.3s, opacity 0.3s, top 0.3s, bottom 0.3s;
  -o-transition: left 0.3s, opacity 0.3s, top 0.3s, bottom 0.3s;
  transition: left 0.3s, opacity 0.3s, top 0.3s, bottom 0.3s;
  width: 250px;
  height: 100%;
}

@media screen and (max-width: 700px) {
  .panel-wrapper .panel {
    padding: 20px 20px 60px 20px;
    position: relative;
    top: 0;
    width: 100%;
  }
}

.viewout {
  position: relative;
  margin-top: 10px;
  left: 50%;
  margin-left: -50px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  moz-transition: all 0.3s;
}
article img.img {
  width: 80px;
  height: auto;
  border-radius: 50%;
}
article:hover img.img {
  opacity: 0.5;
}
article img.img-hover {
  position: absolute;
  margin-left: -63px;
  margin-top: 17px;
  opacity: 0;
}
article:hover img.img-hover {
  opacity: 1;
}
.panel .title{
 font: bold 24px Helvetica, Arial, sans-serif; 
 text-transform: uppercase;
 display: block;
 width: 100%;
 opacity: 0.5;
 color: black;
 text-align: center;
}
.panel p {
  color: white;
  margin-top: 10px;
  font-size: 14px;
  text-align: left;
  display: block;
  padding: 4px 0 6px 2px;
  border-top: 1px white dashed;
  border-bottom: 1px white dashed;
}
@media screen and (max-width: 700px) {
  .panel p {
    font-size: 18px;
    text-align: center;
    margin: 10px 10% 0 10%;
  }
}

/* ---------------------------------------------------------------- */
    /* GLOBAL */
/* ---------------------------------------------------------------- */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: white;
  color: black;
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

@media screen and (min-width: 701px) and (min-height: 501px) {
    body {
      overflow-y: hidden;
    }          
}

/* INTRO EFFECTS */
@media screen and (min-width: 701px) {
  body.intro .content .panels .panel-wrapper {
    top: 100%;
  }
}
body.intro .content .panels .panel-wrapper.transition {
  -webkit-transition: top 0.5s, left 0.3s, opacity 0s;
  -moz-transition: top 0.5s, left 0.3s, opacity 0s;
  -ms-transition: top 0.5s, left 0.3s, opacity 0s;
  -o-transition: top 0.5s, left 0.3s, opacity 0s;
  transition: top 0.5s, left 0.3s, opacity 0s;
}

.all {
  -webkit-transition: top 0.5s, left 0.3s, opacity 0s;
  -moz-transition: top 0.5s, left 0.3s, opacity 0s;
  -ms-transition: top 0.5s, left 0.3s, opacity 0s;
  -o-transition: top 0.5s, left 0.3s, opacity 0s;
  transition: top 0.5s, left 0.3s, opacity 0s;
}
a {
  color: inherit;
  text-decoration: none;
}
.content {
  position: relative;
  height: 100%;
  min-height: 100%;
}
.bold {
  font-weight: bold;
}


/*Downloaded from https://www.codeseek.co/tibomahe/colorful-portfolio-vEXrxm */
/* PANELS DYNAMISM */
var start = start||{};
start.Nav = function(){
var y = $(document),
r = $(window),
a = $("html, body"),
z = $("header nav a"),
v = $(".panel-wrapper .panel"),
w = $(".panel-wrapper a"),
e = $(".panel-wrapper"),
k = $(".panels"),
f = $(".next-button"),
d = $(".next-button a"),
P = function(){
	u = r.width();
	if(700 < u){
		for(var b = e.length, q = 0; q < b; ++q)
			$(e[q]).css("left", 253 * q)
    			var numItems = $('.panel-wrapper').length;
				var foo = 250 * numItems + 30;
				$(".panels").css("width",foo);

				var numAll = $('.all').length;
				lol = 250 * numAll;
				$(".panels").css("width",lol);

			a.mousewheel(function(event, delta){
				this.scrollLeft -= delta * 30,
				event.preventDefault()
			});
	}
	else{
		0 < a.scrollLeft() && a.scrollLeft(0);
		a.unmousewheel();
		k.attr("style","");
		b = e.length;
		for(q = 0; q < b; ++q)
			$(e[q]).attr("style","")
	}
},
X=function(b,g){
	setTimeout(function(){
		0===g && a.scrollLeft(0);
		b.addClass("transition");
		b.css({top:0});
		setTimeout(function(){
			a.removeClass("intro");
		},1050)
	},1E3 + 90 * g)
},
na=function(b){
	setTimeout(function(){
		$(e[b]).css("top","100%")
	},100 * b)
}
y.ajaxError(function(){});
y=_.throttle(P,30);
r.resize(y);
y=_.throttle(function(){
	if(a.hasClass("intro"))a.scrollLeft(0);
	else{var b;
		if(b=!S)
			b=700<u?a.scrollLeft()+r.width()>=E:a.scrollTop()+50>=k.height()-r.height();
		}
	},30);
	r.scroll(y);
	if(a.hasClass("home")){
		y=e.length;
		for(t=0;t<y;++t)
			$(e[t]).css("left",250*t),X($(e[t]),t,t===y-1)
	}
	else Y();
	P();
};

/* COLOR DYNAMISM */

var chance = Math.floor(Math.random() * 210);
$(".color-bg").each(function(i) {
	var hue = chance + (i * 15);
    var css = 'background-color:hsl(' + hue + ',50%,50%); color:hsl(' + hue + ',25%,35%);';
    $(this).attr("style", css);
});

/* FILTERS DYNAMISM */

start.Nav();
$("#all").click(function(){
	$(".all").css("top", "100%");
	$(".all").removeClass("panel-wrapper");
	$(".all").hide();
	$(".all").addClass("panel-wrapper");
	$(".all").css("top", "100%");
	$(".all").show();
	start.Nav();
	event.preventDefault();
});
$("#cat1").click(function(){
	$(".all").addClass("panel-wrapper");
	$(".all").css("top", "100%");
	$(".all").removeClass("panel-wrapper");
	$(".cat1").addClass("panel-wrapper");
	$(".cat1").css("top", "100%");
	$(".cat1").show();
	start.Nav();
	$(".all").addClass("panel-wrapper");
	event.preventDefault();
});
$("#cat2").click(function(){
	$(".all").addClass("panel-wrapper");
	$(".all").css("top", "100%");
	$(".all").removeClass("panel-wrapper");
	$(".cat2").addClass("panel-wrapper");
	$(".cat2").css("top", "100%");
	$(".cat2").show();
	start.Nav();
	$(".all").addClass("panel-wrapper");
	event.preventDefault();
});
$("#cat3").click(function(){
	$(".all").addClass("panel-wrapper");
	$(".all").css("top", "100%");
	$(".all").removeClass("panel-wrapper");
	$(".cat3").addClass("panel-wrapper");
	$(".cat3").css("top", "100%");
	$(".cat3").show();
	start.Nav();
	$(".all").addClass("panel-wrapper");
	event.preventDefault();
});

$( window ).resize(function() {
	$(".all").css("top", "100%");
	$(".all").removeClass("panel-wrapper");
	$(".all").hide();
	$(".all").addClass("panel-wrapper");
	$(".all").css("top", "100%");
	$(".all").show();
	start.Nav();
});

Comments