ztimson/zakscode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Website updates

Browse Source
This commit is contained in:
Zakary Timson
2024-01-04 19:56:46 -05:00
parent 4b3e89fa59
commit 6b28ed61bd
19 changed files with 187 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -10,7 +10,7 @@ import Profile from '@/components/profile.vue';
<!-- Content -->
<div class="cap-width mb-3 bg-white">
<!-- Header -->
<header class="p-3 mx-auto" style="background: #732222">
<header class="px-4 d-flex justify-content-center justify-content-sm-start" style="background: #732222">
<profile style="transform: translateY(-33%)" />
</header>

23
src/components/card.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
import Icon from '@/components/icon.vue';
defineProps({
color: {type: String, required: true},
icon: {type: String, required: true},
title: {type: String, required: true},
text: {type: String, required: true},
offset: {type: String, default: '0px'}
});
</script>
<template>
<div class="d-flex flex-column align-items-center border mb-3 p-3" style="width: 240px">
<div class="m-3 p-3 rounded-circle text-white d-flex align-items-middle justify-content-center" :style="'height: 50px; width: 50px; background:' + color">
<icon :name="icon" :style="'margin-top:' + offset"/>
</div>
<h4>{{title}}</h4>
<p class="text-center">
{{text}}
</p>
</div>
</template>

