Terminal Portfolio with JavaScript in Few easy steps.
Sanjoy Paul
Posted on August 16, 2024
Terminal Portfolio is a type of portfolio which gets rendered in our computer terminal. Making this is really easy and we need to learn basic concepts of JavaScript.
Requirements
First, let's discuss the requirements for this tutorial.
Node.js latest version.
setup package.json with
npm init
npm i
Make a new JavaScript file index.js
Install Terminal-Kit
npm i terminal-kit
Required Concepts
- Basic JavaScript and JavaScript functions.
Lets Start Building
First choose the ASCII drawing you want to see in your portfolio. Then import terminal kit by typing const term = require('terminal-kit').terminal;
in the starting of your JS code.
Then make an Variable called const asciiArt= ' '
to store the ascii art. Remember to use backtick symbol at the place of quotation to store the ascii art. Backticks are used to define template literals, which allow for string interpolation and multi-line strings.
Then make a function where u will store your info.
How Terminal-kit works:
We have to start the code with the object name term
then we can call the aesthetic attributes with " . " symbol as we know from JavaScript objects.
Here 'term' is the inbuild object which we have installed from npm i terminal-kit
.
Here i am giving examples of some attributes you can check other attributes from the doc of Terminal-Kit
bold
= It makes the text boldcyan
= This will change the text color in cyan. (You should see the available colors from the doc then use this)bgMagenta()
= This will make the background color Magenta.
There are many more styling methods in the doc.
Calling Function
After making your info function its time to call them.
console.log
the ascii and call about()
to print all of your details.
Now we have to add something called shebang.
#!/usr/bin/env node
at this in the line 1 of your index.js code.
The line #!/usr/bin/env node is used in script files to tell the operating system which interpreter to use to execute the file.
Here it is telling the operating system to use Node.js to execute the script.
You can google it if you want to know more about it.
Now you can run node index.js
to run the portfolio in your device terminal.
Now here comes the question how to run this in other's device
We can tell others to clone the github repo to run that in their device. But this process is hectic and time consuming So, here we can use something called npm hosting.
npm Hosting:
In your project directory open package.json file.
In that json file change the name with any fancy cool name that will be your command.
Then add
"bin": {
"sanjoyxyz": "./index.js"
},
after "main": "index.js",
in the json file.
here we are all set to publish now.
run npm login
in terminal to login your npm account.
then run npm publish
to host your package on npm.
Update npm package:
If you need to update your code after hosting then-
increment the version number in package.json (e.g., from 1.0.0 to 1.0.1).
npm version patch
npm publish
Now you can run your terminal portfolio on other's device by
npx <command name>
Mine is npx sanjoyxyz
I hope you all have learned now how to make a terminal portfolio.
Posted on August 16, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024