calvinmorett/brutalist-portfolio-idea.markdown

## brutalist-portfolio-idea.markdown

      
    Raw
  

              brutalist-portfolio-idea.markdown
            
          
    Brutalist Portfolio Idea

A Pen by Calvin on CodePen.
License.

  
## index.html
<!DOCTYPE html>

<html lang="en">


      <style>


    </style>


<head>


  <title>Calvin Morett | Designer / Creative</title>
  <meta name="description" content="The Portfolio of Calvin Morett">
  <meta name="author" content="CalvinMorett">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Lekton:700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <![endif]-->

</head>

<body>
  <div id="card">
    <a href="https://twitter.com/intent/tweet?screen_name=CalvinMorett" class="twitter-mention-button twitter" data-show-count="false">
      Tweet to @CalvinMorett
      </a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    <p class="n1"><a href="http://scr.im/calvinm">Calvin Morett</a></p><BR>
  <a href="http://scr.im/calvinm"><span class="n2 bold green bounceIn">AVAILABLE FOR FREELANCE</span></a>


  <div class="hi n2 bold">

DESIGNER / CREATIVE</div>
  <div class="hello n2">
PRINT & COLLATERAL, WEB DESIGN & DEVELOPMENT, GRAPHIC DESIGN, ILLUSTRATION, ANIMATION,
BRANDING,  LOGO DESIGN, CREATIVE DIRECTION, CONTENT MANAGEMENT</div></div>
</div>


  <div class="large-section sidebarlinks">
      <p><span>Hello!</span> For 11 years I’ve attempted to perfect my craft and style while working alongside adept colleagues to create visuals for print, the web and TV.

      </p>
      <p>I am currently working at Gracenote in Queensbury, New York.
If you have any questions or have something in mind for discussion, then please <a href="http://scr.im/calvinm">get in touch!</a>
      </p>
    <div class="social">
    <a href="https://twitter.com/calvinmorett">Twitter</a>
    <a href="https://www.behance.net/morettc15cb">Behance</a>
    <a href="https://linkedin.com/in/calvinmorett">Linkedin</a>
    <a href="http://scr.im/calvinm">Email</a>
  </div> </div>


<div id="wrapper" class="wrap-style">


<div id="main1">
  <h1 class="post-title">Newsprint »  Print / Type</h1>
  <div class="info sub">
    <i>Assistant Creative Director, Digital Content Manager <span>at the</span> <a href="http://www.lakegeorgemirror.com">Lake George Mirror</a></i>
  </div>
<div class="type">
  <span class="sub">My work with <i>America's Oldest Resort newspaper</i> began in 2012. Most of my projects for the Mirror, involved editting photos for print, editorial layout, creating client and event ads while maintaining their contemporary style guides. — Majority of work was completed within Adobe InDesign and Photoshop with a rough year using Quark.
</div><BR>
<div class="media">
  <a href="https://www.behance.net/gallery/30353235/Minds-of-Winter">
    <img src="http://calvinmorett.com/codepen/img/1.png"></a>
  <a href="https://www.behance.net/gallery/30353373/A-Kings-Garden-Party">
  <img src="http://calvinmorett.com/codepen/img/2.png"></a>
  <a href="https://www.behance.net/gallery/30353545/Raw-Color-The-Circles-of-David-Smith">
  <img src="http://calvinmorett.com/codepen/img/3.png"></a>
<BR> <BR>
    <p class="current"> • I'm currently their Digital Content Manager. <BR>• I'm also in the process of developing a new site, under consideration.</span></p><BR>
  <span class="sub">You can discover more examples of my Print work on <a href="https://www.behance.net/morettc15cb">Behance</a>.</span>

</div>
</div>


<div id="main1">

  <h1 class="post-title">Pattern Cache » Graphic / Textiles</h1>

<div class="info sub">
<i>Textile Designer, Graphic Artist </i>
  </div>
<div class="type">
<span class="sub">Patterns have always been something I liked to create when I did animations. I've always liked creating patterns so that the gif I was making was seamless from start to finish, if you lined them up side by by side. And I guess I always have been fascinated by shapes ▣ and contrast; mostly by the way colors could determine where <i>an element</i> was in relation to distance.
  <BR><BR>
 By always creating those endlesly looping gifs, over time I developed a pattern cache. And after a long while<i>(5 years)</i> I decided to turn a couple patterns into material and see how they looked as textiles. <i>They were okay.</i></span><BR>

