Added new web app version.
This commit is contained in:
parent
9075938d43
commit
62bc2857d0
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/eslint-config-typescript',
|
||||||
|
'@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"Vue.volar",
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"esbenp.prettier-vscode"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
# app
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS
|
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Andrew Lalis</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,36 @@
|
||||||
|
{
|
||||||
|
"name": "app",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check \"build-only {@}\" --",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --build --force",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"vue": "^3.4.29",
|
||||||
|
"vue-router": "^4.3.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.8.0",
|
||||||
|
"@tsconfig/node20": "^20.1.4",
|
||||||
|
"@types/node": "^20.14.5",
|
||||||
|
"@vitejs/plugin-vue": "^5.0.5",
|
||||||
|
"@vue/eslint-config-prettier": "^9.0.0",
|
||||||
|
"@vue/eslint-config-typescript": "^13.0.0",
|
||||||
|
"@vue/tsconfig": "^0.5.1",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-vue": "^9.23.0",
|
||||||
|
"npm-run-all2": "^6.2.0",
|
||||||
|
"prettier": "^3.2.5",
|
||||||
|
"typescript": "~5.4.0",
|
||||||
|
"vite": "^5.3.1",
|
||||||
|
"vue-tsc": "^2.0.21"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,82 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterView } from 'vue-router'
|
||||||
|
import NavLink from './components/NavLink.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bisection-container">
|
||||||
|
<header class="page-bisection">
|
||||||
|
<h1 class="site-header-text">Andrew Lalis</h1>
|
||||||
|
<nav>
|
||||||
|
<NavLink path="/">Home</NavLink>
|
||||||
|
<NavLink path="/about">About</NavLink>
|
||||||
|
<NavLink path="/software">Software</NavLink>
|
||||||
|
<NavLink path="/gardening">Gardening</NavLink>
|
||||||
|
<NavLink path="/logbook">Logbook</NavLink>
|
||||||
|
<NavLink path="/contact">Contact</NavLink>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<RouterView v-slot="{ Component }">
|
||||||
|
<Transition name="page">
|
||||||
|
<Component :is="Component" class="page-bisection content-page" />
|
||||||
|
</Transition>
|
||||||
|
</RouterView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bisection-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.page-bisection {
|
||||||
|
width: 50ch;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.content-page {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-text {
|
||||||
|
font-family: Sacramento;
|
||||||
|
font-size: 60px;
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Activates once the left and right half of the page stack due to width constraints.
|
||||||
|
We remove a lot of the vertical spacing to make things fit better.
|
||||||
|
*/
|
||||||
|
@media (width < calc(100ch - 2.5rem)) {
|
||||||
|
.site-header-text {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.content-page {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Once the device width is smaller than one of the halves, sync the page half to the device width.
|
||||||
|
*/
|
||||||
|
@media (width < 50ch) {
|
||||||
|
.page-bisection {
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-enter-active {
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: Sacramento;
|
||||||
|
src: url('@/assets/fonts/Sacramento-Regular.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: BaskervvilleSC;
|
||||||
|
src: url('@/assets/fonts/BaskervvilleSC-Regular.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: OpenSans;
|
||||||
|
src: url('@/assets/fonts/OpenSans-VariableFont_wdth,wght.ttf');
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: OpenSans;
|
||||||
|
src: url('@/assets/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf');
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,47 @@
|
||||||
|
@import '@/assets/fonts.css';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--text-color: rgb(224, 224, 224);
|
||||||
|
--background-color: rgb(17, 17, 17);
|
||||||
|
--background-color-2: rgb(34, 34, 34);
|
||||||
|
--code-color: rgb(224, 226, 120);
|
||||||
|
--success-color: rgb(118, 201, 118);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: OpenSans;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: BaskervvilleSC;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: var(--code-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-local {
|
||||||
|
color: var(--success-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.link-local:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-out {
|
||||||
|
color: var(--code-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.link-out:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { Message } from '@/views/LogBookView.vue'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
message: Message
|
||||||
|
}>()
|
||||||
|
const date = computed(() => {
|
||||||
|
const b = props.message.createdAt.split(/\D+/)
|
||||||
|
const offsetMult = props.message.createdAt.indexOf('+') !== -1 ? -1 : 1
|
||||||
|
const hrOffset = offsetMult * (+b[7] || 0)
|
||||||
|
const minOffset = offsetMult * (+b[8] || 0)
|
||||||
|
return new Date(
|
||||||
|
Date.UTC(+b[0], +b[1] - 1, +b[2], +b[3] + hrOffset, +b[4] + minOffset, +b[5], +b[6] || 0)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="logbook-message">
|
||||||
|
<p v-text="message.message"></p>
|
||||||
|
<div>
|
||||||
|
<small>sent by <span v-text="message.name" style="color: var(--code-color)"></span></small>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small><time :datetime="date.toISOString()" v-text="date.toLocaleString()"></time></small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
.logbook-message {
|
||||||
|
background-color: var(--background-color-2);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
.logbook-message + .logbook-message {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.logbook-message > time {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
.logbook-message > p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
defineProps<{
|
||||||
|
path: string
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="nav-link">
|
||||||
|
<RouterLink :to="path" v-bind:class="route.path === path ? 'nav-link-active' : ''">
|
||||||
|
<slot></slot>
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
.nav-link {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link > a {
|
||||||
|
font-family: BaskervvilleSC;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
transition: color 0.25s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link-active {
|
||||||
|
color: var(--success-color) !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link > a:hover {
|
||||||
|
color: var(--success-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Activates once the left and right half of the page stack due to width constraints.
|
||||||
|
We remove a lot of the vertical spacing to make things fit better.
|
||||||
|
*/
|
||||||
|
@media (width < calc(100ch - 2.5rem)) {
|
||||||
|
.nav-link {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<p class="note">
|
||||||
|
<slot></slot>
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
.note {
|
||||||
|
font-size: small;
|
||||||
|
font-style: italic;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
name: string
|
||||||
|
url: string
|
||||||
|
tags?: string[]
|
||||||
|
}>()
|
||||||
|
const sortedTags = computed(() => (!props.tags ? null : props.tags.slice().sort()))
|
||||||
|
|
||||||
|
const COMMON_TAGS: Record<string, string[]> = {
|
||||||
|
Java: ['white', '#e76f00'],
|
||||||
|
Vue: ['white', '#41b883'],
|
||||||
|
Dlang: ['white', '#b03931'],
|
||||||
|
Typescript: ['white', '#3178c6'],
|
||||||
|
Finance: ['white', '#0e4f0a'],
|
||||||
|
Spring: ['white', '#6db33f']
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTagStyle(tag: string) {
|
||||||
|
if (tag in COMMON_TAGS) {
|
||||||
|
return { color: COMMON_TAGS[tag][0], 'background-color': COMMON_TAGS[tag][1] }
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
color: 'white',
|
||||||
|
'background-color': 'gray'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="software-project-tile">
|
||||||
|
<h3><a :href="url" v-text="name" class="link-out"></a></h3>
|
||||||
|
<div class="software-project-tile-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<div v-if="tags">
|
||||||
|
<span
|
||||||
|
v-for="tag in sortedTags"
|
||||||
|
:key="tag"
|
||||||
|
v-text="tag"
|
||||||
|
class="software-project-tile-tag-badge"
|
||||||
|
:style="getTagStyle(tag)"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.software-project-tile {
|
||||||
|
background-color: var(--background-color-2);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.software-project-tile + .software-project-tile {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.software-project-tile > h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.software-project-tile-content > p {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.software-project-tile-tag-badge {
|
||||||
|
font-size: 12px;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
padding-top: 0.1rem;
|
||||||
|
padding-bottom: 0.1rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import HomeView from '../views/HomeView.vue'
|
||||||
|
import AboutView from '@/views/AboutView.vue'
|
||||||
|
import ContactView from '@/views/ContactView.vue'
|
||||||
|
import SoftwareView from '@/views/SoftwareView.vue'
|
||||||
|
import GardeningView from '@/views/GardeningView.vue'
|
||||||
|
import LogBookView from '@/views/LogBookView.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: HomeView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
component: AboutView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/contact',
|
||||||
|
component: ContactView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/software',
|
||||||
|
component: SoftwareView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/gardening',
|
||||||
|
component: GardeningView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/logbook',
|
||||||
|
component: LogBookView
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useCounterStore = defineStore('counter', () => {
|
||||||
|
const count = ref(0)
|
||||||
|
const doubleCount = computed(() => count.value * 2)
|
||||||
|
function increment() {
|
||||||
|
count.value++
|
||||||
|
}
|
||||||
|
|
||||||
|
return { count, doubleCount, increment }
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<p>
|
||||||
|
This page was designed and programmed by myself, Andrew, to be my personal presence on the
|
||||||
|
world-wide-web. I use it as my professional portfolio, in addition to a repository for
|
||||||
|
anything random that interests me and might be interesting for others too.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Feel free to look around, and
|
||||||
|
<RouterLink to="/contact" class="link-local">contact me</RouterLink> if you find anything
|
||||||
|
broken or have any questions about anything you find. Maybe say hello in my
|
||||||
|
<RouterLink to="/logbook" class="link-local">logbook</RouterLink> while you're at it?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>About This Site, Technically</h3>
|
||||||
|
<p>
|
||||||
|
You can find the source code for this website at
|
||||||
|
<a href="https://git.andrewlalis.com/andrew/homepage" class="link-out">
|
||||||
|
git.andrewlalis.com/andrew/homepage </a
|
||||||
|
>. It's built using <a href="https://vuejs.org/" class="link-out">Vue</a>, and styled
|
||||||
|
completely by hand using plain-old CSS.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The site is hosted on a small DigitalOcean "droplet" (their branding for a Virtual Private
|
||||||
|
Server), and is served through Nginx and various firewalls.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
If you actually go and view the source code, you'll see a <code>deploy.sh</code> file.
|
||||||
|
Essentially, all I do is build the site locally, then upload the files. Pretty simple, right?
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
|
const emailText = ref('')
|
||||||
|
const emailCorrect = computed(() => {
|
||||||
|
const testStr = atob('YW5kcmV3bGFsaXNvZmZpY2lhbEBnbWFpbC5jb20=')
|
||||||
|
return emailText.value.trim().toLowerCase() === testStr
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<p>
|
||||||
|
My preferred method of communication is email, which I usually check daily. Send to
|
||||||
|
<code>first-name + last-name + "official" at gmail dot com</code>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
See if you can figure it out:
|
||||||
|
<input class="contactEmailInput" type="text" v-model="emailText" />
|
||||||
|
<span v-if="emailCorrect">
|
||||||
|
<br />
|
||||||
|
<small style="color: var(--success-color)"><em>You got it!</em></small>
|
||||||
|
</span>
|
||||||
|
<br />
|
||||||
|
<small><em>I write it like that to avoid getting spammed by bots.</em></small>
|
||||||
|
</p>
|
||||||
|
<p>My Discord username is <code>____andrew____</code></p>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
.contactEmailInput {
|
||||||
|
font-family: OpenSans, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
width: calc(min(30ch, 100%));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<p><em>This page is a work in progress. Please check back later.</em></p>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<p>
|
||||||
|
My name's Andrew, and I'm a software engineer, gardener, runner, home cook, and probably many
|
||||||
|
other things too, depending on who you ask. Welcome to my website!
|
||||||
|
</p>
|
||||||
|
<p>Click one of the links on the left to check out something more interesting.</p>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import LogbookMessage from '@/components/LogbookMessage.vue'
|
||||||
|
import NoteText from '@/components/NoteText.vue'
|
||||||
|
import { onMounted, ref, type Ref } from 'vue'
|
||||||
|
|
||||||
|
const LOGBOOK_URL = 'https://logbook.andrewlalis.com'
|
||||||
|
|
||||||
|
export interface Message {
|
||||||
|
createdAt: string
|
||||||
|
name: string
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const messages: Ref<Message[]> = ref([])
|
||||||
|
const addingMessage = ref(false)
|
||||||
|
const messageSubmitted = ref(false)
|
||||||
|
const formName = ref('')
|
||||||
|
const formMessage = ref('')
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
messages.value = await getMessages()
|
||||||
|
})
|
||||||
|
|
||||||
|
async function getMessages(): Promise<Message[]> {
|
||||||
|
try {
|
||||||
|
const response = await fetch(LOGBOOK_URL)
|
||||||
|
if (response.ok) {
|
||||||
|
return (await response.json()) as Message[]
|
||||||
|
} else {
|
||||||
|
console.warn('Failed to get logbook messages.', response.status)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to send logbook request.', error)
|
||||||
|
}
|
||||||
|
return [] // In case of error, always return an empty list.
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submitMessage() {
|
||||||
|
const data = {
|
||||||
|
name: formName.value,
|
||||||
|
message: formMessage.value
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const response = await fetch(LOGBOOK_URL, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
Accept: 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
})
|
||||||
|
if (response.ok) {
|
||||||
|
messages.value = await getMessages()
|
||||||
|
formName.value = ''
|
||||||
|
formMessage.value = ''
|
||||||
|
addingMessage.value = false
|
||||||
|
messageSubmitted.value = true
|
||||||
|
} else {
|
||||||
|
console.warn('Log message rejected.', response.status)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to send log message.', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<p>
|
||||||
|
If you'd like, you can leave a message in my online logbook so that I and others might see it.
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
v-if="!messageSubmitted"
|
||||||
|
@click.prevent="addingMessage = !addingMessage"
|
||||||
|
class="button-link"
|
||||||
|
>Add your message.</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<form v-if="addingMessage" class="message-form">
|
||||||
|
<div class="form-row">
|
||||||
|
<label for="nameField">Name</label>
|
||||||
|
<input
|
||||||
|
id="nameField"
|
||||||
|
class="message-form-input"
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
minlength="2"
|
||||||
|
maxlength="32"
|
||||||
|
required
|
||||||
|
v-model="formName"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<label for="messageField">Message</label>
|
||||||
|
<textarea
|
||||||
|
id="messageField"
|
||||||
|
class="message-form-input"
|
||||||
|
type="text"
|
||||||
|
name="message"
|
||||||
|
minlength="2"
|
||||||
|
maxlength="255"
|
||||||
|
required
|
||||||
|
v-model="formMessage"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<a href="#" @click.prevent="submitMessage()" class="button-link">Submit your message!</a>
|
||||||
|
</div>
|
||||||
|
<NoteText>
|
||||||
|
Note that I do check all logs and some basic information about who sent them (IP address,
|
||||||
|
browser, etc). Inappropriate comments will be removed and their authors banned.
|
||||||
|
</NoteText>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<TransitionGroup name="messages" tag="div">
|
||||||
|
<LogbookMessage v-for="msg in messages" :key="msg.createdAt" :message="msg" />
|
||||||
|
</TransitionGroup>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
.button-link {
|
||||||
|
color: var(--success-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.button-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.message-form {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
.form-row {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.form-row > label {
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
.message-form-input {
|
||||||
|
font-family: OpenSans;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
#messageField {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-enter-active,
|
||||||
|
.messages-leave-active {
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages-enter-from,
|
||||||
|
.messages-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import SoftwareProjectTile from '@/components/SoftwareProjectTile.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<p>
|
||||||
|
Here you'll find a selection of projects I've worked on over the course of my software
|
||||||
|
engineering career.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Beside the projects listed here, you can view my complete portfolio on
|
||||||
|
<a href="https://git.andrewlalis.com" class="link-out">git.andrewlalis.com</a>. I also have a
|
||||||
|
<a href="https://github.com/andrewlalis" class="link-out">GitHub</a> account, but I only use
|
||||||
|
it for collaboration and a projects that rely on GitHub's API integration.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<SoftwareProjectTile
|
||||||
|
name="Perfin"
|
||||||
|
url="https://git.andrewlalis.com/andrew/perfin"
|
||||||
|
:tags="['Java', 'JavaFX', 'Finance']"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
A desktop personal finance application that makes it easy to manage your accounts and
|
||||||
|
transactions in a secure manner. Record transactions, track brokerage assets, and view
|
||||||
|
graphs of your spending, total value, and more.
|
||||||
|
</p>
|
||||||
|
</SoftwareProjectTile>
|
||||||
|
<SoftwareProjectTile
|
||||||
|
name="Guerilla Gardening Map"
|
||||||
|
url="https://guerilla-gardening.andrewlalis.com"
|
||||||
|
:tags="['Dlang', 'Vue', 'Typescript']"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
A website for anonymously tracking and sharing information on
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Guerrilla_gardening" class="link-out"
|
||||||
|
>Guerilla-Gardening</a
|
||||||
|
>
|
||||||
|
locations around the world.
|
||||||
|
</p>
|
||||||
|
</SoftwareProjectTile>
|
||||||
|
<SoftwareProjectTile
|
||||||
|
name="LiteList"
|
||||||
|
url="https://litelist.andrewlalis.com"
|
||||||
|
:tags="['Dlang', 'Vue', 'Typescript']"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
An extremely barebones web application to demonstrate the viability of my own HTTP server.
|
||||||
|
It's just your average ToDo list app, with basic JWT-based authentication.
|
||||||
|
</p>
|
||||||
|
</SoftwareProjectTile>
|
||||||
|
<SoftwareProjectTile
|
||||||
|
name="Handy-Http"
|
||||||
|
url="https://github.com/andrewlalis/handy-httpd"
|
||||||
|
:tags="['Dlang']"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
An lightweight and flexible HTTP server implemented in the D programming language. Supports
|
||||||
|
websockets, file serving, complex URL paths with path variables, and more!
|
||||||
|
</p>
|
||||||
|
</SoftwareProjectTile>
|
||||||
|
<SoftwareProjectTile
|
||||||
|
name="JavaFX Scene Router"
|
||||||
|
url="https://git.andrewlalis.com/andrew/javafx-scene-router"
|
||||||
|
:tags="['Java', 'JavaFX']"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
A <em>router</em> implementation for JavaFX desktop applications. Define a singleton
|
||||||
|
<code>SceneRouter</code>, add some routes to it, and add the router's provided view
|
||||||
|
component to your scene graph. Now you can navigate to different "pages" programmatically or
|
||||||
|
with user-interaction.
|
||||||
|
</p>
|
||||||
|
</SoftwareProjectTile>
|
||||||
|
<SoftwareProjectTile
|
||||||
|
name="Gymboard"
|
||||||
|
url="https://git.andrewlalis.com/andrew/Gymboard"
|
||||||
|
:tags="['Java', 'Spring', 'Vue', 'Typescript', 'Dlang']"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
Proof-of-concept for a local gym leaderboard web application, where users post videos of
|
||||||
|
their lifts to climb to the top of various leaderboards. Built using a
|
||||||
|
<em>modular-monolith</em> software architecture.
|
||||||
|
</p>
|
||||||
|
</SoftwareProjectTile>
|
||||||
|
<SoftwareProjectTile
|
||||||
|
name="Streams"
|
||||||
|
url="https://github.com/andrewlalis/streams"
|
||||||
|
:tags="['Dlang']"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
A library that defines useful stream primitive types and implementations for IO, which
|
||||||
|
serves as a convenient wrapper around platform-specific reading and writing operations for
|
||||||
|
files, sockets, and more.
|
||||||
|
</p>
|
||||||
|
</SoftwareProjectTile>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"exclude": ["src/**/__tests__/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"extends": "@tsconfig/node20/tsconfig.json",
|
||||||
|
"include": [
|
||||||
|
"vite.config.*",
|
||||||
|
"vitest.config.*",
|
||||||
|
"cypress.config.*",
|
||||||
|
"nightwatch.conf.*",
|
||||||
|
"playwright.config.*"
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue