Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

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

  1. Jun 13, 2018 #1
    What tools/programming languages are used to produce this portfolio website?
     
  2. jcsd
  3. Jun 13, 2018 #2

    berkeman

    User Avatar

    Staff: Mentor

    I right-clicked on it and selected View Source, and got the following. Does it help?
    Code (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><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>(<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(<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(<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> (<span class="pl-c1">0</span> <span class="pl-k">!==</span><span class="pl-c1">1</span> <span class="pl-k">&amp;&amp;</span><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><span class="pl-c1">0</span>) <span class="pl-k">&lt;</span> ε) λ<span class="pl-c1">0</span> <span class="pl-k">-=</span><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><span class="pl-c1">1</span>) <span class="pl-k">&lt;</span> ε) λ<span class="pl-c1">1</span> <span class="pl-k">-=</span><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(<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(<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><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 lets you learn more about the author. Maybe that would help some.
     
    Last edited: Jun 13, 2018
  4. Jun 13, 2018 #3

    jedishrfu

    Staff: Mentor

    My guess is the three javascript libraries referenced at the top of the page are the culprits:

    Code (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/
     
  5. Jun 13, 2018 #4
    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.
     
  6. Jun 13, 2018 #5
    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?
     
  7. Jun 13, 2018 #6

    jedishrfu

    Staff: Mentor

    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.
     
  8. Jun 13, 2018 #7
    Usually what do I need to learn to build a humble/modest portfolio website? Are all what you mentioned essentials?
     
  9. Jun 13, 2018 #8

    jedishrfu

    Staff: Mentor

    wix or squarespace or google
     
  10. Jun 14, 2018 #9
    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.
     
  11. Jun 14, 2018 #10

    phinds

    User Avatar
    Gold Member

    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.
     
  12. Jun 14, 2018 #11

    jedishrfu

    Staff: Mentor

    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/
     
  13. Jun 14, 2018 #12
    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.
     
  14. Jun 14, 2018 #13

    jedishrfu

    Staff: Mentor

  15. Jun 15, 2018 #14
    Wow is it really? It’s been a few years I guess.
     
Share this great discussion with others via Reddit, Google+, Twitter, or Facebook

Have something to add?
Draft saved Draft deleted