fix broken fonts

react/resume/src/Base.js

@@ -4,6 +4,8 @@ import Files from './emulation/files';
 import commands from './emulation/commands';
 import Colored from './helpers/color';
 
+import './style.css';
+
 const welcome = <pre>
 Welcome to my resume!<br/>
 Type 
@@ -38,7 +40,7 @@ export class Base extends Component {
                 
                 errorText={'zsh: command not found: [command]'}
 
-                style={{height:'100%'}}
+                style={{height:'100%', fontFamily: '\'Source Code Pro\', monospace'}}
 
                 promptLabelStyle={inputStyle}
                 inputTextStyle={{...inputStyle, color: '#5ba2b0', transform: 'translateY(2px)'}}

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

@@ -1,6 +1,41 @@
 import Colored from '../../helpers/color';
 
-const Title = (p) => {return <h3 style={{margin:'16px 0', color: '#526b93'}}>{...p.children}</h3>}
+const Title = (p) => {return <h3 style={{margin: '16px 0', color: '#526b93'}}>{...p.children}</h3>}
+
+const projects = {
+    web: [
+        {
+            name: 'blek! Site',
+            source: 'https://github.com/b1ek/blekSite',
+            desc: 'Second rewrite of my website in Laravel'
+        },
+        {
+            name: 'homepage.js',
+            source: 'https://git.blek.codes/blek/homepage.js',
+            desc: 'Third re write of my website in Node/Express.JS/Pug and couple other libs'
+        },
+        {
+            name: 'blek! Sail',
+            source: 'https://github.com/b1ek/sail',
+            desc: 'A production-ready server for serving Laravel projects'
+        },
+        {
+            name: 'blek! ID',
+            source: 'https://github.com/b1ek/blekID',
+            desc: 'An auth server. Not really proud of this one, as the code is very spaghetti and practically useless.'
+        },
+        {
+            name: 'blek! Bin',
+            source: 'https://git.blek.codes/blek/bin',
+            desc: 'Privacy-respecting, js-free alternative to Pastebin. Inspired by Librebin.'
+        },
+        {
+            name: 'College project',
+            source: '#',
+            desc: 'Work in progress. Planned to be a site with rental apartments for students'
+        }
+    ]
+}
 
 const skills = {
     web: (
@@ -21,26 +56,25 @@ const skills = {
             <table>
                 <tbody>
                     <tr>
-                        <td>Name</td>
+                        <th>Name</th>
-                        <td>Sources</td>
+                        <th>Sources</th>
-                        <td>Description</td>
+                        <th>Description</th>
                     </tr>
 
-                    <tr>
+                    {
-                        <td>blek! Site</td>
+                        Object.keys(projects.web).map((key, i) => {
+                            const proj = projects.web[key];
+                            return (
+                                <tr key={i}>
+                                    <td>{proj.name}</td>
                                     <td>
-                            <a href='https://github.com/b1ek/blekSite'>Link</a>
+                                        <a href={proj.source}>Link</a>
                                     </td>
-                        <td>Second re write of my website in Laravel</td>
+                                    <td>{proj.desc}</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>

react/resume/src/style.css

@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600&display=swap');
+
+td {
+    padding-right: 16px !important
+}
+
+a, a:visited {
+    color: rgb(36, 85, 126);
+    text-decoration: none;
+    font-weight: 500;
+    transition: 150ms ease;
+}
+a:hover {
+    text-shadow: 0 0 4px #24557e30;
+}
+
+th {
+    text-align: left;
+    padding-right: 16px !important;
+}