</div><BR>
<div class="media">
  <a href="http://www.colourlovers.com/lover/version\\\">
 <img src="http://calvinmorett.com/codepen/img/4.png"> <img src="http://calvinmorett.com/codepen/img/5.png"> <img src="http://calvinmorett.com/codepen/img/6.png"></a>
<BR><BR>
  <span class="sub">You can discover more of my Pattern work on <a href="http://www.colourlovers.com/lover/version">ColourLovers</a>.</span>

</div>
</div>


<div id="main1">
    <h1 class="post-title">TV Banners » Graphic / Type</h1>
<div class="info sub">
<i>Image Editor  <span>at</span> <a href="http://www.gracenote.com">Gracenote</a></i>
  </div>
<div class="type">
<span class="sub">
  I started at Gracenote in July of 2016. I created banners for programs that were utilized through Gracenote's data for different cable providers. This involves finding appropriate images and editting photos in Photoshop; which could be removing logos, blemishes and other unsavory elements, updating internal database listings, cropping different aspect ratios and also crafting legible program title type for web and TV displays.<BR><BR>
  </span></div>
<div class="media">
<img src="http://calvinmorett.com/codepen/img/tv1.png">
<img src="http://calvinmorett.com/codepen/img/tv2.png">
<img src="http://calvinmorett.com/codepen/img/tv3.png">
<BR><BR><p class="current"> • I'm currently a full-time Editor.
</span></p>
</div>
</div>

<div id="main1">
    <h1 class="post-title"> Horizontal-Scrolling » Web</h1>
<div class="info sub">
<i>Web Design, Web Developer</i>
  </div>
<div class="type">
<span class="sub"><i>During the design process of an older idea for my portfolio I felt I had an issue. I wanted to display my content horizontally and thus I felt the viewer/user would feel a lot more comfortable with the familiar usage to view my content. Let me explain how I solved it.</i>
 <BR><BR>
<div class="media">
<a href="http://codepen.io/CalvinMorett/post/incorporate-horizontal-scrolling-mousewheel"><img src="http://calvinmorett.com/codepen/img/scroll.png"> </a>
   </div> <BR>
  <span class="sub">Continue reading this post and view more of my Web Experiments on <a href="http://codepen.io/CalvinMorett/post/incorporate-horizontal-scrolling-mousewheel">Codepen</a>.</span>
</div>
</div>


<div id="main1">
    <h1 class="post-title">Unsorted Work » Graphic / Illustration / Web</h1></h1>
<div class="info sub">

<i>Illustrator, Graphic Designer, Visual Artist, Painter</i>
  </div>
<div class="media">
<span class="sub">Below there is untitled work and work in progress's among completed projects; I would like to devote more time to developing, improving and reworking these projects in the future.</span>
  <BR><BR>
  <span class="sub">Find more work on <a href="https://www.behance.net/morettc15cb">Behance</a>, <a href="http://codepen.io/calvinmorett/">Codepen</a> and <a href="">Dribble</a>.
<BR><BR>
  <img src="http://calvinmorett.com/codepen/img/123f.png"><img src="http://calvinmorett.com/codepen/img/123c.png"><img src="http://calvinmorett.com/codepen/img/123e.png"><img src="http://calvinmorett.com/codepen/img/123.png"><img src="http://calvinmorett.com/codepen/img/123d.png"><img src="http://calvinmorett.com/codepen/img/123b.png"><img src="http://calvinmorett.com/codepen/img/123h.png"><img src="http://calvinmorett.com/codepen/img/123g.png"><img src="http://calvinmorett.com/codepen/img/123a.png"><img src="http://calvinmorett.com/codepen/img/123j.png"><img src="http://calvinmorett.com/codepen/img/123k.png"><img src="http://calvinmorett.com/codepen/img/123l.png"><img src="http://calvinmorett.com/codepen/img/123m.png"><img src="http://calvinmorett.com/codepen/img/123n.png"><img src="http://calvinmorett.com/codepen/img/123o.png"><img src="http://calvinmorett.com/codepen/img/123p.png">
</div>
</div>


  <!--

<div id="main1">
    <h1 class="post-title">Templates » Web / Type</h1></h1>
<div class="info sub">

<i>Web Developer, Web Designer, Graphic Designer</i>
  </div>
<div class="media">
<span class="sub">+ PRINT & COLLATERAL</span><BR>
<BR>
<span class="sub">+ GRAPHIC DESIGN</span><BR>
<img src="http://placehold.it/700x700">
<BR>
<BR>
</div>
</div>-->


      </div>


  </body></html>

