+ },
+ }}/>
);
}
diff --git a/src/commandline/CommandLineManager.css b/src/commandline/CommandLineManager.css
new file mode 100644
index 0000000..759e971
--- /dev/null
+++ b/src/commandline/CommandLineManager.css
@@ -0,0 +1,20 @@
+
+#commandLineManager:before {
+ content: " ";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: linear-gradient(
+ to bottom,
+ rgba(18, 16, 16, 0) 50%,
+ rgba(0, 0, 0, 0.25) 50%
+ );
+ background-size: 100% 3px;
+ z-index: 2;
+ pointer-events: none;
+}
+
+
diff --git a/src/commandline/CommandLineManager.jsx b/src/commandline/CommandLineManager.jsx
index e6c7f45..1e2606c 100644
--- a/src/commandline/CommandLineManager.jsx
+++ b/src/commandline/CommandLineManager.jsx
@@ -1,27 +1,30 @@
-import {useState} from 'react';
+import "./CommandLineManager.css";
+import {useEffect, useState} from 'react';
import CommandLineEntry from './CommandLineEntry.jsx';
import Prompt from './Prompt.jsx';
-function CommandLineManager() {
- const [input, setInput] = useState("");
+function CommandLineManager(props) {
- const updateInput = (e) => {
- setInput(e.target.value);
- }
+ // set the path to the correct md file via props
+ const path = require(`./content/${ props.page }.md`);
+ const [text, updateText] = useState("");
- const submitInput = (e) => {
- //check if enter was pressed
- if (e.keyCode === 13) {
- console.log(input);
- }
+ fetch(path).then(r => {
+ return r.text();
+ }).then(text => {
+ updateText(text);
+ });
+
+ const getDelay = () => {
+ return (text.length / Math.round(1 + (Number)(text.length / 1000))) + 50;
}
return(
-
-
+
+
- );
+ );
}
export default CommandLineManager;
diff --git a/src/commandline/Image.css b/src/commandline/Image.css
new file mode 100644
index 0000000..34160a2
--- /dev/null
+++ b/src/commandline/Image.css
@@ -0,0 +1,3 @@
+img {
+ width: 170px;
+}
diff --git a/src/commandline/Image.jsx b/src/commandline/Image.jsx
new file mode 100644
index 0000000..eea0229
--- /dev/null
+++ b/src/commandline/Image.jsx
@@ -0,0 +1,20 @@
+import "./Image.css";
+import {useState, useEffect} from "react";
+
+function Image(props) {
+ const [textId, setTextId] = useState(-props.node.position.start.offset);
+
+ useEffect(() => {
+ if(textId < 0) {
+ setTimeout(() => {
+ setTextId(textId + props.speed);
+ }, 1)
+ }
+ });
+
+ return (
+ textId >= 0 ? 
:
+ );
+}
+
+export default Image;
diff --git a/src/commandline/Link.jsx b/src/commandline/Link.jsx
new file mode 100644
index 0000000..5affc53
--- /dev/null
+++ b/src/commandline/Link.jsx
@@ -0,0 +1,19 @@
+import {useEffect, useState} from "react";
+
+function Link(props) {
+ const [textId, setTextId] = useState(-props.node.position.start.offset);
+
+ useEffect(() => {
+ if(textId <= props.link.children[0].length) {
+ setTimeout(() => {
+ setTextId(textId + props.speed);
+ }, 1)
+ }
+ });
+
+ return(
+ {props.link.children[0].substring(0, textId)}
+ );
+}
+
+export default Link;
diff --git a/src/commandline/Paragraph.jsx b/src/commandline/Paragraph.jsx
new file mode 100644
index 0000000..9763fbb
--- /dev/null
+++ b/src/commandline/Paragraph.jsx
@@ -0,0 +1,38 @@
+import {useEffect, useState} from "react";
+import ReactMarkdown from "react-markdown";
+import Text from "./Text";
+
+function Paragraph(props) {
+ const generateDisplay = () => {
+ var buffer = [];
+ var currentColor = undefined;
+ for (var i = 0; i < props.children.length; i++) {
+ //filter out newlines... they are managed by
+ if(props.children[i] === "\n") continue;
+
+ if(props.node.children[i].type === "text") {
+ var offset = props.node.children[i].position.start.offset;
+ buffer.push();
+ } else if(props.node.children[i].type === "raw") {
+ var color = props.children[i].replace("<", "")
+ color = color.replace(">", "");
+ if(color === "clear") {
+ currentColor = undefined;
+ } else {
+ currentColor = color;
+ }
+ } else {
+ buffer.push(props.children[i]);
+ }
+ }
+ return buffer;
+ }
+
+ return(
+
+ {generateDisplay()}
+
+ );
+}
+
+export default Paragraph;
diff --git a/src/commandline/Prompt.css b/src/commandline/Prompt.css
index 1f65fb0..c92e0b2 100644
--- a/src/commandline/Prompt.css
+++ b/src/commandline/Prompt.css
@@ -5,8 +5,32 @@
display: inline;
border: none;
outline: none;
- width: 70%;
padding: 0;
- font-size: 10pt;
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+ font-size: var(--font-size);
+ font-family: "VT323", monospace;
+ font-size: 14pt;
+ text-transform: uppercase;
+ /*font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;*/
+ color: var(--green);
+ background-color: var(--black);
+ caret-color: transparent;
+}
+#inputCursor {
+ display: inline-block;
+ margin-left: -5px;
+ animation: cursor 0.7s infinite;
+ animation-timing-function: step-end;
+ height: 50px;
+}
+
+@keyframes cursor {
+ 0% {
+ color: transparent;
+ }
+ 50% {
+ color: var(--green);
+ }
+ 100% {
+ color: var(--green);
+ }
}
diff --git a/src/commandline/Prompt.jsx b/src/commandline/Prompt.jsx
index 3bf1222..7268e69 100644
--- a/src/commandline/Prompt.jsx
+++ b/src/commandline/Prompt.jsx
@@ -1,11 +1,81 @@
+import {useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
import './Prompt.css';
function Prompt(props) {
+ const [input, setInput] = useState("");
+ const [visible, setVisible] = useState(false);
+ const navigate = useNavigate();
+
+ var focusIntervalId;
+ //periodically focus the input
+ useEffect(() => {
+ const input = document.querySelector("input");
+ focusIntervalId = setInterval(() => {
+ input.focus();
+ }, 100);
+ return () => {
+ clearInterval(focusIntervalId);
+ }
+ }, []);
+
+ var visibleTimeoutId;
+
+ useEffect(() => {
+ if(props.delay != 0) {
+ visibleTimeoutId = setTimeout(() => {
+ setVisible(true);
+ }, props.delay * 5);
+ }
+
+ return () => {
+ clearTimeout(visibleTimeoutId);
+ }
+ }, [props.delay]);
+
+ const updateInput = (e) => {
+ var value = e.target.value.trim().toLowerCase();
+ setInput(value);
+ var element = document.getElementById("promptInput");
+ element.setAttribute("size", value.length + 1);
+ }
+
+ useEffect(() => {
+ var element = document.getElementById("promptInput");
+ element.setAttribute("size", 1);
+ }, []);
+
+
+ const submitInput = (e) => {
+ //check if enter was pressed
+ if (e.keyCode === 13) {
+ if(input.length > 0) {
+ if(input.toLowerCase() === "reload") {
+ window.location.reload();
+ }
+ navigate(`/${ input.trim() }`);
+ }
+ setInput("");
+ document.getElementById("promptInput").setAttribute("size", 1);
+ }
+ }
+
+ if(visible) {
+ return(
+
+ visitor@julius {'>'}
+
+ _
+
+ );
+ }
+
return(
- visitor@julius $
-
+ visitor@julius $
+
);
}
diff --git a/src/commandline/Text.css b/src/commandline/Text.css
new file mode 100644
index 0000000..f433d27
--- /dev/null
+++ b/src/commandline/Text.css
@@ -0,0 +1,3 @@
+.typingText {
+ display: inline;
+}
diff --git a/src/commandline/Text.jsx b/src/commandline/Text.jsx
new file mode 100644
index 0000000..ecf8abe
--- /dev/null
+++ b/src/commandline/Text.jsx
@@ -0,0 +1,35 @@
+import {useEffect, useState} from "react";
+import "./Text.css";
+
+function Text(props) {
+ const [textId, setTextId] = useState(-props.offset);
+ const [content, setContent] = useState();
+
+ useEffect(() => {
+ if(textId <= props.text.length) {
+ setTimeout(() => {
+ setTextId(textId + props.speed);
+ }, 1)
+ }
+ });
+
+ if(props.color != undefined) {
+ //comment below for hex colors
+ //{props.text.substring(0, textId)}
+
+ //use css variables for inline color
+ var r = document.querySelector(':root');
+ var rs = getComputedStyle(r);
+ return (
+
+ {props.text.substring(0, textId)}
+
+ );
+ } else {
+ return (
+ {props.text.substring(0, textId)}
+ );
+ }
+}
+
+export default Text;
diff --git a/src/commandline/content/404.md b/src/commandline/content/404.md
new file mode 100644
index 0000000..79d9fa6
--- /dev/null
+++ b/src/commandline/content/404.md
@@ -0,0 +1,13 @@
+ __ __ __ __ __
+ /\ \\ \ /'__`\/\ \\ \
+ \ \ \\ \ /\ \/\ \ \ \\ \
+ \ \ \\ \_\ \ \ \ \ \ \\ \_
+ \ \__ ,__\ \ \_\ \ \__ ,__\
+ \/_/\_\_/\ \____/\/_/\_\_/
+ \/_/ \/___/ \/_/
+Error 404 This page could not be found...\
+Maybe you had a typo?\
+There is nothing to see.\
+no, really.\
+\
+[home](/home)
diff --git a/src/commandline/content/about.md b/src/commandline/content/about.md
new file mode 100644
index 0000000..1601812
--- /dev/null
+++ b/src/commandline/content/about.md
@@ -0,0 +1,21 @@
+ ** ** ** **** ****
+ **** /** /** /**/** **/**
+ **//** /** ****** ** ** ****** /**//** ** /** *****
+ ** //** /****** **////**/** /**///**/ /** //*** /** **///**
+ **********/**///**/** /**/** /** /** /** //* /**/*******
+ /**//////**/** /**/** /**/** /** /** /** / /**/**////
+ /** /**/****** //****** //****** //** /** /**//******
+ // // ///// ////// ////// // // // //////
+
+My name is Julius Herrmann and this is me:\
+\
+I am currently studying Computer Science at the University Of Saarland in Germany.
+While completing my bachelor I aim to expand my knowledge of coding by creating many side projects, this website being one of them.\
+Before studying I have completed my A-Levels here in Germany.\
+In my free time I teach children how to program, play ultimate frisbee and train parkour.\
+One of my most successfull projects is [Switchy Roads](/switchy).\
+With this game I have won two categories in the game award saar 2019.\
+\
+I am always up for a challenge or any opportunity so feel free to contact me under the following [links](/links).\
+\
+[home](/home) [about](/about) [projects](/projects) [links](/links)
diff --git a/src/commandline/content/clear.md b/src/commandline/content/clear.md
new file mode 100644
index 0000000..d76735b
--- /dev/null
+++ b/src/commandline/content/clear.md
@@ -0,0 +1 @@
+[about](/about) [projects](/projects) [home](/home)
diff --git a/src/commandline/content/home.md b/src/commandline/content/home.md
new file mode 100644
index 0000000..9b234df
--- /dev/null
+++ b/src/commandline/content/home.md
@@ -0,0 +1,34 @@
+ __ __ ______ __
+ /\ \/\ \/\__ _\ /\ \
+ \ \ \_\ \/_/\ \/ \ \ \
+ \ \ _ \ \ \ \ \ \ \
+ \ \ \ \ \ \_\ \__\ \_\
+ \ \_\ \_\/\_____\\/\_\
+ \/_/\/_/\/_____/ \/_/
+
+This is my personal experimental website inspired by command line prompts.\
+This website works best in fullscreen on a desktop or widescreen on a phone.\
+The source code for this website is [here](https://git.juliusherrmann.de/JuliusHerrmann/commandlinewebsite)\
+I also have a "classic" website [here](https://juliusherrmann.de)\
+\
+Who am I?\
+I am a university student, studying computer science at the University of Saarland in Germany.\
+I have been coding since sixth grade and I am always up for a new coding challenge.\
+Besides studying I also work at my university as a programmer for various tasks. Check out my projects!.\
+Cybersecurity is also one of my interests which I combine with my computer science major.\
+Other hobbies of mine are ultimate frisbee and parkour.\
+But most importantly:
+
+ .-"""-. .-"""-. .----.
+ / `..' \ .---------. | == |
+ ::::::::::: | | |.-"""""-.| |----|
+ :+: | | || || | == |
+ +:+ \ / || || |----|
+ +#+ \ / |'-.....-'| |::::|
+ +#+ `\ /' `"")---(""` |___.|
+ #+# `\ /' /:::::::::::\" _ "
+ ########### `\ /' /:::=======:::\`\`\
+ `\/' `"""""""""""""` '-'
+
+You can visit any of the following links by either clicking on them or typing them and then pressing enter.\
+[about](/about) [projects](/projects) [links](/links) [home](/home)
diff --git a/src/commandline/content/links.md b/src/commandline/content/links.md
new file mode 100644
index 0000000..91299c3
--- /dev/null
+++ b/src/commandline/content/links.md
@@ -0,0 +1,52 @@
+ ::: ::::::::::: :::: ::: ::: ::: ::::::::
+ :+: :+: :+:+: :+: :+: :+: :+: :+:
+ +:+ +:+ :+:+:+ +:+ +:+ +:+ +:+
+ +#+ +#+ +#+ +:+ +#+ +#++:++ +#++:++#++
+ +#+ +#+ +#+ +#+#+# +#+ +#+ +#+
+ #+# #+# #+# #+#+# #+# #+# #+# #+#
+ ########## ########### ### #### ### ### ########
+
+
+Feel free to contact me on any of the following platforms :)
+
+ __ __ __ ______ _______ ______ ________ _________ ______
+ /_//_//_/\ /_____/\ /_______/\ /_____/\ /_______/\/________/\/_____/\
+ \:\\:\\:\ \\::::_\/_\::: _ \ \\::::_\/_ \__.::._\/\__.::.__\/\::::_\/_
+ \:\\:\\:\ \\:\/___/\\::(_) \/_\:\/___/\ \::\ \ \::\ \ \:\/___/\
+ \:\\:\\:\ \\::___\/_\:: _ \ \\_::._\:\ _\::\ \__ \::\ \ \::___\/_
+ \:\\:\\:\ \\:\____/\\::(_) \ \ /____\:\/__\::\__/\ \::\ \ \:\____/\
+ \_______\/ \_____\/ \_______\/ \_____\/\________\/ \__\/ \_____\/
+
+[website](https://juliusherrmann.de)
+
+ _______ ________ _________
+ /______/\ /_______/\/________/\
+ \::::__\/__\__.::._\/\__.::.__\/
+ \:\ /____/\ \::\ \ \::\ \
+ \:\\_ _\/ _\::\ \__ \::\ \
+ \:\_\ \ \ /__\::\__/\ \::\ \
+ \_____\/ \________\/ \__\/
+
+[github](https://github.com/JuliusHerrmann) [personal git](https://git.juliusherrmann.de)
+
+ ________ ___ __ ______ _________ ________
+ /_______/\/__/\ /__/\ /_____/\ /________/\/_______/\
+ \__.::._\/\::\_\\ \ \\::::_\/_\__.::.__\/\::: _ \ \
+ \::\ \ \:. `-\ \ \\:\/___/\ \::\ \ \::(_) \ \
+ _\::\ \__\:. _ \ \\_::._\:\ \::\ \ \:: __ \ \
+ /__\::\__/\\. \`-\ \ \ /____\:\ \::\ \ \:.\ \ \ \
+ \________\/ \__\/ \__\/ \_____\/ \__\/ \__\/\__\/
+
+[instagram](https://www.instagram.com/definitely_julius)
+
+ ___ __ __ ________ ________ __
+ /__//_//_/\ /_______/\ /_______/\/_/\
+ \::\| \| \ \\::: _ \ \ \__.::._\/\:\ \
+ \:. \ \\::(_) \ \ \::\ \ \:\ \
+ \:.\-/\ \ \\:: __ \ \ _\::\ \__\:\ \____
+ \. \ \ \ \\:.\ \ \ \/__\::\__/\\:\/___/\
+ \__\/ \__\/ \__\/\__\/\________\/ \_____\/
+
+herrmann.julius@protonmail.com | [mailto](mailto:herrmann.julius@gmx.de)\
+\
+[home](/home) [about](/about) [projects](/projects)
diff --git a/src/commandline/content/ls.md b/src/commandline/content/ls.md
new file mode 100644
index 0000000..6dc8283
--- /dev/null
+++ b/src/commandline/content/ls.md
@@ -0,0 +1 @@
+[home](/home) [about](/about) [projects](/projects) [links](/links)
diff --git a/src/commandline/content/mega.md b/src/commandline/content/mega.md
new file mode 100644
index 0000000..40b5cfa
--- /dev/null
+++ b/src/commandline/content/mega.md
@@ -0,0 +1,18 @@
+ __ __ _
+ | \/ | | |
+ | \ / | ___ __ _ __ _ | |_ _ _ __ ___ _ __
+ | |\/| |/ _ \/ _` |/ _` | _ | | | | | '_ ` _ \| '_ \
+ | | | | __/ (_| | (_| | | |__| | |_| | | | | | | |_) |
+ |_| |_|\___|\__, |\__,_| \____/ \__,_|_| |_| |_| .__/
+ __/ | | |
+ |___/ |_|
+
+   \
+Mega Jump is a fun endless runner or rather jumper.\
+The higher you jump, the better. Getting higher will also bring new challenges.\
+Play with three different characters and beat your highscore.\
+If you are good enough you can even reach space.
+
+[Download](https://play.google.com/store/apps/details?id=com.JukeGames.MegaJump)\
+\
+[switchy](/switchy) [mega](/mega) [safe](/safe) [network](/network) [home](/home)
diff --git a/src/commandline/content/network.md b/src/commandline/content/network.md
new file mode 100644
index 0000000..a7bb100
--- /dev/null
+++ b/src/commandline/content/network.md
@@ -0,0 +1,16 @@
+ _____ _ _ _ _
+ / ____(_) | | | | (_)
+ | (___ _ _ __ ___ _ _| | __ _| |_ _ ___ _ __
+ \___ \| | '_ ` _ \| | | | |/ _` | __| |/ _ \| '_ \
+ ____) | | | | | | | |_| | | (_| | |_| | (_) | | | |
+ |_____/|_|_| |_| |_|\__,_|_|\__,_|\__|_|\___/|_| |_|
+
+ \
+This is a continuous-time stochastic simulation of epidemic spreading on human-to-human contact networks.\
+I developed this at my university job.\
+I coded the whole frontend. The actual code for the simulation is not by me as computer simulation is not my current major.\
+It was a very good exercise in learning React.\
+
+[Open](https://gerritgr.github.io/NetworkEpidemicPlayground-React/)\
+\
+[switchy](/switchy) [mega](/mega) [safe](/safe) [network](/network) [home](/home)
diff --git a/src/commandline/content/party.md b/src/commandline/content/party.md
new file mode 100644
index 0000000..1be2083
--- /dev/null
+++ b/src/commandline/content/party.md
@@ -0,0 +1,20 @@
+ _____ _
+ | __ \ | |
+ | |__) |_ _ _ __| |_ _ _
+ | ___/ _` | '__| __| | | |
+ | | | (_| | | | |_| |_| |
+ |_| \__,_|_| \__|\__, |
+ __/ |
+ |___/
+
+
+\
+Party Starter is a party drinking game to elevate your party to the next level.\
+Use a laptop or any other large screen like a TV to host a new round by opening the link and clicking "new game".\
+Each player connects to the same Website on his phone, enters the Game ID and chooses a name.\
+Once everyone is connected the host can start the game. Have fun!\
+
+Note: This game is only available in german.\
+[Play](https://partystartergame.herokuapp.com/)\
+\
+[switchy](/switchy) [mega](/mega) [safe](/safe) [network](/network) [home](/home)
diff --git a/src/commandline/content/projects.md b/src/commandline/content/projects.md
new file mode 100644
index 0000000..47093b5
--- /dev/null
+++ b/src/commandline/content/projects.md
@@ -0,0 +1,14 @@
+ dBBBBBb dBBBBBb dBBBBP dBP dBBBP dBBBP dBBBBBBP.dBBBBP
+ dB' dBP dBP.BP BP
+ dBBBP' dBBBBK dBP.BP dBP dBBP dBP dBP `BBBBb
+ dBP dBP BB dBP.BP dB'dBP dBP dBP dBP dBP
+ dBP dBP dB' dBBBBP dBBBBP dBBBBP dBBBBP dBP dBBBBP'
+here are my projects:
+
+[Switchy Roads](/switchy) -> Android Game\
+[Mega Jump](/mega) -> Android Game\
+[Safe That Fish](/safe) -> Ludum Dare Entry\
+[Party Starter](/party) -> Party game\
+[Network Epidemic Playground](/network) -> Simulation\
+\
+[switchy](/switchy) [mega](/mega) [safe](/safe) [network](/network) [home](/home)
diff --git a/src/commandline/content/safe.md b/src/commandline/content/safe.md
new file mode 100644
index 0000000..14c0601
--- /dev/null
+++ b/src/commandline/content/safe.md
@@ -0,0 +1,16 @@
+ _ _ _____
+ | | | | | __ \
+ | | _ _ __| |_ _ _ __ ___ | | | | __ _ _ __ ___
+ | | | | | |/ _` | | | | '_ ` _ \ | | | |/ _` | '__/ _ \
+ | |___| |_| | (_| | |_| | | | | | | | |__| | (_| | | | __/
+ |______\__,_|\__,_|\__,_|_| |_| |_| |_____/ \__,_|_| \___|
+
+  \
+Safe That Fish! is my entry for the 42nd ludum dare game jam.\
+A game competition with the theme "running out of space".\
+This game was completely made in 48 hours. Safe all your fish from being eaten.\
+How good are you at multitasking? Will you run out of space?\
+[play](https://jukegames.itch.io/safe-that-fish)\
+[ldjam.com](https://ldjam.com/events/ludum-dare/42/save-that-fish)\
+\
+[switchy](/switchy) [mega](/mega) [safe](/safe) [network](/network) [home](/home)
diff --git a/src/commandline/content/start.md b/src/commandline/content/start.md
index fff142b..5e24f69 100644
--- a/src/commandline/content/start.md
+++ b/src/commandline/content/start.md
@@ -1,7 +1,24 @@
-# Welcome
-This is an interactive website.
-
-You can watch content by typing or clicking on the options below.
-
-
-[about](/about), [projects](/projects), [home](/home)
+ :'########:::'#######:::'#######::'########:
+ : ##.... ##:'##.... ##:'##.... ##:... ##..::
+ : ##:::: ##: ##:::: ##: ##:::: ##:::: ##::::
+ : ########:: ##:::: ##: ##:::: ##:::: ##::::
+ : ##.... ##: ##:::: ##: ##:::: ##:::: ##::::
+ : ##:::: ##: ##:::: ##: ##:::: ##:::: ##::::
+ : ########::. #######::. #######::::: ##::::
+ :........::::.......::::.......::::::..:::::
+booting system\
+initializing pizza\
+collecting thoughts\
+compiling kernel\
+calculating answer to everything\
+result: 42\
+applying answer\
+ failed \
+initializing quantum computing unit [1/4]\
+initializing quantum computing unit [2/4]\
+initializing quantum computing unit [3/4]\
+initializing quantum computing unit [4/4]\
+DONE!\
+\
+Navigate to a page by typing one of the following commands (or click them)\
+[home](/home) [reload](/)
diff --git a/src/commandline/content/switchy.md b/src/commandline/content/switchy.md
new file mode 100644
index 0000000..2e9e0b1
--- /dev/null
+++ b/src/commandline/content/switchy.md
@@ -0,0 +1,17 @@
+ _____ _ _ _ _____ _
+ / ____| (_) | | | | __ \ | |
+ | (_____ ___| |_ ___| |__ _ _ | |__) |___ __ _ __| |___
+ \___ \ \ /\ / / | __/ __| '_ \| | | | | _ // _ \ / _` |/ _` / __|
+ ____) \ V V /| | || (__| | | | |_| | | | \ \ (_) | (_| | (_| \__ \
+ |_____/ \_/\_/ |_|\__\___|_| |_|\__, | |_| \_\___/ \__,_|\__,_|___/
+ __/ |
+ |___/
+
+  \
+Switchy Roads is a mind bending puzzle game for android devices.\
+You can challenge your mind by solving puzzles and guiding your vehicle to the goal.\
+The mind bending part comes into play when you look at the level design.\
+It really challenges you and has 60 level in 3 different, unique worlds\
+[download](https://play.google.com/store/apps/details?id=com.JukeGames.SwitchyRoads)\
+\
+[switchy](/switchy) [mega](/mega) [safe](/safe) [network](/network) [home](/home)
diff --git a/src/index.css b/src/index.css
index d7f0952..0a14b6a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,18 +1,29 @@
+@import url("https://fonts.googleapis.com/css?family=VT323&display=swap");
html {
+ line-height: 18px;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
- font-size: 9pt;
+ /*font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;*/
+ font-family: "VT323", monospace;
+ font-size: 14pt;
+ text-transform: uppercase;
+ background-color: var(--black);
}
body {
+ overflow-x: hidden;
+ overflow-y: scroll;
margin: 0;
+ padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ color: var(--green);
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+ line-height: 0;
+ font-family: "VT323", monospace;
+ /*font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',*/
+ /*monospace;*/
}
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
new file mode 100644
index 0000000..a486577
--- /dev/null
+++ b/src/pages/About.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function About() {
+ return(
+
+ );
+}
+
+export default About;
diff --git a/src/pages/Clear.jsx b/src/pages/Clear.jsx
new file mode 100644
index 0000000..c5f3ce9
--- /dev/null
+++ b/src/pages/Clear.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Clear() {
+ return(
+
+ );
+}
+
+export default Clear;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..71e6d5e
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Home() {
+ return(
+
+ );
+}
+
+export default Home;
diff --git a/src/pages/Layout.css b/src/pages/Layout.css
new file mode 100644
index 0000000..9ff69e5
--- /dev/null
+++ b/src/pages/Layout.css
@@ -0,0 +1,31 @@
+#screenBezel {
+ padding: 10px;
+}
+
+.scanline {
+ width: 100%;
+ height: 100px;
+ z-index: 8;
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 0) 0%,
+ rgba(255, 255, 255, 0.2) 10%,
+ rgba(0, 0, 0, 0.1) 100%
+ );
+ opacity: 0.1;
+ position: absolute;
+ bottom: 100%;
+ animation: scanline 10s linear infinite;
+}
+
+@keyframes scanline {
+ 0% {
+ bottom: 100%;
+ }
+ 80% {
+ bottom: 100%;
+ }
+ 100% {
+ bottom: 0%;
+ }
+}
diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx
new file mode 100644
index 0000000..9f5dfbf
--- /dev/null
+++ b/src/pages/Layout.jsx
@@ -0,0 +1,15 @@
+import "./Layout.css";
+import {Outlet} from "react-router";
+
+function Layout() {
+ return (
+
+
+
+
+ );
+}
+
+export default Links;
diff --git a/src/pages/Ls.jsx b/src/pages/Ls.jsx
new file mode 100644
index 0000000..644c363
--- /dev/null
+++ b/src/pages/Ls.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Ls() {
+ return(
+
+ );
+}
+
+export default Ls;
diff --git a/src/pages/Mega.jsx b/src/pages/Mega.jsx
new file mode 100644
index 0000000..8383728
--- /dev/null
+++ b/src/pages/Mega.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Mega() {
+ return(
+
+ );
+}
+
+export default Mega;
diff --git a/src/pages/Network.jsx b/src/pages/Network.jsx
new file mode 100644
index 0000000..ce62a83
--- /dev/null
+++ b/src/pages/Network.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Network() {
+ return(
+
+ );
+}
+
+export default Network;
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
new file mode 100644
index 0000000..b403c6b
--- /dev/null
+++ b/src/pages/NotFound.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function NotFound() {
+ return(
+
+ );
+}
+
+export default NotFound;
diff --git a/src/pages/Party.jsx b/src/pages/Party.jsx
new file mode 100644
index 0000000..2e47cfc
--- /dev/null
+++ b/src/pages/Party.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Party() {
+ return(
+
+ );
+}
+
+export default Party;
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
new file mode 100644
index 0000000..73a9eb8
--- /dev/null
+++ b/src/pages/Projects.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Projects() {
+ return(
+
+ );
+}
+
+export default Projects;
diff --git a/src/pages/Safe.jsx b/src/pages/Safe.jsx
new file mode 100644
index 0000000..a667367
--- /dev/null
+++ b/src/pages/Safe.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Safe() {
+ return(
+
+ );
+}
+
+export default Safe;
diff --git a/src/pages/Start.css b/src/pages/Start.css
new file mode 100644
index 0000000..b643023
--- /dev/null
+++ b/src/pages/Start.css
@@ -0,0 +1,46 @@
+#animationOverlay {
+ transform: scale(0,0);
+ animation: turn-on 4s linear;
+ animation-delay: 1s;
+ animation-fill-mode:forwards;
+}
+
+@keyframes turn-on{
+ 0%{
+ transform:scale(1,0.8) translate3d(0,0,0);
+ -webkit-filter:brightness(30);
+ filter:brightness(30);
+ opacity:1;
+ }
+ 3.5%{
+ transform:scale(1,0.8) translate3d(0,100%,0);
+ }
+
+ 3.6%{
+ transform:scale(1,0.8) translate3d(0,-100%,0);
+ opacity:1;
+ }
+
+ 9%{
+ transform:scale(1.3,0.6) translate3d(0,100%,0);
+ -webkit-filter:brightness(30);
+ filter:brightness(30);
+ opacity:0;
+ }
+
+
+
+ 11%{
+ transform:scale(1,1) translate3d(0,0,0);
+ -webkit-filter:contrast(0) brightness(0) ;
+ filter:contrast(0) brightness(0);
+ opacity:0;
+ }
+
+ 100%{
+ transform:scale(1,1) translate3d(0,0,0);
+ -webkit-filter:contrast(1) brightness(1.2) saturate(1.3);
+ filter:contrast(1) brightness(1.2) saturate(1.3);
+ opacity:1;
+ }
+}
diff --git a/src/pages/Start.jsx b/src/pages/Start.jsx
new file mode 100644
index 0000000..b49d4ab
--- /dev/null
+++ b/src/pages/Start.jsx
@@ -0,0 +1,12 @@
+import "./Start.css";
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Start() {
+ return(
+
+
+
+ );
+}
+
+export default Start;
diff --git a/src/pages/Switchy.jsx b/src/pages/Switchy.jsx
new file mode 100644
index 0000000..766b38e
--- /dev/null
+++ b/src/pages/Switchy.jsx
@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Switchy() {
+ return(
+
+ );
+}
+
+export default Switchy;