harunpehlivan
3/26/2018 - 2:33 AM

HP- Portfolio design

HP- Portfolio design

styles
content_copyfile_download
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
style.less
content_copyfile_download
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);


@base: #00ADD5;
@complement1: lighten(spin(@base, 180),15%);
@complement2: lighten(spin(@base, 180),10%);
@complement3: lighten(spin(@base, 205),30%);
@complement4: lighten(spin(@base, 205),20%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 25%);
@lighten3: lighten(@base, 30%);
@projects: 5;

* {
  box-sizing:border-box;
}

body {
  font-size:20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position:relative;
}

img {
  max-width:100%;
}

.topbar {
  padding:10px 30px;
  height:106px;

  
  a, a:link, a:visited {
  color:black;
  text-decoration:none;
  display:block;
  }
  
  a:hover, a:active {
    color:#333;
  }
}

h1 {
  float:left;
  margin:20px 0;
}

h2 {
  font-size:30px;
}

.social {
  float:right;
  margin:24px 0;
  text-align:center;
  padding:0;
}

.social li {
  display:inline-block;
  margin:0 8px;
}


.wrapper {
  position:relative;
  width:100%;
  overflow-x:hidden;
}

.project {
  float:left;
  transition: width 0.5s ease;
  overflow:auto;
  cursor:pointer;
  position:relative;
  width:calc(100% / @projects);
  height:0;
}

.selected {
  cursor:auto;
  width:100%;
}

.deselected {
  width:0;
}

.close {
  position:absolute;
  right:50px;
  top:158px;
  color:white;
  cursor:pointer;
  display:none;
  z-index:9999;
  max-width:40px;
}

.title {
  display:block;
  padding:5px 10px;
  background:white;
  left:0;
  margin-top:50px;
  width:90%;
  text-align: right;
}

.project:hover > .title, .selected > .title {
  color:white;
}

.content {
  width:80%;
  margin:auto;
  display:none;
  background:white;
  padding:20px;
  margin-top:50px;
  margin-bottom:30px;
  line-height: 1.5;
  font-weight: 300;
  text-align: justify;
}

.details {
  margin: 10px 0;
  background:#eee;
  padding:5px;
  border-radius: 3px;
  font-size: 0.85em;
  font-family: 'Source Code Pro', "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  font-weight: 300;
  text-align: left;
}

.details b {
  font-weight: 500;
}

a.button {
    color:white !important;
    text-transform: uppercase;
    text-decoration:none;
    padding:10px;
    border-radius: 3px;
    margin:10px 0;
    display:inline-block;
    font-weight: bold;
}

.ui-tooltip {
    padding: 5px 10px;
    color: black;
    border-radius: 3px;
    font: bold 12px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: none;
    border:solid 2px black;
  }

.project:nth-of-type(8n+1) {
  background:@complement1;
  border-top:5px solid darken(@complement1,10);
  
  a, a:link, a:visited {
    color:@complement1;
  }
  a:hover, a:active {
    color:darken(@complement1,10);
  }

  a.button {
    background:@complement1;
    

    &:hover{
      background:darken(@complement1,10);
    }
  } 
}

.project:nth-of-type(8n+1):hover > .title, .project:nth-of-type(8n+1).selected > .title {
  background:darken(@complement1,10);
}

.project:nth-of-type(8n+2) {
  background:@complement2;
  border-top:5px solid darken(@complement2,10);
  
  a, a:link, a:visited {
    color:@complement2;
  }
  a:hover, a:active {
    color:darken(@complement2,10);
  }
  a.button {
    background:@complement2;
    

    &:hover{
      background:darken(@complement2,10);
    }
  } 
}

.project:nth-of-type(8n+2):hover > .title, .project:nth-of-type(8n+2).selected > .title {
  background:darken(@complement2,10);
}

.project:nth-of-type(8n+3) {
  background:@base;
  border-top:5px solid darken(@base,10);
  
  a, a:link, a:visited {
    color:@base;
  }
  a:hover, a:active {
    color:darken(@base,10);
  }
  a.button {
    background:@base;
    

    &:hover{
      background:darken(@base,10);
    }
  } 
}

.project:nth-of-type(8n+3):hover > .title, .project:nth-of-type(8n+3).selected > .title {
  background:darken(@base,20);
}

.project:nth-of-type(8n+4) {
  background:@lighten1;
  border-top:5px solid darken(@lighten1,10);
  
  a, a:link, a:visited {
    color:@lighten1;
  }
  a:hover, a:active {
    color:darken(@lighten1,10);
  }
  a.button {
    background:@lighten1;
    

    &:hover{
      background:darken(@lighten1,10);
    }
  } 
}