## portfolio-idea.markdown

      
    Raw
  

              portfolio-idea.markdown
            
          
    Portfolio Idea

A Pen by Calvin on CodePen.
License.

  
## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,400italic,500italic,700,700italic);

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 333%;
  overflow: hidden;
}
body {
  background: #fff;
  background: #fff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #c4c4c4, #fff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #c4c4c4, #fff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-size: 100%;
}

body{
  font-size:100%;
  font-family: 'Roboto', sans-serif;
}
a, a:active, a:focus, a:visited{
  -webkit-transition: -webkit-all .34s linear;
  transition: all .34s linear;
  color:blue;
}
a:hover {
  text-decoration: none;
}
img{
  -webkit-transition: -webkit-all .1s ease;
  transition: all .1s ease;
  box-shadow:  0 0 0 #000;
}
img:hover{
  box-shadow: 0 0 12px #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: -0.5em;
  font-weight: 500;
}

h1 {
  padding: 0 0 0 10px;
  overflow: hidden;
  text-align: left;
}

h1:after {
  background: transparent;
  content: "";
  display: inline-block;


  margin: 0 15px;
  height: 25px;
  width: 1px;
  position: relative;
  vertical-align: middle;
  -webkit-transition: -webkit-all .34s linear;
  transition: all .34s linear;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

h1:hover:after {
  background: #000;
  content: "";
  margin: 0 15px;
  height: 25px;
  width: 1px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}


#wrapper {
  top: 0;
  position: fixed;
  margin: 0;
  padding: 20px 6px;
  height: 99%;
  width:75%;
  right: -20px;
  overflow: hidden;
  float: left;
  transition: all 1.75s ease;
  box-shadow: -1px 0px 0px #444;
}

#wrapper:hover {
  overflow-y: scroll;
}

#card {
  overflow:hidden;
  line-height: 1.5;
  width: 25%;
  padding: 10px;
  border: 1px solid #000;
  margin-bottom: 24px;
  text-shadow: -3px 0 0 #165d73, 3px 0 0 #88005d;
  text-shadow: 0 0 0 #000, 0px 0 1px #777;
}

.n1 {
  font-size: 3em;
  margin-top: .5em;
  margin-bottom: 5px;
  line-height: 1em;
  letter-spacing: 0.1rem;
}
.n1, .n1 a, .n1 a:active, .n1 a:focus, .n1 a:visited{color:#000;
text-decoration:none;}
.n2, .n2 a,.n2 a:active, .n2 a:focus, .n2 a:visited{
  font-size: 75%;
  letter-spacing: .1rem;
}


@keyframes load {
  from {

  -webkit-transform: translateX(-50%, 50%);
  transform: translateX(-50%, 50%);
  }
  to {

  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  }
}


.n1 a:hover{
text-shadow:none;}
.n2 a:hover{
  display:inline-block;
  content:'';
  vertical-alig:middle;
}

.hello {
  bottom:0;
  margin:6px 0 0;
  padding:4px 0 0 ;
    display: block;
  overflow:hidden;
  height:1px;
    border: none;
    transition: all .34s linear;
}
.hi {
  box-shadow:none!important;
border:none!important;}

.hi:hover + .hello {
  height: calc(100% - 50px);
  max-height:100%;
}
.hi:after{
  margin:-2px 4px 0 7px;
  display:inline-block;
  content:'»';
  vertical-align:middle;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
    transition: all .34s linear;
}
.hi:hover:after{
  display:inline-block;
  content:'»';
  vertical-align:middle;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}


.bold {
  font-weight: 700italic;
  padding: .25rem .5rem .25rem;
  display: inline-block;
  background: #000;
  color: #fff;
  box-shadow: 0 1px 0px #A7DE74;
}

.green {
  color:#A7DE74;
}

#main1:nth-child(9) {
  background: rgba(255, 255, 255, .9);
}

#main1:nth-child(8) {
  background: rgba(255, 255, 255, .8);
}

#main1:nth-child(7) {
  background: rgba(255, 255, 255, .7);
}

#main1:nth-child(+6) {
  background: rgba(255, 255, 255, .6);
}

#main1:nth-child(+5) {
  background: rgba(255, 255, 255,.5);
}

#main1:nth-child(+4) {
  background: rgba(255, 255, 255, .4);
}

#main1:nth-child(+3) {
  background: rgba(255, 255, 255, .3);
}

#main1:nth-child(+2) {
  background: rgba(255, 255, 255, .2);
}
#main1:nth-child(1) {
  background: rgba(255, 255, 255, .1);
}
#main1:hover {
  background: rgba(255, 255, 255, 0);
}

