From 4b3e89fa59ef357a8f6f56cb6af5758f9338ef52 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Wed, 3 Jan 2024 23:49:40 -0500
Subject: [PATCH] Website updates

---
 src/components/contact.vue   |  83 ++++++++++++
 src/components/foot.vue      |  17 +++
 src/components/konsole.vue   | 251 +++++++++++++++++++++++++++++++++++
 src/components/profile.vue   |  30 +++++
 src/components/projects.vue  |  33 +++++
 src/components/refrences.vue |  33 +++++
 6 files changed, 447 insertions(+)
 create mode 100644 src/components/contact.vue
 create mode 100644 src/components/foot.vue
 create mode 100644 src/components/konsole.vue
 create mode 100644 src/components/profile.vue
 create mode 100644 src/components/projects.vue
 create mode 100644 src/components/refrences.vue

diff --git a/src/components/contact.vue b/src/components/contact.vue
new file mode 100644
index 0000000..668ea75
--- /dev/null
+++ b/src/components/contact.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import Icon from '@/components/icon.vue';
+import {ref} from 'vue';
+
+const disable = ref(false);
+const done = ref(false);
+const data = ref({
+	name: '',
+	email: '',
+	subject: '',
+	message: '',
+});
+const errors = ref({
+	banner: false,
+	name: false,
+	email: false,
+	subject: false,
+	message: false,
+});
+
+function reset() {
+	disable.value = false;
+	done.value = false;
+	data.value = {name: '', email: '', subject: '', message: ''};
+	errors.value = {banner: false, name: false, email: false, subject: false, message: false};
+}
+
+function validateEmail(email: string) {
+	return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email);
+}
+
+function submit() {
+	disable.value = true;
+	const d = data.value;
+
+	errors.value = {
+		banner: false,
+		name: !d.name,
+		email: !d.email || !validateEmail(d.email),
+		subject: !d.subject,
+		message: !d.message
+	};
+
+	if(errors.value.name || errors.value.email || errors.value.subject || errors.value.message) return disable.value = false;
+	// Email.send(d.name, d.email, d.subject, d.message).then(() => {
+	// 	done.value = true;
+	// }).catch(err => {
+	// 	console.error(err);
+	// 	errors.value.banner = err?.message || err.toString();
+	// 	disable.value = false;
+	// });
+}
+</script>
+
+<template>
+	<div v-if="done" class="alert alert-success">
+		<span>Success! We sent you a copy & we will be intouch shortly.</span>
+	</div>
+	<div v-if="errors?.banner" class="alert alert-danger">
+		{{ errors.banner }}
+	</div>
+	<form>
+		<div class="d-flex flex-wrap justify-content-between mb-2">
+			<div class="input-group mb-2 mb-sm-0" style="width: 49%; min-width: 250px">
+				<span class="input-group-text"><icon name="user"/></span>
+				<input class="form-control" type="text" placeholder="Name" v-model="data.name" v-bind:class="{'is-invalid': errors?.name}" :disabled="!!user || disable" required>
+			</div>
+			<div class="input-group" style="width: 49%; min-width: 250px">
+				<span class="input-group-text"><icon name="envelope"/></span>
+				<input class="form-control" type="email" placeholder="Email" v-model="data.email" v-bind:class="{'is-invalid': errors?.email}" :disabled="!!user || disable" required>
+			</div>
+		</div>
+		<div class="input-group mb-2">
+			<span class="input-group-text"><icon name="book"/></span>
+			<input class="form-control" type="text" placeholder="Subject" v-model="data.subject" v-bind:class="{'is-invalid': errors?.subject}" :disabled="disable" required>
+		</div>
+		<textarea class="form-control" placeholder="Message" rows="5" v-model="data.message" v-bind:class="{'is-invalid': errors?.message}" :disabled="disable" required></textarea>
+		<div class="text-end pt-3">
+			<button type="button" class="btn rounded-pill ms-3" @click="reset()">Reset</button>
+			<button type="button" class="btn btn-primary rounded-pill ms-3" @click="submit" :disabled="disable">Send Message</button>
+		</div>
+	</form>
+</template>
diff --git a/src/components/foot.vue b/src/components/foot.vue
new file mode 100644
index 0000000..7967a99
--- /dev/null
+++ b/src/components/foot.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+</script>
+
+<style scoped>
+footer {
+	background: #343a40;
+	color: darkgrey;
+}
+</style>
+
+<template>
+	<footer class="p-2 text-center">
+		Copyright © ZaksCode 2024 | All Rights Reserved
+		<br>
+		Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
+	</footer>
+</template>
diff --git a/src/components/konsole.vue b/src/components/konsole.vue
new file mode 100644
index 0000000..efa123c
--- /dev/null
+++ b/src/components/konsole.vue
@@ -0,0 +1,251 @@
+<script setup>
+import {onMounted} from 'vue';
+
+const hostname = 'virtual';
+let history = [];
+let historyIndex = 0;
+let prompt;
+let input;
+let output;
+
+function focus() {
+	input.focus();
+}
+
+function disable() {
+	input.disabled = true;
+	prompt.style.visibility = 'hidden';
+}
+
+function enable() {
+	input.disabled = false;
+	input.focus();
+	prompt.style.visibility = 'visible';
+}
+
+function banner() {
+	stdOut(`Konsole 0.2.0 LTS virtual tty1<br><br>${hostname} login: root<br>password:<br><br>`);
+}
+
+function process(command) {
+	(Array.isArray(command) ? command.join(' ') : command).split(';').filter(c => !!c).forEach(c => {
+		const parts = c.split(' ').filter(c => !!c);
+		if(window.cli[parts[0]] == undefined || window.cli[parts[0]].run == undefined) {
+			stdErr(`${parts[0]}: command not found`);
+		} else {
+			try {
+				const out = window.cli[parts[0]].run(parts.slice(1));
+				if(!!out) stdOut(out);
+			} catch(err) {
+				console.error(err)
+				stdErr(`${parts[0]}: exited with a non-zero status`);
+			}
+		}
+	});
+}
+
+function stdErr(text) {
+	const p = document.createElement('p');
+	p.classList.add('console-output-line');
+	p.classList.add('console-output-error');
+	p.innerText = text;
+	output.appendChild(p);
+}
+
+function stdOut(text, html=true) {
+	const p = document.createElement('p');
+	p.classList.add('console-output-line');
+	p[html ? 'innerHTML' : 'innerText'] = text;
+	output.appendChild(p);
+}
+
+function stdIn(event) {
+	if(event.key == "Enter") {
+		disable();
+		let inputValue = input.value;
+		input.value = '';
+		stdOut(`root@localhost:~ # ${inputValue}`, false);
+		if(!!inputValue) {
+			history.push(inputValue);
+			historyIndex = history.length;
+			process(inputValue)
+		}
+		enable();
+	} else if(event.key == 'Up' || event.key == 'ArrowUp') {
+		if(historyIndex > 0) historyIndex--;
+		input.value = historyIndex == history.length ? '' : history[historyIndex];
+		setTimeout(() => {
+			const end = input.value.length;
+			input.setSelectionRange(end, end);
+			input.focus();
+		}, 1)
+	} else if(event.key == 'Down' || event.key == 'ArrowDown') {
+		if(historyIndex < history.length) historyIndex++;
+		input.value = historyIndex == history.length ? '' : history[historyIndex];
+		setTimeout(() => {
+			const end = input.value.length;
+			input.setSelectionRange(end, end);
+			input.focus();
+		}, 1)
+	}
+}
+
+onMounted(() => {
+	prompt = document.getElementsByClassName('console-input-prompt')[0];
+	input = document.getElementsByClassName('console-input-field')[0];
+	output = document.getElementsByClassName('console-output')[0];
+	banner();
+});
+
+window.cli = {};
+window.cli['clear'] = {
+	autocomplete: () => {
+		return [];
+	},
+	help: () => {
+		return 'Clear console output';
+	},
+	run: args => {
+		output.innerHTML = '';
+	}
+}
+window.cli['echo'] = {
+	autocomplete: () => {
+		return [];
+	},
+	help: () => {
+		return 'Output text to console';
+	},
+	run: args => {
+		return args.join(' ');
+	}
+}
+window.cli['exit'] = {
+	autocomplete: () => {
+		return [];
+	},
+	help: () => {
+		return 'End session';
+	},
+	run: args => {
+		process('clear');
+		history = [];
+		historyIndex = 0;
+		banner();
+	}
+}
+window.cli['help'] = {
+	autocomplete: () => {
+		return [];
+	},
+	help: () => {
+		return 'Display all commands';
+	},
+	run: args => {
+		return Object.keys(window.cli).map(command => `${command} - ${window.cli[command].help()}`).join('<br>') + '<br><br>';
+	}
+}
+window.cli['hostname'] = {
+	autocomplete: () => {
+		return [];
+	},
+	help: () => {
+		return 'Get computer hostname';
+	},
+	run: args => {
+		return 'localhost'
+	}
+}
+window.cli['man'] = {
+	autocomplete: () => {
+		return [];
+	},
+	help: () => {
+		return 'Command manual';
+	},
+	run: args => {
+		return window.cli[args[0]].help();
+	}
+}
+window.cli['whoami'] = {
+	autocomplete: () => {
+		return [];
+	},
+	help: () => {
+		return 'Get username';
+	},
+	run: args => {
+		return 'root'
+	}
+}
+</script>
+
+<style>
+.console {
+	display: flex;
+	flex-direction: column;
+	padding: 1rem;
+	background: #333;
+	font-family: monospace !important;
+	overflow-y: auto;
+
+	.console-output {
+		flex-grow: 1;
+		color: #0f0;
+	}
+
+	.console-output-line {
+		margin: 0;
+		padding: 0;
+		min-height: 1.25rem;
+	}
+
+	.console-input {
+		display: flex;
+		margin: 0;
+
+		.console-input-prompt {
+			padding-right: 0.55em;
+			text-wrap: nowrap;
+			color: #0f0;
+		}
+
+		.console-input-field {
+			border: none;
+			outline: none;
+			font-size: 1rem;
+			background-color: rgba(0, 0, 0, 0);
+			color: #0f0;
+			flex-grow: 1;
+			padding: 0;
+
+			animation: blink-empty 1s infinite linear;
+			background-image: linear-gradient(#0f0, #0f0);
+			background-position: 1px  center;
+			background-repeat: no-repeat;
+			background-size: 1px 1.1em;
+
+			&:focus {
+				background-image: none;
+			}
+		}
+	}
+}
+
+@keyframes blink-empty {
+	0% {background-size: 1px 1.1em;}
+	50% {background-size: 1px 1.1em;}
+	51% {background-size: 0 1.1em;}
+	100% {background-size: 0 1.1em;}
+}
+</style>
+
+<template>
+	<div class="console">
+		<div class="console-output"></div>
+		<div class="console-input" @click=" focus()">
+			<div class="console-input-prompt">root@{{hostname}}:~ #</div>
+			<input class="console-input-field" type="text" @keydown="stdIn($event)">
+		</div>
+	</div>
+</template>
diff --git a/src/components/profile.vue b/src/components/profile.vue
new file mode 100644
index 0000000..e27308d
--- /dev/null
+++ b/src/components/profile.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Icon from '@/components/icon.vue';
+</script>
+
+<style scoped>
+	.card {
+		border-radius: 4px;
+		box-shadow: 0 2px 1px -1px #0003;
+	}
+</style>
+
+<template>
+	<div class="card d-inline-flex flex-column flex-sm-row text-center text-sm-start bg-white p-4">
+		<div class="mb-4 mb-sm-4 me-sm-4">
+			<img src="/profile.jpg" width="150px" height="150px" alt="Zakary Timson" class="rounded-circle">
+		</div>
+		<div class="me-sm-5">
+			<h1 class="m-0" style="font-size: 2.5rem">Zakary Timson</h1>
+			<h2 class="mt-0 text-muted" style="font-size: 1.25rem">
+				DEVOPS & SOFTWARE ENGINEER
+			</h2>
+			<ul class="m-0 p-0 text-start" style="list-style: none">
+				<li><icon name="map-marker-alt" class="me-1"/> Toronto Ontario, Canada</li>
+				<li><icon name="envelope" class="me-1"/> <a href="mailto:zaktimson@gmail.com">zaktimson@gmail.com</a></li>
+				<li><icon name="github" class="fa-brands me-1"/> <a href="https://github.com/ztimson" target="_blank">github.com/ztimson</a></li>
+				<li><icon name="git-alt" class="fa-brands me-1"/> <a href="https://git.zakscode.com" target="_blank">git.zakscode.com</a></li>
+			</ul>
+		</div>
+	</div>
+</template>
diff --git a/src/components/projects.vue b/src/components/projects.vue
new file mode 100644
index 0000000..7fe4be7
--- /dev/null
+++ b/src/components/projects.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+export interface Project {
+	icon?: string;
+	name: string;
+	description: string;
+	link: string;
+	source?: string;
+}
+
+defineProps({
+	projects: {type: Array as () => Project[], required: true}
+});
+</script>
+
+<template>
+	<div>
+		<div v-for="(p, i) in projects">
+			<hr v-if="i != 0">
+			<div class="d-flex align-items-center">
+				<div class="me-2">
+					<img :src="p.icon || '/git.png'" alt="Logo" style="height: 40px; width: 40px;">
+				</div>
+				<div class="d-flex flex-column">
+					<div>
+						<a :href="p.link" target="_blank" class="me-2">{{p.name}}</a>
+						<a v-if="p.source" :href="p.source" target="_blank" class="text-small" style="font-size: 0.75em">[source]</a>
+					</div>
+					<div class="text-muted">{{p.description}}</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/src/components/refrences.vue b/src/components/refrences.vue
new file mode 100644
index 0000000..d48671b
--- /dev/null
+++ b/src/components/refrences.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+</script>
+
+<style scoped lang="scss">
+	.btn-outline-info:hover {
+		color: #ffffff;
+	}
+</style>
+
+<template>
+	<div class="d-block d-md-none">
+		<div class="mb-3">
+			<a class="btn btn-outline-primary w-100">CSV / Resume</a>
+		</div>
+		<div class="btn-group-vertical w-100" role="group">
+			<a class="btn btn-outline-info">CD Projekt Red</a>
+			<a class="btn btn-outline-info">Chris Cartwright</a>
+			<a class="btn btn-outline-info">Garry Whyte</a>
+			<a class="btn btn-outline-info">Ray Power</a>
+			<a class="btn btn-outline-info">Linda Nicodemo</a>
+		</div>
+	</div>
+	<div class="d-none d-md-block">
+		<a class="btn btn-outline-primary me-3">CSV / Resume</a>
+		<div class="btn-group" role="group">
+			<a class="btn btn-outline-info">CD Projekt Red</a>
+			<a class="btn btn-outline-info">Chris Cartwright</a>
+			<a class="btn btn-outline-info">Garry Whyte</a>
+			<a class="btn btn-outline-info">Ray Power</a>
+			<a class="btn btn-outline-info">Linda Nicodemo</a>
+		</div>
+	</div>
+</template>