This content originally appeared on DEV Community and was authored by Sanjoy Paul
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 initnpm iMake 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.
If you like it the give me a follow on GitHub and X.
This content originally appeared on DEV Community and was authored by Sanjoy Paul
Sanjoy Paul | Sciencx (2024-08-16T07:23:04+00:00) Terminal Portfolio with JavaScript in Few easy steps.. Retrieved from https://www.scien.cx/2024/08/16/terminal-portfolio-with-javascript-in-few-easy-steps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.