diff --git a/public/static/ui/resume.css b/public/static/ui/resume.css index 106857b..4788e6d 100644 --- a/public/static/ui/resume.css +++ b/public/static/ui/resume.css @@ -5,13 +5,10 @@ div#resume_js_app { border: 1px solid #e1e1e1; font-family: monospace; box-shadow: 0 2px 4px #30303060; -/* padding: 10px 8px;*/ color: #e1e1e1; } -div#resume_js_app * { - padding: 0; margin: 0; -} div#resume_js_app p.js_loading_indicator { + padding: 0; margin: 0; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); diff --git a/react/resume/src/Base.js b/react/resume/src/Base.js index 905e74f..3cb7f30 100644 --- a/react/resume/src/Base.js +++ b/react/resume/src/Base.js @@ -2,30 +2,41 @@ import React, { Component } from 'react'; import Terminal from 'react-console-emulator'; import Files from './emulation/files'; import commands from './emulation/commands'; +import Colored from './helpers/color'; -const welcome = ` -Welcome to my resume! -Type 'help' for list of commands. -`; +const welcome =
+Welcome to my resume!; const inputStyle = { color: '#2e8b7e', fontWeight: 'bold' }; export class Base extends Component { + constructor(props) { + super(props); + this.terminal = React.createRef(); + } render() { return (
+Type +help +for a list of commands. +
user@blek.codes ~/resume ( master ) $ -+ */ + '$ ' } + + errorText={'zsh: command not found: [command]'} style={{height:'100%'}} @@ -33,6 +44,8 @@ export class Base extends Component { inputTextStyle={{...inputStyle, color: '#5ba2b0', transform: 'translateY(2px)'}} styleEchoBack={'fullInherit'} + noDefaults + noAutoScroll /> ) } diff --git a/react/resume/src/emulation/commands/index.js b/react/resume/src/emulation/commands/index.js index 2a59744..fd7e5cd 100644 --- a/react/resume/src/emulation/commands/index.js +++ b/react/resume/src/emulation/commands/index.js @@ -2,21 +2,63 @@ import Files from '../files'; import Colored from '../../helpers/color'; -module.exports = { - cat: { - description: 'Show contents of a file', - fn: require('./cat') - }, - ls: { - description: 'Show files in current directory', - fn: ()=>{ - return
- {Object.keys(Files).join(' ')} -; +const commands = (terminal) => { + const commands = { + cat: { + description: 'Show contents of a file', + fn: require('./cat') + }, + ls: { + description: 'Show files in current directory', + fn: ()=>{ + return
+ {Object.keys(Files).join(' ')} +; + } + }, + skills: { + description: 'My skills data', + fn: require('./skills') + }, + + clear: { + description: 'Clear the terminal.', + fn: () => { + terminal.current.setState({stdout: []}); + } + }, + + socials: { + description: 'View my social links', + fn: require('./social') + } + }; + + commands.help = { + fn: () => { + return ( +
+ Commands list: +
{cmd} | +: | +{commands[cmd].description} | +
+ My website
+ Github page
+ Gitea page
+ Email
+ Telegram
+