Website updates
This commit is contained in:
parent
0e277a1478
commit
4b3e89fa59
83
src/components/contact.vue
Normal file
83
src/components/contact.vue
Normal file
@ -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>
|
||||||
17
src/components/foot.vue
Normal file
17
src/components/foot.vue
Normal file
@ -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>
|
||||||
251
src/components/konsole.vue
Normal file
251
src/components/konsole.vue
Normal file
@ -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>
|
||||||
30
src/components/profile.vue
Normal file
30
src/components/profile.vue
Normal file
@ -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>
|
||||||
33
src/components/projects.vue
Normal file
33
src/components/projects.vue
Normal file
@ -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>
|
||||||
33
src/components/refrences.vue
Normal file
33
src/components/refrences.vue
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user