|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
<html lang="it-IT">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<!-- Basics -->
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="robots" content="index,follow">
|
|
|
|
|
|
|
|
|
|
<title>Meliurwen</title>
|
|
|
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/theme.css">
|
|
|
|
|
|
|
|
|
|
<!-- Links Rich Previews for social media -->
|
|
|
|
|
<meta property="og:title" content="Meliurwen's Personal Website">
|
|
|
|
|
<meta property="og:description" content="Meliurwen's personal website, blog and portfolio.">
|
|
|
|
|
<meta property="og:image" content="https://meliurwen.tk/img/logo.png">
|
|
|
|
|
<meta property="og:url" content="https://meliurwen.tk/">
|
|
|
|
|
<meta property="og:site_name" content="Meliurwen">
|
|
|
|
|
<meta property="twitter:title" content="Meliurwen's Personal Website">
|
|
|
|
|
<meta property="twitter:image" content="https://meliurwen.tk/img/logo.png">
|
|
|
|
|
<!--<meta property="twitter:site" content="@twitterAccountHere">-->
|
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
|
|
<meta name="twitter:description" content="Meliurwen's personal website, blog and portfolio.">
|
|
|
|
|
|
|
|
|
|
<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 class="tab-center">
|
|
|
|
|
<div id="titleContainer">
|
|
|
|
|
<h1>Meliurwen N.</h1>
|
|
|
|
|
<span id="subtitle">Available on <a href="https://github.com/meliurwen" target="_blank">Github</a>, coding for fun and uni projects.</span>
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
<img id="gotoBox-1"src="img/arrow_down.png" 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('<span class="directory">.</span> <span class="directory">..</span> <span class="directory">Documents</span> <span class="directory">Pictures</span> <span class="directory">www</span> .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('<span class="directory">.</span> <span class="directory">..</span> 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>
|
