Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  <div class="flex-split">

      <!-- Child divs -->
      <div class="flex-split-left">
        <!-- Putting the image in a div here is totally optional -->
        <div class="flex-split-image">
          <svg class="logothing" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="45.155mm" width="45.642mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 161.72331 159.9998">
           <metadata>
            <rdf:RDF>
             <cc:Work rdf:about="">
              <dc:format>image/svg+xml</dc:format>
              <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
              <dc:title/>
             </cc:Work>
            </rdf:RDF>
           </metadata>
           <g transform="translate(-399.14 -649.51)">
            <path style="fill:#fff" d="m491.51 649.51-23.093 40 23.093 40h-46.188l-23.092 40h-0.001l-23.094 39.999h138.56l0.033-0.056-23.062-39.944h46.123l-69.281-120zm69.282 120 0.033 0.056 0.033-0.056h-0.065zm-69.282-39.999 23.094 39.999h-46.186l23.092-39.999z"/>
           </g>
          </svg>

        </div>
        <nav class="left-links">
          <a href="#about">About</a>
          <a href="#projects">Projects</a>
          <a href="#skills">Skills</a>
          <a href="#contact">Contact</a>
        </nav>
      </div>

      <div class="middle-controls">
        <a href="#" class="circle-button" target='_blank'>
          <svg class="social-icon" id="gh-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></svg>
        </a>
        <a href="#" class="circle-button" target='_blank'>
          <svg class="social-icon" id="fcc-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 8.212c0 1.668-.57 3.15-1.735 4.46-.423.486-.762.718-.994.718-.084 0-.17-.022-.23-.084-.064-.063-.108-.148-.108-.232 0-.126.147-.317.446-.593 1.204-1.163 1.82-2.6 1.82-4.312 0-1.9-.634-3.444-1.883-4.63-.254-.232-.38-.424-.38-.57 0-.086.04-.17.107-.233.063-.063.148-.107.232-.107.277 0 .697.34 1.227 1.013.992 1.272 1.5 2.796 1.5 4.572zM0 7.788c0-1.668.57-3.15 1.735-4.46.423-.486.762-.718.994-.718.084 0 .17.022.23.084.064.063.108.126.108.21 0 .125-.147.317-.446.612C1.418 4.68.802 6.116.802 7.83c0 1.9.634 3.443 1.883 4.63.254.23.38.422.38.57 0 .084-.04.17-.107.232-.063.062-.148.106-.232.106-.295 0-.697-.34-1.227-1.013C.485 11.107 0 9.585 0 7.788zm11.816 4.586H4.483c-.233 0-.446-.192-.446-.446s.19-.445.446-.445h7.333c.232 0 .446.19.446.445-.004.258-.192.446-.446.446zM7.81 6.42c.132-.017.23.41.242.5.03.235-.048.463-.155.67-.398.776-1.32 1.403-1.076 2.386.104.424.33.718 1.003 1.08-.232.08-.556-.074-.736-.2-.803-.545-1.312-1.44-1.26-2.416.015-.31.074-.615.158-.913.243-.855.752-1.603 1.057-2.435.148-.4.258-.884.133-1.304-.063-.206-.177-.4-.317-.567-.044-.05-.272-.316-.36-.283.397-.15.758-.01 1.108.196.265.158.475.39.637.652.295.478.42 1.03.475 1.587.022.225-.007.785.258.9.284.12.497-.35.556-.546.125-.435-.04-.844-.21-1.238.033.077.192.17.254.228.08.074.162.148.24.225.287.296.475.67.593 1.07.106.353.157.728.176 1.086.05.747-.122 1.52-.42 2.206-.133.31-.302.597-.523.847-.218.246-.505.404-.73.633.535-.545.822-1.426.748-2.092-.04-.37-.165-.714-.44-1.053 0 0 .03.236.054.39.052.332-.17.678-.43.642-.188-.027-.093-.436-.07-.565.066-.39-.023-.766-.166-1.134-.136-.345-.397-.61-.798-.55 0 .002 0 .002-.002.002h.002z"/></svg>
        </a>
        <a href="#" class="circle-button" target='_blank'>
          <svg class="social-icon" id="gplus-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g><path d="M5.09 7.273v1.745H7.98c-.116.75-.873 2.197-2.887 2.197-1.737 0-3.155-1.44-3.155-3.215S3.353 4.785 5.09 4.785c.99 0 1.652.422 2.03.786l1.382-1.33c-.887-.83-2.037-1.33-3.41-1.33C2.275 2.91 0 5.184 0 8s2.276 5.09 5.09 5.09c2.94 0 4.888-2.065 4.888-4.974 0-.334-.036-.59-.08-.843H5.09zM16 7.273h-1.455V5.818H13.09v1.455h-1.454v1.454h1.455v1.455h1.455V8.727H16"/></g></svg>
        </a>
      </div>

      <div class="flex-split-right">
        <!-- Etc, etc etc -->
        <div class="right-header">
          <h1>My name is not important</h1>
          <p>Nevertheless, it starts with an a ...</p>



        </div>

        <div id="about" class="about-section">
          <svg viewBox="0 0 78.321158 80.00002" class="avatar">

            <defs
               id="defs136" />
            <g
               transform="matrix(0.23879179,0,0,0.23879179,-2.5553344e-4,0)"
               id="g4266">
              <rect
                 style="fill:#6e3dff"
                 height="335.01999"
                 width="327.98999"
                 y="0"
                 x="-0.00033569001"
                 id="rect4" />
              <g
                 style="opacity:0.18500001;fill:#333333"
                 transform="translate(4,-29.525)"
                 id="g6">
                <g
                   style="fill:#333333"
                   id="g8">
                  <rect
                     style="opacity:1"
                     ry="10.852"
                     height="42.564999"
                     width="21.704"
                     y="164.36"
                     x="252.67999"
                     id="rect10" />
                  <path
                     style="opacity:1"
                     d="m 161.59,48.709 8.929,0 c 55.044,0 99.354,44.494 94.895,99.357 l -6.7085,82.543 c -2.4056,29.6 -33.143,99.357 -88.187,99.357 l -8.929,0 c -55.044,0 -85.61,-67.652 -88.187,-99.357 l -6.707,-82.54 c -4.459,-54.866 39.854,-99.361 94.894,-99.361 z"
                     id="path12" />
                  <path
                     style="opacity:1"
                     d="m 191.32,272.79 c 0,8.0245 -11.31,14.53 -25.263,14.53 -13.952,0 -25.263,-6.5051 -25.263,-14.53 0,-8.0245 11.31,1.7375 25.263,1.7375 13.952,0 25.263,-9.762 25.263,-1.7375 z"
                     id="path14" />
                  <path
                     style="opacity:1"
                     d="m 199.41,307.93 c 0,19.294 -15.461,44.452 -33.884,44.452 -18.424,0 -32.833,-25.158 -32.833,-44.452 0,-19.294 15.461,4.9907 33.884,4.9907 18.424,0 32.833,-24.285 32.833,-4.9907 z"
                     id="path16" />
                  <g
                     transform="matrix(1.1154,0,0,1.1154,-240.55,-308.89)"
                     id="g18">
                    <rect
                       style="opacity:1"
                       ry="2.8257999"
                       height="5.6515999"
                       width="28.729"
                       y="430.20999"
                       x="313.67001"
                       id="rect20" />
                    <rect
                       style="opacity:1"
                       ry="2.8257999"
                       height="5.6515999"
                       width="28.729"
                       y="430.20999"
                       x="386.67001"
                       id="rect22" />
                  </g>
                  <g
                     transform="matrix(1.1154,0,0,1.1154,-240.55,-310.89)"
                     id="g24">
                    <rect
                       style="opacity:1"
                       ry="2.8257999"
                       height="5.6515999"
                       width="28.729"
                       y="430.20999"
                       x="313.67001"
                       id="rect26" />
                    <rect
                       style="opacity:1"
                       ry="2.8257999"
                       height="5.6515999"
                       width="28.729"
                       y="430.20999"
                       x="386.67001"
                       id="rect28" />
                  </g>
                  <circle
                     cy="178.33"
                     cx="121.72"
                     r="6.3039999"
                     style="opacity:1"
                     id="circle30" />
                  <circle
                     cy="176.33"
                     cx="121.72"
                     r="6.3039999"
                     style="opacity:1"
                     id="circle32" />
                  <rect
                     style="opacity:1"
                     ry="10.852"
                     height="42.564999"
                     width="21.704"
                     y="164.36"
                     x="53.599998"
                     id="rect34" />
                  <circle
                     cy="178.33"
                     cx="202.10001"
                     r="6.3039999"
                     style="opacity:1"
                     id="circle36" />
                  <circle
                     cy="176.33"
                     cx="202.10001"
                     r="6.3039999"
                     style="opacity:1"
                     id="circle38" />
                  <g
                     style="stroke-width:5.91179991;stroke-linejoin:round"
                     id="g40">
                    <path
                       style="opacity:1;stroke:#ffb380"
                       d="m 107.44,162.05 39.925,-0.0464 c 7.858,-0.009 14.184,6.3261 14.184,14.184 l 0,12.301 c 0,5.6253 -9.2564,21.837 -16.023,21.846 l -38.087,0.0464 c -7.8579,0.01 -14.184,-6.3261 -14.184,-14.184 l 0,-19.963 c 0,-7.858 6.3261,-14.175 14.184,-14.184 z"
                       id="path42" />
                    <rect
                       style="opacity:1;stroke:#ffb380"
                       ry="0.78799999"
                       height="1.576"
                       width="15.235"
                       y="170.98"
                       x="162.07001"
                       id="rect44" />
                    <path
                       style="opacity:1;stroke:#1a1a1a"
                       d="m 105.44,160.05 39.925,-0.0464 c 7.858,-0.009 14.184,6.3261 14.184,14.184 l 0,12.301 c 0,5.6253 -9.2564,21.837 -16.023,21.846 l -38.087,0.0464 c -7.8579,0.01 -14.184,-6.3261 -14.184,-14.184 l 0,-19.963 c 0,-7.858 6.3261,-14.175 14.184,-14.184 z"
                       id="path46" />
                    <rect
                       style="opacity:1;stroke:#1a1a1a"
                       ry="0.78799999"
                       height="1.576"
                       width="15.235"
                       y="168.98"
                       x="160.07001"
                       id="rect48" />
                  </g>
                  <path
                     style="fill-rule:evenodd"
                     d="m 228.33,67.438 c -24.149,4.9638 -47.243,15.011 -67.337,29.295 -19.656,13.973 -36.429,31.988 -48.964,52.59 0,-1e-5 0,-1e-5 -1e-5,-2e-5 -8.4594,-9.4229 -13.681,-21.712 -14.592,-34.342 -0.91109,-12.63 2.4928,-25.542 9.5122,-36.081 7.7664,-11.661 19.756,-20.238 32.959,-24.925 13.206,-4.6877 27.578,-5.6264 41.48,-3.8669 16.69,2.1124 32.883,8.0899 46.942,17.329 z"
                     id="path50" />
                  <path
                     style="fill-rule:evenodd"
                     d="M 226.47,65.517 C 200.25,70.905 175.19,81.811 153.38,97.316 132.04,112.48 113.83,132.04 100.23,154.4 91.045,144.17 85.377,130.83 84.388,117.12 83.399,103.41 87.094,89.399 94.713,77.958 103.14,65.301 116.16,55.991 130.49,50.904 c 14.334,-5.0883 29.935,-6.1072 45.025,-4.1973 18.117,2.2929 35.693,8.7812 50.953,18.81 z"
                     id="path52" />
                  <path
                     style="opacity:1;stroke:#ffb380;stroke-width:5.91179991;stroke-linejoin:round"
                     d="m 232.14,162.05 -39.925,-0.0464 c -7.858,-0.009 -14.184,6.3261 -14.184,14.184 l 0,12.301 c 0,5.6253 9.2564,21.837 16.023,21.846 l 38.087,0.0464 c 7.858,0.01 14.184,-6.3261 14.184,-14.184 l 0,-19.963 c 0,-7.858 -6.3261,-14.175 -14.184,-14.184 z"
                     id="path54" />
                  <path
                     style="fill-rule:evenodd"
                     d="m 260.21,183.04 c 3.9666,-11.424 6.1813,-23.454 6.5429,-35.541 l 0,-1e-5 c 0.58486,-19.553 -3.8548,-39.51 -14.339,-56.025 l 0,-6e-6 c -6.7,-10.553 -15.79,-19.584 -26.4,-26.212"
                     id="path56" />
                  <path
                     style="fill-rule:evenodd"
                     d="m 73.185,183.47 c -4.7576,-11.405 -7.4279,-23.678 -7.8392,-36.029 10e-7,0 10e-7,0 2e-6,-1e-5 -0.65388,-19.635 4.5215,-39.492 15.003,-56.109 3e-6,-1e-6 3e-6,-4e-6 4e-6,-6e-6 8.214,-13.026 19.629,-24.017 32.951004,-31.732"
                     id="path58" />
                  <path
                     style="opacity:1;stroke:#1a1a1a;stroke-width:5.91179991;stroke-linejoin:round"
                     d="m 230.14,160.05 -39.925,-0.0464 c -7.858,-0.009 -14.184,6.3261 -14.184,14.184 l 0,12.301 c 0,5.6253 9.2564,21.837 16.023,21.846 l 38.087,0.0464 c 7.858,0.01 14.184,-6.3261 14.184,-14.184 l 0,-19.963 c 0,-7.858 -6.3261,-14.175 -14.184,-14.184 z"
                     id="path60" />
                </g>
                <path
                   style="opacity:1;fill-opacity:0;stroke:#ffb394;stroke-width:5.91179991;stroke-linecap:round;stroke-linejoin:round"
                   d="m 177.2,218.25 0,5.9311 c 0,6.1738 -4.9702,11.144 -11.144,11.144 -6.1738,0 -11.144,-4.9702 -11.144,-11.144 l 0,-5.9311"
                   id="path62" />
                <path
                   style="opacity:1;fill-opacity:0;stroke:#cccccc;stroke-width:2.59559989;stroke-linecap:round;stroke-linejoin:round"
                   d="m 181.78,285.44 c 0.75568,1.0079 1.8483,1.614 3.004,1.7793 1.1557,0.16524 2.3744,-0.11032 3.3823,-0.86601 1.0079,-0.75566 1.614,-1.8483 1.7793,-3.004 0.16525,-1.1557 -0.11032,-2.3744 -0.86601,-3.3823 -0.75566,-1.0079 -1.8483,-1.614 -3.004,-1.7793 -1.1557,-0.16524 -2.3744,0.11032 -3.3823,0.86601"
                   id="path64" />
                <rect
                   style="opacity:1;fill:#333333"
                   ry="4.0075002"
                   height="8.0149002"
                   width="48.223"
                   y="143.60001"
                   x="184.77"
                   id="rect66" />
                <rect
                   style="opacity:1;fill:#333333"
                   ry="4.0075002"
                   height="8.0149002"
                   width="48.223"
                   y="143.60001"
                   x="105.14"
                   id="rect68" />
              </g>
              <g
                 transform="translate(1.2e-5,-31.525)"
                 id="g70">
                <rect
                   style="fill:#ffccaa"
                   ry="10.852"
                   height="42.564999"
                   width="21.704"
                   y="164.36"
                   x="252.67999"
                   id="rect72" />
                <path
                   style="fill:#ffccaa"
                   d="m 161.59,48.709 8.929,0 c 55.044,0 99.354,44.494 94.895,99.357 l -6.7085,82.543 c -2.4056,29.6 -33.143,99.357 -88.187,99.357 l -8.929,0 c -55.044,0 -85.61,-67.652 -88.187,-99.357 l -6.707,-82.54 c -4.459,-54.866 39.854,-99.361 94.894,-99.361 z"
                   id="path74" />
                <path
                   style="fill:#ff8080"
                   d="m 191.32,272.79 c 0,8.0245 -11.31,14.53 -25.263,14.53 -13.952,0 -25.263,-6.5051 -25.263,-14.53 0,-8.0245 11.31,1.7375 25.263,1.7375 13.952,0 25.263,-9.762 25.263,-1.7375 z"
                   id="path76" />
                <path
                   style="fill:#5d351a"
                   d="m 199.41,307.93 c 0,19.294 -15.461,44.452 -33.884,44.452 -18.424,0 -32.833,-25.158 -32.833,-44.452 0,-19.294 15.461,4.9907 33.884,4.9907 18.424,0 32.833,-24.285 32.833,-4.9907 z"
                   id="path78" />
                <g
                   style="fill:#ffb380"
                   transform="matrix(1.1154,0,0,1.1154,-240.55,-308.89)"
                   id="g80">
                  <rect
                     ry="2.8257999"
                     height="5.6515999"
                     width="28.729"
                     y="430.20999"
                     x="313.67001"
                     id="rect82" />
                  <rect
                     ry="2.8257999"
                     height="5.6515999"
                     width="28.729"
                     y="430.20999"
                     x="386.67001"
                     id="rect84" />
                </g>
                <g
                   style="fill:#333333"
                   transform="matrix(1.1154,0,0,1.1154,-240.55,-310.89)"
                   id="g86">
                  <rect
                     ry="2.8257999"
                     height="5.6515999"
                     width="28.729"
                     y="430.20999"
                     x="313.67001"
                     id="rect88" />
                  <rect
                     ry="2.8257999"
                     height="5.6515999"
                     width="28.729"
                     y="430.20999"
                     x="386.67001"
                     id="rect90" />
                </g>
                <circle
                   cy="178.33"
                   cx="121.72"
                   r="6.3039999"
                   style="fill:#ffb380"
                   id="circle92" />
                <circle
                   cy="176.33"
                   cx="121.72"
                   r="6.3039999"
                   style="fill:#333333"
                   id="circle94" />
                <rect
                   style="fill:#ffccaa"
                   ry="10.852"
                   height="42.564999"
                   width="21.704"
                   y="164.36"
                   x="53.599998"
                   id="rect96" />
                <circle
                   cy="178.33"
                   cx="202.10001"
                   r="6.3039999"
                   style="fill:#ffb380"
                   id="circle98" />
                <circle
                   cy="176.33"
                   cx="202.10001"
                   r="6.3039999"
                   style="fill:#333333"
                   id="circle100" />
                <g
                   style="fill:none;stroke-width:5.91179991;stroke-linejoin:round"
                   id="g102">
                  <path
                     style="stroke:#ffb380"
                     d="m 107.44,162.05 39.925,-0.0464 c 7.858,-0.009 14.184,6.3261 14.184,14.184 l 0,12.301 c 0,5.6253 -9.2564,21.837 -16.023,21.846 l -38.087,0.0464 c -7.8579,0.01 -14.184,-6.3261 -14.184,-14.184 l 0,-19.963 c 0,-7.858 6.3261,-14.175 14.184,-14.184 z"
                     id="path104" />
                  <rect
                     style="stroke:#ffb380"
                     ry="0.78799999"
                     height="1.576"
                     width="15.235"
                     y="170.98"
                     x="162.07001"
                     id="rect106" />
                  <path
                     style="stroke:#1a1a1a"
                     d="m 105.44,160.05 39.925,-0.0464 c 7.858,-0.009 14.184,6.3261 14.184,14.184 l 0,12.301 c 0,5.6253 -9.2564,21.837 -16.023,21.846 l -38.087,0.0464 c -7.8579,0.01 -14.184,-6.3261 -14.184,-14.184 l 0,-19.963 c 0,-7.858 6.3261,-14.175 14.184,-14.184 z"
                     id="path108" />
                  <rect
                     style="stroke:#1a1a1a"
                     ry="0.78799999"
                     height="1.576"
                     width="15.235"
                     y="168.98"
                     x="160.07001"
                     id="rect110" />
                </g>
                <path
                   style="fill:#ffb380;fill-rule:evenodd"
                   d="m 228.33,67.438 c -24.149,4.9638 -47.243,15.011 -67.337,29.295 -19.656,13.973 -36.429,31.988 -48.964,52.59 0,-1e-5 0,-1e-5 -1e-5,-2e-5 -8.4594,-9.4229 -13.681,-21.712 -14.592,-34.342 -0.91109,-12.63 2.4928,-25.542 9.5122,-36.081 7.7664,-11.661 19.756,-20.238 32.959,-24.925 13.206,-4.6877 27.578,-5.6264 41.48,-3.8669 16.69,2.1124 32.883,8.0899 46.942,17.329 z"
                   id="path112" />
                <path
                   style="fill:#5d351a;fill-rule:evenodd"
                   d="M 226.47,65.517 C 200.25,70.905 175.19,81.811 153.38,97.316 132.04,112.48 113.83,132.04 100.23,154.4 91.045,144.17 85.377,130.83 84.388,117.12 83.399,103.41 87.094,89.399 94.713,77.958 103.14,65.301 116.16,55.991 130.49,50.904 c 14.334,-5.0883 29.935,-6.1072 45.025,-4.1973 18.117,2.2929 35.693,8.7812 50.953,18.81 z"
                   id="path114" />
                <path
                   style="fill:none;stroke:#ffb380;stroke-width:5.91179991;stroke-linejoin:round"
                   d="m 232.14,162.05 -39.925,-0.0464 c -7.858,-0.009 -14.184,6.3261 -14.184,14.184 l 0,12.301 c 0,5.6253 9.2564,21.837 16.023,21.846 l 38.087,0.0464 c 7.858,0.01 14.184,-6.3261 14.184,-14.184 l 0,-19.963 c 0,-7.858 -6.3261,-14.175 -14.184,-14.184 z"
                   id="path116" />
                <path
                   style="fill:#5d351a;fill-rule:evenodd"
                   d="m 260.21,183.04 c 3.9666,-11.424 6.1813,-23.454 6.5429,-35.541 l 0,-1e-5 c 0.58486,-19.553 -3.8548,-39.51 -14.339,-56.025 l 0,-6e-6 c -6.7,-10.553 -15.79,-19.584 -26.4,-26.212"
                   id="path118" />
                <path
                   style="fill:#5d351a;fill-rule:evenodd"
                   d="m 73.185,183.47 c -4.7576,-11.405 -7.4279,-23.678 -7.8392,-36.029 10e-7,0 10e-7,0 2e-6,-1e-5 -0.65388,-19.635 4.5215,-39.492 15.003,-56.109 3e-6,-1e-6 3e-6,-4e-6 4e-6,-6e-6 8.214,-13.026 19.629,-24.017 32.951004,-31.732"
                   id="path120" />
                <g
                   style="stroke-linejoin:round"
                   id="g122">
                  <path
                     style="fill:none;stroke:#1a1a1a;stroke-width:5.91179991"
                     d="m 230.14,160.05 -39.925,-0.0464 c -7.858,-0.009 -14.184,6.3261 -14.184,14.184 l 0,12.301 c 0,5.6253 9.2564,21.837 16.023,21.846 l 38.087,0.0464 c 7.858,0.01 14.184,-6.3261 14.184,-14.184 l 0,-19.963 c 0,-7.858 -6.3261,-14.175 -14.184,-14.184 z"
                     id="path124" />
                  <path
                     style="fill-opacity:0;stroke:#ffb394;stroke-width:5.91179991;stroke-linecap:round"
                     d="m 177.2,218.25 0,5.9311 c 0,6.1738 -4.9702,11.144 -11.144,11.144 -6.1738,0 -11.144,-4.9702 -11.144,-11.144 l 0,-5.9311"
                     id="path126" />
                  <path
                     style="fill-opacity:0;stroke:#cccccc;stroke-width:2.59559989;stroke-linecap:round"
                     d="m 181.78,285.44 c 0.75568,1.0079 1.8483,1.614 3.004,1.7793 1.1557,0.16524 2.3744,-0.11032 3.3823,-0.86601 1.0079,-0.75566 1.614,-1.8483 1.7793,-3.004 0.16525,-1.1557 -0.11032,-2.3744 -0.86601,-3.3823 -0.75566,-1.0079 -1.8483,-1.614 -3.004,-1.7793 -1.1557,-0.16524 -2.3744,0.11032 -3.3823,0.86601"
                     id="path128" />
                </g>
                <rect
                   style="fill:#5d351a"
                   ry="4.0075002"
                   height="8.0149002"
                   width="48.223"
                   y="143.60001"
                   x="184.77"
                   id="rect130" />
                <rect
                   style="fill:#5d351a"
                   ry="4.0075002"
                   height="8.0149002"
                   width="48.223"
                   y="143.60001"
                   x="105.14"
                   id="rect132" />
              </g>
            </g>
          </svg>
          <h2>About</h2>
          <p>I was once called the worst audience participant Cirque du Soleil ever had. There's been a lot of lying in this family. And a lot of love! More lies. ♪♪ It ain't easy being white. It ain't easy being brown. ♪♪ We all need to pick a day to try and make trend. Did you know that more frozen bananas are sold right here on this boardwalk than anywhere on the OC?</p>
        </div>

        <div class="projects" id="projects">
          <h2>Projects</h2>
          <p>Let me take off my assistant's skirt and put on my Barbra-Streisand-in-The-Prince-of-Tides ass-masking therapist pantsuit. There are dozens of us! DOZENS! Quicken! Premiere! Wow, this is the best free scrapbooking class I've ever taken! ps This one really cracks me up for some reason. What's gotten into you? Have you been eating cheese? Hahahahah! George Michael, you want to put your head down there by his drainage shunt? Heyyyyyy, Uncle Father Oscar. I deceived you, mom. Tricked makes it sound like we have a playful relationship.</p>
          <p>The Army had half a day. Everything they do is so dramatic and flamboyant. It just makes me want to set myself on fire. - Lucille Bluth. Do you guys know where I could get one of those gold necklaces with the T on it? That's a cross. Across from where?</p>
          <p>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere on the OC? Everybody dance NOW. I'm in Vegas this week and would like to point out the Blue Man Group is *actually* hiring. The support group? There's a new daddy in town. A discipline daddy. Her lawyers are claiming the seal is worth $250,000. And that's not even including Buster's Swatch.</p>
        </div>

        <div class="skills" id="skills">
          <h2>Skills</h2>
          <ul class="skill-list">
            <li>Professional Procrastinator</li>
            <li>Lazy Thinker</li>
            <li>Arguing about colours while being colour-blind</li>
            <li>Eternal Noob in many areas</li>
            <li>A pretty poor coder</li>
            <li>A self-proclaimed kinda design person for lack of a better term</li>
          </ul>
        </div>

        <div class="contact" id="contact">
          <h2>Contact me</h2>
        </div>

      </div>
    </div>

              
            
