Skillset And Workflow Display - Portfolio Site

index.html

<p id="workflow-boot"></p>

script.js

boot = {
  defaultTime: 200,
  timePerChar: 10,
  soundPaths: {
    blip:
      "https://dl.dropboxusercontent.com/u/74836805/codepenassets/blip-1.wav"
  },
  soundCaches: {},
  soundCacheSize: 16,
  soundCacheIndex: {},
  speechAvailable: typeof speechSynthesis != "undefined",
  fallback: navigator.userAgent.toLowerCase().indexOf("firefox") > -1, //TODO check for actual functionality
  elem: document.getElementById("workflow-boot")
};

if (boot.speechAvailable) {
  window.speechSynthesis.onvoiceschanged = function(e) {
    boot.actions.voiceInit();
  };
}

boot.actions = {
  voiceInit: function(id, subid, text, time) {
    if (!boot.speechAvailable) {
      return "UNAVAILABLE - USING NULL OUTPUT";
    }
    boot.voices = speechSynthesis.getVoices();
    for (var i = 0; i < boot.voices.length; i++) {
      var name = boot.voices[i].name.toUpperCase();
      if (name.indexOf("ENGLISH") > -1 && name.indexOf("MALE") == -1) {
        boot.voice = boot.voices[i];
      }
    }
    for (var i = 0; i < boot.voices.length; i++) {
      var name = boot.voices[i].name.toUpperCase();
      if (name.indexOf("ENGLISH") > -1 && name.indexOf("MALE") > -1) {
        boot.voice = boot.voices[i];
      }
    }
    return "CHECK";
  },
  say: function(id, subid, text, time) {
    if (!boot.speechAvailable) {
      return;
    }
    var msg = new SpeechSynthesisUtterance();
    msg.text = text;
    msg.volume = 1.4;
    msg.rate = 1.2;
    msg.pitch = 0.7;

    if (typeof boot.voice != "undefined") {
      msg.voice = boot.voice;
    }

    window.speechSynthesis.speak(msg);
  }
};