68
src/components/contact.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import Icon from '@/components/icon.vue';
import {environment} from '@/environments/environment';
import {ref} from 'vue';
const disable = ref(false);
@@ -10,7 +11,7 @@ const data = ref({
subject: '',
message: '',
});
const errors = ref({
const errors = ref<any>({
banner: false,
name: false,
email: false,
@@ -29,6 +30,27 @@ function validateEmail(email: string) {
return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email);
}
function send(name: string, email: string, subject: string, message: string) {
function formEncode(data: any): string {
return Object.entries(data).map(([key, value]) =>
encodeURIComponent(key) + '=' + encodeURIComponent(<any>value)
).join('&');
}
return fetch('https://postmail.invotes.com/send', {
method: 'post',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: formEncode({
access_token: environment.postMailKey,
subject: `ZaksCode: ${subject}`,
text: `App: ZaksCode\nFrom: ${name} <${email}>\nSubject: ${subject}\n\nMessage:\n${message}`
})
}).then(async resp => {
if(!resp.ok) throw new Error(resp.statusText);
return await resp.text();
});
}
function submit() {
disable.value = true;
const d = data.value;
@@ -42,39 +64,51 @@ function submit() {
};
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;
// });
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>
<!-- Success Banner -->
<div v-if="done" class="alert alert-success">
<span>Success! We sent you a copy & we will be intouch shortly.</span>
<span>Success! We will be intouch shortly.</span>
</div>
<!-- Error Banner -->
<div v-if="errors?.banner" class="alert alert-danger">
{{ errors.banner }}
Error: {{ (errors as any).banner }}
</div>
<!-- Contact Form -->
<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 class="d-flex flex-column flex-md-row flex-wrap justify-content-between">
<!-- Name -->
<div class="mb-2 p-0 pe-md-1 p-md-0" style="flex: 1 0 0;">
<div class="input-group">
<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="disable" required>
</div>
</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>
<!-- Email -->
<div class="mb-2 p-0 ps-md-1" style="flex: 1 0 0;">
<div class="input-group">
<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="disable" required>
</div>
</div>
</div>
<!-- Subject -->
<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>
<!-- Message Body -->
<textarea class="form-control" placeholder="Message" rows="5" v-model="data.message" v-bind:class="{'is-invalid': errors?.message}" :disabled="disable" required></textarea>
<!-- Buttons -->
<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>

6
src/components/foot.vue
View File

@@ -4,7 +4,11 @@
<style scoped>
footer {
background: #343a40;
color: darkgrey;
color: #A3A3A3;
a {
color: #75B8FF;
}
}
</style>

17
src/components/konsole.vue
View File

@@ -232,6 +232,20 @@ window.cli['whoami'] = {
}
}
.hidden-label {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
@keyframes blink-empty {
0% {background-size: 1px 1.1em;}
50% {background-size: 1px 1.1em;}
@@ -245,7 +259,8 @@ window.cli['whoami'] = {
<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)">
<label for="console-input-field" class="hidden-label"><!-- Accessibility -->CLI Input</label>
<input id="console-input-field" class="console-input-field" type="text" @keydown="stdIn($event)">
</div>
</div>
</template>

2
src/components/profile.vue
View File

@@ -21,7 +21,7 @@ import Icon from '@/components/icon.vue';
</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="envelope" class="me-1"/> <a href="mailto:zaktimson@gmail.com" target="_blank">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>

3
src/components/projects.vue
View File

@@ -15,8 +15,7 @@ defineProps({
<template>
<div>
<div v-for="(p, i) in projects">
<hr v-if="i != 0">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center border p-2" :class="i == 0 ? '' : 'border-top-0'">
<div class="me-2">
<img :src="p.icon || '/git.png'" alt="Logo" style="height: 40px; width: 40px;">
</div>

33
src/components/refrences.vue
View File

@@ -1,33 +1,30 @@
<script setup lang="ts">
</script>
<style scoped lang="scss">
.btn-outline-info:hover {
color: #ffffff;
}
</style>
const resume = 'https://drive.google.com/file/d/1N1L2SYvqY49OJAR97cjjHANj0ModmZSy/view?usp=drive_link';
const refrences = [
// ['Andre Mourinho', ''],
['CD Projekt Red', 'https://files.zakscode.com/share/N61Db3y0'],
['Chris Cartwright', 'https://files.zakscode.com/share/luyY49_N'],
['Garry Whyte', 'https://files.zakscode.com/share/zHjnHReT'],
['Linda Nicodemo', 'https://files.zakscode.com/share/1wKpkQzW'],
['Ray Power', 'https://files.zakscode.com/share/bTR2ab_P'],
]
</script>
<template>
<div class="d-block d-md-none">
<div class="mb-3">
<a class="btn btn-outline-primary w-100">CSV / Resume</a>
<a class="btn btn-outline-danger w-100" :href="resume" target="_blank">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>
<a v-for="ref in refrences" class="btn btn-outline-primary" :href="ref[1]" target="_blank">{{ref[0]}}</a>
</div>
</div>
<div class="d-none d-md-block">
<a class="btn btn-outline-primary me-3">CSV / Resume</a>
<a class="btn btn-outline-danger me-3" :href="resume" target="_blank">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>
<a v-for="ref in refrences" class="btn btn-outline-primary" :href="ref[1]" target="_blank">{{ref[0]}}</a>
</div>
</div>
</template>

3
src/environments/environment.ts Normal file
View File

@@ -0,0 +1,3 @@
export const environment = {
postMailKey: (<any>window)?.env?.APP_POSTMAIL_KEY || import.meta.env.APP_POSTMAIL_ACCESS_TOKEN,
}

6
src/main.scss
View File

@@ -4,7 +4,7 @@
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #333; }
::-webkit-scrollbar-thumb { background: #555; border-radius: 5px }
::-webkit-scrollbar-thumb { background: #555; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }
html, body {
@@ -14,11 +14,11 @@ html, body {
padding: 0;
font-family: Roboto,sans-serif;
background: #354B72 url(/cloud.gif) no-repeat fixed right 50% top -10vh;
background: #354B72 url('/cloud.gif') no-repeat fixed right 50% top -10vh;
}
a:not(.btn), a:not(.btn):visited {
color: #007bff;
color: #006FE6;
text-decoration: none;
&:hover {

87
src/views/Home.vue
View File

@@ -1,81 +1,59 @@
<script setup lang="ts">
import Card from '@/components/card.vue';
import Contact from '@/components/contact.vue';
import Icon from '@/components/icon.vue';
import Konsole from '@/components/konsole.vue';
import Projects from '@/components/projects.vue';
import Refrences from '@/components/refrences.vue';
import {ref} from 'vue';
const services: Projects[] = [
{name: 'Formula Manager', icon: 'https://git.zakscode.com/avatars/7ec6bfd66b2bf9bad5c43c75a33f9cb3f6609b05c33a31f5d1e524a567cd09c1?size=280', link: 'https://screenprintingsuppliescanada.com/formulation-manager', description: 'Screen Printing Supplies'},
{name: 'Map Alliance', icon: 'https://maps.zakscode.com/assets/images/logo.png', link: 'https://maps.zakscode.com', description: 'Online GIS & map editing solution'},
{name: 'Phone Reminders', icon: 'https://phone-reminders.com/phone-reminders.png', link: 'https://phone-reminders.com', description: 'Send SMS & Voice call reminders from Google Calendar'},
{name: 'Formula Manager', icon: 'https://git.zakscode.com/avatars/7ec6bfd66b2bf9bad5c43c75a33f9cb3f6609b05c33a31f5d1e524a567cd09c1?size=280', link: 'https://screenprintingsuppliescanada.com/formulation-manager', description: 'A web & computer application used by FH&Sons to record chemical formulas & distribute them to clients'},
{name: 'Map Alliance', icon: 'https://maps.zakscode.com/assets/images/logo.png', link: 'https://maps.zakscode.com', description: 'An online GIS tool which enables users to view, edit & share various "marked-up" maps'},
{name: 'Phone Reminders', icon: 'https://phone-reminders.com/phone-reminders.png', link: 'https://phone-reminders.com', description: 'Automatically call & send SMS reminders to clients for events using Google Calendar'},
];
const openSource: Projects[] = [
{name: 'Formula Manager', icon: 'https://git.zakscode.com/avatars/7ec6bfd66b2bf9bad5c43c75a33f9cb3f6609b05c33a31f5d1e524a567cd09c1?size=280', link: 'https://screenprintingsuppliescanada.com/formulation-manager', description: 'Screen Printing Supplies'},
{name: 'Map Alliance', icon: 'https://maps.zakscode.com/assets/images/logo.png', link: 'https://maps.zakscode.com', description: 'Online GIS & map editing solution', source: 'https://google.com'},
{name: 'Phone Reminders', icon: 'https://phone-reminders.com/phone-reminders.png', link: 'https://phone-reminders.com', description: 'Send SMS & Voice call reminders from Google Calendar'},
{name: 'ETF Demo', icon: 'https://git.zakscode.com/repo-avatars/0709db0c51d295d2d29b709865bd95f26e351f72a5c993ca63cd9ec4b4a07f43', link: 'https://etf.zakscode.com', source: 'https://git.zakscode.com/ztimson/etf-demo', description: 'Compare CSV files containing "Electronically Traded Funds" data (Check source for CSV files)'},
{name: 'Legio 30', icon: 'https://git.zakscode.com/repo-avatars/f66e3d6f5ff4646b45e859f6bf00c0e0de0621d8a45a47481d53d67b67700f2a', link: 'https://legio-30.org', source: 'https://git.zakscode.com/ztimson/legio-30', description: 'Website for a non-profit Roman re-enactment group from Southern Ontario'},
{name: 'Pelican Landing', icon: 'https://git.zakscode.com/ztimson/pelican-landing/raw/branch/develop/src/assets/logo.png', link: 'https://pelican-landing.zakscode.com', source: 'https://git.zakscode.com/ztimson/pelican-landing', description: 'Business website for a hunting & fishing lodge on the Lage of Woods in Northern Ontario '},
{name: 'Persist', icon: 'https://git.zakscode.com/repo-avatars/89f6c36caf75762ed9f7f98b69044b7db30da5230be7c5cea54f8a1158f1669a', link: 'https://www.npmjs.com/package/@ztimson/persist', source: 'https://git.zakscode.com/ztimson/persist', description: 'Typescript library to sync variables with LocalStorage & persist state through page reloads'},
{name: 'PyBar', icon: 'https://git.zakscode.com/repo-avatars/002f97340c2781ccfa5d09fde97403fd499c39a9ad5675dc0edf05a8396e9ac5', link: 'https://git.zakscode.com/ztimson/py-bar', source: 'https://git.zakscode.com/ztimson/py-bar', description: 'Python library to display ASCII progress bars using iterators'},
{name: 'Transmute', icon: 'https://git.zakscode.com/repo-avatars/b497daaf22a214fe6d6cc35b8ec217cd22401b668dff93dcfcc7557bd8a46d96', link: 'https://git.zakscode.com/ztimson/transmute', source: 'https://git.zakscode.com/ztimson/transmute', description: 'Distributed video conversion tool with built in WebUI'},
{name: 'ZaksCode', icon: 'https://git.zakscode.com/repo-avatars/590279cb4b176c6a7924364c7b0ef78afa80696703abe5bef8d9ce7e12477f3d', link: 'https://zakscode.com', source: 'https://git.zakscode.com/ztimson/zakscode', description: 'Source code for this website, ZaksCode.com'},
];
// Get repository count
let remainder = ref(0);
fetch('https://git.zakscode.com/api/v1/repos/search', {
method: 'get',
headers: {"Content-Type": "application/json"}
}).then(async repos => {
const data = (await repos.json())?.data;
remainder.value = data.length - openSource.length;
});
</script>
<template>
<div class="p-3">
<!-- Terminal -->
<konsole class="mb-5" style="max-height: 300px" />
<!-- Steps -->
<div class="mb-5 pt-5">
<h4 class="mb-0 text-center">Plan for Success</h4>
<h3 class="mb-0 text-center">Plan for Success</h3>
<hr class="mb-4">
<div class="text-center my-5">
<img src="/cycle.svg" alt="Development Cycle" style="width: 100%; max-width: 600px; height: auto;">
</div>
<div class="d-flex">
<div class="d-flex flex-column align-items-center border m-3 p-3 text-center" style="flex: 1 0 0;">
<div class="m-3 p-3 rounded-circle text-white d-flex align-items-middle justify-content-center" style="background: #6aa84f; height: 50px; width: 50px">
<icon name="clipboard"/>
</div>
<h5>Plan</h5>
<p class="text-center">
Working with the client we will identify the goals of the project. This includes things like the target audience, use case, features, style, and deployment strategy.
</p>
</div>
<div class="d-flex flex-column align-items-center border m-3 p-3" style="flex: 1 0 0;">
<div class="m-3 p-3 rounded-circle text-white d-flex align-items-middle justify-content-center" style="background: #6d9eeb; height: 50px; width: 50px">
<icon name="code"/>
</div>
<h5>Develop</h5>
<p class="text-center">
Goals are broken down into tasks and are prioritized. Using CI/CD, tasks are automatically deployed for testing as they are completed.
</p>
</div>
<div class="d-flex flex-column align-items-center border m-3 p-3" style="flex: 1 0 0;">
<div class="m-3 p-3 rounded-circle text-white d-flex align-items-middle justify-content-center" style="background: #e69138; height: 50px; width: 50px">
<icon name="message"/>
</div>
<h5>Feedback</h5>
<p class="text-center">
Clients are notified with the release notes and can test at their convince. Any critiques can be communicated directly to us or through our ticketing system.
</p>
</div>
<div class="d-flex flex-column align-items-center border m-3 p-3" style="flex: 1 0 0;">
<div class="m-3 p-3 rounded-circle text-white" style="background: #674ea7; height: 50px; width: 50px">
<h5 class="m-0">4</h5>
</div>
<h5>Release</h5>
<p class="text-center">
Once all goals are complete we will work with you to deploy the product to any location. Once setup, future updates are automatically rolled out.
</p>
</div>
</div>
<div class="d-flex align-items-center">
<div>
</div>
<div class="d-flex flex-column">
</div>
<div class="d-flex flex-wrap justify-content-around">
<card color="#6aa84f" icon="clipboard" offset="1px" title="Plan" text="Working with the client we will identify the goals of the project. This includes things like the target audience, use case, features, style, and delivery."/>
<card color="#6d9eeb" icon="code" offset="2px" title="Code" text="Goals are broken down into tasks and prioritized in our ticketing system. Using CI/CD, tasks are automatically deployed for testing as they are completed."/>
<card color="#e69138" icon="message" offset="3px" title="Feedback" text="Clients are notified with the release notes and can test at their convince. Any critiques can be communicated directly to us or through our ticketing system."/>
<card color="#674ea7" icon="play" offset="2px" title="Release" text="Once all goals are complete we will work with you to deploy the product to any location. Once setup, future updates are automatically deployed to our clients."/>
</div>
</div>
<!-- About Section -->
<div class="mb-5">
<h3 class="mb-0">About</h3>
<hr class="mb-4">
@@ -98,6 +76,7 @@ const openSource: Projects[] = [
</div>
</div>
<!-- Projects List -->
<div class="mb-5">
<h3 class="m-0">Projects</h3>
<hr class="mb-4">
@@ -109,8 +88,10 @@ const openSource: Projects[] = [
<h4 class="mb-3 text-muted">Open Source</h4>
<projects :projects="openSource"/>
</div>
<a v-if="remainder" class="float-end m-2" href="https://git.zakscode.com/explore" target="_blank">See {{remainder}} More...</a>
</div>
<!-- Contact Form -->
<div>
<h3 class="m-0">Contact</h3>
<hr class="mb-4">