#main1 {
  height: 0;
  width: 100%;
  margin: 0 9px 2px;
  padding-bottom: 3em;
  overflow: hidden;
  /* border-right: none; */
  /* border-left: none; */
  box-shadow: 0px 1px 0px #000;
  transition: all .75s ease;
  display: block;
}

#main1:hover {
  display: block;
  transition: all .75s ease;
  text-shadow: none!important;
  height: 99%;
  padding-bottom: 100%;
}

.type {
  width: 700px;
  padding: 10px;
}

.current {
  width: 450px;
  font-weight: bold;
  letter-spacing: -.01rem;
  background: rgba(255, 255, 255, .5);
  padding: 15px;
  border-radius: 25px;
}


.media {
  width: 800px;
}

.media img {
  border: 1px solid #000;
  margin: 4px 4px 4px 4px;
  max-width: 500px;
  display: inline-block;
  transition: all .5s ease;
}

.media img:hover {
  max-width: 100%;
  max-height: 100%;
  border:1px solid rgba(35, 119, 235, 1);
}

.post-title {
  font-size: 2.25em;
  letter-spacing: 0.1rem;
  font-weight: 700;
}

.sub {
  margin-left: 10px;
  font-size: 1.2em;
  line-height: 1.5em;
}

p {
  margin-bottom: 1.5rem;
}
.subss {
  margin-left: 20px;
  font-size: 60%;
  text-transform: uppercase;
}

.info {
  font-size: .75em;
  font-weight: 500;
  margin-left: 5%;
  display: inline-block;
  margin: 25px 0 25px 12px;
  padding: 10px;
  background: rgb(225, 168, 44)!important;
  border: 1px solid #000;
  font-family: 'Lekton', sans-serif;
}

.info span {
  box-shadow: 0 1px 0 #000;
}

.info a {
  text-decoration: none;
  color: inherit;
}

.info a:hover {
  box-shadow: 0 1px 0 #000;
}

.large-section {
  line-height: 1.5;
  width: 25%;
  padding: 10px 0;
  border-left: none;
  border-right: none;
  margin-bottom: .34em;
  font-size: 14px;
  line-height: 1.4em;
}

.large-section span{
  font-family: 'Lekton', sans-serif;
  background:#9e9e9e;
color:#fff;
  content:'';
  display:inline-block;
  vertical-align:middle;
  padding:.25rem .25rem 0;
  margin-left:-.25rem;
  margin-right:.25rem;
  font-size:.75em;
}
.large-section img {
  overflow:hidden;
  border: 1px solid #000;
  width: 100%;
  margin-bottom: 0.12em;
}
.large-section p{
  padding: 0 10px;
  text-shadow: none;
  color: rgb(35, 119, 235);
  color: #000;
  text-align: left;
  font-size: 1.5em;
  font-weight: 100;
  line-height: 1.25em;
  letter-spacing: -0.045rem;
  margin: .34em 0 0;
  transition: all .5s ease;
    text-indent: .25rem;}

