JSFiddle - React, Tailwind, and code Playground

by jacob_truax

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Jacob Truax Portfolio</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="canvas-fix">
  <link rel="stylesheet" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">

</head>

<body>


<div id="barba-wrapper">
  <div class="barba-container">

  <div class="back">
    <h2 id="back">Back</h2>
  </div>

  <div class="more">
    <a href="work.html" id="more">More</a>
  </div>

  <div id="sWorksContainer" class="index-footer">
      <h2 id="sWorks" class="about">Selected Works</h2><br>
      <h2 id="sWorks2" class="about2">FN-UP Magazine</h2>
    </div>

<div class="footer-home">
    <div id="divX" class="xHome">
      <span id="xOne"></span>
      <span></span>
    </div>
    <a id="work-name" href="#" class="about">FN-UP Magazine</a>
    <div class="description-home">
      <h2 class="tags">
            Tags: Art Direction / Editorial Design / Web Design and Development
      </h2>
      <h2 class="bio">
        Project: fn-up magazine is an on going biannual magazine designed by Jacob Truax.
      </h2>
    </div>
</div>


<main class="three"></main>

</div>
</div>
</body>


<script src="three.min.js"></script>
<script src="gsap.js"></script>
<script src="portfolio.js"></script>

CSS

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }


@font-face {
  font-family: "Druk Wide";
  src: url("fonts/DrukWide-Bold-Web.woff2")format("woff2"), url("fonts/DrukWide-Bold-Web.woff")format("woff");
}

@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/hk-grotesk.woff2")format("woff2"), url("fonts/hk-grotesk.woff")format("woff");
}

body {
  font-family: 'IBM Plex Mono', monospace;
  font-size: calc(12px + (13 - 12) * ((100vw - 300px) / (1600 - 300)));
  background-color: #0b0b0b;
  color: #ffffff;
  line-height: 1.1;
}

a {
  text-decoration: none;
  color: #ffffff;
  font-size: calc(12px + (13 - 12) * ((100vw - 300px) / (1600 - 300)));
}

.wrapper{
  display: inline-block;
  padding: 5px;
  cursor: pointer;
}

.wrapper a {
  transition: all 0.4s ease;
}

.wrapper h2 {
  transition: all 0.4s ease;
}

video {
  max-width: 62vw;
  height: auto;
}

.right {
  float: right;
}

.wrapper:hover a{
  transition: all 0.4s ease;
  transform: scaleX(-1);
}

.wrapper:hover h2{
  transition: all 0.4s ease;
  transform: scaleX(-1);
}

.info-margin {
  margin-left: 15px;
}

p {
  line-height: 1.1;
  margin-bottom: 50px;
}

canvas {
  top: 0;
  left: 0;
  vertical-align: bottom;
}

header {
  width: 100%;
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 35px;
  padding-left: 35px;
  padding-right: 35px;
}

.home {
  float: left;
}

.work {
  float: right;
  /*padding-right: 25px;*/
}

.contact {
  float: right;
}

ul {
  font-family: 'IBM Plex Mono', Arial;
  font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
}

h1 {
  font-family: "Druk Wide";
  font-size: calc(14px + (40 - 14) * ((100vw - 300px) / (1600 - 300)));
}

h2 {
  font-family: "IBM Plex Mono";
  font-size: calc(12px + (13 - 12) * ((100vw - 300px) / (1600 - 300)));
}


/* Selected Works Footer...

JavaScript

doThree = function () {
	// Gsap Plugin ============================================
  var _gsScope = (typeof module !== "undefined" && module.exports && typeof global !== "undefined") ? global : this || window;
(_gsScope._gsQueue || (_gsScope._gsQueue = [])).push(function () {
    "use strict";
    var _xyzContexts = "position,scale,rotation".split(","),
        _contexts = {x:"position", y:"position", z:"position"},
        _DEG2RAD = Math.PI / 180,
        _degreesToRadians = function(value) {
            return (typeof(value) === "string" && value.charAt(1) === "=") ? value.substr(0, 2) + (parseFloat(value.substr(2)) * _DEG2RAD) : value * _DEG2RAD;
        }, i, p;
    for (i = 0; i < _xyzContexts.length; i++) {
        p = _xyzContexts[i];
        _contexts[p + "X"] = p;
        _contexts[p + "Y"] = p;
        _contexts[p + "Z"] = p;
    }
    var ThreePlugin = _gsScope._gsDefine.plugin({
        propName: "three",
        priority: 0,
        API: 2,
        version: "0.0.1",
        init: function (target, values, tween, index) {
            var context, axis, value, p, i, m;
            for (p in values) {
                context = _contexts[p];
                value = values[p];
                if (typeof(value) === "function") {
                    value = value(index || 0, target);
                }
                if (context) {
                    i = p.charAt(p.length-1).toLowerCase();
                    axis = (i.indexOf("x") !== -1) ? "x" : (i.indexOf("z") !== -1) ? "z" : "y";
                    this._addTween(target[context], axis, target[context][axis], (p.indexOf("rotation") !== -1) ? _degreesToRadians(value) : value, p);
                } else if (p === "scale") {
                    this._addTween(target[p], "x", target[p].x, value, p + "X");
                    this._addTween(target[p], "y", target[p].y, value, p + "Y");
                    this._addTween(target[p], "z", target[p].z, value, p + "Z");
                } else if (p ===...