Portfolio - Type help

index.html

<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <div class="columns">
        <div class="column is-3 is-flex">
          <div class="column-child sidebar shadow">
            <div class="sidebar-header has-text-centered">
              <div class="photo"><img src="https://instagram.fdel25-1.fna.fbcdn.net/vp/5dcd7fd07ce899149702f81cd8155c23/5E6F9BC3/t51.2885-19/s150x150/71826152_1360562164120956_721707767340990464_n.jpg?_nc_ht=instagram.fdel25-1.fna.fbcdn.net" /></div>
              <h2 class="header-name">Jatin Rao</h2>
              <h5>Web Developer</h5>
              <div class="social-icons">
                <a href="https://www.facebook.com/jatin.rao.51"><i
                                            class="fab fa-facebook icon"></i></a>
                <a href="https://twitter.com/jatinn_r"><i class="fab fa-twitter icon"></i></a>
                <a href="https://www.linkedin.com/in/jatinrao/"><i class="fab fa-linkedin icon"></i></a>
                <a href="https://github.com/jatin2003"><i class="fab fa-github icon"></i></a>
                <a href="https://www"><i class="fab fa-instagram icon"></i></a>
              </div>
              <div class="resume">
                <a href="./" class="sidebar-link">
                                        Resume
                                    </a>
              </div>
            </div>
          </div>
        </div>
        <div class="column is-flex">
          <div class="column-child terminal shadow">
            <div class="terminal-bar dark-mode">
              <div class="icon-btn close"></div>
              <div class="icon-btn min"></div>
              <div class="icon-btn max"></div>
              <div class="terminal-bar-text is-hidden-mobile dark-mode-text">guest@jatin: ~</div>
            </div>
            <div class="terminal-window primary-bg" onclick="document.getElementById('dummyKeyboard').focus();">
              <div class="terminal-output" id="terminalOutput">
                <div class="terminal-line">
                  <span class="help-msg">Welcome to my portfolio — Type <span class="code">help</span> for a list of supported commands.</span>
                </div>
              </div>
              <div class="terminal-line">
                <span class="success">➜</span> <span class="directory">~</span> <span class="user-input" id="userInput"></span>
                <input type="text" id="dummyKeyboard" class="dummy-keyboard">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer">
    <div class="content has-text-centered">
      <p>
        Made with <i class="fas fa-heart icon"></i> by Jatin Rao.
      </p>
    </div>
  </footer>
</section>

portfolio-type-help.markdown

Portfolio - Type help

I've created Command Line Portfolio! Just type help for list of supported commands!

A Pen by Jatin Rao on CodePen.

License.

script.js

const BLACKLISTED_KEY_CODES = [38];
const COMMANDS = {
  help:
    'Supported commands: <span class="code">about</span>, <span class="code">experience</span>, <span class="code">education</span>, <span class="code">skills</span>, <span class="code">contact</span>',
  about:
    "Hello 👋<br>I'm Jatin Rao. I’m a 15 yr old web developer currently living in India. I have a burning passion to want and help others with code that I create. I enjoy the limitless potential of impact that I can have with what I build. It is what pushes me every day to become a better developer. Outside of coding, you can find me reading books!",
  skills:
    '<span class="code">Languages:</span> Python, HTML, CSS, JavaScript<br><span class="code">Technologies:</span> Git, SQL<br><span class="code">Frameworks:</span> React.js, Vue.js, Django',
  education:
    "St. Dominic's Academy, India<br>Higher Secondary — Computer Science",
  resume: "<a href='./resume.pdf' class='success link'>resume.pdf</a>",
  experience: "No Experience😥",
  contact:
    "You can contact me on any of following links:<br><a href='https://www.facebook.com/jatin.rao.51/' class='success link'>Facebook</a> ,<a href='https://www.instagram.com/jatin.codes/' class='success link'>Instagram</a>, <a href='https://www.twitter.com/jatinn_r/' class='success link'>Twitter</a>"
};
let userInput, terminalOutput;

const app = () => {
  userInput = document.getElementById("userInput");
  terminalOutput = document.getElementById("terminalOutput");
  document.getElementById("dummyKeyboard").focus();
  console.log("Application loaded");
};