!

CSS

              
                /*reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/**************/
/*   Styles   */
/**************/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  overflow-x:hidden;
  width:100%;
  font-family: monospace;
  font-size: 16px;

}

h1 {
  font-size: 2em;
  text-align: center;
  margin-top: 1em;
}
h2 {
  font-size: 1.6em;
  display: flex;
  justify-content: center;
  margin-top: 1em;

}
p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 0em 2em;
  line-height: 1.6;
}

.avatar {
  height: auto;
  max-width:80px;
  border-radius: 50%;
}

.skills li{
  list-style-type: square;
}
.about-section {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
}
/* stacked column below 48em */
.flex-split-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: hsl(255, 100%, 61%);
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white;
  height: auto;
  /*box-shadow: inset 0 0 1px white;*/
  padding-bottom: 2em;
}
.logothing {
  margin-top: 1em;
  height: 50px;
  width: auto;
}

.flex-split-image {
  align-self: center;
  height: 90px;
  width: auto;
  margin-bottom: 2em;
  margin-top: 2em
}
.left-links {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-split-left a {
  text-decoration: overline;
  color: white;
  font-weight: bold;
  padding: 0.2rem 0.4rem;
}
.flex-split-left a:hover {
  background-color: white;
  color: hsl(255, 100%, 61%);
}

.flex-split-left a:active {

}

.flex-split-left a:visited {

}
.flex-split-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /*-webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;*/
  /*margin-top: 2em;*/
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  color: hsl(0, 0%, 14%);
/*this in the flex-item that we want scrollable*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
  height: auto;
}
.flex-split-right h1, .flex-split-right h2 {
  color: hsl(255, 100%, 62%);

}
.flex-split {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
  min-height: 100vh;
  overflow: hidden;

}
.middle-controls {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /*FIXME get rid of importants*/
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: row !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  width: 100vw;
  background-color: hsl(255, 100%, 61%);
}
.circle-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  padding: 0.5em 2em;
  fill: white;
}

