< html >
< head >
<!-- Basics -->
< meta charset = "utf-8" >
< meta name = "robots" content = "index,follow" >
< title > Meliurwen's Personal Page< / title >
< link rel = "shortcut icon" href = "favicon.ico" >
< link rel = "stylesheet" type = "text/css" href = "css/theme.css" >
< script type = "text/javascript" src = "js/typewriter-bundle.min.js" > < / script >
< / head >
< body >
< div id = "box-2" style = "postion: absolute; z-index: 10; opacity: 1" >
<!-- Content -->
< article >
< div id = "arrowDown" >
< h1 > Meliurwen N.< br / > < span id = "subtitle" > Available on < a href = "https://github.com/meliurwen" target = "_blank" > Github< / a > , coding for fun and uni projects.< / span > < / h1 >
< img src = "img/arrow_down.png" width = "70" height = "70" border = "0" onclick = "fade(10);" / > < / div >
< / article >
<!-- Video is muted & autoplays -->
< video autoplay loop id = "video-background" muted plays-inline poster = "img/beammm_thumbnail.jpg" >
< source src = "video/beammm_loop.webm" type = "video/webm" >
< source src = "video/beammm_loop.mp4" type = "video/mp4" >
< / video >
< / div >
< div id = "box-1" class = "tab-center" style = "position: absolute; z-index: -5;width:100%; opacity: 0;" >
< div id = "terminal-1" class = "terminal" >
< div id = "titlebar" >
< div style = "width:33.33%;float:left;" >
< div class = "tab-center" style = "height:33px;width:33px;float:left;color:#b3b3b3;" >
< span class = "e-icon-close" > < / span >
< / div >
< / div >
< div style = "width:33.33%;float:left;" >
< div class = "tab-center" style = "height:33px;color:#b3b3b3;font-weight: 800;" >
Terminal
< / div >
< / div >
< div style = "width:33.33%;float:left;" >
< div class = "tab-center" style = "height:33px;width:33px;float:right;color:#b3b3b3;" >
< span class = "e-icon-fullscreen" > < / span >
< / div >
< div class = "tab-center" style = "height:33px;width:40px;float:right;color:#b3b3b3;" >
< span class = "e-icon-search" > < / span >
< / div >
< / div >
< / div >
< div id = "navbar" >
< div style = "float:left;" >
< div class = "tab-center" style = "height:30px;width:30px;float:left;color:#b3b3b3;" >
< span class = "e-icon-plus" > < / span >
< / div >
< div style = "height:30px;width:180px;float:left;color:#b3b3b3;border: 1px solid #232323;border-top-left-radius:4px;border-top-right-radius:4px;height:100%" >
< div class = "tab-center" style = "width:30px;height:30px;float:left;" >
< span class = "e-icon-close" > < / span >
< / div >
< div class = "tab-center" style = "width:178px;height:30px;float:left;position:absolute;" >
< span > Start< / span >
< / div >
< / div >
< / div >
< div style = "float:right;" >
< div style = "padding-top:8px;float:right;color:#b3b3b3;" >
< span class = "e-icon-recent" style = "padding-right:8px;" > < / span >
< / div >
< / div >
< / div >
< div id = "tab-left" >
< div id = "tab-left-container" style = "border-style:hidden;" >
< span id = "typewriter-left" class = "typewriter" > < / span >
< span class = "caret" > < / span >
< / div >
< / div >
< / div >
< / div >
<!-- Player Audio -->
< div id = "playerAudio" class = "widgets" >
< div id = "songName" > Clau M.& Nect< br / > House of Dreams< / div >
< img id = "audioButton" src = "img/play.png" / >
< audio id = "audioSource" preload = "none" >
< source src = "audio/Clau _M_Nect_-_House_Of_Dreams.ogg" type = "audio/ogg" >
< source src = "audio/Clau _M_Nect_-_House_Of_Dreams.mp3" type = "audio/mpeg" >
Your browser does not support the audio element.
< / audio >
< / div >
<!-- Tape Credits -->
< div id = "dummyTape" class = "widgets" >
< a href = "https://vimeo.com/193542635" > < img id = "tapeImage" target = "_blank" src = "img/tape.png" > < / a >
< div id = "tape" > < a id = "tape" href = "https://vimeo.com/193542635" target = "_blank" > Beeple< br > BEAMMM (loop)< / a > < / div >
< / div >
< script >
audioButton = document.getElementById("audioButton")
audioSource = document.getElementById("audioSource")
audioButton.onclick = function() {
if (audioSource.paused) {
audioSource.play();
audioButton.src = "img/pause.png";
}
else {
audioSource.pause();
audioButton.src = "img/play.png";
}
};
audioSource.onended = function() {
audioButton.src = "img/repeat.png";
}
var box1 = document.getElementById('box-1');
var box2 = document.getElementById('box-2');
var a = box1.innerHTML;
var b;
var temp = 0;
var firstTime = true;
var endedTyping = false;
function fade(speed) {
if(box2.style.opacity >= 0.5) {
box1.style.opacity = 0;
box2.style.opacity = 1;
fadeMode = "out";
} else {
box1.style.opacity = 1;
box2.style.opacity = 0;
fadeMode = "in";
}
if (a != null) {
box1.innerHTML = a;
}
temp = 0;
interval = setInterval(function (){intervalFunction(interval, fadeMode)}, speed);
}
function intervalFunction(interval, fadeMode) {
if(fadeMode == "out") {
box1.style.opacity = temp;
box2.style.opacity = 1 - temp;
if(box2.style.opacity < = 0 || box1.style.opacity >= 1) {
clearInterval(interval);
zAxysTemp = box1.style["zIndex"];
box1.style["zIndex"] = box2.style["zIndex"];
box2.style["zIndex"] = zAxysTemp;
b = box2.innerHTML;
box2.innerHTML = "";
box1.innerHTML = a;
if (firstTime || !endedTyping) {
firstTime = false;
writeStuff();
}
}
} else if (fadeMode == "in") {
box1.style.opacity = 1 - temp;
box2.style.opacity = temp;
if(box2.style.opacity >= 1) {
clearInterval(interval);
zAxysTemp = box1.style["zIndex"];
box1.style["zIndex"] = box2.style["zIndex"];
box2.style["zIndex"] = zAxysTemp;
a = box1.innerHTML;
box1.innerHTML = "";
}
}
temp += 0.1;
}
function homeButtonPress() {
homeButton = document.getElementById('homeButton');
clearInterval(interval);
homeButton.src = 'img/home_pressed.png';
setTimeout(function() {
homeButton.src = 'img/home.png';
if (endedTyping) {
a = box1.innerHTML;
}
box2.innerHTML = b;
fade(10);
},250);
}
function writeStuff() {
var typewriter = require('typewriter');
twSpanLeft = document.getElementById('typewriter-left');
twLeft = typewriter(twSpanLeft).withAccuracy(95)
.withMinimumSpeed(35)
.withMaximumSpeed(50)
.build();
twLeft.put('elementary OS Loki meliurwen-web-server tty1< br > \
meliurwen-web-server login: ')
.waitRange(500, 1000)
.type('guest')
.put('< br > ')
.waitRange(500, 1000)
.put('Password:< br > ')
.waitRange(500, 1000)
.put('Last login bla bla bla< br > \
Welcome to elementary OS Loki bla bla< br > \
< br > \
* Website: https://meliurwen.tk< br > \
< br > \
0 packages have to be updated< br > \
0 security updates< br > \
< span class = "login-session" > guest@meliurwen-web-server< / span > :< span class = "tilde" > ~< / span > $ ')
.waitRange(500, 1000)
.type('tmux')
.put('< br > ', function () {document.getElementById('typewriter-left').innerHTML = "";
//Generating tmux's interface
///Right tab
tabRight = document.createElement("div");
tabRight.id = "tab-right";
tabRight.innerHTML ='\
< div id = "tab-right-container" > \
< span id = "typewriter-right" class = "typewriter" > < / span > \
< span class = "caret" > < / span > \
< / div > ';
///Footer
tabBottom = document.createElement("div");
tabBottom.id = "tab-bottom";
tabBottom.innerHTML = '\
< span style = "float:left;margin-left:10px;" > [web-portfolio_0:bash*< / span > \
< span style = "float:right;margin-right:10px;" > "meliurwen-web-server.remotedatacenter" 10:53 20-Feb-18< / span > '
document.getElementById("tab-left-container").style = null;
document.getElementById("terminal-1").appendChild(tabRight);
document.getElementById("terminal-1").appendChild(tabBottom);
//End
twSpanRight = document.getElementById('typewriter-right');
twRight = typewriter(twSpanRight).withAccuracy(95)
.withMinimumSpeed(35)
.withMaximumSpeed(50)
.build();
twRight.put('guest@meliurwen-web-server:< span class = "tilde" > ~< / span > $ ')
.wait(700)
.type('./menu.sh')
.put('< br / > ', function () {tabRight = document.getElementById('tab-right');tabRight.className = "tab-center";tabRight.innerHTML = "< div > < img id = 'homeButton' class = 'pixelated' src = 'img/home.png' onclick = 'homeButtonPress();' > < img id = 'propic' class = 'pixelated' src = 'img/propic.png' > < / div > ";});
});
twLeft.put('< span class = "login-session" > guest@meliurwen-web-server< / span > :< span class = "tilde" > ~< / span > $ ')
.wait(2000)
.type('ssh guest@192.168.1.1')
.put('< br / > ')
.waitRange(250, 500)
.put("guest@192.168.1.1\'s password:< br / > ")
.waitRange(300, 700)
.put('Linux 4.9.0-4-amd64 #1 SMP Debian 4.9.51-1 (2017-09-28) x86_64< br / > ')
.put(' _ _ _< br / > \
| | | | | |< br / > \
| | | | ___| | ___ ___ _ __ ___ ___< br / > \
| |/\\| |/ _ \\ |/ __/ _ \\| \'_ ` _ \\ / _ \\< br / > \
\\ /\\ / __/ | (_| (_) | | | | | | __/< br / > \
\\/ \\/ \\___|_|\\___\\___/|_| |_| |_|\\___|< br / > \
Last login: Thu Feb 15 20:54:55 2018 from 192.168.1.2< br / > ')
.put('< span class = "login-session" > guest@192.168.1.1< / span > :< span class = "tilde" > ~< / span > $ ')
.waitRange(100, 800)
.type('ls -a')
.put('< br / > ')
.waitRange(250, 350)
.put('. .. Documents Pictures www .superSecretStuff')
.put('< br / > ')
.put('< span class = "login-session" > guest@192.168.1.1< / span > :< span class = "tilde" > ~< / span > $ ')
.wait(500)
.type('ls -a D')
.wait(300)
.put('ocuments/')
.put('< br / > ')
.waitRange(250, 350)
.put('. .. portfolio.txt')
.put('< br / > ')
.put('< span class = "login-session" > guest@192.168.1.1< / span > :< span class = "tilde" > ~< / span > $ ')
.wait(1000)
.type('clear & & figlet Portfolio & & cat D')
.put('ocuments/')
.wait(600)
.put('portfolio.txt')
.put('< br / > ')
.wait(700, function () {document.getElementById('typewriter-left').innerHTML = "";})
.put(' ____ _ __ _ _< br / > \
| _ \\ ___ _ __| |_ / _| ___ | (_) ___< br / > \
| |_) / _ \\| \'__| __| |_ / _ \\| | |/ _ \\< br / > \
| __/ (_) | | | |_| _| (_) | | | (_) |< br / > \
|_| \\___/|_| \\__|_| \\___/|_|_|\\___/< br / > \
< br / > \
Photo: ../Picutures/propic.png< br > \
Name: Meliurwen N.< br > \
Living in: Milan, Italy< br > \
Actual occupation: Student< br > \
< br > \
< b > [Fields of study]< / b > < br > \
Computer Science (undergraduate)< br > \
Industrial Engineer spec. in Metallurgy< br > \
< br > \
< b > [Languages]< / b > < br > \
Italian - native< br > \
English - B2< br > \
French - B1< br > \
Spanish - A2< br > \
< br > \
< b > [Programming& Markup Languages]< / b > < br > \
Java, Python 3.X, PHP, Javascript, HTML, CSS, SQL, C, R< br > \
< br > \
< b > [Contacts and Socials]< / b > < br > \
Email: meliurwen@gmail.com< br > \
Github: < a href = "https://github.com/meliurwen" > github.com/meliurwen< / a > (Projects)< br > \
Steam: < a href = "https://steamcommunity.com/id/meliurwen" > steamcommunity.com/id/meliurwen< / a > (gaming)')
.put('< br / > ')
.put('< span class = "login-session" > guest@192.168.1.1< / span > :< span class = "tilde" > ~< / span > $ ', function () {setTypingVar();});
}
function setTypingVar(){
endedTyping = true;
}
< / script >
< / body >
< / html >