const execute = function executeCommand(input) {
  let output;
  input = input.toLowerCase();
  if (input.length === 0) {
    return;
  }
  output = `<div class="terminal-line"><span class="success">➜</span> <span class="directory">~</span> ${input}</div>`;
  if (!COMMANDS.hasOwnProperty(input)) {
    output += `<div class="terminal-line">no such command: ${input}</div>`;
    console.log("Oops! no such command");
  } else {
    output += COMMANDS[input];
  }

  terminalOutput.innerHTML = `${
    terminalOutput.innerHTML
  }<div class="terminal-line">${output}</div>`;
  terminalOutput.scrollTop = terminalOutput.scrollHeight;
};

const key = function keyEvent(e) {
  const input = userInput.innerHTML;

  if (BLACKLISTED_KEY_CODES.includes(e.keyCode)) {
    return;
  }

  if (e.key === "Enter") {
    execute(input);
    userInput.innerHTML = "";
    return;
  }

  userInput.innerHTML = input + e.key;
};

const backspace = function backSpaceKeyEvent(e) {
  if (e.keyCode !== 8 && e.keyCode !== 46) {
    return;
  }
  userInput.innerHTML = userInput.innerHTML.slice(
    0,
    userInput.innerHTML.length - 1
  );
};

document.addEventListener("keydown", backspace);
document.addEventListener("keypress", key);
document.addEventListener("DOMContentLoaded", app);

scripts

<script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

style.css

html,
body {
  margin: 0;
  height: 100%;
}

body,
footer,
.hero-body {
  background-color: rgb(10, 25, 47) !important;
}

a {
  color: inherit;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

p {
  color: rgb(136, 146, 176);
}

.title {
  color: rgba(139, 180, 216, 0.94);
}

.sidebar {
  background-color: rgb(23, 42, 69);
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 5px;
  color: rgb(136, 146, 176);
  opacity: 1;
}

.sidebar-link {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: rgba(139, 180, 216, 0.94);
}

.sidebar-link:hover {
  color: rgb(230, 241, 255);
}
.header-name {
  font-weight: 600;
  color: rgb(230, 241, 255);
}

.column-header {
  border-bottom: 2px rgb(45, 57, 82) solid;
  margin-bottom: 1rem;
}

.column-header > h1 {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  color: white;
}

.icon,
.sidebar-link {
  transition-duration: 250ms;
}

.icon:hover {
  color: white;
}

.terminal-bar {
  background-color: #eae8e9;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  position: relative;
}

.dark-mode {
  background-image: linear-gradient(180deg, #464248 0%, #3b383d 100%);
  border-bottom: 1px solid rgba(66, 66, 66, 0.5);
}

.dark-mode-text {
  color: #bdb9bf !important;
}

.icon-btn {
  border-radius: 50%;
  margin-top: 7px;
  height: 15px;
  width: 15px;
  margin-bottom: 0.5rem;
}

.terminal-bar > div.icon-btn:first-child {
  margin-left: 0.6rem;
}

.terminal-bar > div.icon-btn:not(:first-child) {
  margin-left: 0.5rem;
}

.terminal-bar > div.icon-btn:last-child {
  margin-right: 0.6rem;
}

.close {
  background-color: #fa615c;
}

.max {
  background-color: #3fc950;
}

.min {
  background-color: #ffbd48;
}

.terminal-window {
  background-color: black;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  height: 254px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.primary-bg {
  background-color: rgb(23, 42, 69);
}

.shadow {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}

.terminal-bar-text {
  position: absolute;
  margin-top: 3px;
  color: #383838;
  width: 100%;
  text-align: center;
  font-weight: 500;
}

.has-equal-height {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.terminal-output {
  overflow-y: hidden;
  overflow: auto;
}

.column-child {
  flex: 1;
}

.terminal-line {
  position: relative;
  font-family: "Anonymous Pro", monospace;
  font-size: 0.9rem;
  color: #b7c5d2;
}

.directory {
  color: #75e1e7;
  font-weight: 500;
}

.success {
  color: #8dd39e;
}

.code,
.error,
.fa-heart {
  color: #d7566a;
}

.fa-heart {
  padding-top: 0.5rem;
}

.dummy-keyboard {
  opacity: 0;
  filter: alpha(opacity=0);
}

::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 768px) {
  .resume {
    padding-bottom: 0.5rem;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet" />