Portfolio

by jacob_truax

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.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/1.19.0/utils/Draggable.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 id="sWorksContainer" class="index-footer">
      <h2 id="sWorks" class="about">Selected Works</h2><br>
      <h2 id="sWorks2" class="about2">FN-UP Magazine</h2>
    </div>

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

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


<script src="three.min.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(10px + (13 - 10) * ((100vw - 300px) / (1600 - 300)));
  background-color: #050505;
  color: #ffffff;
  line-height: 1.1;
}

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

p {
  line-height: 1.1;
}

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


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 ==============================================  */

.index-footer {
  width: 100%;
  height: 40px;
  overflow: hidden;
  display: inline;
  line-height: 1em;
  z-index: 4;
  position: fixed;
  bottom: 0;
  left: 0;
  margin-left: 40px;
  margin-bottom: 40px;
  color: #979797 !important;
}

#sWorks.hovered {
  transform: translateY(-2em);
  transition: all 0.3s ease;
}

#sWorks {
  transition: all 0.4s ease;
}

#sWorks2 {
  transition: all 0.4s ease;
}

#sWorks2.hovered {
  transform: translateY(-2em);
  transition: all 0.3s ease;
}

JavaScript

doThree = function () {
  console.clear();

  const renderer = new THREE.WebGLRenderer({
    anitalias: true
  })
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setClearColor(0x000000, 1)
  const section = document.querySelector("main.three")
  section.appendChild(renderer.domElement)

  // Scene -------------------------------------------------------
  const scene = new THREE.Scene()
  scene.fog = new THREE.FogExp2(0x000000, 0.00034)

  // Light -------------------------------------------------------
  const light = new THREE.AmbientLight(0xcccccc)
  scene.add(light)

  //const light2 = new THREE.PointLight(0xcccccc, .75, 0)
  const light2 = new THREE.DirectionalLight(0xffffff, 0.5)
  light2.position.set(-1000, 0, -3000)
  scene.add(light2)

  const light3 = new THREE.DirectionalLight(0xffffff, 0.5)
  light3.position.set(1000, 0, -3000)
  scene.add(light3)


  // Camera ------------------------------------------------------
  const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000)

  camera.position.z = -2500


  // Texture Loader ----------------------------------------------
  const loader = new THREE.TextureLoader()


  // Shapes ------------------------------------------------------
  var mirrorCube, mirrorCubeCamera; // for mirror material
  var mirrorSphere, mirrorSphereCamera; // for mirror material

  function init () {
  var cubeGeom = new THREE.PlaneGeometry(10000, 12000, 120);
  	mirrorCubeCamera = new THREE.CubeCamera( 0.1, 10000, 1080 );
    mirrorCubeCamera.position.set(0, 1500, 05)

  	scene.add( mirrorCubeCamera );
  	var mirrorCubeMaterial = new THREE.MeshBasicMaterial( { envMap: mirrorCubeCamera.renderTarget.texture } );
  	mirrorCube = new THREE.Mesh( cubeGeom, mirrorCubeMaterial );
  	mirrorCube.position.set(0, -550, -1000)
    mirrorCube.rotation.x = -90 * Math.PI / 180;
  	scene.add(mirrorCube);

    }

  init()

  const...