jslightham/old-personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed links & added more work pages

Browse Source
This commit is contained in:
jslightham
2022-03-20 20:20:22 -04:00
parent e754daa6b2
commit ba5c88aa78
9 changed files with 611 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/CodeServer.vue
View File

@@ -8,13 +8,16 @@
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">
Built a RESTful API that can compile and run code on a remote server
in isolated docker containers. Easily add support for any language
that can be compiled and run from a bash script.
that can be compiled and run from a bash script. The code editor on this page is a simple editor powered by Prism syntax highlighting.
</p>
<p>
<br>
Check out this project on <a href="https://github.com/jslightham/rest-remote-code-server">GitHub</a>!
</p>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">
<br>
Java is run Main.jar, and thus needs to be placed in the Main class.
The demo below is hosted on a RaspberryPi and may take a while to compile &amp; run. After 10 seconds, your docker instance will be automatically killed and removed. Java will compile the "Main" class, and thus your main method needs to be placed in the Main class. Start by selecting a language from the dropdown.
</p>
<div class="bg-zinc-800 align-left" style="margin-top: 15px">
Code:
<prism-editor
@@ -177,4 +180,8 @@ export default {
text-align: left;
padding: 10px;
}
p a {
color: #fff;
text-decoration: underline;
}
</style>

16
src/views/Resume.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div>
<center><iframe src="https://drive.google.com/file/d/1_nD-iiUjAxfqdgqjjgm9agxPaFAm3_hk/preview" allow="autoplay" style="margin-left: 25px; margin-right: 25px; min-width: 85%; min-height: 85vh;"></iframe></center>
</div>
</template>
<script>
export default {
name: "ResumeComponent"
}
</script>
<style>
</style>

4
src/views/Work.vue
View File

@@ -1,7 +1,7 @@
<template>
<section class="text-gray-400 bg-gray-900 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<p>Check out some of my projects! I'm not yet done setting up each project on my VPS yet, so not every project is hosted yet.</p>
<p>Check out some of my projects! I'm not yet done setting up each project on my VPS yet, so not every project is hosted.</p>
<br>
<div class="-my-8 divide-y-2 divide-gray-800">
<div class="py-8 flex flex-wrap md:flex-nowrap">
@@ -140,7 +140,7 @@
Zero Waste Game
</h2>
<p class="leading-relaxed">
A group project where we created a multiplayer space exploration game in Unity.
A group project where we created a multiplayer space exploration game in Unity. This game is currently hosted in a private repository, thus I cannot provide a link.
</p>
</div>
</div>

114
src/views/Zork.vue
View File

@@ -1,15 +1,119 @@
<template>
<div>
Zork
</div>
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-12">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
Zork Project
</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">
The first big group project that I worked on. This project is a text
based adventure game, similar to the game Zork. The game was written in Java for a High School summative project.
</p>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">
<br>
Check out this project on <a href="https://github.com/jslightham/zork">GitHub</a>! The <a href="https://github.com/jslightham/Zork/wiki">GitHub Wiki</a> includes a lot of information to assist with gameplay.
</p>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">
<br />
Play the game below. The game is run in a docker container that will be removed when the page closes. The output is cleared every time that you press "Run" to make the content easier to read. This is managed by a modified version of the <router-link to="/codeserver"><a>REST Remote Code Server</a></router-link> (Using socket.io instead of REST) project I made.
</p>
<div class="bg-zinc-800 align-left" style="margin-top: 15px">
Output:
<code id="output" style="margin-bottom: 20px;">
</code>
<center>
<form v-on:submit.prevent="sendInput">
<input type="text" id="input" style="width: 50%; margin-right: 15px; padding 100px; height: 40px;" v-model="code">
<button
class="
bg-blue-500
hover:bg-blue-700
text-white
font-bold
py-2
px-4
rounded
width:
100%
"
>
Run
</button>
</form>
</center>
</div>
</div>
</div>
</section>
</template>
<script>
const { io } = require("socket.io-client");
export default {
name: "ZorkComponent"
}
name: "ZorkComponent",
components: {},
created() {
if (!this.loaded) {
this.loaded = true;
console.log("Here");
this.socket = io.connect("localhost:4000");
this.runCode();
}
},
data() {
return {
code: "",
selected: "",
data: [],
socket: {},
loaded: false,
};
},
methods: {
async runCode() {
this.socket.on("output", function (msg) {
console.log(msg);
const newP = document.createElement("p");
const newContent = document.createTextNode(msg);
newP.appendChild(newContent);
document.getElementById("output").appendChild(newP);
});
},
sendInput () {
this.socket.emit("input", this.code);
this.code = "";
const c = document.getElementById("output");
c.innerHTML = '';
}
},
};
</script>
<style>
/* required class */
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
color: #ccc;
/* you must provide font-family font-size line-height. Example: */
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
.align-left {
text-align: left;
padding: 10px;
}
#output {
white-space: pre-wrap;
}
</style>