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",
|
"name": "resume",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "",
|
"main": "src/resume.js",
|
||||||
"source": "src/index.html",
|
"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",
|
"author": "blek",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@parcel/reporter-bundle-analyzer": "^2.8.3",
|
|
||||||
"buffer": "^5.5.0",
|
|
||||||
"parcel": "^2.8.3",
|
"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": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.21.0",
|
|
||||||
"react": "^18.2.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>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'/>
|
<title>resume.js</title>
|
||||||
<title>Resume debug mode</title>
|
<meta charset="utf-8" />
|
||||||
<script type="module" src='resume.js'></script>
|
<link rel="stylesheet" href="rootstyle.css" />
|
||||||
<link rel="stylesheet" href='styles.css'/>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id='resume_js_app'></div>
|
<div id="resume_js_app"></div>
|
||||||
|
<script src="resume.js" type="module"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
import { createRoot } from "react-dom/client";
|
import { createRoot } from "react-dom/client";
|
||||||
import { Base } from './Base';
|
import { Console } from "./Console";
|
||||||
import './Style.css';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
const container = document.getElementById("resume_js_app");
|
||||||
document.getElementById('resume_js_app').innerHTML = '';
|
const root = createRoot(container)
|
||||||
const container = document.getElementById("resume_js_app");
|
root.render(<Console />);
|
||||||
const root = createRoot(container)
|
|
||||||
root.render(<Base />);
|
|
||||||
}, (Math.random() * 50) + 50)
|
|
||||||
Loading…
Reference in New Issue