v1

package.json

@@ -6,9 +6,10 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "markdown-to-jsx": "^7.1.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-markdown": "^8.0.0",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -0,0 +1,7 @@
+:root {
+  --black: #000000;
+  --green: green;
+  --blue: #1e90ff;
+  --red: #FF0018;
+  --font-size: 10pt;
+}

src/App.js

@@ -1,9 +1,42 @@
+import {BrowserRouter, Routes, Route} from 'react-router-dom';
 import './App.css';
 import CommandLineManager from './commandline/CommandLineManager';
+import About from './pages/About';
+import Clear from './pages/Clear';
+import Home from './pages/Home';
+import Layout from './pages/Layout';
+import Links from './pages/Links';
+import Ls from './pages/Ls';
+import Mega from './pages/Mega';
+import Network from './pages/Network';
+import NotFound from './pages/NotFound';
+import Party from './pages/Party';
+import Projects from './pages/Projects';
+import Safe from './pages/Safe';
+import Start from './pages/Start';
+import Switchy from './pages/Switchy';
 
 function App() {
   return (
-    <CommandLineManager/>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout/>}>
+          <Route index element={<Start/>}/>
+          <Route path="/home" element={<Home/>}/>
+          <Route path="/about" element={<About/>}/>
+          <Route path="/projects" element={<Projects/>}/>
+          <Route path="/switchy" element={<Switchy/>}/>
+          <Route path="/mega" element={<Mega/>}/>
+          <Route path="/safe" element={<Safe/>}/>
+          <Route path="/party" element={<Party/>}/>
+          <Route path="/network" element={<Network/>}/>
+          <Route path="/links" element={<Links/>}/>
+          <Route path="/clear" element={<Clear/>}/>
+          <Route path="/ls" element={<Ls/>}/>
+          <Route path="*" element={<NotFound/>}/>
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/commandline/Code.jsx

@@ -0,0 +1,19 @@
+import {useEffect, useState} from "react";
+
+function Code(props) {
+  const [textId, setTextId] = useState(-props.node.position.start.offset);
+
+  useEffect(() =>  {
+    if(textId <= props.code.children[0].length) {
+      setTimeout(() => {
+        setTextId(textId + props.speed);
+      }, 1)
+    }
+  });
+
+  return(
+    <code>{props.code.children[0].substring(0, textId)}</code>
+  );
+}
+
+export default Code;

src/commandline/CommandLineEntry.jsx

@@ -1,43 +1,27 @@
-import Markdown from "markdown-to-jsx";
-import {useEffect, useState} from "react";
-
-import test from "./content/test.png";
+import ReactMarkdown from "react-markdown";
+import Code from "./Code";
+import Image from "./Image";
+import Link from "./Link";
+import Paragraph from "./Paragraph";
 
 function CommandLineEntry(props) {
-  // set the path to the correct md file via props
-  const path = require(`./content/${ props.content }.md`);
-  const [text, updateText] = useState("");
-
-  // fetching the content of path
-  fetch(path).then(r => {
-    return r.text();
-  }).then(text =>  {
-      updateText(text);
-    })
-
-
-  const [displayIndex, setDisplayIndex] = useState(0);
-
-  var intervalId;
-  useEffect(() =>  {
-    intervalId = setInterval(() => {
-      if (displayIndex < text.length) {
-        setDisplayIndex(displayIndex + 1);
-      } else {
-        clearInterval(intervalId);
-      }
-    }, 1);
-    return function cleanup() {
-      clearInterval(intervalId);
-    }
-  });
-
-  const getTextToDisplay = () => {
-    return text.substring(0, displayIndex);
-  }
-
+  const speed = Math.round(1 + (Number)(props.text.length / 1000));
   return(
-    <Markdown>{getTextToDisplay()}</Markdown>
+    <ReactMarkdown children={props.text}
+    components= {{
+    p: ({node, ...props}) =>  {
+      return <Paragraph node={node} children={props.children} speed={speed}/>;
+    },
+    img: ({node, ...props}) => {
+      return <Image node={node} image={props} speed={speed}/>
+    },
+    a: ({node, ...props}) => {
+      return <Link node={node} link={props} speed={speed}/>
+    },
+      code: ({node, ...props}) => {
+      return <Code node={node} code={props} speed={speed}/>
+    },
+    }}/>
   );
 }
 

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;
+}
+
+

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(
     <div id="commandLineManager">
-      <CommandLineEntry content={"start"}/>
-      <Prompt input={input} updateInput={updateInput} submitInput={submitInput}/>
+      <CommandLineEntry text={text}/>
+      <Prompt delay={getDelay()}/>
     </div>
-  );
+    );
 }
 
 export default CommandLineManager;

