Skip to content

Dev console empty #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Gareth-Jones-ZA wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Dev console empty #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c636770
:sparkles: added new devconsole template
Gareth-Jones-ZA Oct 18, 2019
b1f25ae
:sparkles: Matrix style - minimalist (asp classic)
TheSayne Oct 31, 2019
d692213
:sparkles: added empty dev console template
TheSayne Oct 31, 2019
a685188
removing files before branching
TheSayne Oct 31, 2019
0cc24ed
:sparkles: DevConsole-Empty
TheSayne Oct 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Portfolios/DevConsole-Empty/favicon.ico
View file
Open in desktop
Binary file not shown.
145 changes: 145 additions & 0 deletions Portfolios/DevConsole-Empty/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Developer Portfolio | Gareth Jones</title><!-- Developer name here -->

<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div id="wrapper-center">
<div class="console-container">

<main>
<!-- Loading screen / startup -->
<section id="home">
<h2>Initialising Developer Portfolio...</h2>
<p><font color="green">Gareth Jones (Full-Stack Developer) Portfolio initialised!</font></p><!-- Developer name and title here -->

<p><span>Type 'help' + <kbd>Enter</kbd> -- for available commands.</span></p>
</section>

<!-- Sections can be created below - the id of the sections relate to the available command (Lowercase ONLY), with flavour text/bullet points listed -->

<section id="help"><!--'help' command/content -->
<h2><span>&raquo; Help?</span></h2>
<p><span>Type [command] + <kbd>Enter</kbd></span></p>
<ul>
<li>'home' -- Back to home</li>
<li>'about' -- About the developer</li>
<li>'tools' -- Tools and technologies</li>
<li>'projects' -- My Projects</li>
<li>'services' -- Services</li>
<li>'clients' -- My Clients</li>
<li>'help' -- Displays the list of available commands</li>
</ul>
</section>

<section id="about"><!--'about' command/content -->
<h2><span>&raquo; About Gareth</span></h2>
<p>Gareth has been working with web technologies since 2002 and has a well rounded understanding of PHP, the Microsoft stack as well as front-end mark-up and scripting. When he's not dominating in <a target="_blank" href="http://www.worldofwarcraft.com/">World of Warcraft</a> or uncovering conspiracy theories and <a target="_blank" href="http://en.wikipedia.org/wiki/Liger">unusual creatures</a>, he's building user-centric web applications with a focus on quick turnaround time.
</p>

<p>He can be contacted on <a href="mailto:[email here]">[email here]</a>.
</section>

<section id="tools"><!--'tools' command/content -->
<h2><span>&raquo; Tools and Technologies</span></h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript<li>
<li>Node</li>
<li>C#</li>
<li>Php</li>
<li>Python</li>
<li>SQL (MySQL, Microsoft SQL Server)</li>
</ul>
</section>

<section id="projects"><!--'projects' command/content -->
<h2><span>&raquo; My Projects</span></h2>
<p>
<ul>
<li>Client One (<a href="http://www.client.com">www.client.com</a>)</li>
<li>Client Two (<a href="http://www.client.com">www.client.com</a>)</li>
<li>Client Three (<a href="http://www.client.com">www.client.com</a>)</li>
<li>Project (<a href="http://www.project.com">www.project.com</a>)</li>
</ul>
</section>

<section id="services"><!--'services' command/content -->
<h2><span>&raquo; Services</span></h2>
<ul>
<li>Web Development</li>
<li>Software Development</li>
<li>Design</li>
<li>Content Creation</li>
<li>SEO (Search Engine Optimization)</li>
</ul>
</section>

<section id="clients"><!--'clients' command/content -->
<h2><span>&raquo; My Clients</span></h2>
<ul>
<li>Client One (<a href="http://www.client.com">www.client.com</a>)</li>
<li>Client Two (<a href="http://www.client.com">www.client.com</a>)</li>
<li>Client Three (<a href="http://www.client.com">www.client.com</a>)</li>
</ul>
</section>

<!-- Start: Error handler and Common developer commands below -->
<section id="exit"><!--'exit' command/content (default command to exit in a normal terminal/console) -->
<h2><span>&raquo; Exit</span></h2>
<p>Thanks for your time!</p>
<p>Developer Portfolio complete.</p>
</section>

<section id="error"><!-- handler for any unconfigured commmand/text entered by user -->
<h2><span>&raquo; Error</span></h2>
<p>Command not found!<p>
<p><span>Type 'help' + <kbd>Enter</kbd> -- for available commands.</span></p>
</section>

<section id="cd..">
<p></p>
</section>

<section id="cd ..">
<p></p>
</section>

<section id="cd\">
<p></p>
</section>

<section id="cd/">
<p></p>
</section>

<section id="cls">
<p></p>
</section>

<section id="clear">
<p></p>
</section>
<!-- End: Error handler and Common developer commands below -->

<!-- Your name goes below -->
<span class="command">
<developerName>gareth.jones</developerName><font color="green">$</font><input type="text" id="console" spellcheck="false" />
</span>
</main>

</div>
</div>

<script src="script.js"></script>

