Terminal Themed Portfolio 🌟

Terminal Themed Portfolio 🌟

Green Mode ON!!

Β·

6 min read

The coder in us loves the green terminal hacking look, isn't it?

tenor.gif

The end product looks something like this:

Annotation.png

term.png

Big Ups to our all-time favorite Brad Traversy for the video.

Let's get into it.

We are going to use WinBox.js.

WinBox is a professional HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open-source!

Click here to go to the Github repository of WinBox.

Then download or open winbox.bundle.js and copy all its contents.

bundle.png

  1. Let's create a folder, I named it terminalfolio
  2. Open up your VS Code or any of your favorite code editor
  3. Create index.html file in terminalfolio folder
  4. Create two more folders named css and js
  5. Inside css create style.css file and inside js create script.js file and winbox.bundle.js file

Paste all the contents you have copied before in your winbox.bundle.js and you no need to touch it anymore.

Let's begin with index.html

  • Created the boilerplate and renamed the title to TerminalFolio
  • Let's link our style.css above the title and both our JS files just above body tag at the bottom
  • Inside the body tag the following code is written:

1.png

The above was the code for the container class inside the div tag in which first we used a nav tag for our about and contact section Then with the use of the main tag, we wrote the whole body of our website.

The cursor class is used for the blinking typewriter animation.

All the links to various social profiles are then filled using an anchor tag with target="_blank" so that each link would open into a new tab.

We will then use another div tag and write the following code in it:

2.png

  • The hidden class is used because we do not want the content of the about and contact section to be visible unless someone clicks it, we will style that using css later.
  • All the content of the about and contact section is filled here using h3 and p tags.
  • The span tag is an inline container used to mark up a part of a text, or a part of a document.
  • The #about-content and the #contact-content id are used for the about and contact section respectively so that styling can be done easily.
  • The ul tag defines an unordered (bulleted) list. Using the ul tag together with the li we have to create unordered lists.

That is all we had to do in the index.html file.

Let us style our website now:

  • The box-sizing property allows us to include the padding and border in an element's total width and height.
  • The :root selector matches the document's root element. In HTML, the root element is always the HTML element.
  • Assigned it with a variable text-color having a hex value of #00aa00 for the terminal green look.

carbon.png

Styling body and h1 tags:

  • The font family I used to give it a terminal-based look is Roboto Mono. You can find it in the google fonts and link or import them into your files.
  • The h1 is passed with the above color with font-size of 50px, letter-spacing of -5px and margin-bottom of 20px

5.png

Styling h2, h3, p, a and ul tags:

  • The list-style-type of the ul tag is set to none so as to remove the bullet points that were included in the ul tag earlier.
  • The variable text-color is included in h2 and a tags.
  • The text-decoration is set to none in the a tag to remove the underline from the links.

6.png

Styling nav tag:

  • The cursor: pointer; in the nav ul li helps in blinking animation.
  • The flex property is much responsive and mobile-friendly. It is easy to positioning child elements and the main container. The margin doesn't collapse with the content margins.

7.png

Styling container :

  • The max-width property in CSS is used to set the maximum width of a specified element.
  • Auto margins work in both directions as long as there is room to push.
  • An important part of customizing your Flexbox is changing the direction of the flex line. By default, the Flex Line goes in the direction of text: left to right, top to bottom.
  • The justify-content property of Flex Containers adjusts the positions of Flex Items on the Main Axis.
  • align-items is complementary to justify-content. align-items adjusts the way Flex Items are positioned on the Cross Axis.
  • 'height: 80vh;` : this sets the height to be 80% of the viewport height.

8.png

Styling WinBar:

  • wb-body class is found out by inspecting the element using Chrome Developer tools and styled.

9.png

Styling hidden class and rest of css

  • display is set to none because we want to use it after clicking.
  • The cursor class is styled using animations and keyframes.

10.png

On the way to JavaScript now :

  • Let us declare four variables about, contact, aboutContent, contactContent and initialise it with document.querySelector(#respective id's).

The querySelector() allows you to find the first element that matches one or more CSS selectors.

11.png

Adding Event Listeners in about and contact section:

  • Let us take the about which is the list item and an event listener and listen for a click and when it is clicked we are going to call a function and we will create our winbox inside this function
  • We are going to declare an aboutBox variable and initialize it with new WinBox and now if you click about on the page a small blank window will pop up. Our next job is to style that.
  • Inside the function, it takes an object with some options
  • Let us add a title as About Me and the rest of the properties to make it look like our final product.
  • Proper dimension is added and then for positioning, we have added top, bottom, right, and left.
  • For adding content inside we will take it from the dom so instead of HTML we are going to use mount and then we are going to add aboutContent and so if we click about me in the web now, that about content is going to be put right in there.
  • We are going to have an onfocus and that is going to set the background and onblur as we want the foreground to be green, the background one to be gray
  • So if we go and if we go to about it is green and if we click on contact the about turns to gray and if we click back on about the contact turns to gray. 12.png

  • For the contact, it is going to be the same thing (As shown below)

13.png

That's it. You have your own little terminal-based portfolio now. I have hosted mine in netlify, you can too. If you don't know how to host it on Netlify, watch this video by clicking here

Click Here to see the final product.

Here is the GitHub repository link for the same : Click Here

See you in my next Blog article, Take care

Did you find this article valuable?

Support Anirudh Panda by becoming a sponsor. Any amount is appreciated!

Β