This content originally appeared on DEV Community and was authored by Christian Juth
There are tons of creative portfolio sites out there, but it takes a lot of effort to build a website that stands out. Instead of building the perfect portfolio site, what if you built an interactive resume CLI? That also sounds difficult, but I'm going to show you how to do it in under 10 minutes using a CLI generator I created.
We need TypeScript because this library generates the CLI by parsing the parameter types of our CLI functions. TypeScript provides enough context for the library to generate complex terminal interactions with minimal effort from you as the developer.
Note: This library is an alpha release, so some bugs are expected. There are also currently some limitations so for now keep all your cli code in index.ts.
Setup
We first start by initializing a new CLI project using npx.
npx @christianjuth/ts-cli-generator
Enter whatever you like when prompted for the cli-name, but I recommend some combination of your name and resume.
$ npx @christianjuth/ts-cli-generator
✔ Enter a name for your cli … christianjuth-resume
✔ Creating project files
⠧ Installing npm dependencies
This gives us the following files:
christianjuth-resume
├── index.ts
├── package.json
├── README.md
└── tsconfig.json
If we open index.ts we should see something like this:
/**
* Add two numbers
*/
function add(x: number, y: number) {
return x + y;
}
/**
* Get the length of a string
*/
function lengthOfString(str: string) {
return str.length;
}
export const cli = {
add,
lengthOfString,
};
The above index.ts generates these commands when we run npm start:
christianjuth-resume CLI 0.0.0
Powered by @christianjuth/ts-cli-generator
Commands:
add Add two numbers
length-of-string Get the length of a string
We have also get the following npm scripts:
npm start <cli-command> # more on this later
npm start # excluding <cli command> gives us usage
npm run dev <cli-command> # same as start but with nodemon
npm run build # build the cli
Customize your resume
We will use the npm openurl package so we can have our CLI programmatically open links in the browser. Start by installing openurl and it's types.
npm i openurl
npm i -D @types/openurl
Start by adding some social links to your resume. Replace the contents of index.ts with the following:
import { open, mailto } from "openurl";
/**
* Follow me on Twitter 🐦
*/
function twitter() {
open("<your Twitter url>");
}
/**
* Connect with my on LinkedIn 👔
*/
function linkedin() {
open("<your LinkedIn url>");
}
/**
* See my projects on GitHub 🚀
*/
function github() {
open("<your GitHub url>");
}
export const cli = {
twitter,
linkedin,
github,
};
If we run our CLI using npm start we get the following commands:
$ npm start
> christianjuth-resume@0.0.0 start
> ts-cli-generator build && node .
✔ Detecting cli functions
✔ Writing cli files
✔ Emitting CLI build
christianjuth-resume CLI 0.0.0
Powered by @christianjuth/ts-cli-generator
Commands:
twitter Follow me on Twitter 🐦
linkedin Connect with my on LinkedIn 👔
github See my projects on GitHub 🚀
We can open the links by running:
# npm start <cli-command>
npm start twitter
npm start linkedin
npm start github
Add some projects to our resume
Add the following to index.ts
// prev functions...
/**
* Check out some of my projects ✨
*/
function projects(str: "project1" | "project2") {
switch (str) {
case "project1":
open("https://...");
break;
case "project2":
open("https://...");
}
}
export const cli = {
twitter,
linkedin,
github,
projects
};
If we run npm start projects, we now get a CLI interface to select what project we want to open.
$ npm start projects
> christianjuth-resume@0.0.0 start
> ts-cli-generator build && node . "projects"
✔ Detecting cli functions
✔ Writing cli files
✔ Emitting CLI build
? Select praram type for str › - Use arrow-keys. Return to submit.
❯ project1
project2
Select a project and press enter to view the project in the browser.
Add a contact form
For simplicity, we will create a contact form that opens a mailto link, but you could easily make a POST request instead.
And add the following to index.ts:
// prev functions...
/**
* Contact me 📪
*/
function contact(info: {
subject: string;
name: string;
email: string;
phoneNumber: string;
}) {
const { subject, name, email, phoneNumber } = info;
const EMAIL = "your.email@example.com";
const message = `
Name: ${name}
Email: ${email}
${phoneNumber ? `Number: ${phoneNumber}` : ""}
`;
mailto([EMAIL], {
subject,
body: message,
});
}
Notice how our CLI is able to handle objects as parameters (it can even handle nested objects). Arrays aren't supported yet, but coming soon.
Try running yarn start contact and see what happens.
The final product
The final version of index.ts is posted at the bottom if you want to see it for reference.
Install the CLI locally by running:
npm run build
npm link
# substitute christianjuth-resume with your cli name
christianjuth-resume # print usage
christianjuth-resume <cli-command> # run command
Next steps
Don't stop here! Add your own functions to your CLI resume, and leave a comment below saying what you added.
You could add a command like downloadResume that emits a PDF file.
I'm not gonna add this part since there are plenty of articles already written, but your next step is to publish to NPM so you can share your resume with others. After publishing, you can tell people to run the following command to view your resume without installing id.
# substitute christianjuth-resume with your cli name
npx christianjuth-resume
Thanks for reading!
Out final CLI has these commands:
christianjuth-resume CLI 0.0.0
Powered by @christianjuth/ts-cli-generator
Commands:
twitter Follow me on Twitter 🐦
linkedin Connect with my on LinkedIn 👔
github See my projects on GitHub 🚀
projects Check out some of my projects ✨
contact Contact me 📪
And our final index.ts file looks like this:
import { open, mailto } from "openurl";
/**
* Follow me on Twitter 🐦
*/
function twitter() {
open("<your Twitter url>");
}
/**
* Connect with my on LinkedIn 👔
*/
function linkedin() {
open("<your LinkedIn url>");
}
/**
* See my projects on GitHub 🚀
*/
function github() {
open("<your GitHub url>");
}
/**
* Check out some of my projects ✨
*/
function projects(str: "project1" | "project2") {
switch (str) {
case "project1":
open("https://...");
break;
case "project2":
open("https://...");
}
}
/**
* Contact me 📪
*/
function contact(info: {
subject: string;
name: string;
email: string;
phoneNumber: string;
}) {
const { subject, name, email, phoneNumber } = info;
const EMAIL = "your.email@example.com";
const message = `
Name: ${name}
Email: ${email}
${phoneNumber ? `Number: ${phoneNumber}` : ""}
`;
mailto([EMAIL], {
subject,
body: message,
});
}
export const cli = {
twitter,
linkedin,
github,
projects,
contact,
};
This content originally appeared on DEV Community and was authored by Christian Juth
Christian Juth | Sciencx (2022-01-30T03:04:48+00:00) Turn Your Resume Into an Interactive CLI in 10 minutes using TypeScript. Retrieved from https://www.scien.cx/2022/01/30/turn-your-resume-into-an-interactive-cli-in-10-minutes-using-typescript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.