.project:nth-of-type(8n+4):hover > .title, .project:nth-of-type(8n+4).selected > .title {
  background:darken(@lighten1,20);
}

.project:nth-of-type(8n+5) {
  background:@lighten2;
  border-top:5px solid darken(@lighten2,10);
  
  a, a:link, a:visited {
    color:@lighten2;
  }
  a:hover, a:active {
    color:darken(@lighten2,10);
  }
  a.button {
    background:@lighten2;
    

    &:hover{
      background:darken(@lighten2,10);
    }
  } 
}

.project:nth-of-type(8n+5):hover > .title, .project:nth-of-type(8n+5).selected > .title {
  background:darken(@lighten2,20);
}

.project:nth-of-type(8n+6) {
  background:@lighten3;
  border-top:5px solid darken(@lighten3,10);
  
  a, a:link, a:visited {
    color:@lighten3;
  }
  a:hover, a:active {
    color:darken(@lighten3,10);
  }
  a.button {
    background:@lighten3;
    

    &:hover{
      background:darken(@lighten3,10);
    }
  } 
}

.project:nth-of-type(8n+6):hover > .title, .project:nth-of-type(8n+6).selected > .title {
  background:darken(@lighten3,20);
}

.project:nth-of-type(8n+7) {
  background:@complement3;
  border-top:5px solid darken(@complement3,10);
  
  a, a:link, a:visited {
    color:@complement3;
  }
  a:hover, a:active {
    color:darken(@complement3,10);
  }
  a.button {
    background:@complement3;
    

    &:hover{
      background:darken(@complement3,10);
    }
  } 
}

.project:nth-of-type(8n+7):hover > .title, .project:nth-of-type(8n+7).selected > .title {
  background:darken(@complement3,20);
}

.project:nth-of-type(8n+8) {
  background:@complement4;
  border-top:5px solid darken(@complement4,10);
  
  a, a:link, a:visited {
    color:@complement4;
  }
  a:hover, a:active {
    color:darken(@complement4,10);
  }
  a.button {
    background:@complement4;
    

    &:hover{
      background:darken(@complement4,10);
    }
  } 
}

.project:nth-of-type(8n+8):hover > .title, .project:nth-of-type(8n+8).selected > .title {
  background:darken(@complement4,20);
}


.left {
  display:block;
  width:49%;
  margin-left:0;
  margin-right: 1%;
  float:left;
}

