add web skills

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

@@ -31,10 +31,16 @@ const commands = (terminal) => {
         socials: {
             description: 'View my social links',
             fn: require('./social')
+        },
+        social: {
+            description: 'View my sociala links',
+            fn: require('./social'),
+            unlisted: true,
         }
     };
 
     commands.help = {
+        unlisted: true,
         fn: () => {
             return (
                 <pre>
@@ -43,7 +49,7 @@ const commands = (terminal) => {
                         <tbody>
                             {
                                 Object.keys(commands).map((cmd, i) => {
-                                    if (cmd == 'help') return;
+                                    if (commands[cmd].unlisted) return;
                                     return <tr key={i}>
                                         <td style={{color: 'violet'}}>{cmd}</td>
                                         <td style={{padding: '0 8px'}}> : </td>

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

@@ -1,11 +1,70 @@
 import Colored from '../../helpers/color';
 
-module.exports = () => {
+const Title = (p) => {return <h3 style={{margin:'16px 0', color: '#526b93'}}>{...p.children}</h3>}
+
+const skills = {
+    web: (
+        <pre>
+            <Title>My web experience</Title>
+            <p>
+                Most of my web projects are listed on <a href='https://github.com/b1ek'>GitHub</a>.<br/>
+                I like Express.JS and Laravel, but also want to try Rust.<br/>
+                <br/>
+                On frontend, i like to write no-js HTML using<br/>
+                template engines, or use React for complex apps like this one.
+            </p>
+            <hr style={{margin:'10px 0'}}/>
+            <p>
+                My projects:
+            </p>
+
+            <table>
+                <tbody>
+                    <tr>
+                        <td>Name</td>
+                        <td>Sources</td>
+                        <td>Description</td>
+                    </tr>
+
+                    <tr>
+                        <td>blek! Site</td>
+                        <td>
+                            <a href='https://github.com/b1ek/blekSite'>Link</a>
+                        </td>
+                        <td>Second re write of my website in Laravel</td>
+                    </tr>
+
+                    <tr>
+                        <td>homepage.js</td>
+                        <td>
+                            <a href='https://git.blek.codes/blek/homepage.js'>Link</a>
+                        </td>
+                        <td>Third re write of my website in JS/Express.JS/Pug and some other libraries</td>
+                    </tr>
+                </tbody>
+            </table>
+        </pre>
+    ),
+    nt: (
+        <pre>
+            <Title>My native dev experience</Title>
+            <p>
+                It isn't much
+            </p>
+        </pre>
+    )
+}
+
+module.exports = (args) => {
+
+    if (skills[args]) return skills[args];
+
     return (<pre>
         <Colored color='#00ffe7'>Web dev (PHP & JS)</Colored>
         <br/>
         [#####] 100%<br/>
         My main work field<br/>
+        More: <Colored color='seagreen' weight='normal'>skills web</Colored><br/>
         <br/>
 
         <Colored color='#cc6a6a'>C/C++/Rust native dev</Colored><br/>
@@ -18,7 +77,7 @@ module.exports = () => {
         Do this all the time. I run linux on my laptop, pc and server<br/>
         <br/>
 
-        <Colored color='#2e8b7e'>Being cishet</Colored><br/>
+        <Colored color='#2e8b7e'>Being cis</Colored><br/>
         [     ] 0%<br/>
         Never liked it<br/>
         <br/>

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

@@ -1,9 +1,17 @@
+import Color from '../../helpers/color';
+const Link = (prop) => {
+    return <a href={prop.href} style={{color:'lightblue',textDecoration:'none',fontWeight:'bold'}}>{...prop.children}</a>
+}
+
 module.exports = () => {
     return <p>
-        <a href='https://blek.codes'>My website</a><br/>
-        <a href='https://github.com/b1ek'>Github page</a><br/>
-        <a href='https://git.blek.codes/b1ek'>Gitea page</a><br/>
-        <a href='mailto:me@blek.codes'>Email</a><br/>
-        <a href='https://t.me/bleki42'>Telegram</a><br/>
+        My socials are listed below:<br/>
+        <br/>
+        {'>'} <Link href='https://blek.codes'>My website</Link><br/>
+        {'>'} <Link href='https://github.com/b1ek'>Github page</Link><br/>
+        {'>'} <Link href='https://git.blek.codes/b1ek'>Gitea page</Link><br/>
+        {'>'} <Link href='mailto:me@blek.codes'>Email</Link><br/>
+        {'>'} <Link href='https://t.me/bleki42'>Telegram</Link><br/>
+        <Color color='gray' weight='default'>(all links are clickable)</Color>
     </p>;
 }

react/resume/src/helpers/color.js

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