re style shell

public/static/ui/resume.css

@@ -5,7 +5,7 @@ div#resume_js_app {
     border: 1px solid #e1e1e1;
     font-family: monospace;
     box-shadow: 0 2px 4px #30303060;
-    padding: 10px 8px;
+/*    padding: 10px 8px;*/
     color: #e1e1e1;
 }
 div#resume_js_app * {

react/resume/src/Base.js

@@ -8,13 +8,31 @@ Welcome to my resume!
 Type 'help' for list of commands.
 `;
 
+const inputStyle = { color: '#2e8b7e', fontWeight: 'bold' };
+
 export class Base extends Component {
     render() {
         return (
             <Terminal
                 commands={commands}
                 welcomeMessage={welcome}
-                promptLabel={'user@blek.codes/resume~$'}
+                promptLabel={
+                    <pre>
+                        user@blek.codes 
+                        <span style={{color: '#2968ac'}}> ~/resume </span>
+                        <span style={{color: '#ff5092'}}>(
+                            <span style={{color:'limegreen'}}>master</span>
+                        ) </span>
+                        $ 
+                        </pre>
+                }
+
+                style={{height:'100%'}}
+
+                promptLabelStyle={inputStyle}
+                inputTextStyle={{...inputStyle, color: '#5ba2b0', transform: 'translateY(2px)'}}
+
+                styleEchoBack={'fullInherit'}
             />
         )
     }

react/resume/src/emulation/commands/index.js

@@ -1,5 +1,7 @@
 import Files from '../files';
 
+import Colored from '../../helpers/color';
+
 module.exports = {
     cat: {
         description: 'Show contents of a file',
@@ -8,7 +10,13 @@ module.exports = {
     ls: {
         description: 'Show files in current directory',
         fn: ()=>{
-            return Object.keys(Files).join('  ');
-        }
+            return <pre style={{color: '#2e8b7e', fontWeight: 'bold'}}>
+                {Object.keys(Files).join('   ')}
+            </pre>;
+        }
+    },
+    skills: {
+        description: 'My skills data',
+        fn: require('./skills')
     }
 }

react/resume/src/emulation/commands/skills.js

@@ -0,0 +1,26 @@
+import Colored from '../../helpers/color';
+
+module.exports = () => {
+    return (<pre>
+        <Colored color='#00ffe7'>Web dev (PHP & JS)</Colored>
+        <br/>
+        [#####] 100%<br/>
+        My main work field<br/>
+        <br/>
+
+        <Colored color='#cc6a6a'>C/C++/Rust native dev</Colored><br/>
+        [##   ] 40%<br/>
+        I do this... sometimes<br/>
+        <br/>
+
+        <Colored color='#7dadd7'>Linux skills</Colored><br/>
+        [#####] 100%<br/>
+        Do this all the time. I run linux on my laptop, pc and server<br/>
+        <br/>
+
+        <Colored color='#2e8b7e'>Being cishet</Colored><br/>
+        [     ] 0%<br/>
+        Never liked it<br/>
+        <br/>
+    </pre>)
+}

react/resume/src/emulation/files.js

@@ -7,7 +7,9 @@ module.exports = {
     Hi! This is my online resume.
     <br/>
     You can browse files with <Hi>ls</Hi>, and read them with <Hi>cat</Hi>.
+    <br/>
+    Also check out <Hi>skills</Hi>.
     </>,
     'super_secret_password.txt':
-        <span style={{color:'orange',fontWeight:'bold'}}>uwu</span>
+        <span style={{color:'orange',fontWeight:'bold'}}>uwu</span>,
 }

react/resume/src/helpers/color.js

@@ -0,0 +1,3 @@
+module.exports = (p) => {
+    return <span style={{color: p.color, fontWeight: 'bold'}}>{...p.children}</span>
+}