.large-section p:after{
  content:'';
  display:inline-block;
  vertical-align:middle;
height:2px ;
width:100%;
  margin:0 auto;
background:#9e9e9e;}
.large-section h2:hover {
  color: rgba(35, 119, 235, 1);
  color: #000;
}

///

.sidebarlinks {
}

.sidebarlinks a:link{
 text-shadow:0 1px 1px rgba(0,0,0,.25);
  text-decoration:none;
  box-shadow:none;
  color:blue;
}
.sidebarlinks a:visited{
 text-shadow:0 1px 1px rgba(0,0,0,.25);
  text-decoration:none;
  box-shadow:none;
  color:blue;
}

.sidebarlinks a:focus{
 text-shadow:0 1px 1px rgba(0,0,0,.25);
  text-decoration:none;
  box-shadow:none;
  color:blue;
}

.sidebarlinks a:hover{
 text-shadow:0 1px 0 rgba(0,0,0,.25);
  text-decoration:none;
  box-shadow:0 1px 0 blue;
  color:blue;
}

.social{
  margin:0 auto;
  text-align:center;
  display:inline-block;
content:"";
vertical-align:middle;}
.social a{
  margin:0 10px;
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/grd/1.2.3/grd.cs" rel="stylesheet" />
	<!DOCTYPE html>

	<html lang="en">



	<style>



	</style>



	<head>



	<title>Calvin Morett \| Designer / Creative</title>
	<meta name="description" content="The Portfolio of Calvin Morett">
	<meta name="author" content="CalvinMorett">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Lekton:700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

	<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<![endif]-->

	</head>

	<body>
	<div id="card">
	<a href="https://twitter.com/intent/tweet?screen_name=CalvinMorett" class="twitter-mention-button twitter" data-show-count="false">
	Tweet to @CalvinMorett
	</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
	<p class="n1"><a href="http://scr.im/calvinm">Calvin Morett</a></p><BR>
	<a href="http://scr.im/calvinm"><span class="n2 bold green bounceIn">AVAILABLE FOR FREELANCE</span></a>


	<div class="hi n2 bold">

	DESIGNER / CREATIVE</div>
	<div class="hello n2">
	PRINT & COLLATERAL, WEB DESIGN & DEVELOPMENT, GRAPHIC DESIGN, ILLUSTRATION, ANIMATION,
	BRANDING, LOGO DESIGN, CREATIVE DIRECTION, CONTENT MANAGEMENT</div></div>
	</div>


	<div class="large-section sidebarlinks">
	<p><span>Hello!</span> For 11 years I’ve attempted to perfect my craft and style while working alongside adept colleagues to create visuals for print, the web and TV.

	</p>
	<p>I am currently working at Gracenote in Queensbury, New York.
	If you have any questions or have something in mind for discussion, then please <a href="http://scr.im/calvinm">get in touch!</a>
	</p>
	<div class="social">
	<a href="https://twitter.com/calvinmorett">Twitter</a>
	<a href="https://www.behance.net/morettc15cb">Behance</a>
	<a href="https://linkedin.com/in/calvinmorett">Linkedin</a>
	<a href="http://scr.im/calvinm">Email</a>
	</div> </div>


	<div id="wrapper" class="wrap-style">


	<div id="main1">
	<h1 class="post-title">Newsprint » Print / Type</h1>
	<div class="info sub">
	<i>Assistant Creative Director, Digital Content Manager <span>at the</span> <a href="http://www.lakegeorgemirror.com">Lake George Mirror</a></i>
	</div>
	<div class="type">
	<span class="sub">My work with <i>America's Oldest Resort newspaper</i> began in 2012. Most of my projects for the Mirror, involved editting photos for print, editorial layout, creating client and event ads while maintaining their contemporary style guides. — Majority of work was completed within Adobe InDesign and Photoshop with a rough year using Quark.
	</div><BR>
	<div class="media">
	<a href="https://www.behance.net/gallery/30353235/Minds-of-Winter">
	<img src="http://calvinmorett.com/codepen/img/1.png"></a>
	<a href="https://www.behance.net/gallery/30353373/A-Kings-Garden-Party">
	<img src="http://calvinmorett.com/codepen/img/2.png"></a>
	<a href="https://www.behance.net/gallery/30353545/Raw-Color-The-Circles-of-David-Smith">
	<img src="http://calvinmorett.com/codepen/img/3.png"></a>
	<BR> <BR>
	<p class="current"> • I'm currently their Digital Content Manager. <BR>• I'm also in the process of developing a new site, under consideration.</span></p><BR>
	<span class="sub">You can discover more examples of my Print work on <a href="https://www.behance.net/morettc15cb">Behance</a>.</span>

	</div>
	</div>


	<div id="main1">

	<h1 class="post-title">Pattern Cache » Graphic / Textiles</h1>

	<div class="info sub">
	<i>Textile Designer, Graphic Artist </i>
	</div>
	<div class="type">
	<span class="sub">Patterns have always been something I liked to create when I did animations. I've always liked creating patterns so that the gif I was making was seamless from start to finish, if you lined them up side by by side. And I guess I always have been fascinated by shapes ▣ and contrast; mostly by the way colors could determine where <i>an element</i> was in relation to distance.
	<BR><BR>
	By always creating those endlesly looping gifs, over time I developed a pattern cache. And after a long while<i>(5 years)</i> I decided to turn a couple patterns into material and see how they looked as textiles. <i>They were okay.</i></span><BR>

	</div><BR>
	<div class="media">
	<a href="http://www.colourlovers.com/lover/version\\\">
	<img src="http://calvinmorett.com/codepen/img/4.png"> <img src="http://calvinmorett.com/codepen/img/5.png"> <img src="http://calvinmorett.com/codepen/img/6.png"></a>
	<BR><BR>
	<span class="sub">You can discover more of my Pattern work on <a href="http://www.colourlovers.com/lover/version">ColourLovers</a>.</span>

	</div>
	</div>


	<div id="main1">
	<h1 class="post-title">TV Banners » Graphic / Type</h1>
	<div class="info sub">
	<i>Image Editor <span>at</span> <a href="http://www.gracenote.com">Gracenote</a></i>
	</div>
	<div class="type">
	<span class="sub">
	I started at Gracenote in July of 2016. I created banners for programs that were utilized through Gracenote's data for different cable providers. This involves finding appropriate images and editting photos in Photoshop; which could be removing logos, blemishes and other unsavory elements, updating internal database listings, cropping different aspect ratios and also crafting legible program title type for web and TV displays.<BR><BR>
	</span></div>
	<div class="media">
	<img src="http://calvinmorett.com/codepen/img/tv1.png">
	<img src="http://calvinmorett.com/codepen/img/tv2.png">
	<img src="http://calvinmorett.com/codepen/img/tv3.png">
	<BR><BR><p class="current"> • I'm currently a full-time Editor.
	</span></p>
	</div>
	</div>

	<div id="main1">
	<h1 class="post-title"> Horizontal-Scrolling » Web</h1>
	<div class="info sub">
	<i>Web Design, Web Developer</i>
	</div>
	<div class="type">
	<span class="sub"><i>During the design process of an older idea for my portfolio I felt I had an issue. I wanted to display my content horizontally and thus I felt the viewer/user would feel a lot more comfortable with the familiar usage to view my content. Let me explain how I solved it.</i>
	<BR><BR>
	<div class="media">
	<a href="http://codepen.io/CalvinMorett/post/incorporate-horizontal-scrolling-mousewheel"><img src="http://calvinmorett.com/codepen/img/scroll.png"> </a>
	</div> <BR>
	<span class="sub">Continue reading this post and view more of my Web Experiments on <a href="http://codepen.io/CalvinMorett/post/incorporate-horizontal-scrolling-mousewheel">Codepen</a>.</span>
	</div>
	</div>



	<div id="main1">
	<h1 class="post-title">Unsorted Work » Graphic / Illustration / Web</h1></h1>
	<div class="info sub">

	<i>Illustrator, Graphic Designer, Visual Artist, Painter</i>
	</div>
	<div class="media">
	<span class="sub">Below there is untitled work and work in progress's among completed projects; I would like to devote more time to developing, improving and reworking these projects in the future.</span>
	<BR><BR>
	<span class="sub">Find more work on <a href="https://www.behance.net/morettc15cb">Behance</a>, <a href="http://codepen.io/calvinmorett/">Codepen</a> and <a href="">Dribble</a>.
	<BR><BR>
	<img src="http://calvinmorett.com/codepen/img/123f.png"><img src="http://calvinmorett.com/codepen/img/123c.png"><img src="http://calvinmorett.com/codepen/img/123e.png"><img src="http://calvinmorett.com/codepen/img/123.png"><img src="http://calvinmorett.com/codepen/img/123d.png"><img src="http://calvinmorett.com/codepen/img/123b.png"><img src="http://calvinmorett.com/codepen/img/123h.png"><img src="http://calvinmorett.com/codepen/img/123g.png"><img src="http://calvinmorett.com/codepen/img/123a.png"><img src="http://calvinmorett.com/codepen/img/123j.png"><img src="http://calvinmorett.com/codepen/img/123k.png"><img src="http://calvinmorett.com/codepen/img/123l.png"><img src="http://calvinmorett.com/codepen/img/123m.png"><img src="http://calvinmorett.com/codepen/img/123n.png"><img src="http://calvinmorett.com/codepen/img/123o.png"><img src="http://calvinmorett.com/codepen/img/123p.png">
	</div>
	</div>


	<!--

	<div id="main1">
	<h1 class="post-title">Templates » Web / Type</h1></h1>
	<div class="info sub">

	<i>Web Developer, Web Designer, Graphic Designer</i>
	</div>
	<div class="media">
	<span class="sub">+ PRINT & COLLATERAL</span><BR>
	<BR>
	<span class="sub">+ GRAPHIC DESIGN</span><BR>
	<img src="http://placehold.it/700x700">
	<BR>
	<BR>
	</div>
	</div>-->


	</div>



	</body></html>
	@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,400italic,500italic,700,700italic);

	* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	html {
	height: 333%;
	overflow: hidden;
	}
	body {
	background: #fff;
	background: #fff;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom, #c4c4c4, #fff);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom, #c4c4c4, #fff);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	font-size: 100%;
	}

	body{
	font-size:100%;
	font-family: 'Roboto', sans-serif;
	}
	a, a:active, a:focus, a:visited{
	-webkit-transition: -webkit-all .34s linear;
	transition: all .34s linear;
	color:blue;
	}
	a:hover {
	text-decoration: none;
	}
	img{
	-webkit-transition: -webkit-all .1s ease;
	transition: all .1s ease;
	box-shadow: 0 0 0 #000;
	}
	img:hover{
	box-shadow: 0 0 12px #000;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	margin-top: 0;
	margin-bottom: -0.5em;
	font-weight: 500;
	}

	h1 {
	padding: 0 0 0 10px;
	overflow: hidden;
	text-align: left;
	}

	h1:after {
	background: transparent;
	content: "";
	display: inline-block;


	margin: 0 15px;
	height: 25px;
	width: 1px;
	position: relative;
	vertical-align: middle;
	-webkit-transition: -webkit-all .34s linear;
	transition: all .34s linear;
	animation-name: rotate;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	}

	h1:hover:after {
	background: #000;
	content: "";
	margin: 0 15px;
	height: 25px;
	width: 1px;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
	}

	@keyframes rotate {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(-360deg);
	}
	}

	h1:before {
	right: 0.5em;
	margin-left: -50%;
	}

	h1:after {
	left: 0.5em;
	margin-right: -50%;
	}


	#wrapper {
	top: 0;
	position: fixed;
	margin: 0;
	padding: 20px 6px;
	height: 99%;
	width:75%;
	right: -20px;
	overflow: hidden;
	float: left;
	transition: all 1.75s ease;
	box-shadow: -1px 0px 0px #444;
	}

	#wrapper:hover {
	overflow-y: scroll;
	}

	#card {
	overflow:hidden;
	line-height: 1.5;
	width: 25%;
	padding: 10px;
	border: 1px solid #000;
	margin-bottom: 24px;
	text-shadow: -3px 0 0 #165d73, 3px 0 0 #88005d;
	text-shadow: 0 0 0 #000, 0px 0 1px #777;
	}

	.n1 {
	font-size: 3em;
	margin-top: .5em;
	margin-bottom: 5px;
	line-height: 1em;
	letter-spacing: 0.1rem;
	}
	.n1, .n1 a, .n1 a:active, .n1 a:focus, .n1 a:visited{color:#000;
	text-decoration:none;}
	.n2, .n2 a,.n2 a:active, .n2 a:focus, .n2 a:visited{
	font-size: 75%;
	letter-spacing: .1rem;
	}


	@keyframes load {
	from {

	-webkit-transform: translateX(-50%, 50%);
	transform: translateX(-50%, 50%);
	}
	to {

	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	}
	}


	.n1 a:hover{
	text-shadow:none;}
	.n2 a:hover{
	display:inline-block;
	content:'';
	vertical-alig:middle;
	}

	.hello {
	bottom:0;
	margin:6px 0 0;
	padding:4px 0 0 ;
	display: block;
	overflow:hidden;
	height:1px;
	border: none;
	transition: all .34s linear;
	}
	.hi {
	box-shadow:none!important;
	border:none!important;}

	.hi:hover + .hello {
	height: calc(100% - 50px);
	max-height:100%;
	}
	.hi:after{
	margin:-2px 4px 0 7px;
	display:inline-block;
	content:'»';
	vertical-align:middle;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	transition: all .34s linear;
	}
	.hi:hover:after{
	display:inline-block;
	content:'»';
	vertical-align:middle;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	}


	.bold {
	font-weight: 700italic;
	padding: .25rem .5rem .25rem;
	display: inline-block;
	background: #000;
	color: #fff;
	box-shadow: 0 1px 0px #A7DE74;
	}

	.green {
	color:#A7DE74;
	}

	#main1:nth-child(9) {
	background: rgba(255, 255, 255, .9);
	}

	#main1:nth-child(8) {
	background: rgba(255, 255, 255, .8);
	}

	#main1:nth-child(7) {
	background: rgba(255, 255, 255, .7);
	}

	#main1:nth-child(+6) {
	background: rgba(255, 255, 255, .6);
	}

	#main1:nth-child(+5) {
	background: rgba(255, 255, 255,.5);
	}

	#main1:nth-child(+4) {
	background: rgba(255, 255, 255, .4);
	}

	#main1:nth-child(+3) {
	background: rgba(255, 255, 255, .3);
	}

	#main1:nth-child(+2) {
	background: rgba(255, 255, 255, .2);
	}
	#main1:nth-child(1) {
	background: rgba(255, 255, 255, .1);
	}
	#main1:hover {
	background: rgba(255, 255, 255, 0);
	}

	#main1 {
	height: 0;
	width: 100%;
	margin: 0 9px 2px;
	padding-bottom: 3em;
	overflow: hidden;
	/* border-right: none; */
	/* border-left: none; */
	box-shadow: 0px 1px 0px #000;
	transition: all .75s ease;
	display: block;
	}

	#main1:hover {
	display: block;
	transition: all .75s ease;
	text-shadow: none!important;
	height: 99%;
	padding-bottom: 100%;
	}

	.type {
	width: 700px;
	padding: 10px;
	}

	.current {
	width: 450px;
	font-weight: bold;
	letter-spacing: -.01rem;
	background: rgba(255, 255, 255, .5);
	padding: 15px;
	border-radius: 25px;
	}


	.media {
	width: 800px;
	}

	.media img {
	border: 1px solid #000;
	margin: 4px 4px 4px 4px;
	max-width: 500px;
	display: inline-block;
	transition: all .5s ease;
	}

	.media img:hover {
	max-width: 100%;
	max-height: 100%;
	border:1px solid rgba(35, 119, 235, 1);
	}

	.post-title {
	font-size: 2.25em;
	letter-spacing: 0.1rem;
	font-weight: 700;
	}

	.sub {
	margin-left: 10px;
	font-size: 1.2em;
	line-height: 1.5em;
	}

	p {
	margin-bottom: 1.5rem;
	}
	.subss {
	margin-left: 20px;
	font-size: 60%;
	text-transform: uppercase;
	}

	.info {
	font-size: .75em;
	font-weight: 500;
	margin-left: 5%;
	display: inline-block;
	margin: 25px 0 25px 12px;
	padding: 10px;
	background: rgb(225, 168, 44)!important;
	border: 1px solid #000;
	font-family: 'Lekton', sans-serif;
	}

	.info span {
	box-shadow: 0 1px 0 #000;
	}

	.info a {
	text-decoration: none;
	color: inherit;
	}

	.info a:hover {
	box-shadow: 0 1px 0 #000;
	}

	.large-section {
	line-height: 1.5;
	width: 25%;
	padding: 10px 0;
	border-left: none;
	border-right: none;
	margin-bottom: .34em;
	font-size: 14px;
	line-height: 1.4em;
	}

	.large-section span{
	font-family: 'Lekton', sans-serif;
	background:#9e9e9e;
	color:#fff;
	content:'';
	display:inline-block;
	vertical-align:middle;
	padding:.25rem .25rem 0;
	margin-left:-.25rem;
	margin-right:.25rem;
	font-size:.75em;
	}
	.large-section img {
	overflow:hidden;
	border: 1px solid #000;
	width: 100%;
	margin-bottom: 0.12em;
	}
	.large-section p{
	padding: 0 10px;
	text-shadow: none;
	color: rgb(35, 119, 235);
	color: #000;
	text-align: left;
	font-size: 1.5em;
	font-weight: 100;
	line-height: 1.25em;
	letter-spacing: -0.045rem;
	margin: .34em 0 0;
	transition: all .5s ease;
	text-indent: .25rem;}

	.large-section p:after{
	content:'';
	display:inline-block;
	vertical-align:middle;
	height:2px ;
	width:100%;
	margin:0 auto;
	background:#9e9e9e;}
	.large-section h2:hover {
	color: rgba(35, 119, 235, 1);
	color: #000;
	}

	///

	.sidebarlinks {
	}

	.sidebarlinks a:link{
	text-shadow:0 1px 1px rgba(0,0,0,.25);
	text-decoration:none;
	box-shadow:none;
	color:blue;
	}
	.sidebarlinks a:visited{
	text-shadow:0 1px 1px rgba(0,0,0,.25);
	text-decoration:none;
	box-shadow:none;
	color:blue;
	}

	.sidebarlinks a:focus{
	text-shadow:0 1px 1px rgba(0,0,0,.25);
	text-decoration:none;
	box-shadow:none;
	color:blue;
	}

	.sidebarlinks a:hover{
	text-shadow:0 1px 0 rgba(0,0,0,.25);
	text-decoration:none;
	box-shadow:0 1px 0 blue;
	color:blue;
	}

	.social{
	margin:0 auto;
	text-align:center;
	display:inline-block;
	content:"";
	vertical-align:middle;}
	.social a{
	margin:0 10px;
	}
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/grd/1.2.3/grd.cs" rel="stylesheet" />