meliurwen.dev
/
meliurwen.github.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some polishing, finished portfolio terminal script, added some decorations.

Browse Source
master
meliurwen 7 years ago
parent 57d9456954
commit cd70af91f0
4 changed files with 94 additions and 56 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 34
      css/theme.css
  2. BIN
      favicon.ico
  3. BIN
      font/elementary.woff
  4. 110
      index.html

34
css/theme.css
Unescape View File

@ -156,7 +156,7 @@ span.caret {
.terminal a { .terminal a {
font-family:courier,fixed; font-family:courier,fixed;
font-size: 13px; font-size: 13px;
color:#fff; color:#dbdbdb;
} }
/*Base Mobile Layout*/ /*Base Mobile Layout*/
@ -165,7 +165,7 @@ span.caret {
margin: 2vh auto; margin: 2vh auto;
font-family:courier,fixed; font-family:courier,fixed;
font-size: 13px; font-size: 13px;
color:#fff; color: #dbdbdb;
border: 1px solid black; border: 1px solid black;
border-radius: 6px; border-radius: 6px;
@ -177,6 +177,15 @@ span.caret {
#titlebar, #navbar { #titlebar, #navbar {
background: #33373a; background: #33373a;
overflow: hidden;
}
#titlebar {
height: 33px;
}
#navbar {
height: 30px;
} }
#tab-left, #tab-right, #tab-bottom, #titlebar, #navbar { #tab-left, #tab-right, #tab-bottom, #titlebar, #navbar {
@ -184,6 +193,9 @@ span.caret {
float: left; float: left;
} }
#tab-bottom {
background: #859900;
}
#tab-left-container { #tab-left-container {
height:100%; height:100%;
@ -204,29 +216,21 @@ span.caret {
} }
#titlebar { #titlebar {
width: 100%;
float: top; float: top;
height: 33px;
overflow: hidden;
} }
#navbar { #navbar {
width: 100%;
float: top; float: top;
height: 30px;
overflow: hidden;
} }
#tab-left { #tab-left {
width: 50%; width: 50%;
float: left;
height: 80vh; height: 80vh;
overflow: auto; overflow: auto;
} }
#tab-right { #tab-right {
width: 50%; width: 50%;
float: left;
height: 80vh; height: 80vh;
overflow: auto; overflow: auto;
} }
@ -303,6 +307,16 @@ img.pixelated {
} }
.login-session {
font-weight: bold;
color: #859900;
}
.tilde {
color: #0085e3;
}
@font-face { @font-face {
font-family: 'elementary'; font-family: 'elementary';

BIN
favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
font/elementary.woff
View File

Binary file not shown.

110
index.html
Unescape View File

@ -6,6 +6,7 @@
<meta name="robots" content="index,follow"> <meta name="robots" content="index,follow">
<title>Meliurwen's Personal Page</title> <title>Meliurwen's Personal Page</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/theme.css"> <link rel="stylesheet" type="text/css" href="css/theme.css">
<script type="text/javascript" src="js/typewriter-bundle.min.js"></script> <script type="text/javascript" src="js/typewriter-bundle.min.js"></script>
</head> </head>
@ -27,7 +28,7 @@
</div> </div>
<div id="box-1" class="tab-center" style="position: absolute; z-index: -5;width:100%; opacity: 0;"> <div id="box-1" class="tab-center" style="position: absolute; z-index: -5;width:100%; opacity: 0;">
<div class="terminal"> <div id="terminal-1" class="terminal">
<div id="titlebar"> <div id="titlebar">
<div style="width:33.33%;float:left;"> <div style="width:33.33%;float:left;">
<div class="tab-center" style="height:33px;width:33px;float:left;color:#b3b3b3;"> <div class="tab-center" style="height:33px;width:33px;float:left;color:#b3b3b3;">
@ -69,21 +70,11 @@
</div> </div>
</div> </div>
<div id="tab-left"> <div id="tab-left">
<div id="tab-left-container"> <div id="tab-left-container" style="border-style:hidden;">
<span id="typewriter-left" class="typewriter"></span> <span id="typewriter-left" class="typewriter"></span>
<span class="caret">&nbsp;</span> <span class="caret">&nbsp;</span>
</div> </div>
</div> </div>
<div id="tab-right">
<div id="tab-right-container">
<span id="typewriter-right" class="typewriter"></span>
<span class="caret">&nbsp;</span>
</div>
</div>
<div id="tab-bottom" style='background:#859900;'>
<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>
</div>
</div> </div>
</div> </div>
@ -202,18 +193,13 @@
function writeStuff() { function writeStuff() {
var typewriter = require('typewriter'); var typewriter = require('typewriter');
var twSpanLeft = document.getElementById('typewriter-left'); twSpanLeft = document.getElementById('typewriter-left');
var twSpanRight = document.getElementById('typewriter-right');
var twLeft = typewriter(twSpanLeft).withAccuracy(95) twLeft = typewriter(twSpanLeft).withAccuracy(95)
.withMinimumSpeed(5) .withMinimumSpeed(35)
.withMaximumSpeed(17) .withMaximumSpeed(50)
.build(); .build();
var twRight = typewriter(twSpanRight).withAccuracy(95)
.withMinimumSpeed(5)
.withMaximumSpeed(17)
.build();
twLeft.put('elementary OS Loki meliurwen-web-server tty1<br>\ twLeft.put('elementary OS Loki meliurwen-web-server tty1<br>\
meliurwen-web-server login: ') meliurwen-web-server login: ')
@ -230,25 +216,55 @@ Welcome to elementary OS Loki bla bla<br>\
<br>\ <br>\
0 packages have to be updated<br>\ 0 packages have to be updated<br>\
0 security updates<br>\ 0 security updates<br>\
guest@meliurwen-web-server:~$ ') <span class="login-session">guest@meliurwen-web-server</span>:<span class="tilde">~</span>$ ')
.waitRange(500, 1000) .waitRange(500, 1000)
.type('tmux') .type('tmux')
.put('<br>', function () {document.getElementById('typewriter-left').innerHTML = ""; .put('<br>', function () {document.getElementById('typewriter-left').innerHTML = "";
twRight.put('guest@meliurwen-web-server:~$ ') //Generating tmux's interface
.wait(1000) ///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">&nbsp;</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') .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>";}); .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('guest@meliurwen-web-server:~$ ') twLeft.put('<span class="login-session">guest@meliurwen-web-server</span>:<span class="tilde">~</span>$ ')
.wait(3500) .wait(2000)
.type('ssh guest@192.168.1.1') .type('ssh guest@192.168.1.1')
.put('<br/>') .put('<br/>')
.waitRange(1000, 1500) .waitRange(250, 500)
.put("guest@192.168.1.1\'s password:<br />") .put("guest@192.168.1.1\'s password:<br />")
.waitRange(2000, 3500) .waitRange(300, 700)
.put('Linux 4.9.0-4-amd64 #1 SMP Debian 4.9.51-1 (2017-09-28) x86_64<br />') .put('Linux 4.9.0-4-amd64 #1 SMP Debian 4.9.51-1 (2017-09-28) x86_64<br />')
.put(' _ _ _<br />\ .put(' _ _ _<br />\
| | | | | |<br />\ | | | | | |<br />\
@ -257,15 +273,15 @@ guest@meliurwen-web-server:~$ ')
\\ /\\ / __/ | (_| (_) | | | | | | __/<br />\ \\ /\\ / __/ | (_| (_) | | | | | | __/<br />\
\\/ \\/ \\___|_|\\___\\___/|_| |_| |_|\\___|<br />\ \\/ \\/ \\___|_|\\___\\___/|_| |_| |_|\\___|<br />\
Last login: Thu Feb 15 20:54:55 2018 from 192.168.1.2<br />') Last login: Thu Feb 15 20:54:55 2018 from 192.168.1.2<br />')
.put('guest@192.168.1.1:~$ ') .put('<span class="login-session">guest@192.168.1.1</span>:<span class="tilde">~</span>$ ')
.waitRange(100, 2000) .waitRange(100, 800)
.type('ls -a') .type('ls -a')
.put('<br/>') .put('<br/>')
.waitRange(250, 350) .waitRange(250, 350)
.put('. .. Documents Pictures www .superSecretStuff') .put('. .. Documents Pictures www .superSecretStuff')
.put('<br />') .put('<br />')
.put('guest@192.168.1.1:~$ ') .put('<span class="login-session">guest@192.168.1.1</span>:<span class="tilde">~</span>$ ')
.wait(1500) .wait(500)
.type('ls -a D') .type('ls -a D')
.wait(300) .wait(300)
.put('ocuments/') .put('ocuments/')
@ -273,36 +289,44 @@ Last login: Thu Feb 15 20:54:55 2018 from 192.168.1.2<br />')
.waitRange(250, 350) .waitRange(250, 350)
.put('. .. portfolio.txt') .put('. .. portfolio.txt')
.put('<br />') .put('<br />')
.put('guest@192.168.1.1:~$ ') .put('<span class="login-session">guest@192.168.1.1</span>:<span class="tilde">~</span>$ ')
.wait(2500) .wait(1000)
.type('cat D') .type('clear && figlet Portfolio && cat D')
.put('ocuments/') .put('ocuments/')
.wait(600) .wait(600)
.put('portfolio.txt') .put('portfolio.txt')
.put('<br />') .put('<br />')
.wait(1000) .wait(700, function () {document.getElementById('typewriter-left').innerHTML = "";})
.put('Photo: ../Picutures/propic.png<br>\ .put(' ____ _ __ _ _<br />\
| _ \\ ___ _ __| |_ / _| ___ | (_) ___<br />\
| |_) / _ \\| \'__| __| |_ / _ \\| | |/ _ \\<br />\
| __/ (_) | | | |_| _| (_) | | | (_) |<br />\
|_| \\___/|_| \\__|_| \\___/|_|_|\\___/<br />\
<br />\
Photo: ../Picutures/propic.png<br>\
Name: Meliurwen N.<br>\ Name: Meliurwen N.<br>\
Living in: Milan, Italy<br>\ Living in: Milan, Italy<br>\
Actual occupation: Student<br>\ Actual occupation: Student<br>\
Fields of study: Computer Science (undergraduate)<br>\ <br>\
<b>[Fields of study]</b><br>\
Computer Science (undergraduate)<br>\
Industrial Engineer spec. in Metallurgy<br>\ Industrial Engineer spec. in Metallurgy<br>\
<br>\ <br>\
[Languages]<br>\ <b>[Languages]</b><br>\
Italian - native<br>\ Italian - native<br>\
English - B2<br>\ English - B2<br>\
French - B1<br>\ French - B1<br>\
Spanish - A2<br>\ Spanish - A2<br>\
<br>\ <br>\
[Programming&Markup Languages]<br>\ <b>[Programming&Markup Languages]</b><br>\
Java, Python 3.X, PHP, Javascript, HTML, CSS, SQL, C, R<br>\ Java, Python 3.X, PHP, Javascript, HTML, CSS, SQL, C, R<br>\
<br>\ <br>\
[Contacts and Socials]<br>\ <b>[Contacts and Socials]</b><br>\
Email: meliurwen@gmail.com<br>\ Email: meliurwen@gmail.com<br>\
Github: <a href="https://github.com/meliurwen">github.com/meliurwen</a> (Projects)<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)') Steam: <a href="https://steamcommunity.com/id/meliurwen">steamcommunity.com/id/meliurwen</a> (gaming)')
.put('<br />') .put('<br />')
.put('guest@192.168.1.1:~$ ', function () {setTypingVar();}); .put('<span class="login-session">guest@192.168.1.1</span>:<span class="tilde">~</span>$ ', function () {setTypingVar();});
} }
function setTypingVar(){ function setTypingVar(){

Write Preview
Loading…
Cancel
Save