.right {
  display:block;
  width:49%;
  margin-left: 1%;
  margin-right:0;
  float:left;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

@media screen and (max-width:580px){
  .content {
    width:95%;
    margin-top:30px;
    padding: 10px;
  }
  
  h1 {
    margin:5px auto;
    text-align:center;
    display:block;
    float:none;
  }
  
  h2 {
    font-size:18px;
  }
  .social {
    margin:5px auto;
    float:none;
  }
  
  .title {
    margin:20px 0;
  }
  
  .close {
    right:0px;
    top:145px;
  }
  
  .project {
   width:100%;
   border-top:none !important;
   height:auto;
 }
 .deselected {
   height:0;
   min-height:0;
 }

 .left, .right {
  width:100%;
  float:none;
  margin:10px 0;
 }

}
scripts
content_copyfile_download
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/jquery.fittext.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/picturefill.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/jquery-ui.js"></script>
script.js
content_copyfile_download
$(function(){
 var topbar = $('.topbar').height()+20;
 var height = $(window).innerHeight();
 var width = $(window).innerWidth();
  if(580 >= width){
    $('.fa-2x').removeClass('fa-2x').addClass('fa-lg');
  }
  else {
    $('.project').css({'min-height':height-topbar, 'height':'auto'});
  }
  
  $('.title').fitText(0.9,{ maxFontSize: '28px' });
  
  if ( window.location.hash ) {
    $(window.location.hash).click();
  }
  $('.social').tooltip();
});

if(screen && screen.width > 580) {
$(window).resize(function(){
 var height = $(window).innerHeight();
 var topbar = $('.topbar').height()+20;
      $('.project').css({'min-height':height-topbar});
});
}

$('body').on('click', '.project', function(){
  
  $(this).addClass('selected').siblings().addClass('deselected');
  window.location.hash = $(this).attr('id');
  $(this).siblings().children('.title').hide();
  $('.close').fadeIn();
  setTimeout(function(){
    $('.selected').children('.content').fadeIn();
  },500);
});

$('body').on('click', '.close', function(){
  $(this).fadeOut();
  window.location.hash = '';
  $('.selected').children('.content').fadeOut();
  setTimeout(function(){
  $('.selected').siblings().removeClass('deselected');
    $('.selected').removeClass('selected');
   
    setTimeout(function(){
     $('.title').fadeIn();
     $('.title').fitText(0.9,{ maxFontSize: '28px' });
    },500);
  },500);
});
index.html
content_copyfile_download

  <div class="topbar">
  <h1> HARUN PEHLİVAN</h1>
  <ul class="social">
    <li><a class="fa fa-2x fa-twitter" href="https://twitter.com/HTERCUMANP" target="_blank" title="Twitter" alt="Twitter"></a></li>
    <li><a class="fa fa-2x fa-codepen" href="https://codepen.io/harunpehlivan" target="_blank" title="Codepen" alt="CodePen Profile"></a></li>
    <li><a class="fa fa-2x fa-github" href="https://gist.github.com/harunpehlivan" target="_blank" title="Github" alt="Github"></a></li>
    <li><a class="fa fa-2x fa-envelope-o" href="trcmnhp@hotmail.com" target="_blank" title="Contact" alt="Contact"></a></li>
    <li><a class="fa fa-2x fa-rss" href="https://codepen.io/harunpehlivan/posts/published" target="_blank" title="Blog" alt="Blog"></a></li>
  </ul>
</div>
   <div class="fa fa-times fa-2x close">&nbsp;</div>
<div class="wrapper" id="portfolio">
 
  <div class="project one" id="bcmcr">
    <h2 class="title">TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ</h2>
    <div class="content">
      <a href="http://tercuman-bilisim-mer.ticiz.com" target="_blank">
        <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" alt="TERCUMAN BİLİŞİM MERKEZİ " title="TERCUMAN BİLİŞİM MERKEZİ"/>
       </picture>
        
    </a>
      <a href="http://harunpehlivantebimtebitagem.business.site/" class="button" target="_blank">TEBİTAGEM <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP | <b>Plugins:</b> <a href="https://github.com/harunpehlivan" target="_blank">HARUN PEHLİVAN</a>
      </div>
      <p>The <a href="http://tercuman-bilisim-mer.ticiz.com" target="_blank">2008</a><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></p>
      <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" alt="TERCUMAN BİLİŞİM MERKEZİ" title="TERCUMAN BİLİŞİM MERKEZİ"/>
       </picture>
      <p>7 24 ONLİNE EDU ARGE PROJECT</p>
      <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" alt="BCMCR.org profile screenshot"/>
       </picture>
      <p>TERCUMAN INFORMATICS CENTER TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</p>
      <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" alt="TEBİM"/>
       </picture>
      <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.business.site?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.business.site?w=360" class="left" alt="TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ"/>
       </picture>
       <picture class="clearfix">
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" class="right" alt="TEBİM"/>
       </picture>
      <p>EĞİTİM BİLİM TEKNİK ARGE PROJE <a href="https://1017556.site123.me/" target="_blank">7 24</a> ONLİNEYİZ</p>


    </div>
    </div>
  <div class="project two" id="edition-records">
    <h2 class="title"> HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP </h2>
    <div class="content">
      <a href="https://harunpehlivantebimtebitagem.site123.me/" target="_blank">
        <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2F1017556.site123.me?w=360" media="(max-width: 480px)">
        <img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" alt=" HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP " title="HP IT GROUP"/>
        </picture>
      </a>
      <a href="https://harunpehlivantebimtebitagem.site123.me" class="button" target="_blank"> HP IT GROUP  <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP
      </div>
      <p><a href="https://harunpehlivantebimtebitagem.site123.me" target="_blank">HP IT GROUP</a> EĞİTİM BİLİM TEKNİK ARGE PROJE</p>
      <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" alt="HP IT GROUP"/>
       </picture>
      <p> 7+24 ÇALIŞIYORUZ</p>
      <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" class="left" alt="7 24"/>
       </picture>
       <picture class="clearfix">
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" class="right" alt="ONLİNE"/>
       </picture>
      <p>GÜNÜMÜZÜN İMKANLARINI KULLANARAK TÜKETMEYE DEĞİL ÜRETMEK İÇİN</p>
      <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" alt="FARKLIYIZ"/>
       </picture>

      <p>MİSYONUMUZLA VİZYONUMUZLA DEĞİŞTİRMEYE GELİŞTİRMEYE VARIZ</p>
    </div>
  </div>
  <div class="project three" id="uberbooths">
    <h2 class="title">HP IT GROUP</h2>
    <div class="content">
      <a href="http://harunpehlivantebimtebitagem.sitem.xyz" target="_blank">
        <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" media="(max-width: 480px)">
        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" alt="YENİ ÇALIŞMA KONSEPTİ" title="YENİ KONSEPTİMİZ"/>
        </picture>
      </a>
      <a href="http://harunpehlivantebimtebitagem.sitem.xyz" class="button" target="_blank">HP IT GROUP <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, Javascript, PHP | <b>Plugins:</b> <a href="https://tr.gravatar.com/tebm" target="_blank">Gravatar</a>
      </div>
      <p><a href="http://harunpehlivantebimtebitagem.sitem.xyz" target="_blank">HP IT GROUP</a> DEĞİŞEN GELİŞEN ÇALIŞMA KONSEPTİMİZLE VARIZ</p>
      <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" alt=""/>
       </picture>
       <p>İNOVASYONUMUZ 
her geçen gün yeni fikirlere  şahid olmaktayız bu yeni fikirlere sahip olmak için
yeni değişen gelişen çalışma konseptimizdir</p>
        <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" alt="İNOVASYONUMUZ"/>
       </picture>
       <p>YENİ FİKİR EDİNMELİYİZ DEĞİŞMELİYİZ
      GELİŞMELİYİZ</p>
        <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" alt="KONSEPTİMİZ"/>
       </picture>
       <p>VİZYON MİSYON SAHİBİYİZ</p>
    </div>
  </div>
  <div class="project four" id="tim-garland">
    <h2 class="title">WEB ÇALIŞMALARIM</h2>
    <div class="content">
      <a href="https://webcalismalarim.glitch.me" target="_blank">
        <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" media="(max-width: 480px)">
        <img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" alt="WEB ÇALIŞMALARIM" title="WEB ÇALIŞMALARIM"/>
        </picture>
      </a>
      <a href="https://webcalismalarim.glitch.me" class="button" target="_blank">WEB ÇALIŞMALARIM <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> <i class="fa fa-wordpress"></i> WordPress | <b>Languages:</b> HTML, CSS, JQuery, PHP | <b>Plugins:</b> <a href="https://gist.github.com/harunpehlivan" target="_blank">HARUN PEHLİVAN</a>
      </div>
      <p><a href="https://webcalismalarim.glitch.me" target="_blank">WEB ÇALIŞMALARIM</a> CODEPEN ÇALIŞMALARIM<a href="https://webcalismalarim.glitch.me" target="_blank">CODEPEN'</a> BURADA YER ALAN TÜM ÇALIŞMALARIM</p>
     <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" alt="WEB ÇALIŞMALARIM"/>
       </picture>
       <p>CODEPEN DE YER ALAN EB ÇALIŞMALARIM</p>
       <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" alt="WEB ÇALIŞMALARIM"/>
       </picture>
       <p>CODEPEN PLATFORMUNDA DERLENEN ÇALIŞMALARIM YER ALMAKTADIR</p>
       <picture>
        <source srcset="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" media="(max-width: 480px)">

        <img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalismalarim.glitch.me?w=360" alt="WEB ÇALIŞMALARIM"/>
       </picture>
       <p>CODEPEN DE DERLENEN ÇALIŞMALARIM</p>
    </div>
  </div>
  <div class="project five" id="soundcloud-visualiser">
    <h2 class="title">Soundcloud Data</h2>
    <div class="content">
      <a href="https://55sketch.github.io/soundcloud" target="_blank">
        <picture>
        <source srcset="https://55sketch.github.io/images/soundcloud_mobile.jpg" media="(max-width: 480px)">
        <img src="https://55sketch.github.io/images/soundcloud.jpg" alt="Soundcloud Visualiser website screenshot" title="Click Image To Visit Site"/>
        </picture>  
      </a>
      <a href="https://55sketch.github.io/soundcloud" class="button" target="_blank">Visit Site <i class="fa fa-arrow-right"></i></a>
      <div class="details">
      <b>Platform:</b> Static | <b>Languages:</b> HTML, CSS, JQuery, JSON, API | <b>Plugins:</b> <a href="https://github.com/soundcloud/SoundCloud-API-jQuery-plugin" target="_blank">SoundCloud API JQuery Plugin</a>, <a href="https://isotope.metafizzy.co" target="_blank">Isotope</a>
      </div>
      <p>Built as an exercise in learning how to utilise Web APIs, my <a href="https://55sketch.github.io/soundcloud" target="_blank">SoundCloud Data Visualiser</a> allows users to log in with their SoundCloud account and view their stats for Plays, Downloads and Favourites</p>
      <p>The stats can be sorted using the Isotope plugin, and the relative size of the bars can be adjusted to suit the user's taste</p>
      <p>If you don't have a SoundCloud account, you can view a basic version of the visualiser on my <a href="https://codepen.io/nickmoreton/pen/Eveaq" target="_blank">CodePen account</a></p>  
    </div>
  </div>

</div>
hp-portfolio-design.markdown
content_copyfile_download
  • Rendered
  • Source

HP- Portfolio design

Started building my portfolio on CodePen, then finished it off with content locally, so thought I'd add the finishing touches to the CodePen version!

A Pen by HARUN PEHLİVAN on CodePen.

License.