Almost complete
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,6 +2,7 @@
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
24
README.md
Normal file
24
README.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# jslightham.github.io
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
20613
package-lock.json
generated
Normal file
20613
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
52
package.json
Normal file
52
package.json
Normal file
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"name": "jslightham.github.io",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.26.1",
|
||||
"core-js": "^3.8.3",
|
||||
"prismjs": "^1.27.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-axios": "^3.4.1",
|
||||
"vue-prism-editor": "^2.0.0-alpha.2",
|
||||
"vue-router": "^4.0.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@types/prismjs": "^1.26.0",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"autoprefixer": "^10.4.4",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"postcss": "^8.4.12",
|
||||
"tailwindcss": "^3.0.23"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
112
src/App.vue
Normal file
112
src/App.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="text-gray-400 bg-gray-900 body-font app">
|
||||
<header class="text-gray-400 bg-gray-900 body-font">
|
||||
<div
|
||||
class="
|
||||
container
|
||||
mx-auto
|
||||
flex flex-wrap
|
||||
p-5
|
||||
flex-col
|
||||
md:flex-row
|
||||
items-center
|
||||
"
|
||||
>
|
||||
<a
|
||||
class="
|
||||
flex
|
||||
title-font
|
||||
font-medium
|
||||
items-center
|
||||
text-white
|
||||
mb-4
|
||||
md:mb-0
|
||||
"
|
||||
>
|
||||
<span class="ml-3 text-xl">Johnathon Slightham</span>
|
||||
</a>
|
||||
<nav
|
||||
class="
|
||||
md:ml-auto md:mr-auto
|
||||
flex flex-wrap
|
||||
items-center
|
||||
text-base
|
||||
justify-center
|
||||
"
|
||||
>
|
||||
<router-link to="/"
|
||||
><a class="mr-5 hover:text-white">Home</a></router-link
|
||||
>
|
||||
<router-link to="Work"
|
||||
><a class="mr-5 hover:text-white">Work</a></router-link
|
||||
>
|
||||
<a class="mr-5 hover:text-white">Resume</a>
|
||||
</nav>
|
||||
<a href="https://github.com/jslightham">
|
||||
<button
|
||||
class="
|
||||
inline-flex
|
||||
items-center
|
||||
bg-gray-800
|
||||
border-0
|
||||
py-1
|
||||
px-3
|
||||
focus:outline-none
|
||||
hover:bg-gray-700
|
||||
rounded
|
||||
text-base
|
||||
mt-4
|
||||
md:mt-0
|
||||
"
|
||||
>
|
||||
GitHub
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
class="w-4 h-4 ml-1"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<transition name="fade" mode="out-in">
|
||||
<router-view />
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "app",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/profile.jpg
Normal file
BIN
src/assets/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
94
src/components/ProfileComponent.vue
Normal file
94
src/components/ProfileComponent.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<section class="text-gray-400 bg-gray-900 body-font">
|
||||
<div
|
||||
class="
|
||||
container
|
||||
mx-auto
|
||||
flex
|
||||
px-5
|
||||
py-24
|
||||
md:flex-row
|
||||
flex-col
|
||||
items-center
|
||||
"
|
||||
>
|
||||
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 md:mb-0 mb-10">
|
||||
<img
|
||||
class="object-cover object-center rounded"
|
||||
style="max-height: 350px;"
|
||||
alt="hero"
|
||||
:src="profile"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
lg:flex-grow
|
||||
md:w-1/2
|
||||
lg:pl-24
|
||||
md:pl-16
|
||||
flex flex-col
|
||||
md:items-start md:text-left
|
||||
items-center
|
||||
text-center
|
||||
"
|
||||
>
|
||||
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
|
||||
Johnathon Slightham
|
||||
</h1>
|
||||
<p class="mb-8 leading-relaxed">
|
||||
I am a computer engineering student at the University of Waterloo. I have a passion for machine learning, and love working on open source projects.
|
||||
<br><br>
|
||||
Connect with me!
|
||||
</p>
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
class="
|
||||
inline-flex
|
||||
text-white
|
||||
bg-blue-500
|
||||
border-0
|
||||
py-2
|
||||
px-6
|
||||
focus:outline-none
|
||||
hover:bg-blue-600
|
||||
rounded
|
||||
text-lg
|
||||
"
|
||||
>
|
||||
Resume
|
||||
</button>
|
||||
<button
|
||||
class="
|
||||
ml-4
|
||||
inline-flex
|
||||
text-gray-400
|
||||
bg-gray-800
|
||||
border-0
|
||||
py-2
|
||||
px-6
|
||||
focus:outline-none
|
||||
hover:bg-gray-700 hover:text-white
|
||||
rounded
|
||||
text-lg
|
||||
"
|
||||
>
|
||||
LinkedIn
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
profile: require('@/assets/profile.jpg'),
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
5
src/main.js
Normal file
5
src/main.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
35
src/router/index.js
Normal file
35
src/router/index.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import { createWebHistory, createRouter } from "vue-router";
|
||||
import Home from "@/views/Home.vue";
|
||||
import Work from "@/views/Work.vue";
|
||||
import Zork from "@/views/Zork.vue";
|
||||
import CodeServer from "@/views/CodeServer.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: "/work",
|
||||
name: "Work",
|
||||
component: Work,
|
||||
},
|
||||
{
|
||||
path: "/zork",
|
||||
name: "Zork",
|
||||
component: Zork,
|
||||
},
|
||||
{
|
||||
path: "/codeserver",
|
||||
name: "CodeServer",
|
||||
component: CodeServer,
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
180
src/views/CodeServer.vue
Normal file
180
src/views/CodeServer.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<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">
|
||||
REST Remote Code Server Project
|
||||
</h1>
|
||||
<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.
|
||||
</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.
|
||||
</p>
|
||||
|
||||
<div class="bg-zinc-800 align-left" style="margin-top: 15px">
|
||||
Code:
|
||||
<prism-editor
|
||||
class="my-editor bg-zinc-800"
|
||||
v-model="code"
|
||||
:highlight="highlighter"
|
||||
line-numbers
|
||||
></prism-editor>
|
||||
Output:
|
||||
<code style="">
|
||||
<p
|
||||
v-for="item in data"
|
||||
:key="item.message"
|
||||
style="padding-left: 15px"
|
||||
>
|
||||
{{ item }}
|
||||
</p>
|
||||
</code>
|
||||
<center>
|
||||
<button
|
||||
v-on:click="runCode"
|
||||
class="
|
||||
bg-blue-500
|
||||
hover:bg-blue-700
|
||||
text-white
|
||||
font-bold
|
||||
py-2
|
||||
px-4
|
||||
rounded
|
||||
width:
|
||||
100%
|
||||
"
|
||||
>
|
||||
Run Code
|
||||
</button>
|
||||
|
||||
<div class="relative inline w-full text-gray-700" style="margin-left: 20px;">
|
||||
<select
|
||||
class="
|
||||
h-10
|
||||
pl-3
|
||||
pr-6
|
||||
text-base
|
||||
placeholder-gray-600
|
||||
border
|
||||
rounded-lg
|
||||
appearance-none
|
||||
focus:shadow-outline
|
||||
"
|
||||
v-model="selected"
|
||||
placeholder="Select Language"
|
||||
>
|
||||
<option v-for="language in languages" :key="language">
|
||||
{{ language }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center px-2">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Prism Editor
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
|
||||
|
||||
// import highlighting library (you can use any library you want just return html string)
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
|
||||
|
||||
export default {
|
||||
name: "CodeServerComponent",
|
||||
components: {
|
||||
PrismEditor,
|
||||
},
|
||||
created() {
|
||||
this.getLanguages();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
code: "",
|
||||
languages: [],
|
||||
selected: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async runCode() {
|
||||
this.data = [];
|
||||
let res = await fetch("http://localhost:8000/run/run", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ code: this.code, language: this.selected }),
|
||||
});
|
||||
// Retrieve its body as ReadableStream
|
||||
|
||||
const reader = res.body.getReader();
|
||||
let isDone = false;
|
||||
while (!isDone) {
|
||||
const response = await reader.read();
|
||||
isDone = response.done;
|
||||
if (isDone) {
|
||||
return;
|
||||
}
|
||||
console.log(response);
|
||||
let str = "";
|
||||
for (let i = 8; i < response.value.length; i++) {
|
||||
str += String.fromCharCode(response.value[i]);
|
||||
}
|
||||
console.log(str);
|
||||
this.data.push(str);
|
||||
}
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); // languages.<insert language> to return html with markup
|
||||
},
|
||||
async getLanguages() {
|
||||
let res = await fetch("http://localhost:8000/run/languages");
|
||||
this.languages = await res.json();
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
26
src/views/Home.vue
Normal file
26
src/views/Home.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<ProfileComponent></ProfileComponent>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProfileComponent from '@/components/ProfileComponent.vue'
|
||||
export default {
|
||||
name: "HomeComponent",
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
components: {
|
||||
ProfileComponent,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style>
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
</style>
|
||||
378
src/views/Work.vue
Normal file
378
src/views/Work.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<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>
|
||||
<br>
|
||||
<div class="-my-8 divide-y-2 divide-gray-800">
|
||||
<div class="py-8 flex flex-wrap md:flex-nowrap">
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">Vue, TailwindCSS</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">March 2022</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
Personal Website
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
Used VueJS, and TailwindCSS to build a personal website to showcase my work experience and projects.
|
||||
</p>
|
||||
<a href="https://github.com/jslightham/jslightham.github.io" class="text-blue-400 inline-flex items-center mt-4"
|
||||
>View on GitHub
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">NodeJS, Express, Docker</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">March 2022</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
REST Remote Code Server
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
<router-link to="/codeserver">
|
||||
<a class="text-blue-400 inline-flex items-center mt-4"
|
||||
>See Project
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">NodeJS, Express, MongoDB</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">Oct 2021</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
Kno-Logic API
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
Built a backend with a REST interface for a news aggregation project. Assisted with integration into the frontend react native applicaton.
|
||||
</p>
|
||||
<a href="https://github.com/jslightham/kno-logic-api" class="text-blue-400 inline-flex items-center mt-4"
|
||||
>View on GitHub
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">Java, NodeJS</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">Aug 2021</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
Brute Forced War Game
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
An experiment to learn using crowdsourced computing and multithreaded programming in Java to brute force a solution.
|
||||
</p>
|
||||
<a href="https://github.com/jslightham/brute-forced-war-game" class="text-blue-400 inline-flex items-center mt-4"
|
||||
>View on GitHub
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">Unity, C#</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">Jul 2021</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
Zero Waste Game
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
A group project where we created a multiplayer space exploration game in Unity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">NodeJS, Vue, TensorflowJS, Websockets</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">Feb 2021</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
Multiplayer Stick Figure Game
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
A project for a hackathon, where my group created a multiplayer game. The game's input was the user's camera that used TensorflowJS to place a realtime virtual representation of them in the game. The player's positions were synchronized via websockets, which allowed games such as soccer and volleyball to be played virtually.
|
||||
</p>
|
||||
<a href="https://github.com/jslightham/multiplayer-stickfigure-game" class="text-blue-400 inline-flex items-center mt-4"
|
||||
>View on GitHub
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">NodeJS, Vue, Handbrake, FFMPEG, Video.js, MongoDB</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">Dec 2020</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
NodeJS Video Streamer
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
A simple clone project of the popular video sharing website YouTube. Automatically transcodes uploads, modern video player (Video.js), video and audio streaming from NodeJS backend, automatic thumbnail generation through FFmpeg, comment & like system, and metadata storage in MongoDB.
|
||||
</p>
|
||||
<a href="https://github.com/jslightham/NodeJS-Video-Streamer" class="text-blue-400 inline-flex items-center mt-4"
|
||||
>View on GitHub
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">HTML, Javascript</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">Jun 2020</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
Collision Simulator
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
A javascript canvas collision simulation in 2D for a combined high school Physics and Computer Science final project.
|
||||
</p>
|
||||
<a href="https://jslightham.github.io/Collision-Simulator/" class="text-blue-400 inline-flex items-center mt-4"
|
||||
>See Project
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">Vue, Bootstrap, NodeJS, Express, MongoDB</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">Jun 2020</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
MEVN Attendance System
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
A group project for a school project, where we created an attendance system in MongoDB.
|
||||
</p>
|
||||
<a href="https://github.com/jslightham/MEVN-Attendance-Tracker" class="text-blue-400 inline-flex items-center mt-4"
|
||||
>View on GitHub
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">Java</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">2019-2020</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
MC Plugins
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
Built a few Java edition Minecraft plugins to learn how to.
|
||||
</p>
|
||||
<a href="https://github.com/jslightham/MC-Plugins" class="text-blue-400 inline-flex items-center mt-4"
|
||||
>View on GitHub
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">Firebase, Google Cloud, Keybase, NodeJS</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">Sep 2019</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
Translate Bot
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
A project for a hackathon that won the best use of google cloud award. This project translated conversations in real time within the keybase application into a language that the user selects.
|
||||
</p>
|
||||
<a href="https://devpost.com/software/translatebot" class="text-blue-400 inline-flex items-center mt-4"
|
||||
>View on Devpost
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-nowrap"
|
||||
>
|
||||
<div class="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
|
||||
<span class="font-semibold title-font text-white">Java</span>
|
||||
<span class="mt-1 text-gray-500 text-sm">Jun 2019</span>
|
||||
</div>
|
||||
<div class="md:flex-grow">
|
||||
<h2 class="text-2xl font-medium text-white title-font mb-2">
|
||||
Zork
|
||||
</h2>
|
||||
<p class="leading-relaxed">
|
||||
A group project where we recreated the classic text based adventure game Zork in Java, with some extra functionality.
|
||||
</p>
|
||||
<router-link to="/zork">
|
||||
<a class="text-blue-400 inline-flex items-center mt-4"
|
||||
>See Project
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "WorkComponent",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
15
src/views/Zork.vue
Normal file
15
src/views/Zork.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
Zork
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ZorkComponent"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
10
tailwind.config.js
Normal file
10
tailwind.config.js
Normal file
@@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@@ -0,0 +1,4 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
})
|
||||
Reference in New Issue
Block a user