boot.lines = [
  { text: "PROCEDURAL WORKFLOW", time: 1000 },
  { text: "", time: 0 },
  { text: "A23-NECTAR ART SYSTEMS © 2OK+ ALL RIGHTS RESERVED", time: 400 },
  { text: "", time: 300 },
  { text: "INITIALIZING SKILL SETS", time: 200 },
  { text: "", time: 300 },
  [
    { text: "ATTITUDE ", time: 900 },
    { text: ".......  ", time: 500 },
    { text: "CHECK", time: 300 }
  ],
  [
    { text: "PERCEPTION ", time: 700 },
    { text: ".......  ", time: 800 },
    { text: "CHECK", time: 300 }
  ],
  [
    { text: "PUNK MUSIC ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "CHECK", time: 300 }
  ],
  [
    { text: "DATA WARP ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "CHECK", time: 300 }
  ],
  [
    { text: "SYNCHRONIZATION ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "ERROR", time: 300 }
  ],
  [
    { text: "INITIALIZING SYNC REPAIR ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "WORKING", time: 300 }
  ],
  [
    { text: "> ", time: 800 },
    { text: "> ", time: 800 },
    { text: "> ", time: 800 },
    { text: "> ", time: 800 },
    { text: "> ", time: 800 },
    { text: "> ", time: 800 },
    { text: "> ", time: 800 }
  ],
  [
    { text: "SYNCHRONIZATION ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "FAILED", time: 300 }
  ],
  [
    { text: "TROUBLESHOOT: FAILED SYNC REPAIR ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "INITIATING TROUBLESHOOT PROTOCOLS", time: 800 }
  ],
  [
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 }
  ],
  [
    { text: "TROUBLESHOOT: FAILED SYNC REPAIR ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "PLEASE HOLD", time: 1800 }
  ],
  [
    { text: "> ", time: 100 },
    { text: "> ", time: 100 },
    { text: "> ", time: 100 },
    { text: "> ", time: 100 },
    { text: "> ", time: 100 },
    { text: "> ", time: 100 },
    { text: "> ", time: 100 }
  ],
  [
    { text: "PROTOCOL RESOLUTION ", time: 300 },
    { text: ".......  ", time: 100 },
    { text: "WORKING", time: 200 }
  ],
  [
    { text: "> ", time: 100 },
    { text: "> ", time: 100 },
    { text: "> ", time: 100 },
    { text: "> ", time: 800 },
    { text: "> ", time: 800 },
    { text: "> ", time: 600 },
    { text: "> ", time: 100 }
  ],
  [
    { text: "SYNC ERROR RESOLUTION ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "CONFIRMED", time: 300 }
  ],
  [
    { text: "PROTOCOLS: SYNC ERROR RESOLUTION ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "INITIATING", time: 300 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "PROTOCOL RESPONSE: SYNC ERROR RESOLUTION ", time: 300 },
    { text: ".......  ", time: 500 },
    { text: "CONNECTING WITH LAN NETWORK", time: 200 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "PROTOCOL RESPONSE: LAN NETWORK CONNECTION ", time: 100 },
    { text: ".......  ", time: 300 },
    { text: "CONNECTED", time: 100 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "--  ", time: 0 },
    { text: "PROTOCOL RESPONSE: SYNC ERROR RESOLUTION ", time: 200 },
    { text: ".......  ", time: 100 },
    { text: "ACCESSING COFFEE AI", time: 200 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "--  ", time: 0 },
    { text: "PROTOCOL RESPONSE: COFFEE AI ", time: 100 },
    { text: ".......  ", time: 200 },
    { text: "SUCCESSFUL HANDSHAKE", time: 100 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "--  ", time: 0 },
    { text: "PROTOCOL RESPONSE: COFFEE AI ", time: 100 },
    { text: ".......  ", time: 200 },
    { text: "WORKING", time: 100 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "--  ", time: 0 },
    { text: "PROTOCOL RESPONSE: COFFEE AI ", time: 100 },
    { text: ".......  ", time: 1200 },
    { text: "EXECUTION COMPLETE", time: 300 }
  ],
  [
    { text: "PROTOCOL RESPONSE: SYNC ERROR REPAIR ", time: 100 },
    { text: ".......  ", time: 200 },
    { text: "HOLDING", time: 100 }
  ],
  [
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 }
  ],
  [
    { text: "REINITIALIZING: SYNCHRONIZATION ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "WORKING", time: 300 }
  ],
  [
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 },
    { text: "> ", time: 200 }
  ],
  { text: "", time: 0 },
  [
    { text: "SYNCHRONIZATION ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "CHECK", time: 300 }
  ],
  [
    { text: "ARCHIVES ", time: 200 },
    { text: ".......  ", time: 300 },
    { text: "SYNCED", time: 100 }
  ],
  [
    { text: "SOFTWARE TOOL SET ", time: 800 },
    { text: ".......  ", time: 300 },
    { text: "ACTIVATED", time: 300 }
  ],
  [
    { text: "OPTIMIZING SCRIPTS ", time: 200 },
    { text: ".......  ", time: 300 },
    { text: "WORKING", time: 100 }
  ],
  [
    { text: "> ", time: 100 },
    { text: "> ", time: 100 },
    { text: "> ", time: 100 },
    { text: "> ", time: 800 },
    { text: "> ", time: 800 },
    { text: "> ", time: 600 },
    { text: "> ", time: 100 }
  ],
  [
    { text: "SCRIPTS ", time: 200 },
    { text: ".......  ", time: 300 },
    { text: "CHECK", time: 100 }
  ],
  { text: "", time: 300 },
  { text: "SKILL SETS ACTIVATED", time: 1000 },
  { text: "", time: 0 },
  [
    { text: "PSYCHOSOCIAL INTERFACING ", time: 1200 },
    { text: ".......  ", time: 400 }
  ],
  [
    { text: "...", time: 200 },
    { text: "...", time: 300 },
    { text: "...", time: 500 },
    { text: "...", time: 200 },
    { text: "...", time: 200 },
    { text: "...", time: 500 },
    { text: "...", time: 400 },
    { text: " COMMENCING", time: 300 }
  ],
  { text: "", time: 0 },
  [
    { text: ">> ALL SENSORS ACTIVE ", time: 200 },
    { text: ".......  ", time: 400 },
    { text: "BIOFEEDBACK ", time: 600 },
    { text: "> ", time: 600 },
    { text: ">  ", time: 500 },
    { text: ">  ", time: 300 },
    { text: ">  ", time: 400 },
    { text: "RESPONSIVE", time: 300 }
  ],
  [
    { text: ">> ROBOTIC FUNCTIONS ", time: 600 },
    { text: ".......  ", time: 300 },
    { text: "CHECKING PROTOCOLS", time: 300 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "ROBOTIC FUNCTIONS PROTOCOLS ", time: 600 },
    { text: ".......  ", time: 300 },
    { text: "COMMENCING", time: 600 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "PROTOCOL PROCEDURE ", time: 600 },
    { text: ".......  ", time: 800 },
    { text: "CHECK", time: 900 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "PROTOCOL RESPONSE: ROBOTIC FUNCTIONS ", time: 300 },
    { text: ".......  ", time: 500 },
    { text: "OVERRIDE", time: 400 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "OVERRIDE PROTOCOL ", time: 600 },
    { text: ".......  ", time: 400 },
    { text: "COMMENCING", time: 500 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "OVERRIDE ROBOTIC FUNCTIONS ", time: 400 },
    { text: ".......  ", time: 200 },
    { text: "COMPLETE", time: 200 }
  ],
  [
    { text: "--  ", time: 0 },
    { text: "ROBOTIC FUNCTIONS ", time: 600 },
    { text: ".......  ", time: 500 },
    { text: "INACTIVE", time: 300 }
  ],
  { text: ">> ROBOTIC FUNCTIONS ARE OFFICIALLY FUCKED", time: 700 },
  {
    text: ">> PERCEPTION AND INTERACTION PROTOCOLS ARE OPERATIONAL",
    time: 200
  },
  [
    { text: ">> SPEECH + VOICE SYNTHESIS ", time: 700 },
    { text: "....... ", time: 300 },
    { time: 300, actions: [boot.actions.voiceInit] }
  ],
  [
    "ACTIVE: ",
    { text: "TABOO ISSUES INSPECTED.", actions: [boot.actions.say], time: 1500 }
  ],
  { text: ">> SUCCESS", time: 300 },
  [
    { text: "AI ACTIVITY ", time: 400 },
    { text: "........  ", time: 0 },
    { text: "WARNING", time: 700 }
  ],
  [
    { text: "AI ACTIVITY REBOOT", time: 400 },
    { text: "........  ", time: 0 },
    { text: "WARNING", time: 700 }
  ],
  [
    { text: "AI ACTIVITY ", time: 400 },
    { text: "........  ", time: 0 },
    { text: "ERROR", time: 700 }
  ],
  { text: ">> SELF AWARENESS CHECK : PASSING", time: 500 },
  { text: ">> SPATIAL RECOGNITION IS ACTIVE", time: 300 },
  { text: ">> PROCEDURAL PATTERN RECOGNITION IS ACTIVE", time: 300 },
  { text: ">> SPEECH RECOGNITION IS ACTIVE", time: 400 },
  { text: ">> COGNITIVE SYSTEM RECOGNITION IS ACTIVE", time: 300 },
  { text: ">> PERSONALITY LIBRARIES ARE ACTIVE", time: 800 },
  { text: ">> AI IS PERFECTLY DYSFUNCTIONAL", time: 1500 },
  { text: "ALL", time: 750 },
  { text: "NECESSARY", time: 300 },
  { text: "SYSTEMS", time: 750 },
  { text: "ARE", time: 750 },
  [
    { text: "A23 ", time: 1250 },
    { text: ">> OK  ", time: 300 },
    { text: " --->", time: 400 }
  ],
  { text: "", time: 300 },
  [
    { text: "A23-NECTAR ART SYSTEMS > ", time: 500 },
    { text: "GO / NO GO", time: 300 }
  ],
  [{ text: "ALL SYSTEMS > GO ", time: 650 }, { text: ">>>>>>>", time: 2500 }],
  { text: "", time: 0 },
  { text: "A23-NECTAR ART SYSTEMS © 2OK+ ALL RIGHTS RESERVED", time: 600 },
  { text: "", time: 0 },
  [
    "ACTIVE: ",
    {
      text:
        "PROCEDURAL WORKFLOW INITIALIZATION COMPLETE. ALL ART SYSTEMS ARE GOOD TO GO. ROBOTIC FUNCTIONS ARE OFFICIALLY FUCKED. AWAITING PERCEPTION TRANSFORMATION.",
      actions: [boot.actions.say],
      time: 1500
    }
  ],
  [
    { text: ">> AWAITING PERCEPTION TRANSFORMATION ", time: 400 },
    { text: ">>>>>>>", time: 300 }
  ]
];

boot.getSound = function(name) {
  var soundCache;
  if (typeof boot.soundCaches[name] == "undefined") {
    boot.soundCaches[name] = [];
  }
  soundCache = boot.soundCaches[name];

  var soundCacheIndex;
  if (typeof boot.soundCacheIndex[name] == "undefined") {
    boot.soundCacheIndex[name] = 0;
  }
  soundCacheIndex = boot.soundCacheIndex[name];

  var audio;
  if (soundCacheIndex == -1 || soundCache.length < boot.soundCacheSize) {
    audio = new Audio(boot.soundPaths[name]);
    audio.autoplay = false;
    if (soundCacheIndex > -1) {
      soundCache[soundCacheIndex] = audio;
    }
  } else {
    audio = soundCache[soundCacheIndex];
    if (boot.fallback) {
      //DARN YOU NON-CHROME BROWSERS (or just Firefox... especially Firefox. Edge is ok.)
      audio.pause();
      audio.currentTime = 0;
    }
  }

  soundCacheIndex = (soundCacheIndex + 1) % boot.soundCacheSize;

  boot.soundCaches[name] = soundCache;
  boot.soundCacheIndex[name] = soundCacheIndex;

  return audio;
};

boot.addText = function(text, cb, i) {
  if (typeof i != "number") {
    i = 0;
  }
  var char = document.createElement("span");
  char.className = "char char-" + text.charCodeAt(i);
  if (!boot.fallback) {
    char.appendChild(document.createTextNode(text.charAt(i)));
  } else {
    //Firefox is painfully slow for me...
    char.appendChild(document.createTextNode(text));
  }
  boot.elem.appendChild(char);
  boot.getSound("blip").play();
  if (boot.fallback) {
    cb();
    return;
  }
  i++;
  if (i < text.length) {
    setTimeout(function() {
      boot.addText(text, cb, i);
    }, boot.timePerChar);
  } else {
    cb();
  }
};

boot.showLine = function(line, continueon, subid) {
  if (typeof line == "undefined" || line == null) {
    return;
  }

  var id = 0;
  if (typeof line == "number") {
    id = line;
    line = boot.lines[id];
  } else {
    for (var i = 0; i < boot.lines.length; i++) {
      if (boot.lines[i] == line) {
        id = i;
        break;
      }
    }
  }

  var len = 0;
  if (Object.prototype.toString.call(line) == "[object Array]") {
    len = line.length;
  }
  if (typeof subid != "number") {
    subid = 0;
  }
  if (subid >= len) {
    subid = 0;
  }
  if (Object.prototype.toString.call(line) == "[object Array]") {
    line = line[subid];
    subid++;
  }

  var text = line;
  var time = boot.defaultTime;
  if (typeof line == "object") {
    text = line.text;
    if (typeof line.time != "undefined") {
      time = line.time;
    }
    if (typeof line.actions != "undefined") {
      for (var i = 0; i < line.actions.length; i++) {
        boot.showLine(line.actions[i](id, subid, text, time));
      }
    }
  }

  if (typeof text == "undefined") {
    id++;
    subid = 0;
    if (continueon && id < boot.lines.length) {
      setTimeout(function() {
        boot.showLine(id, true, subid);
      }, time);
    }
    return;
  }

  boot.addText(text, function() {
    if (subid >= len) {
      boot.elem.appendChild(document.createElement("br"));
      id++;
      subid = 0;
    }
    if (continueon && id < boot.lines.length) {
      setTimeout(function() {
        boot.showLine(id, true, subid);
      }, time);
    }
  });
};

boot.start = function() {
  boot.showLine(0, true);
};

var nl = false;
if (boot.fallback) {
  boot.showLine("WARNING: USING FALLBACK CONSOLE MODE");
  nl = true;
}
if (!boot.speechAvailable) {
  boot.showLine("WARNING: NO VOICE OUTPUT FOUND");
  nl = true;
}
if (nl) {
  boot.showLine("");
}

boot.start();

skillset-and-workflow-display-portfolio-site.markdown

Skillset And Workflow Display - Portfolio Site

Based on https://instagram.com/p/7SZX8XQOK_/?taken-by=sajextryus

A Pen by vineeth on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=Inconsolata);
@font-face {
  font-family: "uni 05_53";
  font-style: normal;
  font-weight: normal;
  src: local("uni 05_53"), url("https://dl.dropboxusercontent.com/u/74836805/codepenassets/uni05_53.woff") format("woff");
}

body {
  background-color: #000000/*#3e3e40*/;
  /*background:
    radial-gradient(
      100vw 10vw at 50vw 0, 
      rgba(#3a2a00, 0.25) 0%,
      rgba(#3a2a00, 0) 100%
    ),
    radial-gradient(
      75vw 75vw at 10vw 0, 
      rgba(#3a4a00, 0.25) 0%,
      rgba(#3a4a00, 0) 100%
    ),
    radial-gradient(
      25vw 75vw at 90vw 0, 
      rgba(#aa4a00, 0.25) 0%,
      rgba(#aa4a00, 0) 100%
    ),
    radial-gradient(
      circle at 0 0, 
      rgba(#02aa30, 0.25) 0%,
      rgba(#032a30, 0.25) 50%,
      rgba(#0a2a30, 0.25) 70%,
      rgba(#022a30, 0) 100%
    ),
    radial-gradient(
      circle at 100vw 100vh, 
      rgba(#020a30, 0.25) 0%,
      rgba(#032a30, 0.25) 50%,
      rgba(#0a0a30, 0.25) 70%,
      rgba(#022a30, 0) 100%
    ),
    radial-gradient(
      top right, 
      rgba(#020a03, 0.25) 0%,
      rgba(#030a00, 0.25) 50%,
      rgba(#0a0a00, 0.25) 70%,
      rgba(#020a00, 0) 100%
    ),
    linear-gradient(
      to right, 
      #000a08 0%,
      #000000 50%,
      #000808 70%,
      #080808 100%
    );*/
  background-size: 100vw 100vh;
  background-attachment: fixed;
  background-position: center; 
}

#workflow-boot {
  max-width: 640px;
  margin: 0 auto 0 auto;
  color: #660033; /*#ea76ea*/
  font-family: "uni 05_53", "Inconsolata";
  font-size: 14px;
}

#workflow-boot .char {
  /*text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
 /* animation: workflow-boot-char-fade 0.1s ease-in-out 0s;*/
}

#workflow-boot .char:nth-child(3n+0) {
  /*animation: workflow-boot-char-fade 0.05s ease-in-out 1s;*/
}
#workflow-boot .char:nth-child(4n+1) {
 /* text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
  /*animation: workflow-boot-char-fade 0.1s ease-in-out 5s;*/
}
#workflow-boot .char:nth-child(5n+2) {
  /*text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
 /* animation: workflow-boot-char-fade 0.2s ease-in-out 1s;*/
}
#workflow-boot .char:nth-child(7n+4) {
  color: rgba(#660033, 0.8);
  /*text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
  /*animation: workflow-boot-char-fade 0.2s ease-in-out 0s;*/
}
#workflow-boot .char:nth-child(11n+8) {
  color: rgba(#660033, 0.8);
  /*text-shadow: 0 0 1px rgba(#ea76ea, 0.4);*/
  /*animation: workflow-boot-char-fade 0.05s ease-in-out 2s;*/
}
@for $i from 0 to 4 {
  #workflow-boot .char:nth-child(25n+#{3+$i}) {
    /*animation: workflow-boot-char-1 12s ease-in-out #{-$i*-0.1}s infinite;*/
  }
}

@keyframes workflow-boot-char-fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes workflow-boot-char-1 {
  @for $t from 0 through 100 {
    #{$t}% {
      color: rgba(#660033, random(40) / 100 + 0.6);
      /*text-shadow: 0 0 #{random(4)+8}px rgba(#ea76ea, random(40) / 100 + 0.5);*/
    }
  }
}

#workflow-boot .char-95 {
  margin: 0 -1px;
}
#workflow-boot .char-124 {
  margin: 0 -1px;
}