Build a Terminal Style Portfolio Page
Last week I published a CSS framework for building pages like a terminal. In this story, I’m going to introduce UITerminal and I’m gonna build a basic portfolio page.
Portftolio will be like this:
First things first, We need UITerminal, and Bootstrap. You can get them here: https://github.com/omerimzali/uiterminal
https://getbootstrap.com/docs/4.3/getting-started/introduction/
After we install these head will be like this:
<html>
<head>
<link href=”https://fonts.googleapis.com/css?family=Press+Start+2P" rel=”stylesheet”>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/gh/omerimzali/uiterminal@master/uiterminal.min.css"></head>
Here in this section, UITerminal-full is covering whole container, Container will be the terminal window. And we change the background color.
<body style=’background-color: #212222;’>
<div class=”container”>
<div class=’uiterminal-full’></div>
</div>
Uiterminal-line is acting like a terminal line, If it has .is-empty It’ll appear without $.
itext-warning is giving a blink effect after header of the page.
<div class=”container”>
<div class=’uiterminal-full’><! — Terminal Lines →
<span class=’uiterminal-line is-empty’> <h2>Name of the Developer</h2></span>
<span class=’uiterminal-line uitext-warning’>A developer!</span>
<span class=’uiterminal-line’>Introduce yourself here!</span>
<span class=’uiterminal-line’>Introduce yourself here!</span>
<span class=’uiterminal-line’>Introduce yourself here!</span>
<span class=’uiterminal-line’>Introduce yourself here!</span>
<span class=’uiterminal-line’>Introduce yourself here!</span></div>
</div>
Now the Portfolio page will be like this:
Lets add some Projects, Skills or etc. I’ll use lists to creating those.
Here is a basic list.
<span class=’uiterminal-line is-empty’> <h4>Projects</h4></span>
<span class=’uiterminal-line is-empty’>
<ul>
<li>
<a href=’https://github.com/omerimzali/uiterminal' class=””>
<button class=’uiterminal-button uitext-white uibg-success’>UITerminal</button>
</a>
</li>
<ul>
<li>a CSS Framework</li>
<li>Style like a Terminal</li>
</ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
</ul>
</span><span class='uiterminal-line is-empty'><br></span>
<span class='uiterminal-line is-empty'> <h4>What I Do?</h4></span>
<span class='uiterminal-line is-empty'>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</span>
For Contact part, We got Buttons and a header.
Is-centered is centering any line of these terminal. Uiterminal-button is how we create a button here and uitext-white and uibg-primary, uibg-secondary and etc. are color classes.
<span class=’uiterminal-line is-empty’> <h4>Contact</h4></span>
<span class=’uiterminal-line is-empty is-centered’>
<button class=’uiterminal-button ‘>Blog</button>
<button class=’uiterminal-button uitext-white uibg-primary’>GitHub</button>
<button class=’uiterminal-button uitext-white uibg-secondary’>Twitter</button>
<button class=’uiterminal-button uitext-white uibg-success’>Facebook</button>
<button class=’uiterminal-button uitext-white uibg-danger’>Youtube</button></span>
Now the portfolio page is ready.
You can find the whole portfolio example here: https://github.com/omerimzali/uiterminal/tree/master/examples
And you the example portfolio page here: http://programlama.xyz/uiterminal/portfolio.html