src/commandline/Image.css

@@ -0,0 +1,3 @@
+img {
+  width: 170px;
+}

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 ? <img src={props.image.src} alt={props.image.alt}/> : <div></div>
+  );
+}
+
+export default Image;

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(
+    <a href={props.link.href}>{props.link.children[0].substring(0, textId)}</a>
+  );
+}
+
+export default Link;

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 <br/>
+      if(props.children[i] === "\n") continue;
+
+      if(props.node.children[i].type === "text") {
+        var offset = props.node.children[i].position.start.offset;
+        buffer.push(<Text color={currentColor} key={i} text={props.children[i]} offset={offset} speed={props.speed}/>);
+    } 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(
+    <div>
+      {generateDisplay()}
+    </div>
+  );
+}
+
+export default Paragraph; 

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);
+    }
 }

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(
+      <div className="Prompt">
+        <p id="ps1">visitor@julius {'>'} </p>
+        <input id="promptInput" type="text" autoFocus={true} maxLength={20}
+        value={input} onChange={updateInput} onKeyDown={submitInput}/>
+        <div id="inputCursor">_</div>
+      </div>
+      );
+  }
+
   return(
     <div className="Prompt">
-      <p id="ps1">visitor@julius $ </p>
-      <input id="promptInput" type="text" autoFocus={true} maxLength={20}
-      value={props.input} onChange={props.updateInput} onKeyDown={props.submitInput}/>
+      <p id="ps1" style={{display: "none"}}>visitor@julius $ </p>
+      <input id="promptInput" style={{display: "none"}} type="text" autoFocus={true} maxLength={20}
+      value={input} onChange={updateInput} onKeyDown={submitInput}/>
     </div>
   );
 }

src/commandline/Text.css

@@ -0,0 +1,3 @@
+.typingText {
+  display: inline;
+}

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
+    //<font color={`#${props.color.replace("color", "")}`}>{props.text.substring(0, textId)}</font>
+
+    //use css variables for inline color
+    var r = document.querySelector(':root');
+    var rs = getComputedStyle(r);
+    return (
+      <div className="typingText">
+        <font color={rs.getPropertyValue(`--${props.color.replace("color", "")}`)}>{props.text.substring(0, textId)}</font>
+      </div>
+    );
+  } else {
+    return (
+      <div className="typingText">{props.text.substring(0, textId)}</div>
+      );
+  }
+}
+
+export default Text;

src/commandline/content/404.md

@@ -0,0 +1,13 @@
+     __ __       __   __ __      
+    /\ \\ \    /'__`\/\ \\ \     
+    \ \ \\ \  /\ \/\ \ \ \\ \    
+     \ \ \\ \_\ \ \ \ \ \ \\ \_  
+      \ \__ ,__\ \ \_\ \ \__ ,__\
+       \/_/\_\_/\ \____/\/_/\_\_/
+          \/_/   \/___/    \/_/  
+<colorred>Error 404<clear> This page could not be found...\
+Maybe you had a typo?\
+There is nothing to see.\
+no, really.\
+\
+[home](/home)

src/commandline/content/about.md

@@ -0,0 +1,21 @@
+         **     **                         **         ****     ****
+        ****   /**                        /**        /**/**   **/**
+       **//**  /**       ******  **   ** ******      /**//** ** /**  ***** 
+      **  //** /******  **////**/**  /**///**/       /** //***  /** **///**
+     **********/**///**/**   /**/**  /**  /**        /**  //*   /**/*******
+    /**//////**/**  /**/**   /**/**  /**  /**        /**   /    /**/**//// 
+    /**     /**/****** //****** //******  //**       /**        /**//******
+    //      // /////    //////   //////    //        //         //  ////// 
+
+My name is Julius Herrmann and this is me:\
+![Profile Picture](/profilePicture.png)\
+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.\
+![Game Award Logo](/Game-Award-Saar-Logo.png)\
+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)

