25,381 reads
How to make a Terminal like Portfolio Website for yourself
by PradyumanJanuary 12th, 2019
Too Long; Didn't Read
Let’s code a portfolio website that looks like a Terminal.
Let’s code a portfolio website that looks like a Terminal.
Are you a coder? Do you enjoy programming? Have you ever used Terminal? Do you wish to have a portfolio website that looks like a Terminal?
Well, this is what we are going to make in this article.
Let’s start with the result itself, what we are going to build here, is what I use for my creative portfolio website. Go and check the following link out, Open the following link in a new tab, I’ll wait…
Don’t want to go to a new link? You’ll miss something great, but anyways here is the image.
Did you like it? Want to build this for yourself? Then read along…
So this is my personal website portfolio that I’ve hosted on GitHub Pages. You can also host it on GitHub Pages, or you can use another service that deploys your code from GitHub (for free!), like Netlify.
If you want to use GitHub Pages, then, go to GitHub, make a new repository and name it as [your-username].github.io .
You have to put your own username in the above bracket, which is case sensitive too.
If you don’t want to use GitHub Pages, then you can name the repository whatever you want.
Now let’s get into some code.
First let’s make HTML file for your web-page. The html code is very simple to understand, as the most of the magic that we will do, is in JavaScript or CSS.
I’ve named the file, index.html for this. The code will be like this:
<html><head><title>CodeNerve</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="index.css"></head><body><script type="text/javascript" src="index.js"></script><div id="console"></div><script type="text/javascript", src="index2.js"></script></body></html>
That’s just simple HTML to make the base of our portfolio.
Now we can make it a bit better looking and make it look like a terminal. That’s where CSS is our saviour. For CSS, we will be making the background black, terminal text white and the “labels” bright green.
The code for CSS file, index.css will look something like this:
body {background-color: #000}
#console {font-family: courier, monospace;color: #fff;width:750px;margin-left:auto;margin-right:auto;margin-top:100px;font-size:14px;}
a {color: #0bc;text-decoration: none;}
#a {color: #0f0;}
#c {color: #0bc;}
#b {color: #ff0096;}
#k {animation: change 1s;}
#op{color: #888888}
@keyframes change {0% { color: #0f0; }50% { color: #0f0; }99% { color: black; }}
That being done, now we have to write code for the text auto typing and text itself. First, let’s get done ourself by text auto-typing part which we’ll do using JavaScript.
The code for index.js file would look something like this:
var Typer={text: null,accessCountimer:null,index:0,speed:2,file:"",accessCount:0,deniedCount:0,init: function(){accessCountimer=setInterval(function(){Typer.updLstChr();},500);$.get(Typer.file,function(data){Typer.text=data;Typer.text = Typer.text.slice(0, Typer.text.length-1);});},
content:function(){
return $("#console").html();
},
write:function(str){
$("#console").append(str);
return false;
},
addText:function(key){
if(key.keyCode==18){
Typer.accessCount++;
if(Typer.accessCount>=3){
Typer.makeAccess();
}
}
else if(key.keyCode==20){
Typer.deniedCount++;
if(Typer.deniedCount>=3){
Typer.makeDenied();
}
}
else if(key.keyCode==27){
Typer.hidepop();
}
else if(Typer.text){
var cont=Typer.content();
if(cont.substring(cont.length-1,cont.length)=="|")
$("#console").html($("#console").html().substring(0,cont.length-1));
if(key.keyCode!=8){
Typer.index+=Typer.speed;
}
else {
if(Typer.index>0)
Typer.index-=Typer.speed;
}
var text=Typer.text.substring(0,Typer.index)
var rtn= new RegExp("\\n", "g");
$("#console").html(text.replace(rtn,"<br/>"));
window.scrollBy(0,50);
}
if (key.preventDefault && key.keyCode != 122) {
key.preventDefault()
};
if(key.keyCode != 122){ // otherway prevent keys default behavior
key.returnValue = false;
}
},
updLstChr:function(){
var cont=this.content();
if(cont.substring(cont.length-1,cont.length)=="|")
$("#console").html($("#console").html().substring(0,cont.length-1));
else
this.write("|"); // else write it
}
}
This above code types what we see on the terminal. Now let us set the typing speed and make the url’s appear like url.
Add the following code below the above code, in the same file, index.js.
function replaceUrls(text) {var http = text.indexOf("http://");var space = text.indexOf(".me ", http);
if (space != -1) {
var url = text.slice(http, space-1);
return text.replace(url, "<a href=\\"" + url + "\\">" + url + "</a>");
}
else {
return text
}
}
Typer.speed=3;Typer.file="[your-name].txt"; // add your own name hereTyper.init();
var timer = setInterval("t();", 30);function t() {Typer.addText({"keyCode": 123748});
if (Typer.index > Typer.text.length) {
clearInterval(timer);
}
}
Now everything is set up for our portfolio website. Enjoy!!
But… wait,
Where is the text that we want to have, certainly any of the code above did not give the text to be typed, and certainly none of this is ML or AI, that will get the text for us automatically.
So make a file with your name as the filename, with .txt extension. The file name should be like [your-name].txt.
Add the following details, and replace with the text you want to have in your portfolio.
<span id="a">your-first-name@your-last-name</span>:<span id="b">~</span><span id="c">$</span> cd CodeNerve/<!-- laglaglaglaglaglag -->About_Us<span id="a">your-first-name@your-last-name</span>:<span id="b">~</span><span id="c">$</span> cat <!-- laglaglaglaglaglaglaglaglag -->[your-name].txt<br/><br/>My favorite code quote, "<span id="k">Quote you like</span>". <!-- sjkfhskjf -->
Hey There! This is the portflio website in the skin of a terminal.<!-- laglaglaglaglaglaglaglaglaglaglaglag --><p>You can see that, this is how your portfolio would look like.</p><p>You can introduce yourself here.</p> <!-- bitlagbitlagbitlagbitlagbitlagbitlag --><p> You can also tell what you've worked and known and what skills you have, you can also give link to your professional portfolio here<a href="link"> portfolio</a>.</p><!-- delaydelaydelaydelaydelaydelaydelay --><p>Tell more about yourself. <br><br><br>Give your project links or something like that. <a href="link"> Here you go</a>.</p><!-- moredelaymoredelaymoredelaymoredelaymoredelaymoredelay--><p> You can give links to other professional profiles you have on Internet, here: <br> <a href="link1">Profile1</a> <br> <a href="link2">Profile2</a> and <br> <a href="link3">Profile3</a>.</p>
You can also give your email ID for contacting you<!-- slightdelayhere-->, feel free to send me an email at<!-- longlonglongcomment --><a href="Your email ID">Email</a>.
<p>Cheers!</p>
And we’re all done, now for sure :)
You can find the full source code for this here.
If you’ve used GitHub Pages, your website will appear at, [your-username].github.io.
If you’ve not used GitHub Pages, but a website like Netlify. Then go to Netlify, login and click on the greenish button saying, new site from git.
Deploy the code from GitHub, and it will give you a url where your site is present.
You’ve built yourself a personal website in a skin of a Terminal.
What are you waiting for? Go and show off !!
Read my previous post about building an eye-tracking and face detecting app for beginners.
L O A D I N G
. . . comments & more!
. . . comments & more!
