CLI - Command Line Interface Simulation

A fun experiment for displaying simple info in a geeky manner.

Type 'help' + Enter -- for available commands.


This is an experiment built by Eeriesoft for showcasing a user profile or cv in an unusual but original way by simulating a command line interface. It's nothing more than the usual hidden elements triggered by some jQuery to show/hide each section of content, based on input values.

It makes use of jQuery-texttyper for the fancy letter animations.


Using it is pretty straight forward. Create several(as much as you need) divs or «section» elements each with it's unique id to hold your content. Make sure to have an error section (id="error") with some information to warn the user when he/she mistypes a command or if there is no section with that name, think of it as a 404 page.

A section with id="help" is also required so you can list all the available sections and let your users know what words to write to access that particular content.

The input field must be a standalone element and must not be placed inside any of the content divs or sections, and make sure you give it a classname "command", if you want to name it anything else you need to edit the app.js and change all instances of .command in the script to match your chosen classname.

In short, just view the source code of this demo, copy/modify it to your liking making sure you include the error and help sections.


Download/fork the source code: Github
Depends on jQuery
License: MIT

Command not found!

Type 'help' + Enter -- for available commands.


Type [command] + Enter