add skills

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

@@ -15,6 +15,7 @@ export class Base extends Component {
                 commands={commands}
                 welcomeMessage={welcome}
                 promptLabel={'user@blek.codes/resume~$'}
+                style={{height:'100%'}}
             />
         )
     }

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

@@ -1,5 +1,9 @@
 import Files from '../files';
 
+const Colored = (p) => {
+    return <span style={{color: p.color, fontWeight: 'bold  '}}>{...p.children}</span>
+}
+
 module.exports = {
     cat: {
         description: 'Show contents of a file',
@@ -8,7 +12,35 @@ 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: () => {
+            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/files.js

@@ -9,5 +9,5 @@ module.exports = {
     You can browse files with <Hi>ls</Hi>, and read them with <Hi>cat</Hi>.
     </>,
     'super_secret_password.txt':
-        <span style={{color:'orange',fontWeight:'bold'}}>uwu</span>
+        <span style={{color:'orange',fontWeight:'bold'}}>uwu</span>,
 }