first commit

ommiles · Nov 29, 2020 · 424261a · 424261a
commit 424261a
Show file tree

Hide file tree

Showing 19 changed files with 7,777 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/dist/css/text.css b/dist/css/text.css
@@ -0,0 +1,55 @@
+html,
+body {
+  font-family: "Archivo Black", sans-serif;
+  font-size: 18px;
+  background-image: linear-gradient(45deg, #b3b5d6,  #6081dd);
+  color: #aaa;
+}
+
+canvas { 
+  display: block; 
+  width: 100%; 
+  height: 100%;
+  justify-self: flex-end;
+}
+
+body { 
+  margin: 0; 
+  display: grid;
+}
+
+/* Tutorial on https://fossheim.io/writing/posts/css-text-gradient. */
+
+.gradient-text {
+  /* Fallback: Set a background color. */
+  background-color: rgb(255, 0, 212);
+
+  /* Create the gradient. */
+  background-image: linear-gradient(45deg, #0673cc, #701070);
+
+  /* Set the background size and repeat properties. */
+  background-size: 100%;
+  background-repeat: repeat;
+
+  /* Use the text as a mask for the background. */
+  /* This will show the gradient as a text color rather than element bg. */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-background-clip: text;
+  -moz-text-fill-color: transparent;
+}
+
+h1,
+h2 {
+  font-weight: 200;
+  padding: 1em 1em 0 1em; 
+  line-height: 1.5;
+}
+h1 {
+  font-size: 3.3em;
+}
+
+h2 {
+  color: #888;
+  font-size: 1.5em;
+}
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,16 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three Cone</title>
+    <link href="https://fonts.googleapis.com/css?family=Archivo+Black&display=swap" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="css/text.css">
+</head>
+<body>
+    <h1 class="gradient-text">Today, I'm feeling 
+        <span class="txt-rotate" data-period="2000" data-rotate='[ "ambitious.", "intense.", "exciting.", "challenging.", "fun!" ]'></span>
+    </h1>
+    <script src="https://threejs.org/build/three.js"></script>
+    <script type="module" src="js/app.js"></script>
+</body>
+</html>
diff --git a/dist/js/app.js b/dist/js/app.js
@@ -0,0 +1,103 @@
+
+// Simple pure JavaScript plugin to rotate text snippets as if they were being typed.
+// http://schier.co/post/simple-vanilla-javascript-typing-carousel
+
+var TxtRotate = function(el, toRotate, period) {
+	this.toRotate = toRotate;
+	this.el = el;
+	this.loopNum = 0;
+	this.period = parseInt(period, 10) || 2000;
+	this.txt = '';
+	this.tick();
+	this.isDeleting = false;
+};
+
+TxtRotate.prototype.tick = function() {
+	var i = this.loopNum % this.toRotate.length;
+	var fullTxt = this.toRotate[i];
+
+	if (this.isDeleting) {
+		this.txt = fullTxt.substring(0, this.txt.length - 1);
+	} else {
+		this.txt = fullTxt.substring(0, this.txt.length + 1);
+	}
+
+	this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
+
+	var that = this;
+	var delta = 300 - Math.random() * 100;
+
+	if (this.isDeleting) { delta /= 2; }
+
+	if (!this.isDeleting && this.txt === fullTxt) {
+		delta = this.period;
+		this.isDeleting = true;
+	} else if (this.isDeleting && this.txt === '') {
+		this.isDeleting = false;
+		this.loopNum++;
+		delta = 500;
+	}
+
+	setTimeout(function() {
+		that.tick();
+	}, delta);
+};
+
+window.onload = function() {
+	var elements = document.getElementsByClassName('txt-rotate');
+	for (var i=0; i<elements.length; i++) {
+		var toRotate = elements[i].getAttribute('data-rotate');
+		var period = elements[i].getAttribute('data-period');
+		if (toRotate) {
+		new TxtRotate(elements[i], JSON.parse(toRotate), period);
+		}
+	}
+	// INJECT CSS
+	var css = document.createElement("style");
+	css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
+	document.body.appendChild(css);
+};
+
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+
+const renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
+renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent
+renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
+document.body.appendChild( renderer.domElement );
+
+// Make sure the project is responsive based on window resizing
+window.addEventListener('resize', () => {
+	renderer.setSize(window.innerWidth/2 ,window.innerHeight/2 );
+	camera.aspect = window.innerWidth / window.innerHeight;
+
+	camera.updateProjectionMatrix();
+})
+
+const geometry = new THREE.BoxGeometry();
+var cubeMaterials = [ 
+    new THREE.MeshBasicMaterial({color:0xcaffbf, transparent:true, opacity:0.9, side: THREE.DoubleSide}),
+    new THREE.MeshBasicMaterial({color:0x9bf6ff, transparent:true, opacity:0.9, side: THREE.DoubleSide}), 
+    new THREE.MeshBasicMaterial({color:0x457b9d, transparent:true, opacity:0.9, side: THREE.DoubleSide}),
+    new THREE.MeshBasicMaterial({color:0xbdb2ff, transparent:true, opacity:0.9, side: THREE.DoubleSide}), 
+    new THREE.MeshBasicMaterial({color:0xffc6ff, transparent:true, opacity:0.9, side: THREE.DoubleSide}), 
+    new THREE.MeshBasicMaterial({color:0xfffffc, transparent:true, opacity:0.9, side: THREE.DoubleSide}), 
+]; 
+
+const cube = new THREE.Mesh( geometry, cubeMaterials );
+scene.add( cube );
+scene.background ;
+
+camera.position.z = 2;
+
+const animate = function () {
+	requestAnimationFrame( animate );
+
+	cube.rotation.x += 0.01;
+	cube.rotation.y += 0.02;
+
+	renderer.render( scene, camera );
+};
+
+animate();
diff --git a/dist/js/camera.js b/dist/js/camera.js
@@ -0,0 +1,7 @@
+import { PerspectiveCamera } from 'three';
+
+export default function () {
+    var camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+    camera.position.z = 50;
+    return camera
+}
diff --git a/dist/js/change-text.js b/dist/js/change-text.js
@@ -0,0 +1,3 @@
+export default function () {
+    document.querySelector("h2").innerHTML = "Finally!";
+}  
diff --git a/dist/js/cone.js b/dist/js/cone.js
@@ -0,0 +1,8 @@
+import { ConeGeometry, MeshBasicMaterial, Mesh } from 'three'
+
+export default function (color) {
+    var geometry = new ConeGeometry( 5, 20, 32 );
+    var material = new MeshBasicMaterial( {color: color} );
+    var cone = new Mesh( geometry, material );
+    return cone
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,114 @@
+// move HTML
+// move js
+// watch
+// default task
+
+// ************************* Imports *************************
+
+const gulp = require("gulp");
+const { src, dest, series, parallel, watch } = require('gulp');
+const webpack = require('webpack-stream');
+// BrowserSync for dev server and hot reloading
+const bs = require('browser-sync').create();
+// Used to wipe contents of dist when running build task
+const del = require('del');
+
+// ************************* Folder Paths *************************
+
+const paths = {
+    input: 'src',
+    output: 'dist',
+    devHTML: 'src/*.html',
+    //devCSS: 'src/css/*.css',
+    //devSCSS: 'src/scss/*.scss',
+    devJS: 'src/js/*.js',
+    //devImages: 'src/img/*.{png,gif,jpg,jpeg,svg}',
+    //devFavicons: 'src/*.{ico,png,xml,svg,webmanifest}',
+    //prodCSS: 'dist/css',
+    prodJS: 'dist/js',
+    //prodImages: 'dist/img',
+    //normalize: 'src/css/normalize.css',
+};
+
+// ************************* Development Tasks *************************
+
+// Task to run the BrowserSync server
+function browserSync() {
+    // Run serveSass when starting the dev server to make sure the SCSS & dev CSS are the same
+    //css();
+
+    bs.init({
+        // Dev server will run at localhost:8080
+        server: {
+        baseDir: paths.input,
+        },
+    });
+
+    watch(paths.devHTML).on('change', bs.reload);
+    //watch(paths.devCSS, css).on('change', bs.reload);
+    watch(paths.devJS).on('change', bs.reload);
+}
+
+// ************************* Production Tasks *************************
+
+// Wipe contents of dist folder
+function clean() {
+    return del([`${paths.output}/**`, `!${paths.output}`]);
+}
+
+// Minimize HTML files
+function buildHTML() {
+    return src(paths.devHTML)
+        .pipe(dest(paths.output));
+}
+
+// Compiles CSS
+function css () {
+    // Inital sass file to grab for compile
+    return src([
+    // we will use concat to package these files together
+    'src/css/*.css'
+    ])
+        // Saves compiled CSS to chosen folder
+        .pipe(gulp.dest("dist/css"))
+
+        // Reload live server to reflect new code
+        .pipe(bs.stream())
+}
+
+// Pipe JavaScript files to dist folder
+function buildJS() {
+    return src(paths.devJS)
+        .pipe(gulp.dest("dist/js"))
+}
+
+function webPack() {
+    return src(paths.devJS)
+        .pipe(webpack({
+        output: {
+            filename: "app.js"
+        }
+    }))
+}
+
+// ************************* Exported Tasks *************************
+
+// Run gulp serve in the terminal to start development mode
+exports.serve = browserSync;
+// Run gulp clean to empty dist folder
+exports.clean = clean;
+// Run gulp build to run production build
+exports.build = series(
+    clean,
+    parallel(
+    buildHTML,
+    css,
+    //fonts,
+    //buildFavicon,
+    //buildCSS,
+    //buildNormalize,
+    buildJS,
+    webPack,
+    //buildImages,
+    ),
+);