src/commandline/content/clear.md

@@ -0,0 +1 @@
+[about](/about) [projects](/projects) [home](/home)

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)\
+\
+<colorblue>Who am I?<clear>\
+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)

src/commandline/content/links.md

@@ -0,0 +1,52 @@
+    :::        ::::::::::: ::::    ::: :::    ::: ::::::::  
+    :+:            :+:     :+:+:   :+: :+:   :+: :+:    :+: 
+    +:+            +:+     :+:+:+  +:+ +:+  +:+  +:+        
+    +#+            +#+     +#+ +:+ +#+ +#++:++   +#++:++#++ 
+    +#+            +#+     +#+  +#+#+# +#+  +#+         +#+ 
+    #+#            #+#     #+#   #+#+# #+#   #+# #+#    #+# 
+    ########## ########### ###    #### ###    ### ######## 
+
+
+<colorred>Feel free to contact me on any of the following platforms :)<clear>
+
+     __ __ __   ______    _______   ______    ________  _________  ______      
+    /_//_//_/\ /_____/\ /_______/\ /_____/\  /_______/\/________/\/_____/\     
+    \:\\:\\:\ \\::::_\/_\::: _  \ \\::::_\/_ \__.::._\/\__.::.__\/\::::_\/_    
+     \:\\:\\:\ \\:\/___/\\::(_)  \/_\:\/___/\   \::\ \    \::\ \   \:\/___/\   
+      \:\\:\\:\ \\::___\/_\::  _  \ \\_::._\:\  _\::\ \__  \::\ \   \::___\/_  
+       \:\\:\\:\ \\:\____/\\::(_)  \ \ /____\:\/__\::\__/\  \::\ \   \:\____/\ 
+        \_______\/ \_____\/ \_______\/ \_____\/\________\/   \__\/    \_____\/ 
+
+[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)

src/commandline/content/ls.md

@@ -0,0 +1 @@
+[home](/home) [about](/about) [projects](/projects) [links](/links)

src/commandline/content/mega.md

@@ -0,0 +1,18 @@
+      __  __                         _ 
+     |  \/  |                       | |
+     | \  / | ___  __ _  __ _       | |_   _ _ __ ___  _ __  
+     | |\/| |/ _ \/ _` |/ _` |  _   | | | | | '_ ` _ \| '_ \ 
+     | |  | |  __/ (_| | (_| | | |__| | |_| | | | | | | |_) |
+     |_|  |_|\___|\__, |\__,_|  \____/ \__,_|_| |_| |_| .__/ 
+                   __/ |                              | |
+                  |___/                               |_|
+
+![Picture1](/screenMegaJump1.jpg) ![Picture2](/screenMegaJump2.jpg) ![Picture3](/screenMegaJump3.jpg) \
+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)

src/commandline/content/network.md

@@ -0,0 +1,16 @@
+       _____ _                 _       _   _ 
+      / ____(_)               | |     | | (_)
+     | (___  _ _ __ ___  _   _| | __ _| |_ _  ___  _ __ 
+      \___ \| | '_ ` _ \| | | | |/ _` | __| |/ _ \| '_ \ 
+      ____) | | | | | | | |_| | | (_| | |_| | (_) | | | |
+     |_____/|_|_| |_| |_|\__,_|_|\__,_|\__|_|\___/|_| |_|
+
+![Picture1](/simulationIcon.png) ![Picture2](/simulationScreen.png)\
+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)

src/commandline/content/party.md

