Website updates
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user