<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="main">
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<div class="container">
<div class="typewriter">
<h1>Internship portfolio</h1>
<p>by Amer Jaganjac</p>
</div>
<div id="index">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span><br><br>
<b>Hallo, this is very important introduction!</b>
<br><br>
<p>I was born under the shower of thousand missiles during the siege of my birthplace, Zenica. I am 25 year old Bosnian who made his way in the Netherlands - not the best way, but I win every day.
I study Informatics and my major is Media Design. Prior to this adventure I sat at Tilburg University for two years, but booze and party prevented me from continuing. I did learn a lot there. After that I went to work in a production, and I dropped some sweat. <br> After one year, I was so fed up with injustice towards uncertified workforce - that I decided to re-educate myself, and since then I never failed a single exam.
I like to get my shit done. I speak Dutch, English and a fluent Bosnian whenever I get pissed because my code doesnt work. I can code, but I always have tabs open for some sneaky git support. At first I look like younger version of your dad, but when you get to know me - you will fall in love. </p>
<br>
<br>
<h3>''I always analyse the world around me. I try to get the deep understanding of people in my environment - what do they like, what keeps them awake, what makes them horny? Its a continiuing process and the results thereof I like to turn into money making concept.''</h3>
<br> <br>
<p>I get passionate about webdesign, user experience design, branding and concepting - and mostly I really have great results. <br>
<p>I am very independent, and if I need a smoke break - I will definitely have it. If it's nice weather, you will see me sitting in the sun. I dislike managers who draw lines, but I would die and give my best for managers who erase the lines. <br> I grew close to deadlines, and at this point in my life I find them to be my best hobby. There is something specially sexy to the fact that you are forced to bring up some product by the midnight of the next day. Its fun and it gives me drive.
I dont play video-games, and I won't try to make you stop playing. I don't smoke weed, and I won't look you bad because of it. I do drink coffee, and I do like to have clean desk environment.
<br>
My future internship company will be the place where I will develop myself into awesome professional with great skills in IT and Media Design.
<br><br>
<i>I am limited edition, so better be sure to call me asap. </i>
<br><br>
Groetjes,<br><br>
Amer</p>
</div>
</div>
#main{
min-weight: 100vh;
min-height: 100vh;
color: white;
background: #d53369; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #cbad6d, #d53369); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #cbad6d, #d53369); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.typewriter h1 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
#index{
border: 15px solid white;
padding: 5%;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