</body>
</html>
79 changes: 79 additions & 0 deletions Portfolios/DevConsole-Empty/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/*!
* jQuery CLI
* Simulating a command line interface with jQuery
*
* @version : 1.0.0
* @author : Paulo Nunes (http://syndicatefx.com)
* @demo : https://codepen.io/syndicatefx/pen/jPxXpz
* @license: MIT
*/

/*!*
* jQuery Text Typer plugin
* https://github.com/gr8pathik/jquery-texttyper
*/
(function(e){"use strict";e.fn.textTyper=function(t){var n={typingClass:"typing",beforeAnimation:function(){},afterAnimation:function(){},speed:10,nextLineDelay:400,startsFrom:0,repeatAnimation:false,repeatDelay:4e3,repeatTimes:1,cursorHtml:'<span class="cursor">|</span>'},r=e.extend({},n,t);this.each(function(){var t=e(this),n=1,i="typingCursor";var s=t,o=s.length,u=[];while(o--){u[o]=e.trim(e(s[o]).html());e(s[o]).html("")}t.init=function(e){var n=r.beforeAnimation;if(n)n();t.animate(0)};t.animate=function(o){var a=s[o],f=r.typingClass,l=r.startsFrom;e(a).addClass(f);var c=setInterval(function(){var f=r.cursorHtml;f=e("<div>").append(e(f).addClass(i)).html();e(a).html(u[o].substr(0,l)+f);l++;if(u[o].length<l){clearInterval(c);o++;if(s[o]){setTimeout(function(){e(a).html(u[o-1]);t.animate(o)},r.nextLineDelay)}else{e(a).find("."+i).remove();if(r.repeatAnimation&&(r.repeatTimes==0||n<r.repeatTimes)){setTimeout(function(){t.animate(0);n++},r.repeatDelay)}else{var h=r.afterAnimation;if(h)h()}}}},r.speed)};t.init()});return this}})(jQuery)


$(document).ready(function() {

$('.command').hide();
$('input[type="text"]').focus();
$('#home').addClass('open');
$('#home').textTyper({
speed:20,
afterAnimation:function(){
$('.command').fadeIn();
$('input[type="text"]').focus();
$('input[type="text"]').val('');
}
});

// get array of section ids, that exist in DOM
var sectionArray = [];
// We are using <section> here, you can use <div> or <article> if you want
$('section').each( function(i,e) {
//you can use e.id instead of $(e).attr('id')
sectionArray.push($(e).attr('id'));
});


// Command Input------------------------------

$('input[type="text"]').keyup(function(e){

if(e.which == 13){// ENTER key pressed

$('.command').hide();
var destination = $('input[type="text"]').val().toLowerCase();

// Display section with id == destination and hide all others
$('section[id="' + destination + '"]').addClass('open').siblings().removeClass('open');

// If destination does not match our array of section ids, display error section
if($.inArray(destination, sectionArray) == -1){
$('#error').addClass('open');
$('#error').siblings().removeClass('open');
}

// All sections with class .open init textTyper
$('.open').textTyper({
speed:20,
afterAnimation:function(){
$('.command').fadeIn();
$('input[type="text"]').focus();
$('input[type="text"]').val('');
}
});

}// end if ENTER key pressed

});// end keyup function

// End Command Input-----------------------------
});

// Catch clicks and refocus command input
$(document).on('click','body *',function(){
$('#console').focus();
});
124 changes: 124 additions & 0 deletions Portfolios/DevConsole-Empty/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/* Import google font */
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);

html {
background: black;
overflow: scroll;
overflow-x: hidden; /* Remove scrollbar */
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar */
background: transparent;
}

body {
font-family:'Inconsolata', monospace;
font-size: 14px;
color: #CDD2E9;
font-weight: 400;
}

#wrapper-center{
margin: 0 auto;
width: 650px;
margin-top:10%;
}

.console-container{
width:650px;
height:450px;
padding:10px;
overflow:auto;
background-color: #263238;
border:solid 1px #ECECEC;
border-radius: 25px;
}

::selection{
background: #eee
}
::-webkit-selection{
background: #eee
}
::-moz-selection{
background: #eee
}
a{
color: #CDD2E9;
}
a:hover,a:focus{
background-color: #263238;
color: #CDD2E9;
}
h2{
font-size: 1em;
font-weight: 400;
}
p{
margin-bottom:2em;
}
abbr{
cursor: help;
}
ul{
list-style: none;
padding: 0;
}
li{
margin:1em 0 0;
}
span{
display: block;
color: #CDD2E9;
line-height:1;
}

kbd{
font-family: 'Inconsolata', monospace;
border:1px solid #999;
text-transform: uppercase;
padding:0 .2em;
}

developerName{
color:#82AAFF;
}

developerName::before {
content: '/';
}

input[type="text"]{
max-width: 450px;
border: none;
font-family: inherit;
background: #263238;
padding:0 .5em;
}
input[type="text"]:focus{
background: #263238;
color: #CDD2E9;
outline:none;
}
.command{
display: block;
max-width: 450px;
color: #CDD2E9;
font-weight: 700;
margin: 2em 0;
}

section{
display: none;
}
.open{
display: block;
}

.red{
color:red;
}

.green{
color:#C3E88D;
}
Binary file added Portfolios/DevConsole/favicon.ico
View file
Open in desktop
Binary file not shown.
Loading