@@ -0,0 +1,20 @@
+      _____           _ 
+     |  __ \         | |
+     | |__) |_ _ _ __| |_ _   _ 
+     |  ___/ _` | '__| __| | | |
+     | |  | (_| | |  | |_| |_| |
+     |_|   \__,_|_|   \__|\__, |
+                           __/ |
+                          |___/
+
+
+![Picture1](/PartyStarterScreen.png)\
+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)

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)

src/commandline/content/safe.md

@@ -0,0 +1,16 @@
+      _               _                   _____ 
+     | |             | |                 |  __ \
+     | |    _   _  __| |_   _ _ __ ___   | |  | | __ _ _ __ ___ 
+     | |   | | | |/ _` | | | | '_ ` _ \  | |  | |/ _` | '__/ _ \
+     | |___| |_| | (_| | |_| | | | | | | | |__| | (_| | | |  __/
+     |______\__,_|\__,_|\__,_|_| |_| |_| |_____/ \__,_|_|  \___|
+
+![Picture1](/screenSTF1.png) ![Picture2](/screenSTF2.png) ![Picture3](/screenSTF3.png)\
+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)

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\
+<colorred> failed <clear>\
+initializing quantum computing unit <colorred>[1/4]<clear>\
+initializing quantum computing unit <colorred>[2/4]<clear>\
+initializing quantum computing unit <colorred>[3/4]<clear>\
+initializing quantum computing unit <colorred>[4/4]<clear>\
+<colorblue>DONE!<clear>\
+\
+<clear>Navigate to a page by typing one of the following commands (or click them)\
+[home](/home) [reload](/)

src/commandline/content/switchy.md

@@ -0,0 +1,17 @@
+       _____         _ _       _             _____                 _ 
+      / ____|       (_) |     | |           |  __ \               | |
+     | (_____      ___| |_ ___| |__  _   _  | |__) |___   __ _  __| |___ 
+      \___ \ \ /\ / / | __/ __| '_ \| | | | |  _  // _ \ / _` |/ _` / __|
+      ____) \ V  V /| | || (__| | | | |_| | | | \ \ (_) | (_| | (_| \__ \
+     |_____/ \_/\_/ |_|\__\___|_| |_|\__, | |_|  \_\___/ \__,_|\__,_|___/
+                                      __/ |
+                                     |___/
+
+![Picture1](/screenSwitchyRoads1.jpg) ![Picture2](/screenSwitchyRoads2.jpg) ![Picture3](/screenSwitchyRoads3.png)\
+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)

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;*/
 }

src/pages/About.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function About() {
+  return(
+    <CommandLineManager page={"about"}/>
+  );
+}
+
+export default About;

src/pages/Clear.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Clear() {
+  return(
+    <CommandLineManager page={"clear"}/>
+  );
+}
+
+export default Clear;

src/pages/Home.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Home() {
+  return(
+    <CommandLineManager page={"home"}/>
+  );
+}
+
+export default Home;

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%;
+    }
+}

src/pages/Layout.jsx

@@ -0,0 +1,15 @@
+import "./Layout.css";
+import {Outlet} from "react-router";
+
+function Layout() {
+  return (
+    <div>
+      <div className="scanline"></div>
+      <div id="screenBezel">
+        <Outlet/>
+      </div>
+    </div>
+  );
+}
+
+export default Layout;

src/pages/Links.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Links() {
+  return(
+    <CommandLineManager page={"links"}/>
+  );
+}
+
+export default Links;

src/pages/Ls.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Ls() {
+  return(
+    <CommandLineManager page={"ls"}/>
+  );
+}
+
+export default Ls;

src/pages/Mega.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Mega() {
+  return(
+    <CommandLineManager page={"mega"}/>
+  );
+}
+
+export default Mega;

src/pages/Network.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Network() {
+  return(
+    <CommandLineManager page={"network"}/>
+  );
+}
+
+export default Network;

src/pages/NotFound.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function NotFound() {
+  return(
+    <CommandLineManager page={"404"}/>
+  );
+}
+
+export default NotFound;

src/pages/Party.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Party() {
+  return(
+    <CommandLineManager page={"party"}/>
+  );
+}
+
+export default Party;

src/pages/Projects.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Projects() {
+  return(
+    <CommandLineManager page={"projects"}/>
+  );
+}
+
+export default Projects;

src/pages/Safe.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Safe() {
+  return(
+    <CommandLineManager page={"safe"}/>
+  );
+}
+
+export default Safe;

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;
+  }
+}

src/pages/Start.jsx

@@ -0,0 +1,12 @@
+import "./Start.css";
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Start() {
+  return(
+    <div id="animationOverlay">
+      <CommandLineManager page={"start"}/>
+    </div>
+  );
+}
+
+export default Start;

src/pages/Switchy.jsx

@@ -0,0 +1,9 @@
+import CommandLineManager from "../commandline/CommandLineManager";
+
+function Switchy() {
+  return(
+    <CommandLineManager page={"switchy"}/>
+  );
+}
+
+export default Switchy;