Terminal Themed Portfolio 🌟
Green Mode ON!!
6 min read
The coder in us loves the green terminal hacking look, isn't it?
The end product looks something like this:
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.
- Let's create a folder, I named it terminalfolio
- Open up your VS Code or any of your favorite code editor
- Create index.html file in terminalfolio folder
- Create two more folders named css and js
- 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:
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:
- 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.
spantag is an inline container used to mark up a part of a text, or a part of a document.
#contact-contentid are used for the about and contact section respectively so that styling can be done easily.
ultag defines an unordered (bulleted) list. Using the ul tag together with the
liwe have to create unordered lists.
That is all we had to do in the index.html file.
Let us style our website now:
box-sizingproperty allows us to include the padding and border in an element's total width and height.
:rootselector matches the document's root element. In HTML, the root element is always the HTML element.
- Assigned it with a variable
text-colorhaving a hex value of #00aa00 for the terminal green look.
- 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
letter-spacingof -5px and
list-style-typeof 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-coloris included in h2 and a tags.
text-decorationis set to none in the
atag to remove the underline from the links.
cursor: pointer;in the
nav ul lihelps 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.
max-widthproperty in CSS is used to set the maximum width of a specified element.
Auto marginswork 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.
justify-contentproperty of Flex Containers adjusts the positions of Flex Items on the Main Axis.
align-itemsis 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.
wb-bodyclass is found out by inspecting the element using Chrome Developer tools and styled.
hidden class and rest of css
displayis set to none because we want to use it after clicking.
cursorclass is styled using animations and keyframes.
- Let us declare four variables about, contact, aboutContent, contactContent and initialise it with document.querySelector(#respective id's).
querySelector() allows you to find the first element that matches one or more CSS selectors.
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
aboutBoxvariable and initialize it with
new WinBoxand 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
titleas 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
mountand 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
onfocusand that is going to set the background and
onbluras 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.
For the contact, it is going to be the same thing (As shown below)
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!