rewrite resume with xtermjs
This commit is contained in:
parent
1a5f35bc42
commit
c73c3c5284
GPG Key ID:
14546221E3595D0C
|
|
@ -1,12 +0,0 @@
|
|||
#!/bin/sh
|
||||
|
||||
rm -rf dist/*
|
||||
yarn run build $*
|
||||
|
||||
for f in ../../public/static/dist/*; do
|
||||
if [ "$f" != ".gitignore" ]
|
||||
then
|
||||
rm -rf "$f"
|
||||
fi
|
||||
done
|
||||
cp -r dist ../../public/static
|
||||
|
|
@ -1,27 +1,22 @@
|
|||
{
|
||||
"name": "resume",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "src/resume.js",
|
||||
"source": "src/index.html",
|
||||
"browserslist": "> 0.5%, last 2 versions, not dead",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "parcel",
|
||||
"build": "parcel build src/resume.js --no-source-maps"
|
||||
},
|
||||
"author": "blek",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@parcel/reporter-bundle-analyzer": "^2.8.3",
|
||||
"buffer": "^5.5.0",
|
||||
"parcel": "^2.8.3",
|
||||
"process": "^0.11.10",
|
||||
"parcel-namer-without-hash": "^0.0.1"
|
||||
"parcel-namer-without-hash": "^0.0.1",
|
||||
"process": "^0.11.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0",
|
||||
"react": "^18.2.0",
|
||||
"react-console-emulator": "^5.0.2",
|
||||
"react-dom": "^18.2.0"
|
||||
"react-dom": "^18.2.0",
|
||||
"xterm-for-react": "^1.0.4",
|
||||
"xterm-js-shell": "^1.1.3"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "parcel"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
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';
|
||||
|
||||
import './font/sourcecode.css';
|
||||
|
||||
const welcome = <pre>
|
||||
Welcome to my resume!<br/>
|
||||
Type
|
||||
<Colored color='#156ea4'> help </Colored>
|
||||
for a list of commands.
|
||||
</pre>;
|
||||
|
||||
const inputStyle = { color: '#4d6663', fontWeight: 'bold', minWidth: 'fit-content' };
|
||||
|
||||
export class Base extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.terminal = React.createRef();
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Terminal
|
||||
ref={this.terminal}
|
||||
commands={commands(this.terminal)}
|
||||
welcomeMessage={welcome}
|
||||
promptLabel={
|
||||
/*
|
||||
<table className='prompt_table'>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={inputStyle}>user@blek.codes</td>
|
||||
<td className='prompt_spacing'></td>
|
||||
<td style={{color: '#2968ac'}}> ~/resume </td>
|
||||
<td className='prompt_spacing'></td>
|
||||
|
||||
<td style={{color: '#ff5092'}}>(</td>
|
||||
<td className='prompt_spacing'></td>
|
||||
|
||||
<td style={{color:'limegreen'}}>master</td>
|
||||
<td className='prompt_spacing'></td>
|
||||
<td style={{color: '#ff5092'}}>)</td>
|
||||
<td className='prompt_spacing'></td>
|
||||
|
||||
<td>$</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
*/
|
||||
data.ip ?
|
||||
(data.ip + '@blek.codes ~/resume $ ') :
|
||||
'$ '
|
||||
}
|
||||
|
||||
errorText={'zsh: command not found: [command]'}
|
||||
|
||||
className='console'
|
||||
|
||||
promptLabelStyle={inputStyle}
|
||||
inputTextStyle={{...inputStyle, transform: 'translate(2px, 2px)'}}
|
||||
|
||||
styleEchoBack={'fullInherit'}
|
||||
noDefaults
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.terminal.current.focusTerminal();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
import { XTerm } from 'xterm-for-react'
|
||||
|
||||
export class Console extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.terminal = React.createRef(null);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div style={{padding: '8px'}}>
|
||||
<XTerm
|
||||
ref={this.terminal}
|
||||
options={{
|
||||
theme: {
|
||||
background: '#212121',
|
||||
brightGreen: '#15a179'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
require('./emulator')(this.terminal.current.terminal);
|
||||
this.terminal.current.terminal.focus();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
td {
|
||||
padding-right: 16px !important
|
||||
}
|
||||
|
||||
.console {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
max-width: 800px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.prompt_table tbody tr *, .prompt_table {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.prompt_table {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.prompt_spacing {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: rgb(36, 85, 126) !important;
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import Files from '../files';
|
||||
|
||||
module.exports = (args) => {
|
||||
if (args == undefined) args = '';
|
||||
if (Files[args]) return Files[args];
|
||||
return `cat: cannot open file '${args}': no such file or directory`
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
import Files from '../files';
|
||||
|
||||
import Colored from '../../helpers/color';
|
||||
|
||||
const commands = (terminal) => {
|
||||
const commands = {
|
||||
cat: {
|
||||
description: 'Show contents of a file',
|
||||
fn: require('./cat')
|
||||
},
|
||||
ls: {
|
||||
description: 'Show files in current directory',
|
||||
fn: () => {
|
||||
return '\'ls\' is not recognized as an internal or external command, operable program or batch file.';
|
||||
},
|
||||
unlisted: true
|
||||
},
|
||||
dir: {
|
||||
description: 'Show files in current directory',
|
||||
fn: () => {
|
||||
return <pre style={{color: '#2e8b7e', fontWeight: 'bold', margin: '0'}}>
|
||||
{Object.keys(Files).join(' ')}
|
||||
</pre>;
|
||||
}
|
||||
},
|
||||
skills: {
|
||||
description: 'My skills data',
|
||||
fn: require('./skills')
|
||||
},
|
||||
|
||||
clear: {
|
||||
description: 'Clear the terminal.',
|
||||
fn: () => {
|
||||
terminal.current.clearStdout();
|
||||
}
|
||||
},
|
||||
|
||||
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>
|
||||
Commands list:
|
||||
<table>
|
||||
<tbody>
|
||||
{
|
||||
Object.keys(commands).map((cmd, i) => {
|
||||
if (commands[cmd].unlisted) return;
|
||||
return <tr key={i}>
|
||||
<td style={{color: 'aquamarine'}}>{cmd}</td>
|
||||
<td style={{padding: '0 8px'}}> : </td>
|
||||
<td style={{color: 'white'}}>{commands[cmd].description}</td>
|
||||
</tr>
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return commands;
|
||||
}
|
||||
|
||||
module.exports = commands;
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
import Colored from '../../helpers/color';
|
||||
|
||||
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: (
|
||||
<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>
|
||||
<th>Name</th>
|
||||
<th>Sources</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
|
||||
{
|
||||
Object.keys(projects.web).map((key, i) => {
|
||||
const proj = projects.web[key];
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td>{proj.name}</td>
|
||||
<td>
|
||||
<a href={proj.source}>Link</a>
|
||||
</td>
|
||||
<td>{proj.desc}</td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</pre>
|
||||
),
|
||||
nt: (
|
||||
<pre>
|
||||
<Title>My native dev experience</Title>
|
||||
<p>
|
||||
It isn't much.<br/>
|
||||
I have only one project that is made with
|
||||
Qt/C++: <a href='https://github.com/b1ek/CuteSchedule'>CuteSchedule</a> (Cute
|
||||
stands fot Qt).<br/>
|
||||
<br/>
|
||||
But I do have a lot of experience with C and C++, as I like to write<br/>
|
||||
a lot of programs in those languages in my free time.<br/>
|
||||
An example of these programs: <a href='https://github.com/b1ek/f2bin'>f2bin</a>
|
||||
, <a href='https://github.com/b1ek/BrainHeck'>BrainHeck</a>.
|
||||
</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/>
|
||||
[## ] 40%<br/>
|
||||
I do this... sometimes<br/>
|
||||
More: <Colored color='seagreen' weight='normal'>skills nt</Colored><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 cis</Colored><br/>
|
||||
[ ] 0%<br/>
|
||||
Never liked it<br/>
|
||||
<br/>
|
||||
</pre>)
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
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>
|
||||
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>;
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
const Hi = (props) => {
|
||||
return <span style={{color:'seagreen',fontWeight:'bold'}}>{...props.children}</span>
|
||||
}
|
||||
const HR = () => {
|
||||
return <hr style={{margin:'16px 0'}}/>;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
'README.md': <>
|
||||
<h1># Hello there!</h1>
|
||||
<HR />
|
||||
My name is Alice and I am a fullstack web developer.<br/>
|
||||
I am a trans girl and I live in Russia.<br/>
|
||||
<br/>
|
||||
This app was built with <Hi>React.JS</Hi> and <Hi>Parcel</Hi>.<br/>
|
||||
|
||||
<h2>## About me</h2>
|
||||
<HR />
|
||||
I am <Hi>vegan</Hi> and like to listen to hyperpop/jpop.
|
||||
Though being <Hi>vegan</Hi>, I do eat fried chicken occasionally.<br/>
|
||||
<br/>
|
||||
I honestly believe that governments are spying on us
|
||||
every time they get a chance to, which is always.
|
||||
This is why I run <Hi>linux</Hi> and use little to none of proprietary
|
||||
software, all my connections are proxied through an offshore server
|
||||
and I don't use <Hi>The Internet</Hi> when I don't have to.<br/>
|
||||
<br/>
|
||||
I like <Hi>PHP+JS</Hi> and <Hi>C</Hi>. I use <Hi>PHP+JS</Hi> for work and <Hi>C</Hi> for passion projects,
|
||||
as I find it too much of work and possible memory leaks and a lot of nasty
|
||||
stuff. To be honestly, I don't imagine building a site or an IDE using just <Hi>C</Hi>.
|
||||
Perhaps, if speed is very much important, I would look into <Hi>C++</Hi>, <Hi>Rust</Hi> or <Hi>Go</Hi>.<br/>
|
||||
<br/>
|
||||
Also I have some experience with stuff like <Hi>Arduino</Hi> and/or <Hi>Raspberry Pi</Hi>.
|
||||
I used to have a team of other makers and we tried to build a vending machine on a bunch of Arduinos and one <s>Raspberry</s> Orange Pi.<br/>
|
||||
<br/>
|
||||
Read this app's source code
|
||||
on <a href='https://git.blek.codes/blek/homepage.js/src/branch/master/react/resume'>Gitea </a>
|
||||
or <a href='https://github.com/b1ek/homepage.js/tree/master/react/resume'>Github</a>
|
||||
</>,
|
||||
|
||||
'super_secret_password.txt':
|
||||
<h1 style={{color:'gray',fontWeight:'bold'}}>UwU</h1>,
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
module.exports = (terminal) => {
|
||||
|
||||
terminal.writeln('Welcome to my online resume!')
|
||||
terminal.writeln('Type \033[1;32mhelp\033[0m for list of commands')
|
||||
terminal.writeln('');
|
||||
|
||||
require('./zsh')(terminal);
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
import { Terminal } from 'xterm';
|
||||
|
||||
/**
|
||||
* @type {Terminal}
|
||||
*/
|
||||
let terminal;
|
||||
|
||||
const prompt = '\033[1;32muser@blek.codes \033[36m~ $ \033[0m';
|
||||
let cmd = '';
|
||||
|
||||
function pr_char(char) {
|
||||
cmd += char;
|
||||
terminal.write(char);
|
||||
}
|
||||
|
||||
function exec_cmd() {
|
||||
let c = cmd;
|
||||
reset_cmd();
|
||||
terminal.writeln('zsh: command not found: ' + c);
|
||||
print_prompt();
|
||||
}
|
||||
|
||||
function print_prompt() {
|
||||
terminal.write(prompt);
|
||||
}
|
||||
|
||||
function reset_cmd() {
|
||||
cmd = '';
|
||||
terminal.writeln('');
|
||||
}
|
||||
|
||||
function control_char(char) {
|
||||
const id = char.codePointAt(0);
|
||||
switch (id) {
|
||||
|
||||
// backspace
|
||||
case 127:
|
||||
if (terminal.buffer.active.cursorX == prompt.length) break;
|
||||
terminal.write('\b \b');
|
||||
cmd = cmd.substring(0, cmd.length - 1);
|
||||
break;
|
||||
|
||||
// enter
|
||||
case 13:
|
||||
exec_cmd();
|
||||
break;
|
||||
|
||||
// Ctrl+c
|
||||
case 3:
|
||||
terminal.write('^C');
|
||||
reset_cmd();
|
||||
print_prompt();
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log('Unknown special char: ' + id);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function key(e) {
|
||||
if (RegExp(/^\p{L}/,'u').test(e.key)) {
|
||||
pr_char(e.key);
|
||||
} else {
|
||||
control_char(e.key);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = (t) => {
|
||||
terminal = t;
|
||||
terminal.onKey(key);
|
||||
terminal.write(prompt);
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,23 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
src: url(./SourceCodeRegular.ttf);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
src: url(./SourceCodeMedium.ttf);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
src: url(./SourceCodeSemiBold.ttf);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
src: url(./SourceCodeBold.ttf);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
module.exports = (p) => {
|
||||
return <span style={{color: p.color, fontWeight: (p.weight ? p.weight : 'bold')}}>{...p.children}</span>
|
||||
}
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'/>
|
||||
<title>Resume debug mode</title>
|
||||
<script type="module" src='resume.js'></script>
|
||||
<link rel="stylesheet" href='styles.css'/>
|
||||
</head>
|
||||
<body>
|
||||
<div id='resume_js_app'></div>
|
||||
</body>
|
||||
</html>
|
||||
<head>
|
||||
<title>resume.js</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="rootstyle.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="resume_js_app"></div>
|
||||
<script src="resume.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,10 +1,6 @@
|
|||
import { createRoot } from "react-dom/client";
|
||||
import { Base } from './Base';
|
||||
import './Style.css';
|
||||
import { Console } from "./Console";
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('resume_js_app').innerHTML = '';
|
||||
const container = document.getElementById("resume_js_app");
|
||||
const root = createRoot(container)
|
||||
root.render(<Base />);
|
||||
}, (Math.random() * 50) + 50)
|
||||
const container = document.getElementById("resume_js_app");
|
||||
const root = createRoot(container)
|
||||
root.render(<Console />);
|
||||
Loading…
Reference in New Issue