What tools/languages are used to produce this ....

  • Thread starter EngWiPy
  • Start date
In summary: Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#">Legal</
  • #1
EngWiPy
1,368
61
What tools/programming languages are used to produce this portfolio website?
 
Technology news on Phys.org
  • #2
I right-clicked on it and selected View Source, and got the following. Does it help?
JavaScript:
<!DOCTYPE html>
<html class="no-scroll">
    <head>
        <title>Portfolio of Cihad Turhan - Web Designer & Developer</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- SEO -->
        <meta name="author" content="Cihad Turhan">
        <meta name="description" content="Portfolio of Cihad Turhan - Web Designer & Developer">
        <meta name="keywords" content="cihad, turhan, cihad turhan, web design, web development, javascript, WebGL, D3, devigner, creative technologist">
        <link rel="canonical" href="http://www.cihadturhan.com/index.php">
        <!-- Social: Twitter -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@cihadturhan">
        <meta name="twitter:creator" content="@cihadturhan">
        <meta name="twitter:title" content="Portfolio of Cihad Turhan - Web Designer & Developer">
        <meta name="twitter:description" content="Interactive portfolio of Cihad Turhan which includes WebGL, D3, CSS3 and other visual demos">
        <meta name="twitter:image:src" content="http://www.cihadturhan.com/img/site-intro.png">
        <!-- Social: Facebook / Open Graph -->
        <meta property="og:url" content="http://www.cihadturhan.com/index.php">
        <meta property="og:type" content="article">
        <meta property="og:title" content="Portfolio of Cihad Turhan - Web Designer & Developer">
        <meta property="og:image" content="http://www.cihadturhan.com/img/site-intro.png">
        <meta property="og:description" content="Interactive portfolio of Cihad Turhan which includes WebGL, D3, CSS3 and other visual demos">
        <meta property="og:site_name" content="Portfolio of Cihad Turhan">
        <meta property="article:author" content="https://www.facebook.com/cihad.turhan">
        <meta property="article:publisher" content="https://www.facebook.com/cihad.turhan">
        <link rel="author" href="https://plus.google.com/+cihadturhan/">
        <link rel="publisher" href="https://plus.google.com/+cihadturhan/">
        <meta itemprop="name" content="Portfolio of Cihad Turhan - Web Designer & Developer">
        <meta itemprop="description" content="Interactive portfolio of Cihad Turhan which includes WebGL, D3, CSS3 and other visual demos.">
        <meta itemprop="image" content="http://www.cihadturhan.com/img/site-intro.png">
        <link rel="stylesheet" href="css/intro.css"/>
        <script>
            var _jsDirs = {"plugin":["js\/dist\/plugin.min.js?v=0.9.6"],"all":["js\/dist\/all.min.js?v=0.9.6"]};
            var _cssDirs = {"all":["css\/dist\/all.min.css?v=0.9.6"]};
        </script>
        <script type="text/javascript" src="js/lib/PxLoader.min.js"></script>
        <script type="text/javascript" src="js/lib/pxloader-images.min.js"></script>
        <script type="text/javascript" src="js/lib/lazyload.js"></script>
        <script>
        (function (i, s, o, g, r, a, m) {
              i['GoogleAnalyticsObject'] = r;
              i[r] = i[r] || function () {
                  (i[r].q = i[r].q || []).push(arguments)
              }, i[r].l = 1 * new Date();
              a = s.createElement(o),
                      m = s.getElementsByTagName(o)[0];
              a.async = 1;
              a.src = g;
              m.parentNode.insertBefore(a, m)
          })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
          ga('create', 'UA-61108250-1', 'auto');
          ga('send', 'pageview');
        </script>
    </head>
    <body>
        <header style="display:none;">
            <div id="logo-container">
                <img id="logo" src="img/logo/logo.svg"> </img>
            </div>
            <!-- Yeah, it's kind of strange to put NAV inside HEADER but they say it's valid. ¯\_(ツ)_/¯
                    http://stackoverflow.com/questions/4870955/in-html5-should-the-main-navigation-be-inside-or-outside-the-header-element
            -->
                        <nav>
                <ul>
                    <li><a href="#hello" class="active"> HELLO </a></li><li><a href="#main" class="active"> INTRO </a></li><li> <a href="#skills"> SKILLS </a></li><li> <a href="#works"> WORKS </a></li><li> <a href="#lab"> LAB </a></li><li> <a href="#about"> ABOUT </a></li><li> <a href="#contact"> CONTACT </a></li>
                </ul>
            </nav>
            <nav id="fake-nav">
                <ul>
                    <li><a href="#hello" class="active"> HELLO </a></li><li><a href="#main" class="active"> INTRO </a></li><li> <a href="#skills"> SKILLS </a></li><li> <a href="#works"> WORKS </a></li><li> <a href="#lab"> LAB </a></li><li> <a href="#about"> ABOUT </a></li><li> <a href="#contact"> CONTACT </a></li>
                </ul>
            </nav>
                    </header>
        <div id="intro" class="full-wh" >
            <svg xmlns="http://www.w3.org/2000/svg" id="goo-svg" version="1.1" width="800">
            <defs>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"></feGaussianBlur>
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 12 -6" result="goo"></feColorMatrix>
                <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
            </filter>
            </defs>
            </svg>
            <div id="loading-spinner-container">
                <div class="autocenter">
                    <svg id="loading-circle-svg" width="200" height="200">
                    <circle id="loading-circle" cx="0" cy="0" r="70" transform="translate(100 100) rotate(-90)"></circle>
                    </svg>
                    <div class="middle-wrapper">
                        <div class="middle"></div>
                    </div>
                    <div class="particle-wrapper">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper deg-60">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper deg-120">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper  deg-180">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper  deg-240">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper  deg-300">
                        <div class="particle even"> </div>
                    </div>
                    <div class="pie first"></div>
                    <div class="pie second"></div>
                    <div class="pie mask"></div>
                </div>
            </div>
            <svg version="1.1" id="loading-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px" height="270px" viewBox="0 0 1920 270" enable-background="new 0 0 1920 270" xml:space="preserve">
            <path class="intro-ring" d="M0,0h835
                  c0,69.036,55.964,125,125,125c69.036,0,125-55.964,125-125h835" transform="translate(0,137)" style="stroke-dasharray: 2062.75537109375px, 2062.75537109375px;"></path>
            <path class="intro-ring" d="M0,0h835
                  c0,69.036,55.964,125,125,125c69.036,0,125-55.964,125-125h835" transform=" translate(960,0) rotate(180) translate(-960,-133)" style="stroke-dasharray: 2062.75537109375px, 2062.75537109375px;"></path>  
            </svg>
            <h3 class="loading-text">LOADING</h3>
        </div>
    </div>
    <div id="hello" class="full-wh">
      
        <div class="overlay">
            <div class="table-cell">
                <h1 class="intro-text"><span>HELLO</span></h1>
                <p class="intro-text">
                    <span style="color: hsl(340, 100%, 62%);">I'M CİHAD</span><br>
                    <span style="color: hsl(278, 100%, 68%);">I'M A CREATIVE WEB DEVELOPER</span><br>
                    <span style="color: hsl(226, 93%, 66%);padding-bottom: 0;">I STAND ON A SWEET SPOT WHERE</span>
                    <span style="color: hsl(226, 93%, 66%);padding-bottom: 0;"><strong style="color: hsl(226, 83%, 56%);">DESIGN</strong> &amp; <strong style="color: hsl(226, 83%, 56%);">CODE</strong></span>
                    <span style="color: hsl(226, 93%, 66%);">INTERSECTS.</span>
                </p></div>
        </div>
        <div class="full-wh-footer">
                          <a class="btn btn-next" href="#main">Intro<br><i class="icon-arrow-down"></i></a>
              
        </div>
    </div>
    <div id="main" class="full-wh">
    <div class="main-container">
        <div id="container" class="main-pane left-pane"></div><div class="main-pane right-pane">
            <table class="js-file-line-container">
                <tbody>
                    <tr>
                        <td id="LC5" class="blob-code js-file-line">
                        </td>
                    </tr>
                    <tr>
                        <td id="LC6" class="blob-code js-file-line"><span class="pl-s">var</span> d3_geo_clipAntimeridian <span class="pl-k">=</span> d3_geo_clip(</td>
                    </tr>
                    <tr>
                        <td id="LC7" class="blob-code js-file-line">    d3_true,</td>
                    </tr>
                    <tr>
                        <td id="LC8" class="blob-code js-file-line">    d3_geo_clipAntimeridianLine,</td>
                    </tr>
                    <tr>
                        <td id="LC9" class="blob-code js-file-line">    d3_geo_clipAntimeridianInterpolate,</td>
                    </tr>
                    <tr>
                        <td id="LC10" class="blob-code js-file-line">    [<span class="pl-k">-</span>π, <span class="pl-k">-</span>π / <span class="pl-c1">2</span>]);</td>
                    </tr>
                    <tr>
                        <td id="LC11" class="blob-code js-file-line">
                        </td>
                    </tr>
                    <tr>
                        <td id="LC12" class="blob-code js-file-line"><span class="pl-c">// Takes a line and cuts into visible segments. Return values:</span></td>
                    </tr>
                    <tr>
                        <td id="LC17" class="blob-code js-file-line"><span class="pl-st">function</span> <span class="pl-en">d3_geo_clipAntimeridianLine</span>(<span class="pl-vpf">listener</span>) {</td>
                    </tr>
                    <tr>
                        <td id="LC18" class="blob-code js-file-line">  <span class="pl-s">var</span> λ<span class="pl-c1">0</span> <span class="pl-k">=</span> <span class="pl-c1">NaN</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC19" class="blob-code js-file-line">      φ<span class="pl-c1">0</span> <span class="pl-k">=</span> <span class="pl-c1">NaN</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC20" class="blob-code js-file-line">      sλ<span class="pl-c1">0</span> <span class="pl-k">=</span> <span class="pl-c1">NaN</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC21" class="blob-code js-file-line">      clean; <span class="pl-c">// no intersections</span></td>
                    </tr>
                    <tr>
                        <td id="LC22" class="blob-code js-file-line">
                        </td>
                    </tr>
                    <tr>
                        <td id="LC23" class="blob-code js-file-line">  <span class="pl-k">return</span> {</td>
                    </tr>
                    <tr>
                        <td id="LC24" class="blob-code js-file-line">    <span class="pl-en">lineStart</span>: <span class="pl-st">function</span>() {</td>
                    </tr>
                    <tr>
                        <td id="LC25" class="blob-code js-file-line">      listener.lineStart();</td>
                    </tr>
                    <tr>
                        <td id="LC26" class="blob-code js-file-line">      clean <span class="pl-k">=</span> <span class="pl-c1">1</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC27" class="blob-code js-file-line">    },</td>
                    </tr>
                    <tr>
                        <td id="LC28" class="blob-code js-file-line">    <span class="pl-en">point</span>: <span class="pl-st">function</span>(<span class="pl-vpf">λ1</span>, <span class="pl-vpf">φ1</span>) {</td>
                    </tr>
                    <tr>
                        <td id="LC29" class="blob-code js-file-line">      <span class="pl-s">var</span> sλ<span class="pl-c1">1</span> <span class="pl-k">=</span> λ<span class="pl-c1">1</span> <span class="pl-k">&gt;</span> <span class="pl-c1">0</span> <span class="pl-k">?</span> π <span class="pl-k">:</span> <span class="pl-k">-</span>π,</td>
                    </tr>
                    <tr>
                        <td id="LC30" class="blob-code js-file-line">          dλ <span class="pl-k">=</span> <span class="pl-s3">abs</span>(λ<span class="pl-c1">1</span> <span class="pl-k">-</span> λ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC31" class="blob-code js-file-line">      <span class="pl-k">if</span> (<span class="pl-s3">abs</span>(dλ <span class="pl-k">-</span> π) <span class="pl-k">&lt;</span> ε) { <span class="pl-c">// line crosses a pole</span></td>
                    </tr>
                    <tr>
                        <td id="LC32" class="blob-code js-file-line">        listener.point(λ<span class="pl-c1">0</span>, φ<span class="pl-c1">0</span> <span class="pl-k">=</span> (φ<span class="pl-c1">0</span> <span class="pl-k">+</span> φ<span class="pl-c1">1</span>) / <span class="pl-c1">2</span> <span class="pl-k">&gt;</span> <span class="pl-c1">0</span> <span class="pl-k">?</span> halfπ <span class="pl-k">:</span> <span class="pl-k">-</span>halfπ);</td>
                    </tr>
                    <tr>
                        <td id="LC33" class="blob-code js-file-line">        listener.point(sλ<span class="pl-c1">0</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC34" class="blob-code js-file-line">        listener.lineEnd();</td>
                    </tr>
                    <tr>
                        <td id="LC35" class="blob-code js-file-line">        listener.lineStart();</td>
                    </tr>
                    <tr>
                        <td id="LC36" class="blob-code js-file-line">        listener.point(sλ<span class="pl-c1">1</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC37" class="blob-code js-file-line">        listener.point(λ<span class="pl-c1">1</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC38" class="blob-code js-file-line">        clean <span class="pl-k">=</span> <span class="pl-c1">0</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC39" class="blob-code js-file-line">      } <span class="pl-k">else</span> <span class="pl-k">if</span> (sλ<span class="pl-c1">0</span> <span class="pl-k">!==</span> sλ<span class="pl-c1">1</span> <span class="pl-k">&amp;&amp;</span> dλ <span class="pl-k">&gt;=</span> π) { <span class="pl-c">// line crosses antimeridian</span></td>
                    </tr>
                    <tr>
                        <td id="LC40" class="blob-code js-file-line">        <span class="pl-c">// handle degeneracies</span></td>
                    </tr>
                    <tr>
                        <td id="LC41" class="blob-code js-file-line">        <span class="pl-k">if</span> (<span class="pl-s3">abs</span>(λ<span class="pl-c1">0</span> <span class="pl-k">-</span> sλ<span class="pl-c1">0</span>) <span class="pl-k">&lt;</span> ε) λ<span class="pl-c1">0</span> <span class="pl-k">-=</span> sλ<span class="pl-c1">0</span> <span class="pl-k">*</span> ε;</td>
                    </tr>
                    <tr>
                        <td id="LC42" class="blob-code js-file-line">        <span class="pl-k">if</span> (<span class="pl-s3">abs</span>(λ<span class="pl-c1">1</span> <span class="pl-k">-</span> sλ<span class="pl-c1">1</span>) <span class="pl-k">&lt;</span> ε) λ<span class="pl-c1">1</span> <span class="pl-k">-=</span> sλ<span class="pl-c1">1</span> <span class="pl-k">*</span> ε;</td>
                    </tr>
                    <tr>
                        <td id="LC43" class="blob-code js-file-line">        φ<span class="pl-c1">0</span> <span class="pl-k">=</span> d3_geo_clipAntimeridianIntersect(λ<span class="pl-c1">0</span>, φ<span class="pl-c1">0</span>, λ<span class="pl-c1">1</span>, φ<span class="pl-c1">1</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC44" class="blob-code js-file-line">        listener.point(sλ<span class="pl-c1">0</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC45" class="blob-code js-file-line">        listener.lineEnd();</td>
                    </tr>
                    <tr>
                        <td id="LC46" class="blob-code js-file-line">        listener.lineStart();</td>
                    </tr>
                    <tr>
                        <td id="LC47" class="blob-code js-file-line">        listener.point(sλ<span class="pl-c1">1</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC48" class="blob-code js-file-line">        clean <span class="pl-k">=</span> <span class="pl-c1">0</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC49" class="blob-code js-file-line">      }</td>
                    </tr>
                    <tr>
                        <td id="LC50" class="blob-code js-file-line">      listener.point(λ<span class="pl-c1">0</span> <span class="pl-k">=</span> λ<span class="pl-c1">1</span>, φ<span class="pl-c1">0</span> <span class="pl-k">=</span> φ<span class="pl-c1">1</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC51" class="blob-code js-file-line">      sλ<span class="pl-c1">0</span> <span class="pl-k">=</span> sλ<span class="pl-c1">1</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC52" class="blob-code js-file-line">    },</td>
                    </tr>
                    <tr>
                        <td id="LC53" class="blob-code js-file-line">    <span class="pl-en">lineEnd</span>: <span class="pl-st">function</span>() {</td>
                    </tr>
                    <tr>
                        <td id="LC54" class="blob-code js-file-line">      listener.lineEnd();</td>
                    </tr>
                    <tr>
                        <td id="LC55" class="blob-code js-file-line">      λ<span class="pl-c1">0</span> <span class="pl-k">=</span> φ<span class="pl-c1">0</span> <span class="pl-k">=</span> <span class="pl-c1">NaN</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC56" class="blob-code js-file-line">    },</td>
                    </tr>
                    <tr>
                        <td id="LC57" class="blob-code js-file-line">    <span class="pl-c">// if there are intersections, we always rejoin the first and last segments.</span></td>
                    </tr>
                    <tr>
                        <td id="LC58" class="blob-code js-file-line">    <span class="pl-en">clean</span>: <span class="pl-st">function</span>() { <span class="pl-k">return</span> <span class="pl-c1">2</span> <span class="pl-k">-</span> clean; }</td>
                    </tr>
                    <tr>
                        <td id="LC59" class="blob-code js-file-line">  };</td>
                    </tr>
                    <tr>
                        <td id="LC60" class="blob-code js-file-line">}</td>
                    </tr>
                    <tr>
                        <td id="LC61" class="blob-code js-file-line">
                        </td>
                    </tr>
                    <tr>
                        <td id="LC62" class="blob-code js-file-line"><span class="pl-st">function</span> <span class="pl-en">d3_geo_clipAntimeridianIntersect</span>(<span class="pl-vpf">λ0</span>, <span class="pl-vpf">φ0</span>, <span class="pl-vpf">λ1</span>, <span class="pl-vpf">φ1</span>) {</td>
                    </tr>
                    <tr>
                        <td id="LC63" class="blob-code js-file-line">  <span class="pl-s">var</span> cosφ<span class="pl-c1">0</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC64" class="blob-code js-file-line">      cosφ<span class="pl-c1">1</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC65" class="blob-code js-file-line">      sinλ0_λ<span class="pl-c1">1</span> <span class="pl-k">=</span> <span class="pl-s3">Math</span>.<span class="pl-s3">sin</span>(λ<span class="pl-c1">0</span> <span class="pl-k">-</span> λ<span class="pl-c1">1</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC66" class="blob-code js-file-line">  <span class="pl-k">return</span> <span class="pl-s3">abs</span>(sinλ0_λ<span class="pl-c1">1</span>) <span class="pl-k">&gt;</span> ε</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="full-wh-footer" style="display:none;">
        <a class="btn btn-next" href="#skills">Skills<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
<div id="skills" class="full-wh">
    <div class="menu skills-info">
        <div class="editor">
        </div>
    </div>
    <div class="skills-canvas">
    </div>
    <div class="full-wh-footer">
        <a class="btn btn-next" href="#works">Works<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
<div id="works" class="full-wh">
    <div class="background"></div>
    <div class="full">
        <div class="card"></div>
    </div>
    <div class="works-info menu menu-right">
        <div class="works-nav menu-nav">
            <a href="#works-prev" class="icon-arrow-left"></a>
            <div class="title works-title"> Project 1 </div>
            <a href="#works-next" class="icon-arrow-right"> </a>
        </div>
        <div class="menu-body">
            <h1> About </h1>
            <p id="works-description"> Lorem ipsum dolor sit amet </p>
            <h1> Project Date </h1>
            <p id="works-date"></p>
            <h1> Coffee Consumed</h1>
            <p id="works-coffee"> <span class="icon-coffee"> </span> <span class="icon-coffee"> </span> <span class="icon-coffee"> </span> </p>
            <p> <span id="works-litres">123</span> litres </p>
            <h1> Tags </h1>
            <ul id="works-tags" class="menu-tags">
                <li> jQuery </li>
                <li> Angular.js </li>
            </ul>
        </div>
    </div>
    <div class="full-wh-footer">
        <a class="btn btn-next" href="#lab">Lab<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
<div id="lab" class="full-wh">
    <div class="menu menu-right">
        <div class="lab-nav menu-nav">
            <a href="#lab-prev" class="icon-arrow-left"></a>
            <div class="title lab-title">  </div>
            <a href="#lab-next" class="icon-arrow-right"> </a>
        </div>
        <div class="menu-body">
            <h1> About </h1>
            <p id="lab-description"> Lorem ipsum dolor sit amet </p>
            <h1> Difficulty </h1>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="110.776px" height="21.5px" viewBox="0 0 110.776 21.5" enable-background="new 0 0 110.776 21.5" xml:space="preserve" class="menu-difficulty">
            <g>
            <polygon class="star" points="55.556,0.29 58.405,6.063 64.776,6.989 60.166,11.483 61.254,17.829 55.556,14.833 49.857,17.829
                     50.945,11.483 46.335,6.989 52.707,6.063     "></polygon>
            <polygon class="star" points="78.556,0.29 81.405,6.063 87.776,6.989 83.166,11.483 84.254,17.829 78.556,14.833 72.857,17.829
                     73.945,11.483 69.335,6.989 75.707,6.063     "></polygon>
            <polygon class="star" points="101.556,0.29 104.405,6.063 110.776,6.989 106.166,11.483 107.254,17.829 101.556,14.833
                     95.857,17.829 96.945,11.483 92.335,6.989 98.707,6.063     "></polygon>
            <polygon class="star" points="32.556,0.29 35.405,6.063 41.776,6.989 37.166,11.483 38.254,17.829 32.556,14.833 26.857,17.829
                     27.945,11.483 23.335,6.989 29.707,6.063     "></polygon>
            <polygon class="star" points="9.556,0.29 12.405,6.063 18.776,6.989 14.166,11.483 15.254,17.829 9.556,14.833 3.857,17.829
                     4.945,11.483 0.335,6.989 6.707,6.063     "></polygon>
            </g>
            <g class="overlay" style="display: block; opacity: 1;">
            <defs>
            <rect id="lab-difficulty-mask" width="78.4" height="18"></rect>
            </defs>
            <clipPath id="SVGID_2_">
                <use xlink:href="#lab-difficulty-mask" overflow="visible"></use>
            </clipPath>
            <g clip-path="url(#SVGID_2_)">
            <polygon class="star" points="55.556,0.29 58.405,6.063 64.776,6.989 60.166,11.483 61.254,17.829 55.556,14.833 49.857,17.829
                     50.945,11.483 46.335,6.989 52.707,6.063         "></polygon>
            <polygon class="star" points="78.556,0.29 81.405,6.063 87.776,6.989 83.166,11.483 84.254,17.829 78.556,14.833 72.857,17.829
                     73.945,11.483 69.335,6.989 75.707,6.063         "></polygon>
            <polygon class="star" points="101.556,0.29 104.405,6.063 110.776,6.989 106.166,11.483 107.254,17.829 101.556,14.833
                     95.857,17.829 96.945,11.483 92.335,6.989 98.707,6.063         "></polygon>
            <polygon class="star" points="32.556,0.29 35.405,6.063 41.776,6.989 37.166,11.483 38.254,17.829 32.556,14.833 26.857,17.829
                     27.945,11.483 23.335,6.989 29.707,6.063         "></polygon>
            <polygon class="star" points="9.556,0.29 12.405,6.063 18.776,6.989 14.166,11.483 15.254,17.829 9.556,14.833 3.857,17.829
                     4.945,11.483 0.335,6.989 6.707,6.063         "></polygon>
            </g>
            </g>
            </svg>
            <h1> Tags </h1>
            <ul id="lab-tags" class="menu-tags">
                <li> jQuery </li>
                <li> Angular.js </li>
                <li> Rating </li>
                <li> Quantum </li>
            </ul>
            <h1> References </h1>
            <ul id="lab-reflist" class="menu-reflist">
                <li> <span class="icon-image-outline"> </span> <a href="http://asdfa.com" target="_blank"> #1 </a> </li>
                <li> <span class="icon-code-outline"> </span> <a href="http://asdfa.com" target="_blank"> #2 </a> </li>
                <li> <span class="icon-document-text"> </span> <a href="http://asdfa.com" target="_blank"> #3 </a> </li>
                <li> <span class="icon-film"> </span> <a href="http://asdfa.com" target="_blank"> #4 </a> </li>
            </ul>
        </div>
    </div>
<!--             <iframe frameborder="0" src=""> </iframe> -->
    <img id="lab-background"/>
    <div id="lab-foreground">
        <img id="lab-foreground-img" src=""/>
        <div class="table-cell">
            <a href="#" target="_blank"> Launch Experiment </a>
        </div>
    </div>
    <div class="full-wh-footer">
        <a class="btn btn-next" href="#about">About Me<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
<div id="about" class="full-wh">
    <div id="svg-container"></div>
    <svg id="love-hate-chart"> </svg>
    <div class="full-wh-footer">
        <a class="btn btn-next" href="#contact">Contact<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
    <div id="contact" class="full-wh">
        <div id="contact-svg-container"></div>
        <div class="full-wh-footer">
            <h3> This portfolio is rendered by a single javascript file. Download it from <a id="contact-cv" href="#" target="_blank">this link</a>. </h3>
        </div>
    </div>
  
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>
Also, if you finish that animation, there is a menu at the top that let's you learn more about the author. Maybe that would help some.
 
Last edited:
  • #3
My guess is the three javascript libraries referenced at the top of the page are the culprits:

JavaScript:
        <script type="text/javascript" src="js/lib/PxLoader.min.js"></script>
        <script type="text/javascript" src="js/lib/pxloader-images.min.js"></script>
        <script type="text/javascript" src="js/lib/lazyload.js"></script>

http://thinkpixellab.com/pxloader/
 
  • #4
berkeman said:
I right-clicked on it and selected View Source, and got the following. Does it help?
Code:
<!DOCTYPE html>
<html class="no-scroll">
    <head>
        <title>Portfolio of Cihad Turhan - Web Designer & Developer</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- SEO -->
        <meta name="author" content="Cihad Turhan">
        <meta name="description" content="Portfolio of Cihad Turhan - Web Designer & Developer">
        <meta name="keywords" content="cihad, turhan, cihad turhan, web design, web development, javascript, WebGL, D3, devigner, creative technologist">
        <link rel="canonical" href="http://www.cihadturhan.com/index.php">
        <!-- Social: Twitter -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@cihadturhan">
        <meta name="twitter:creator" content="@cihadturhan">
        <meta name="twitter:title" content="Portfolio of Cihad Turhan - Web Designer & Developer">
        <meta name="twitter:description" content="Interactive portfolio of Cihad Turhan which includes WebGL, D3, CSS3 and other visual demos">
        <meta name="twitter:image:src" content="http://www.cihadturhan.com/img/site-intro.png">
        <!-- Social: Facebook / Open Graph -->
        <meta property="og:url" content="http://www.cihadturhan.com/index.php">
        <meta property="og:type" content="article">
        <meta property="og:title" content="Portfolio of Cihad Turhan - Web Designer & Developer">
        <meta property="og:image" content="http://www.cihadturhan.com/img/site-intro.png">
        <meta property="og:description" content="Interactive portfolio of Cihad Turhan which includes WebGL, D3, CSS3 and other visual demos">
        <meta property="og:site_name" content="Portfolio of Cihad Turhan">
        <meta property="article:author" content="https://www.facebook.com/cihad.turhan">
        <meta property="article:publisher" content="https://www.facebook.com/cihad.turhan">
        <link rel="author" href="https://plus.google.com/+cihadturhan/">
        <link rel="publisher" href="https://plus.google.com/+cihadturhan/">
        <meta itemprop="name" content="Portfolio of Cihad Turhan - Web Designer & Developer">
        <meta itemprop="description" content="Interactive portfolio of Cihad Turhan which includes WebGL, D3, CSS3 and other visual demos.">
        <meta itemprop="image" content="http://www.cihadturhan.com/img/site-intro.png">
        <link rel="stylesheet" href="css/intro.css"/>
        <script>
            var _jsDirs = {"plugin":["js\/dist\/plugin.min.js?v=0.9.6"],"all":["js\/dist\/all.min.js?v=0.9.6"]};
            var _cssDirs = {"all":["css\/dist\/all.min.css?v=0.9.6"]};
        </script>
        <script type="text/javascript" src="js/lib/PxLoader.min.js"></script>
        <script type="text/javascript" src="js/lib/pxloader-images.min.js"></script>
        <script type="text/javascript" src="js/lib/lazyload.js"></script>
        <script>
        (function (i, s, o, g, r, a, m) {
              i['GoogleAnalyticsObject'] = r;
              i[r] = i[r] || function () {
                  (i[r].q = i[r].q || []).push(arguments)
              }, i[r].l = 1 * new Date();
              a = s.createElement(o),
                      m = s.getElementsByTagName(o)[0];
              a.async = 1;
              a.src = g;
              m.parentNode.insertBefore(a, m)
          })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
          ga('create', 'UA-61108250-1', 'auto');
          ga('send', 'pageview');
        </script>
    </head>
    <body>
        <header style="display:none;">
            <div id="logo-container">
                <img id="logo" src="img/logo/logo.svg"> </img>
            </div>
            <!-- Yeah, it's kind of strange to put NAV inside HEADER but they say it's valid. ¯\_(ツ)_/¯
                    http://stackoverflow.com/questions/4870955/in-html5-should-the-main-navigation-be-inside-or-outside-the-header-element
            -->
                        <nav>
                <ul>
                    <li><a href="#hello" class="active"> HELLO </a></li><li><a href="#main" class="active"> INTRO </a></li><li> <a href="#skills"> SKILLS </a></li><li> <a href="#works"> WORKS </a></li><li> <a href="#lab"> LAB </a></li><li> <a href="#about"> ABOUT </a></li><li> <a href="#contact"> CONTACT </a></li>
                </ul>
            </nav>
            <nav id="fake-nav">
                <ul>
                    <li><a href="#hello" class="active"> HELLO </a></li><li><a href="#main" class="active"> INTRO </a></li><li> <a href="#skills"> SKILLS </a></li><li> <a href="#works"> WORKS </a></li><li> <a href="#lab"> LAB </a></li><li> <a href="#about"> ABOUT </a></li><li> <a href="#contact"> CONTACT </a></li>
                </ul>
            </nav>
                    </header>
        <div id="intro" class="full-wh" >
            <svg xmlns="http://www.w3.org/2000/svg" id="goo-svg" version="1.1" width="800">
            <defs>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"></feGaussianBlur>
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 12 -6" result="goo"></feColorMatrix>
                <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
            </filter>
            </defs>
            </svg>
            <div id="loading-spinner-container">
                <div class="autocenter">
                    <svg id="loading-circle-svg" width="200" height="200">
                    <circle id="loading-circle" cx="0" cy="0" r="70" transform="translate(100 100) rotate(-90)"></circle>
                    </svg>
                    <div class="middle-wrapper">
                        <div class="middle"></div>
                    </div>
                    <div class="particle-wrapper">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper deg-60">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper deg-120">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper  deg-180">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper  deg-240">
                        <div class="particle even"> </div>
                    </div>
                    <div class="particle-wrapper  deg-300">
                        <div class="particle even"> </div>
                    </div>
                    <div class="pie first"></div>
                    <div class="pie second"></div>
                    <div class="pie mask"></div>
                </div>
            </div>
            <svg version="1.1" id="loading-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px" height="270px" viewBox="0 0 1920 270" enable-background="new 0 0 1920 270" xml:space="preserve">
            <path class="intro-ring" d="M0,0h835
                  c0,69.036,55.964,125,125,125c69.036,0,125-55.964,125-125h835" transform="translate(0,137)" style="stroke-dasharray: 2062.75537109375px, 2062.75537109375px;"></path>
            <path class="intro-ring" d="M0,0h835
                  c0,69.036,55.964,125,125,125c69.036,0,125-55.964,125-125h835" transform=" translate(960,0) rotate(180) translate(-960,-133)" style="stroke-dasharray: 2062.75537109375px, 2062.75537109375px;"></path>  
            </svg>
            <h3 class="loading-text">LOADING</h3>
        </div>
    </div>
    <div id="hello" class="full-wh">
      
        <div class="overlay">
            <div class="table-cell">
                <h1 class="intro-text"><span>HELLO</span></h1>
                <p class="intro-text">
                    <span style="color: hsl(340, 100%, 62%);">I'M CİHAD</span><br>
                    <span style="color: hsl(278, 100%, 68%);">I'M A CREATIVE WEB DEVELOPER</span><br>
                    <span style="color: hsl(226, 93%, 66%);padding-bottom: 0;">I STAND ON A SWEET SPOT WHERE</span>
                    <span style="color: hsl(226, 93%, 66%);padding-bottom: 0;"><strong style="color: hsl(226, 83%, 56%);">DESIGN</strong> &amp; <strong style="color: hsl(226, 83%, 56%);">CODE</strong></span>
                    <span style="color: hsl(226, 93%, 66%);">INTERSECTS.</span>
                </p></div>
        </div>
        <div class="full-wh-footer">
                          <a class="btn btn-next" href="#main">Intro<br><i class="icon-arrow-down"></i></a>
              
        </div>
    </div>
    <div id="main" class="full-wh">
    <div class="main-container">
        <div id="container" class="main-pane left-pane"></div><div class="main-pane right-pane">
            <table class="js-file-line-container">
                <tbody>
                    <tr>
                        <td id="LC5" class="blob-code js-file-line">
                        </td>
                    </tr>
                    <tr>
                        <td id="LC6" class="blob-code js-file-line"><span class="pl-s">var</span> d3_geo_clipAntimeridian <span class="pl-k">=</span> d3_geo_clip(</td>
                    </tr>
                    <tr>
                        <td id="LC7" class="blob-code js-file-line">    d3_true,</td>
                    </tr>
                    <tr>
                        <td id="LC8" class="blob-code js-file-line">    d3_geo_clipAntimeridianLine,</td>
                    </tr>
                    <tr>
                        <td id="LC9" class="blob-code js-file-line">    d3_geo_clipAntimeridianInterpolate,</td>
                    </tr>
                    <tr>
                        <td id="LC10" class="blob-code js-file-line">    [<span class="pl-k">-</span>π, <span class="pl-k">-</span>π / <span class="pl-c1">2</span>]);</td>
                    </tr>
                    <tr>
                        <td id="LC11" class="blob-code js-file-line">
                        </td>
                    </tr>
                    <tr>
                        <td id="LC12" class="blob-code js-file-line"><span class="pl-c">// Takes a line and cuts into visible segments. Return values:</span></td>
                    </tr>
                    <tr>
                        <td id="LC17" class="blob-code js-file-line"><span class="pl-st">function</span> <span class="pl-en">d3_geo_clipAntimeridianLine</span>(<span class="pl-vpf">listener</span>) {</td>
                    </tr>
                    <tr>
                        <td id="LC18" class="blob-code js-file-line">  <span class="pl-s">var</span> λ<span class="pl-c1">0</span> <span class="pl-k">=</span> <span class="pl-c1">NaN</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC19" class="blob-code js-file-line">      φ<span class="pl-c1">0</span> <span class="pl-k">=</span> <span class="pl-c1">NaN</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC20" class="blob-code js-file-line">      sλ<span class="pl-c1">0</span> <span class="pl-k">=</span> <span class="pl-c1">NaN</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC21" class="blob-code js-file-line">      clean; <span class="pl-c">// no intersections</span></td>
                    </tr>
                    <tr>
                        <td id="LC22" class="blob-code js-file-line">
                        </td>
                    </tr>
                    <tr>
                        <td id="LC23" class="blob-code js-file-line">  <span class="pl-k">return</span> {</td>
                    </tr>
                    <tr>
                        <td id="LC24" class="blob-code js-file-line">    <span class="pl-en">lineStart</span>: <span class="pl-st">function</span>() {</td>
                    </tr>
                    <tr>
                        <td id="LC25" class="blob-code js-file-line">      listener.lineStart();</td>
                    </tr>
                    <tr>
                        <td id="LC26" class="blob-code js-file-line">      clean <span class="pl-k">=</span> <span class="pl-c1">1</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC27" class="blob-code js-file-line">    },</td>
                    </tr>
                    <tr>
                        <td id="LC28" class="blob-code js-file-line">    <span class="pl-en">point</span>: <span class="pl-st">function</span>(<span class="pl-vpf">λ1</span>, <span class="pl-vpf">φ1</span>) {</td>
                    </tr>
                    <tr>
                        <td id="LC29" class="blob-code js-file-line">      <span class="pl-s">var</span> sλ<span class="pl-c1">1</span> <span class="pl-k">=</span> λ<span class="pl-c1">1</span> <span class="pl-k">&gt;</span> <span class="pl-c1">0</span> <span class="pl-k">?</span> π <span class="pl-k">:</span> <span class="pl-k">-</span>π,</td>
                    </tr>
                    <tr>
                        <td id="LC30" class="blob-code js-file-line">          dλ <span class="pl-k">=</span> <span class="pl-s3">abs</span>(λ<span class="pl-c1">1</span> <span class="pl-k">-</span> λ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC31" class="blob-code js-file-line">      <span class="pl-k">if</span> (<span class="pl-s3">abs</span>(dλ <span class="pl-k">-</span> π) <span class="pl-k">&lt;</span> ε) { <span class="pl-c">// line crosses a pole</span></td>
                    </tr>
                    <tr>
                        <td id="LC32" class="blob-code js-file-line">        listener.point(λ<span class="pl-c1">0</span>, φ<span class="pl-c1">0</span> <span class="pl-k">=</span> (φ<span class="pl-c1">0</span> <span class="pl-k">+</span> φ<span class="pl-c1">1</span>) / <span class="pl-c1">2</span> <span class="pl-k">&gt;</span> <span class="pl-c1">0</span> <span class="pl-k">?</span> halfπ <span class="pl-k">:</span> <span class="pl-k">-</span>halfπ);</td>
                    </tr>
                    <tr>
                        <td id="LC33" class="blob-code js-file-line">        listener.point(sλ<span class="pl-c1">0</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC34" class="blob-code js-file-line">        listener.lineEnd();</td>
                    </tr>
                    <tr>
                        <td id="LC35" class="blob-code js-file-line">        listener.lineStart();</td>
                    </tr>
                    <tr>
                        <td id="LC36" class="blob-code js-file-line">        listener.point(sλ<span class="pl-c1">1</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC37" class="blob-code js-file-line">        listener.point(λ<span class="pl-c1">1</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC38" class="blob-code js-file-line">        clean <span class="pl-k">=</span> <span class="pl-c1">0</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC39" class="blob-code js-file-line">      } <span class="pl-k">else</span> <span class="pl-k">if</span> (sλ<span class="pl-c1">0</span> <span class="pl-k">!==</span> sλ<span class="pl-c1">1</span> <span class="pl-k">&amp;&amp;</span> dλ <span class="pl-k">&gt;=</span> π) { <span class="pl-c">// line crosses antimeridian</span></td>
                    </tr>
                    <tr>
                        <td id="LC40" class="blob-code js-file-line">        <span class="pl-c">// handle degeneracies</span></td>
                    </tr>
                    <tr>
                        <td id="LC41" class="blob-code js-file-line">        <span class="pl-k">if</span> (<span class="pl-s3">abs</span>(λ<span class="pl-c1">0</span> <span class="pl-k">-</span> sλ<span class="pl-c1">0</span>) <span class="pl-k">&lt;</span> ε) λ<span class="pl-c1">0</span> <span class="pl-k">-=</span> sλ<span class="pl-c1">0</span> <span class="pl-k">*</span> ε;</td>
                    </tr>
                    <tr>
                        <td id="LC42" class="blob-code js-file-line">        <span class="pl-k">if</span> (<span class="pl-s3">abs</span>(λ<span class="pl-c1">1</span> <span class="pl-k">-</span> sλ<span class="pl-c1">1</span>) <span class="pl-k">&lt;</span> ε) λ<span class="pl-c1">1</span> <span class="pl-k">-=</span> sλ<span class="pl-c1">1</span> <span class="pl-k">*</span> ε;</td>
                    </tr>
                    <tr>
                        <td id="LC43" class="blob-code js-file-line">        φ<span class="pl-c1">0</span> <span class="pl-k">=</span> d3_geo_clipAntimeridianIntersect(λ<span class="pl-c1">0</span>, φ<span class="pl-c1">0</span>, λ<span class="pl-c1">1</span>, φ<span class="pl-c1">1</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC44" class="blob-code js-file-line">        listener.point(sλ<span class="pl-c1">0</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC45" class="blob-code js-file-line">        listener.lineEnd();</td>
                    </tr>
                    <tr>
                        <td id="LC46" class="blob-code js-file-line">        listener.lineStart();</td>
                    </tr>
                    <tr>
                        <td id="LC47" class="blob-code js-file-line">        listener.point(sλ<span class="pl-c1">1</span>, φ<span class="pl-c1">0</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC48" class="blob-code js-file-line">        clean <span class="pl-k">=</span> <span class="pl-c1">0</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC49" class="blob-code js-file-line">      }</td>
                    </tr>
                    <tr>
                        <td id="LC50" class="blob-code js-file-line">      listener.point(λ<span class="pl-c1">0</span> <span class="pl-k">=</span> λ<span class="pl-c1">1</span>, φ<span class="pl-c1">0</span> <span class="pl-k">=</span> φ<span class="pl-c1">1</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC51" class="blob-code js-file-line">      sλ<span class="pl-c1">0</span> <span class="pl-k">=</span> sλ<span class="pl-c1">1</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC52" class="blob-code js-file-line">    },</td>
                    </tr>
                    <tr>
                        <td id="LC53" class="blob-code js-file-line">    <span class="pl-en">lineEnd</span>: <span class="pl-st">function</span>() {</td>
                    </tr>
                    <tr>
                        <td id="LC54" class="blob-code js-file-line">      listener.lineEnd();</td>
                    </tr>
                    <tr>
                        <td id="LC55" class="blob-code js-file-line">      λ<span class="pl-c1">0</span> <span class="pl-k">=</span> φ<span class="pl-c1">0</span> <span class="pl-k">=</span> <span class="pl-c1">NaN</span>;</td>
                    </tr>
                    <tr>
                        <td id="LC56" class="blob-code js-file-line">    },</td>
                    </tr>
                    <tr>
                        <td id="LC57" class="blob-code js-file-line">    <span class="pl-c">// if there are intersections, we always rejoin the first and last segments.</span></td>
                    </tr>
                    <tr>
                        <td id="LC58" class="blob-code js-file-line">    <span class="pl-en">clean</span>: <span class="pl-st">function</span>() { <span class="pl-k">return</span> <span class="pl-c1">2</span> <span class="pl-k">-</span> clean; }</td>
                    </tr>
                    <tr>
                        <td id="LC59" class="blob-code js-file-line">  };</td>
                    </tr>
                    <tr>
                        <td id="LC60" class="blob-code js-file-line">}</td>
                    </tr>
                    <tr>
                        <td id="LC61" class="blob-code js-file-line">
                        </td>
                    </tr>
                    <tr>
                        <td id="LC62" class="blob-code js-file-line"><span class="pl-st">function</span> <span class="pl-en">d3_geo_clipAntimeridianIntersect</span>(<span class="pl-vpf">λ0</span>, <span class="pl-vpf">φ0</span>, <span class="pl-vpf">λ1</span>, <span class="pl-vpf">φ1</span>) {</td>
                    </tr>
                    <tr>
                        <td id="LC63" class="blob-code js-file-line">  <span class="pl-s">var</span> cosφ<span class="pl-c1">0</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC64" class="blob-code js-file-line">      cosφ<span class="pl-c1">1</span>,</td>
                    </tr>
                    <tr>
                        <td id="LC65" class="blob-code js-file-line">      sinλ0_λ<span class="pl-c1">1</span> <span class="pl-k">=</span> <span class="pl-s3">Math</span>.<span class="pl-s3">sin</span>(λ<span class="pl-c1">0</span> <span class="pl-k">-</span> λ<span class="pl-c1">1</span>);</td>
                    </tr>
                    <tr>
                        <td id="LC66" class="blob-code js-file-line">  <span class="pl-k">return</span> <span class="pl-s3">abs</span>(sinλ0_λ<span class="pl-c1">1</span>) <span class="pl-k">&gt;</span> ε</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="full-wh-footer" style="display:none;">
        <a class="btn btn-next" href="#skills">Skills<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
<div id="skills" class="full-wh">
    <div class="menu skills-info">
        <div class="editor">
        </div>
    </div>
    <div class="skills-canvas">
    </div>
    <div class="full-wh-footer">
        <a class="btn btn-next" href="#works">Works<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
<div id="works" class="full-wh">
    <div class="background"></div>
    <div class="full">
        <div class="card"></div>
    </div>
    <div class="works-info menu menu-right">
        <div class="works-nav menu-nav">
            <a href="#works-prev" class="icon-arrow-left"></a>
            <div class="title works-title"> Project 1 </div>
            <a href="#works-next" class="icon-arrow-right"> </a>
        </div>
        <div class="menu-body">
            <h1> About </h1>
            <p id="works-description"> Lorem ipsum dolor sit amet </p>
            <h1> Project Date </h1>
            <p id="works-date"></p>
            <h1> Coffee Consumed</h1>
            <p id="works-coffee"> <span class="icon-coffee"> </span> <span class="icon-coffee"> </span> <span class="icon-coffee"> </span> </p>
            <p> <span id="works-litres">123</span> litres </p>
            <h1> Tags </h1>
            <ul id="works-tags" class="menu-tags">
                <li> jQuery </li>
                <li> Angular.js </li>
            </ul>
        </div>
    </div>
    <div class="full-wh-footer">
        <a class="btn btn-next" href="#lab">Lab<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
<div id="lab" class="full-wh">
    <div class="menu menu-right">
        <div class="lab-nav menu-nav">
            <a href="#lab-prev" class="icon-arrow-left"></a>
            <div class="title lab-title">  </div>
            <a href="#lab-next" class="icon-arrow-right"> </a>
        </div>
        <div class="menu-body">
            <h1> About </h1>
            <p id="lab-description"> Lorem ipsum dolor sit amet </p>
            <h1> Difficulty </h1>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="110.776px" height="21.5px" viewBox="0 0 110.776 21.5" enable-background="new 0 0 110.776 21.5" xml:space="preserve" class="menu-difficulty">
            <g>
            <polygon class="star" points="55.556,0.29 58.405,6.063 64.776,6.989 60.166,11.483 61.254,17.829 55.556,14.833 49.857,17.829
                     50.945,11.483 46.335,6.989 52.707,6.063     "></polygon>
            <polygon class="star" points="78.556,0.29 81.405,6.063 87.776,6.989 83.166,11.483 84.254,17.829 78.556,14.833 72.857,17.829
                     73.945,11.483 69.335,6.989 75.707,6.063     "></polygon>
            <polygon class="star" points="101.556,0.29 104.405,6.063 110.776,6.989 106.166,11.483 107.254,17.829 101.556,14.833
                     95.857,17.829 96.945,11.483 92.335,6.989 98.707,6.063     "></polygon>
            <polygon class="star" points="32.556,0.29 35.405,6.063 41.776,6.989 37.166,11.483 38.254,17.829 32.556,14.833 26.857,17.829
                     27.945,11.483 23.335,6.989 29.707,6.063     "></polygon>
            <polygon class="star" points="9.556,0.29 12.405,6.063 18.776,6.989 14.166,11.483 15.254,17.829 9.556,14.833 3.857,17.829
                     4.945,11.483 0.335,6.989 6.707,6.063     "></polygon>
            </g>
            <g class="overlay" style="display: block; opacity: 1;">
            <defs>
            <rect id="lab-difficulty-mask" width="78.4" height="18"></rect>
            </defs>
            <clipPath id="SVGID_2_">
                <use xlink:href="#lab-difficulty-mask" overflow="visible"></use>
            </clipPath>
            <g clip-path="url(#SVGID_2_)">
            <polygon class="star" points="55.556,0.29 58.405,6.063 64.776,6.989 60.166,11.483 61.254,17.829 55.556,14.833 49.857,17.829
                     50.945,11.483 46.335,6.989 52.707,6.063         "></polygon>
            <polygon class="star" points="78.556,0.29 81.405,6.063 87.776,6.989 83.166,11.483 84.254,17.829 78.556,14.833 72.857,17.829
                     73.945,11.483 69.335,6.989 75.707,6.063         "></polygon>
            <polygon class="star" points="101.556,0.29 104.405,6.063 110.776,6.989 106.166,11.483 107.254,17.829 101.556,14.833
                     95.857,17.829 96.945,11.483 92.335,6.989 98.707,6.063         "></polygon>
            <polygon class="star" points="32.556,0.29 35.405,6.063 41.776,6.989 37.166,11.483 38.254,17.829 32.556,14.833 26.857,17.829
                     27.945,11.483 23.335,6.989 29.707,6.063         "></polygon>
            <polygon class="star" points="9.556,0.29 12.405,6.063 18.776,6.989 14.166,11.483 15.254,17.829 9.556,14.833 3.857,17.829
                     4.945,11.483 0.335,6.989 6.707,6.063         "></polygon>
            </g>
            </g>
            </svg>
            <h1> Tags </h1>
            <ul id="lab-tags" class="menu-tags">
                <li> jQuery </li>
                <li> Angular.js </li>
                <li> Rating </li>
                <li> Quantum </li>
            </ul>
            <h1> References </h1>
            <ul id="lab-reflist" class="menu-reflist">
                <li> <span class="icon-image-outline"> </span> <a href="http://asdfa.com" target="_blank"> #1 </a> </li>
                <li> <span class="icon-code-outline"> </span> <a href="http://asdfa.com" target="_blank"> #2 </a> </li>
                <li> <span class="icon-document-text"> </span> <a href="http://asdfa.com" target="_blank"> #3 </a> </li>
                <li> <span class="icon-film"> </span> <a href="http://asdfa.com" target="_blank"> #4 </a> </li>
            </ul>
        </div>
    </div>
<!--             <iframe frameborder="0" src=""> </iframe> -->
    <img id="lab-background"/>
    <div id="lab-foreground">
        <img id="lab-foreground-img" src=""/>
        <div class="table-cell">
            <a href="#" target="_blank"> Launch Experiment </a>
        </div>
    </div>
    <div class="full-wh-footer">
        <a class="btn btn-next" href="#about">About Me<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
<div id="about" class="full-wh">
    <div id="svg-container"></div>
    <svg id="love-hate-chart"> </svg>
    <div class="full-wh-footer">
        <a class="btn btn-next" href="#contact">Contact<br><i class="icon-arrow-down"></i></a>
    </div>
</div>
    <div id="contact" class="full-wh">
        <div id="contact-svg-container"></div>
        <div class="full-wh-footer">
            <h3> This portfolio is rendered by a single javascript file. Download it from <a id="contact-cv" href="#" target="_blank">this link</a>. </h3>
        </div>
    </div>
  
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>
Also, if you finish that animation, there is a menu at the top that let's you learn more about the author. Maybe that would help some.

Are you saying this was done using html alone?

The About section is about the developer, not how the website was developed. There is a hint at the end that the website was rendered by a single javaScript file, and provided the link, but not sure if JavaScript alone can be used to build websites like this.
 
  • #5
jedishrfu said:
My guess is the three javascript libraries referenced at the top of the page are the culprits:

JavaScript:
        <script type="text/javascript" src="js/lib/PxLoader.min.js"></script>
        <script type="text/javascript" src="js/lib/pxloader-images.min.js"></script>
        <script type="text/javascript" src="js/lib/lazyload.js"></script>

http://thinkpixellab.com/pxloader/

So, JavaScript is what used to build this website? I just realized that the website lacks any text content, and everything is in graphs/animation. Maybe that is why JavaScript was used?
 
  • #6
Its a combination of technologies javascript+html5+css+svg ...

The best design strategy is to think of graceful degradation which means your website should render using html then using css then using javascript as a last resort in order for older browsers to still see your stuff although with less function than the power users with the latest browsers.
 
  • Like
Likes EngWiPy
  • #7
Usually what do I need to learn to build a humble/modest portfolio website? Are all what you mentioned essentials?
 
  • #9
berkeman said:
I right-clicked on it and selected View Source, and got the following. Does it help?
That will only show you what the client gets, which will certainly be only html and javascript. HTML is what's rendered in the browser and the javascript is what handles anything dynamic. The browser isn't capable of doing much else (without plugins like Flash.)

Now as for where that html5 comes from? PHP. 99% chance that it's being generated by PHP, almost everything coming from webservers is.

Look at PhysicsForums. When you request a page and inspect it, you'll get a hundred lines or so of HTML and Javascript. Behind the scenes on the server though, there is probably about a million lines of PHP that does all of the logic and talking to the database.
 
  • Like
Likes jedishrfu
  • #10
EngWiPy said:
So, JavaScript is what used to build this website?
Well, what is says is "active portfolio of Cihad Turhan which includes WebGL, D3, CSS3 and other visual demos" so yeah, it doesn't look like a specific web-page design tool was used.
 
  • #11
newjerseyrunner said:
Now as for where that html5 comes from? PHP. 99% chance that it's being generated by PHP, almost everything coming from webservers is.

There are other technologies from Enterprise Java to Ruby on Rails to the MEAN stack of MongoDB+Express+angular+NodeJS that are used on websites so its hard to say whether its PHP that's doing the server work. If you count this using XenForo websites and related PHP tooled products then it may well be true.

One comment I saw on the following reference was that as websites become bigtime players on the internet they invariably switch to java on the backend.

https://stackify.com/popular-programming-languages-2018/
 
  • Like
Likes QuantumQuest and BvU
  • #12
jedishrfu said:
One comment I saw on the following reference was that as websites become bigtime players on the internet they invariably switch to java on the backend.

https://stackify.com/popular-programming-languages-2018/
Interesting. I haven’t ever done that, I know lots of webservers are actually heading towards C++ for performance, but they still write in PHP and use HipHop for the conversion. Pretty sure it also works for Java.
 
  • Like
Likes jedishrfu
  • #14
Wow is it really? It’s been a few years I guess.
 

What tools/languages are used to produce this ....

As a scientist, I am often asked about the tools and languages used to produce various scientific products and resources. Here are the five most frequently asked questions and their answers:

1. What tools are used to produce scientific data?

There are various tools used to produce scientific data, depending on the type of data being collected. Some common tools include microscopes, spectrometers, chromatographs, and computer software for data analysis.

2. What programming languages are used for scientific computing?

Some popular programming languages used for scientific computing include Python, R, MATLAB, and C++. These languages are commonly used for data analysis, visualization, and modeling in various scientific fields.

3. What tools are used to produce scientific publications?

The main tool used to produce scientific publications is a word processing software, such as Microsoft Word or LaTeX. Other tools that may be used include reference management software, graphics software for creating figures and diagrams, and statistical analysis software.

4. What tools are used to produce scientific experiments?

The tools used for scientific experiments depend on the type of experiment being conducted. Some common tools include pipettes, centrifuges, incubators, and various lab equipment for measuring and analyzing samples.

5. What programming languages are used for data analysis in scientific research?

In addition to the languages mentioned in question 2, other popular languages for data analysis in scientific research include SAS, Stata, and SPSS. These languages are commonly used in fields such as statistics, epidemiology, and social sciences.

Similar threads

  • Programming and Computer Science
Replies
7
Views
551
  • Programming and Computer Science
Replies
4
Views
529
  • Programming and Computer Science
Replies
22
Views
2K
  • Programming and Computer Science
Replies
15
Views
1K
Replies
65
Views
3K
  • Programming and Computer Science
2
Replies
65
Views
2K
  • Programming and Computer Science
Replies
8
Views
832
  • Programming and Computer Science
Replies
2
Views
990
  • Programming and Computer Science
12
Replies
397
Views
13K
  • Programming and Computer Science
Replies
8
Views
1K
Back
Top