DevArno 🧑‍💻

My portfolio website

CLI

A few basic custom package.json scripts to make development easier

• Run application locally on PORT 3000 (http://localhost:3000): Note: Run on a different port with yarn next -p PORTNUMBER.

yarn go

• Open Cypress integration testing suite:

yarn cy

• Check code is production-ready (lint + build):

yarn test

• Prepare and commit a build for deployment: Note: You will be prompted for a commit message. This will fail if left empty. Defaults to string, no "" marks necessary.

yarn prep

• Push latest commit to a branch: Note: You will be prompted for a branch name. This will fail if you enter 'main' or leave empty. Defaults to string, no "" marks necessary.

yarn push

• List your local git branches:

yarn l

• List your remote git branches:

yarn r

• Delete a local git branch:

yarn dl BRANCHNAME

• Delete a remote git branch:

yarn dr BRANCHNAME

• Kill port 3000 (when you receive Port 3000 is in use, trying 3001 instead.):

yarn kill

SmartyPants

SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example:

	ASCII	HTML
Single backticks	'Isn't this fun?'	'Isn't this fun?'
Quotes	"Isn't this fun?"	"Isn't this fun?"
Dashes	-- is en-dash, --- is em-dash	-- is en-dash, --- is em-dash

KaTeX

You can render LaTeX mathematical expressions using KaTeX:

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

$$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt,. $$

You can find more information about LaTeX mathematical expressions here.

UML diagrams

You can render UML diagrams using Mermaid. For example, this will produce a sequence diagram:

sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?

And this will produce a flow chart:

graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D