.social-icon {
  width: 24px;
  height: auto;

}
/***************************/
/* SPLIT SCREEN ABOVE 60EM */
/***************************/
@media all and (min-width:60em) {
  .flex-split > div {
    min-width: 50%;
    width:50%;
	}
  .flex-split {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		    -ms-flex-direction: row;
		        flex-direction: row;
    overflow: hidden;
    height: 100vh;
/*This here in flex-parent for making only certain items scrollable */
    position: relative;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: overflow;
	}

  .logothing {
    height: 300px;
    width: auto;
  }
  .left-links {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
                -ms-grid-row-align: center;
            align-items: center;
  }
  .flex-split-image {
    height: 300px;
    width: auto;
    margin-bottom: 2em;
  }
  /*circular buttons in the middle at big enough screens*/
  .middle-controls {
    z-index: 1000;
    position: absolute;
    left: 50%;
    top: 20%;
    margin-left: -25px;
    max-width: 50px;
    /*FIXME get rid of importants*/
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: transparent;
  }
  .circle-button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 50px;
    width: 50px;
    box-shadow: 0px 2px 2px 2px hsla(255, 59%, 23%, 0.42);
    border-radius: 50%;
    border: 2px solid hsl(255, 100%, 61%);
    background-color: white;
    margin-bottom: 2em;
    color: hsl(255, 100%, 61%);
    padding: 0.5em 0.5em;
    fill: hsl(255, 100%, 61%);
    }

  .circle-button:hover {
    border: 2px solid white;
    background-color: hsl(255, 100%, 61%);
    -webkit-transition:all 0.4s ease-out;
    transition: all 0.4s ease-out;
    color: white;
    fill: white;
  }
  .circle-button:active {
    border: 2px solid white;
    background-color: hsl(255, 100%, 61%);
    -webkit-transition:all 60ms ease;
    transition: all 60ms ease;
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
    color: white;
    fill: white;
  }

  p, ul {
  padding: 0em 4em;
  }
}

.flex-split > div {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

              
            
!

JS

              
                
              
            
!
999px

Console