re style shell

react/resume/src/Base.js

@@ -8,14 +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,8 +1,6 @@
 import Files from '../files';
 
-const Colored = (p) => {
+import Colored from '../../helpers/color';
-    return <span style={{color: p.color, fontWeight: 'bold  '}}>{...p.children}</span>
-}
 
 module.exports = {
     cat: {
@@ -19,28 +17,6 @@ module.exports = {
     },
     skills: {
         description: 'My skills data',
-        fn: () => {
+        fn: require('./skills')
-            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/>
-            </pre>)
-        }
     }
 }

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,6 +7,8 @@ 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>,

react/resume/src/helpers/color.js

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