Compare commits
22 Commits
8c4e10524e
...
developmen
| Author | SHA1 | Date | |
|---|---|---|---|
38edb64728
|
|||
| 1070662164 | |||
|
9a36a46ad1
|
|||
|
558bca7f56
|
|||
|
bc7099d627
|
|||
|
f71b054ae5
|
|||
| 0e09633e83 | |||
|
a83022c46e
|
|||
|
b1944e64d9
|
|||
|
188f4616ea
|
|||
| de33ca3814 | |||
|
e9143bfdf4
|
|||
|
87ff7e5dbd
|
|||
| 8aea5bc94f | |||
| dc00eff17c | |||
|
fe36594189
|
|||
| aa8e55c9a6 | |||
|
e2b276dc0e
|
|||
| 6721dc5eef | |||
| 6c5d16ef7a | |||
| 962e3614e3 | |||
| 3b2a8a6611 |
15
.devcontainer/devcontainer.json
Normal file
15
.devcontainer/devcontainer.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "luke-else.co.uk",
|
||||
"image": "git.luke-else.co.uk/luke-else/nodejs-dev:latest",
|
||||
"remoteUser": "dev",
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
"extensions": [
|
||||
"ms-azuretools.vscode-docker",
|
||||
"ms-vscode-remote.remote-containers",
|
||||
"svelte.svelte-vscode"
|
||||
]
|
||||
}
|
||||
},
|
||||
"postCreateCommand": "pnpm install"
|
||||
}
|
||||
@@ -1,19 +1,19 @@
|
||||
# .dockerignore
|
||||
|
||||
.vscode
|
||||
|
||||
node_modules
|
||||
|
||||
.git
|
||||
.gitattributes
|
||||
.gitea
|
||||
|
||||
.eslintignore
|
||||
.eslintrc.cjs
|
||||
|
||||
.prettierrc
|
||||
.pretieriignore
|
||||
|
||||
README.md
|
||||
|
||||
# .dockerignore
|
||||
|
||||
.vscode
|
||||
|
||||
node_modules
|
||||
|
||||
.git
|
||||
.gitattributes
|
||||
.gitea
|
||||
|
||||
.eslintignore
|
||||
.eslintrc.cjs
|
||||
|
||||
.prettierrc
|
||||
.pretieriignore
|
||||
|
||||
README.md
|
||||
|
||||
Dockerfile
|
||||
@@ -1,30 +1,30 @@
|
||||
name: Build and Push Development Docker Image
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ development ]
|
||||
|
||||
jobs:
|
||||
build-and-push:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout Repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Log in to Docker Hub
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ secrets.CONTAINER_REGISTRY }}
|
||||
username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
|
||||
password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Build and Tag Docker Image
|
||||
run: |
|
||||
docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev .
|
||||
|
||||
- name: Push Docker Image
|
||||
run: |
|
||||
docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev
|
||||
name: Build and Push Development Docker Image
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ development ]
|
||||
|
||||
jobs:
|
||||
build-and-push:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout Repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Log in to Docker Hub
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ secrets.CONTAINER_REGISTRY }}
|
||||
username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
|
||||
password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Build and Tag Docker Image
|
||||
run: |
|
||||
docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev .
|
||||
|
||||
- name: Push Docker Image
|
||||
run: |
|
||||
docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
name: Build and Push Latest Docker Image
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
|
||||
jobs:
|
||||
build-and-push:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout Repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Log in to Docker Hub
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ secrets.CONTAINER_REGISTRY }}
|
||||
username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
|
||||
password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Build and Tag Docker Image
|
||||
run: |
|
||||
docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:latest .
|
||||
|
||||
- name: Push Docker Image
|
||||
run: |
|
||||
docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:latest
|
||||
name: Build and Push Latest Docker Image
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
|
||||
jobs:
|
||||
build-and-push:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout Repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Log in to Docker Hub
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ secrets.CONTAINER_REGISTRY }}
|
||||
username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
|
||||
password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Build and Tag Docker Image
|
||||
run: |
|
||||
docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:latest .
|
||||
|
||||
- name: Push Docker Image
|
||||
run: |
|
||||
docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:latest
|
||||
|
||||
23
.gitignore
vendored
23
.gitignore
vendored
@@ -1,11 +1,12 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
.vscode
|
||||
.DS_Store
|
||||
node_modules
|
||||
.pnpm-store
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
.vscode
|
||||
|
||||
6
.npmrc
6
.npmrc
@@ -1,2 +1,4 @@
|
||||
engine-strict=true
|
||||
resolution-mode=highest
|
||||
engine-strict=true
|
||||
resolution-mode=highest
|
||||
|
||||
@luke-else:registry=https://git.luke-else.co.uk/api/packages/luke-else/npm/
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
20
.prettierrc
20
.prettierrc
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"useTabs": false,
|
||||
"tabWidth": 4,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"pluginSearchDirs": ["."],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
{
|
||||
"useTabs": false,
|
||||
"tabWidth": 4,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"pluginSearchDirs": ["."],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
|
||||
112
README.md
112
README.md
@@ -1,56 +1,56 @@
|
||||
## Welcome
|
||||
|
||||
This site contains information relating to my personal situation, however, you are able to clone this project and change the `me.json` file to update this as required.
|
||||
|
||||
## Screenshots
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/images/main.png" width="40%">
|
||||
<img src="assets/images/light_mode.png" width="40%">
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/images/skills.png" width="30%">
|
||||
<img src="assets/images/repos.png" width="30%">
|
||||
<img src="assets/images/contact.png" width="30%">
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/images/experience.png" width="30%">
|
||||
</p>
|
||||
|
||||
## Getting Started
|
||||
|
||||
Get starting but installing all of the dependencies of the project.
|
||||
|
||||
```bash
|
||||
npm install
|
||||
|
||||
```
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
```
|
||||
|
||||
```bash
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of the app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
|
||||
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. In this case, vite is used.
|
||||
## Welcome
|
||||
|
||||
This site contains information relating to my personal situation, however, you are able to clone this project and change the `me.json` file to update this as required.
|
||||
|
||||
## Screenshots
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/images/main.png" width="40%">
|
||||
<img src="assets/images/light_mode.png" width="40%">
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/images/skills.png" width="30%">
|
||||
<img src="assets/images/repos.png" width="30%">
|
||||
<img src="assets/images/contact.png" width="30%">
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="assets/images/experience.png" width="30%">
|
||||
</p>
|
||||
|
||||
## Getting Started
|
||||
|
||||
Get starting but installing all of the dependencies of the project.
|
||||
|
||||
```bash
|
||||
npm install
|
||||
|
||||
```
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
```
|
||||
|
||||
```bash
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of the app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
|
||||
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. In this case, vite is used.
|
||||
|
||||
41
dockerfile
41
dockerfile
@@ -1,20 +1,21 @@
|
||||
FROM node:lts-slim as build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN rm -rf node_modules
|
||||
RUN rm -rf build
|
||||
COPY . .
|
||||
RUN npm install
|
||||
RUN npm run build
|
||||
|
||||
FROM node:lts-slim as run
|
||||
|
||||
WORKDIR /app
|
||||
COPY --from=build /app/package.json ./package.json
|
||||
COPY --from=build /app/build ./build
|
||||
RUN npm install --omit=dev
|
||||
|
||||
EXPOSE 3000
|
||||
ENTRYPOINT [ "npm", "run", "start" ]
|
||||
FROM git.luke-else.co.uk/luke-else/nodejs:latest AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN rm -rf node_modules
|
||||
RUN rm -rf build
|
||||
COPY . .
|
||||
RUN pnpm install
|
||||
RUN pnpm run build
|
||||
|
||||
FROM git.luke-else.co.uk/luke-else/nodejs:latest AS run
|
||||
|
||||
WORKDIR /app
|
||||
COPY --from=build /app/package.json ./package.json
|
||||
COPY --from=build /app/.npmrc ./.npmrc
|
||||
COPY --from=build /app/build ./build
|
||||
RUN pnpm install --prod
|
||||
|
||||
EXPOSE 3000
|
||||
ENTRYPOINT [ "pnpm", "run", "start" ]
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-json": "^6.0.0",
|
||||
"@rollup/plugin-json": "^6.1.0",
|
||||
"@sveltejs/adapter-auto": "6.0.0",
|
||||
"@sveltejs/adapter-node": "5.2.12",
|
||||
"@sveltejs/kit": "2.20.8",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.1.1",
|
||||
"prettier": "3.5.3",
|
||||
"prettier-plugin-svelte": "3.3.3",
|
||||
"svelte": "5.28.2",
|
||||
@@ -28,8 +28,9 @@
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.6",
|
||||
"@luke-else/component-lib": "^1.1.5",
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
"svelte-toasts": "^1.1.2",
|
||||
"tailwindcss": "^4.1.6"
|
||||
"tailwindcss": "^4.1.13"
|
||||
}
|
||||
}
|
||||
|
||||
1342
pnpm-lock.yaml
generated
1342
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1 +1 @@
|
||||
@import "tailwindcss"
|
||||
@import "tailwindcss";
|
||||
24
src/app.d.ts
vendored
24
src/app.d.ts
vendored
@@ -1,12 +1,12 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
|
||||
62
src/app.html
62
src/app.html
@@ -1,31 +1,31 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Luke Else - Software Developer at Thales UK. I specialise in developing distributed systems in C++ using highly scalable internal frameworks. I also develop backend and system applications in my spare time using both Svelte, Rust and C++. Feel free to check my work out at https://git.luke-else.co.uk."
|
||||
/>
|
||||
<meta name="author" content="Luke Else (mail@luke-else.co.uk)" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<script
|
||||
async
|
||||
src="https://tracking.luke-else.co.uk/tracker.js"
|
||||
data-ackee-server="https://tracking.luke-else.co.uk"
|
||||
data-ackee-domain-id="6c59ab88-dc6d-4d53-9831-0d6bff919dcd"
|
||||
data-ackee-opts='{ "detailed": true }'
|
||||
></script>
|
||||
%sveltekit.head%
|
||||
|
||||
<style></style>
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Luke Else - Software Developer at Thales UK. I specialise in developing distributed systems in C++ using highly scalable internal frameworks. I also develop backend and system applications in my spare time using both Svelte, Rust and C++. Feel free to check my work out at https://git.luke-else.co.uk."
|
||||
/>
|
||||
<meta name="author" content="Luke Else (mail@luke-else.co.uk)" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<script
|
||||
async
|
||||
src="https://tracking.luke-else.co.uk/tracker.js"
|
||||
data-ackee-server="https://tracking.luke-else.co.uk"
|
||||
data-ackee-domain-id="6c59ab88-dc6d-4d53-9831-0d6bff919dcd"
|
||||
data-ackee-opts='{ "detailed": true }'
|
||||
></script>
|
||||
%sveltekit.head%
|
||||
|
||||
<style></style>
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
import type { GitRepo } from "../types";
|
||||
|
||||
const API_BASE_URL = "https://git.luke-else.co.uk/api/v1";
|
||||
export const IMAGE_URL_SUFFIX = "/raw/branch/main/assets/images/main.png";
|
||||
|
||||
|
||||
export async function fetchRepos(): Promise<GitRepo[]> {
|
||||
try {
|
||||
console.log("Fetching repos...");
|
||||
const response = await fetch(`${API_BASE_URL}/repos/search?sort=updated&order=desc&limit=12`, {
|
||||
headers: {
|
||||
// "Authorization": `token ${ACCESS_TOKEN}`,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data: { data: GitRepo[] } = await response.json();
|
||||
return data.data; // Extract the list of repositories
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch repos:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function timeSince(inputDate: Date | string): string {
|
||||
const date = new Date(inputDate); // Ensure it's a Date object
|
||||
if (isNaN(date.getTime())) {
|
||||
throw new Error("Invalid date provided");
|
||||
}
|
||||
|
||||
const now: Date = new Date();
|
||||
const diffInMs: number = now.getTime() - date.getTime();
|
||||
const diffInSeconds: number = Math.floor(diffInMs / 1000);
|
||||
const diffInMinutes: number = Math.floor(diffInSeconds / 60);
|
||||
const diffInHours: number = Math.floor(diffInMinutes / 60);
|
||||
const diffInDays: number = Math.floor(diffInHours / 24);
|
||||
const diffInMonths: number = Math.floor(diffInDays / 30); // Approximate
|
||||
const diffInYears: number = Math.floor(diffInDays / 365); // Approximate
|
||||
|
||||
if (diffInDays === 0) return "Today";
|
||||
if (diffInDays === 1) return "Yesterday";
|
||||
if (diffInDays < 7) return `${diffInDays} days ago`;
|
||||
if (diffInDays < 30) return `${Math.floor(diffInDays / 7)} week${diffInDays >= 14 ? 's' : ''} ago`;
|
||||
if (diffInMonths < 12) return `${diffInMonths} month${diffInMonths > 1 ? 's' : ''} ago`;
|
||||
return `${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
|
||||
export async function checkImage(repo: GitRepo): Promise<boolean> {
|
||||
try {
|
||||
const URL = repo.html_url + IMAGE_URL_SUFFIX;
|
||||
console.log("Checking image:", URL);
|
||||
const response = await fetch(URL);
|
||||
if (response.ok) {
|
||||
console.log("Image found!");
|
||||
return true;
|
||||
} else {
|
||||
console.log("Image not found!");
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
import type { GitRepo } from "../types";
|
||||
|
||||
const API_BASE_URL = "https://git.luke-else.co.uk/api/v1";
|
||||
export const IMAGE_URL_SUFFIX = "/raw/branch/main/assets/images/main.png";
|
||||
|
||||
|
||||
export async function fetchRepos(): Promise<GitRepo[]> {
|
||||
try {
|
||||
console.log("Fetching repos...");
|
||||
const response = await fetch(`${API_BASE_URL}/repos/search?sort=updated&order=desc&limit=12`, {
|
||||
headers: {
|
||||
// "Authorization": `token ${ACCESS_TOKEN}`,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data: { data: GitRepo[] } = await response.json();
|
||||
return data.data; // Extract the list of repositories
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch repos:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export function timeSince(inputDate: Date | string): string {
|
||||
const date = new Date(inputDate); // Ensure it's a Date object
|
||||
if (isNaN(date.getTime())) {
|
||||
throw new Error("Invalid date provided");
|
||||
}
|
||||
|
||||
const now: Date = new Date();
|
||||
const diffInMs: number = now.getTime() - date.getTime();
|
||||
const diffInSeconds: number = Math.floor(diffInMs / 1000);
|
||||
const diffInMinutes: number = Math.floor(diffInSeconds / 60);
|
||||
const diffInHours: number = Math.floor(diffInMinutes / 60);
|
||||
const diffInDays: number = Math.floor(diffInHours / 24);
|
||||
const diffInMonths: number = Math.floor(diffInDays / 30); // Approximate
|
||||
const diffInYears: number = Math.floor(diffInDays / 365); // Approximate
|
||||
|
||||
if (diffInDays === 0) return "Today";
|
||||
if (diffInDays === 1) return "Yesterday";
|
||||
if (diffInDays < 7) return `${diffInDays} days ago`;
|
||||
if (diffInDays < 30) return `${Math.floor(diffInDays / 7)} week${diffInDays >= 14 ? 's' : ''} ago`;
|
||||
if (diffInMonths < 12) return `${diffInMonths} month${diffInMonths > 1 ? 's' : ''} ago`;
|
||||
return `${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
|
||||
export async function checkImage(repo: GitRepo): Promise<boolean> {
|
||||
try {
|
||||
const URL = repo.html_url + IMAGE_URL_SUFFIX;
|
||||
console.log("Checking image:", URL);
|
||||
const response = await fetch(URL);
|
||||
if (response.ok) {
|
||||
console.log("Image found!");
|
||||
return true;
|
||||
} else {
|
||||
console.log("Image not found!");
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
// Allows additional styling to be applied to the Card component's outer wrapping
|
||||
export let containerStyle: string = "";
|
||||
</script>
|
||||
|
||||
<div class={containerStyle}>
|
||||
<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
|
||||
<div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
|
||||
<slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
|
||||
<slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
|
||||
</div>
|
||||
<hr class="border-1" />
|
||||
<div class="flex-1 flex flex-col justify-center mt-4 mb-8">
|
||||
<slot name="content"/>
|
||||
</div>
|
||||
|
||||
<hr class="border-1" />
|
||||
<div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
|
||||
<slot name="footerLeft"/>
|
||||
<slot name="footerRight"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,33 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let open = false;
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
|
||||
on:click={() => open = !open}
|
||||
aria-expanded={open}
|
||||
>
|
||||
<span><slot name="label"/></span>
|
||||
<svg
|
||||
class="w-5 h-5 ml-2 transition-transform duration-200"
|
||||
style="transform: rotate({open ? 90 : 0}deg)"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="overflow-hidden transition-all duration-300"
|
||||
style="max-height: {open ? '1000px' : '0'}"
|
||||
aria-hidden={!open}
|
||||
>
|
||||
<div class="pt-2">
|
||||
<slot name="content"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +0,0 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<!-- GridGallery.svelte -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
|
||||
<slot />
|
||||
</div>
|
||||
@@ -1,73 +0,0 @@
|
||||
<style>
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: calc(50% - 32px);
|
||||
left: calc(50% - 32px);
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.inner.one {
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
animation: rotate-one 1s linear infinite;
|
||||
border-bottom: 3px solid gray;
|
||||
}
|
||||
|
||||
.inner.two {
|
||||
right: 0%;
|
||||
top: 0%;
|
||||
animation: rotate-two 1s linear infinite;
|
||||
border-right: 3px solid gray;
|
||||
}
|
||||
|
||||
.inner.three {
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
animation: rotate-three 1s linear infinite;
|
||||
border-top: 3px solid gray;
|
||||
}
|
||||
|
||||
@keyframes rotate-one {
|
||||
0% {
|
||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-two {
|
||||
0% {
|
||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-three {
|
||||
0% {
|
||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="loader">
|
||||
<div class="inner one"></div>
|
||||
<div class="inner two"></div>
|
||||
<div class="inner three"></div>
|
||||
</div>
|
||||
@@ -1,26 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let label: string = "";
|
||||
</script>
|
||||
|
||||
<div id={label} class="relative flex flex-row w-full min-h-[300px] mt-5 mb-25">
|
||||
<!-- Sticky/Sliding Label -->
|
||||
<div class="hidden md:flex flex-col items-center mr-6">
|
||||
<div class="sticky top-24 left-0 z-10">
|
||||
<span class="text-2xl font-bold text-blue-400 tracking-widest"
|
||||
style="writing-mode: vertical-rl; text-orientation: mixed;">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 flex flex-col">
|
||||
<!-- Label for mobile -->
|
||||
<div class="md:hidden mb-2">
|
||||
<span class="text-2xl font-bold text-blue-400">{label}</span>
|
||||
</div>
|
||||
<hr class="border-blue-400 mb-6" />
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,17 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let value: number = 0; // 0 to 100
|
||||
export let skillColour: string = 'bg-orange-400'; // Default color
|
||||
</script>
|
||||
|
||||
<div class="w-full mt-3">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="text-sm font-medium">Competency Level</span>
|
||||
<span class="text-sm font-medium">{value}%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-800 rounded-full h-5">
|
||||
<div
|
||||
class="{skillColour} h-5 rounded-full transition-all duration-500"
|
||||
style="width: {value}%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Collapsible from "./Collapsible.svelte";
|
||||
|
||||
export let timelineData: Array<{
|
||||
title: string;
|
||||
description: string;
|
||||
duration: string;
|
||||
}>;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="max-w-4xl w-full">
|
||||
{#each timelineData as entry, i}
|
||||
<div class="relative border-l border-gray-700 pl-8 pb-12">
|
||||
{#if i == 0}
|
||||
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">♦</div>
|
||||
{:else}
|
||||
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">⋄</div>
|
||||
{/if}
|
||||
<p class="text-sm opacity-70">{entry.duration}</p>
|
||||
|
||||
<Collapsible open={i==0}>
|
||||
<span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
|
||||
<span slot="content">{@html entry.description}</span>
|
||||
</Collapsible>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,5 +1,5 @@
|
||||
export async function getJson(path: string) {
|
||||
let response = await fetch(path);
|
||||
let users = await response.json();
|
||||
return users;
|
||||
export async function getJson(path: string) {
|
||||
let response = await fetch(path);
|
||||
let users = await response.json();
|
||||
return users;
|
||||
}
|
||||
@@ -1,9 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
import GridGallery from './components/GridGallery.svelte';
|
||||
import Loading from './components/Loading.svelte';
|
||||
import Section from './components/Section.svelte';
|
||||
import SkillProgress from './components/SkillProgress.svelte';
|
||||
import Timeline from './components/Timeline.svelte';
|
||||
|
||||
export { Card, GridGallery, Loading, Section, SkillProgress, Timeline };
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
@@ -1,12 +1,12 @@
|
||||
import { writable } from "svelte/store";
|
||||
import type { GitRepo } from "./types";
|
||||
import { fetchRepos } from "./api/git";
|
||||
|
||||
////////////////////////////////////////
|
||||
// Git Repo Stores
|
||||
////////////////////////////////////////
|
||||
export const repos = writable<GitRepo[]>([]);
|
||||
|
||||
export async function loadRepos() {
|
||||
repos.set(await fetchRepos());
|
||||
import { writable } from "svelte/store";
|
||||
import type { GitRepo } from "./types";
|
||||
import { fetchRepos } from "./api/git";
|
||||
|
||||
////////////////////////////////////////
|
||||
// Git Repo Stores
|
||||
////////////////////////////////////////
|
||||
export const repos = writable<GitRepo[]>([]);
|
||||
|
||||
export async function loadRepos() {
|
||||
repos.set(await fetchRepos());
|
||||
}
|
||||
@@ -1,22 +1,22 @@
|
||||
export type TimelinePosition = 'right' | 'left' | 'alternate';
|
||||
|
||||
export type ParentPosition = 'right' | 'left';
|
||||
|
||||
export type TimelineConfig = {
|
||||
rootPosition: TimelinePosition;
|
||||
};
|
||||
|
||||
export interface GitRepo {
|
||||
name: string;
|
||||
description: string;
|
||||
language: string;
|
||||
size: number;
|
||||
updated_at: Date;
|
||||
html_url: string;
|
||||
private: boolean;
|
||||
fork: boolean;
|
||||
owner: {
|
||||
login: string;
|
||||
avatar_url: string;
|
||||
};
|
||||
}
|
||||
export type TimelinePosition = 'right' | 'left' | 'alternate';
|
||||
|
||||
export type ParentPosition = 'right' | 'left';
|
||||
|
||||
export type TimelineConfig = {
|
||||
rootPosition: TimelinePosition;
|
||||
};
|
||||
|
||||
export interface GitRepo {
|
||||
name: string;
|
||||
description: string;
|
||||
language: string;
|
||||
size: number;
|
||||
updated_at: Date;
|
||||
html_url: string;
|
||||
private: boolean;
|
||||
fork: boolean;
|
||||
owner: {
|
||||
login: string;
|
||||
avatar_url: string;
|
||||
};
|
||||
}
|
||||
|
||||
163
src/main.svelte
163
src/main.svelte
@@ -1,77 +1,86 @@
|
||||
<script lang="ts">
|
||||
import { getJson } from '$lib/data';
|
||||
import { toasts } from 'svelte-toasts';
|
||||
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
import Section from '$lib/components/Section.svelte';
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
import GridGallery from "$lib/components/GridGallery.svelte";
|
||||
import SkillProgress from "$lib/components/SkillProgress.svelte";
|
||||
import Timeline from '$lib/components/Timeline.svelte';
|
||||
import Collapsible from '$lib/components/Collapsible.svelte';
|
||||
</script>
|
||||
|
||||
{#await getJson('/json/me.json')}
|
||||
<Loading />
|
||||
{:then info}
|
||||
<div style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Welcome',
|
||||
duration: 5000,
|
||||
type: 'success',
|
||||
placement: 'bottom-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
|
||||
<!-- Main Card -->
|
||||
<Section label="[About]">
|
||||
<Card>
|
||||
<h2 slot="headerLeft">{info.name}</h2>
|
||||
<h2 slot="headerRight">{info.job_title}</h2>
|
||||
<div slot="content" class="flex flex-row items-center gap-5">
|
||||
<img
|
||||
src={info.profile_photo}
|
||||
alt="Avatar"
|
||||
class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
|
||||
/>
|
||||
<p class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600">{@html info.about}</p>
|
||||
</div>
|
||||
<h3 slot="footerLeft">{@html info.location}</h3>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<!-- SKills -->
|
||||
<Section label="[Skills]">
|
||||
<GridGallery>
|
||||
{#each info.skills as skill}
|
||||
<Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
|
||||
<h2 slot="headerLeft">{skill.name}</h2>
|
||||
<i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
|
||||
<div slot="content">
|
||||
<Collapsible>
|
||||
<span slot="label" class="text-lg">About {skill.name}</span>
|
||||
<span slot="content">{skill.about}</span>
|
||||
</Collapsible>
|
||||
<SkillProgress skillColour={skill.colour} value={skill.competency} />
|
||||
</div>
|
||||
<h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
|
||||
</Card>
|
||||
{/each}
|
||||
</GridGallery>
|
||||
</Section>
|
||||
|
||||
<Section label="[Experience]">
|
||||
<Timeline timelineData={info.timeline} />
|
||||
</Section>
|
||||
{:catch}
|
||||
<div style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Error',
|
||||
description: 'There was an error loading static site data',
|
||||
duration: 0,
|
||||
placement: 'bottom-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
{/await}
|
||||
<script lang="ts">
|
||||
import { getJson } from '$lib/data';
|
||||
import { toasts } from 'svelte-toasts';
|
||||
|
||||
import {
|
||||
Loading,
|
||||
Section,
|
||||
Card,
|
||||
GridGallery,
|
||||
SkillProgress,
|
||||
Timeline,
|
||||
Collapsible
|
||||
} from '@luke-else/component-lib';
|
||||
</script>
|
||||
|
||||
{#await getJson('/json/me.json')}
|
||||
<Loading />
|
||||
{:then info}
|
||||
<div style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Welcome',
|
||||
duration: 5000,
|
||||
type: 'success',
|
||||
placement: 'bottom-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
|
||||
<!-- Main Card -->
|
||||
<Section label="[About]">
|
||||
<Card>
|
||||
<h2 slot="headerLeft">{info.name}</h2>
|
||||
<h2 slot="headerRight">{info.job_title}</h2>
|
||||
<div slot="content" class="flex flex-row items-center gap-5">
|
||||
<img
|
||||
src={info.profile_photo}
|
||||
alt="Avatar"
|
||||
class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
|
||||
/>
|
||||
<p
|
||||
class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600"
|
||||
>
|
||||
{@html info.about}
|
||||
</p>
|
||||
</div>
|
||||
<h3 slot="footerLeft">{@html info.location}</h3>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<!-- Skills -->
|
||||
<Section label="[Skills]">
|
||||
<GridGallery>
|
||||
{#each info.skills as skill}
|
||||
<Card
|
||||
containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300"
|
||||
>
|
||||
<h2 slot="headerLeft">{skill.name}</h2>
|
||||
<i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
|
||||
<div slot="content">
|
||||
<Collapsible>
|
||||
<span slot="label" class="text-lg">About {skill.name}</span>
|
||||
<span slot="content">{skill.about}</span>
|
||||
</Collapsible>
|
||||
<SkillProgress skillColour={skill.colour} value={skill.competency} />
|
||||
</div>
|
||||
<h3 slot="footerLeft"><a href={skill.link} target="_blank">{skill.link}</a></h3>
|
||||
</Card>
|
||||
{/each}
|
||||
</GridGallery>
|
||||
</Section>
|
||||
|
||||
<!-- Experience -->
|
||||
<Section label="[Experience]">
|
||||
<Timeline timelineData={info.timeline} />
|
||||
</Section>
|
||||
{:catch}
|
||||
<div style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Error',
|
||||
description: 'There was an error loading static site data',
|
||||
duration: 0,
|
||||
placement: 'bottom-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
{/await}
|
||||
|
||||
@@ -1,23 +1,28 @@
|
||||
<script lang="ts">
|
||||
import { ToastContainer, FlatToast } from 'svelte-toasts';
|
||||
import '../app.css';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="min-h-screen px-8 py-4 bg-white text-slate-600 dark:bg-slate-900/90 dark:text-slate-200/60 md:text-2xl sm:text-md font-mono flex flex-col gap-5 transition duration-1000 ease-in-out"
|
||||
>
|
||||
<nav
|
||||
class="w-full px-8 py-4 flex gap-10 text-xl justify-center items-center text-green-600 font-semibold"
|
||||
>
|
||||
<a href="/" class="hover:underline">//Profile</a>
|
||||
<a href="/repos" class="hover:underline">//Repos</a>
|
||||
<a href="/contact" class="hover:underline">//Contact</a>
|
||||
</nav>
|
||||
|
||||
<div class="container mx-auto justify-center items-center flex flex-col">
|
||||
<slot />
|
||||
<ToastContainer let:data>
|
||||
<FlatToast {data} />
|
||||
</ToastContainer>
|
||||
</div>
|
||||
</div>
|
||||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import { ToastContainer, FlatToast } from 'svelte-toasts';
|
||||
import { PageIcon } from '@luke-else/component-lib';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="min-h-screen px-8 py-4 bg-white text-slate-600 dark:bg-slate-900/90 dark:text-slate-200/60 md:text-2xl sm:text-md font-mono flex flex-col gap-5 transition duration-1000 ease-in-out"
|
||||
>
|
||||
<nav
|
||||
class="w-full px-8 py-4 flex gap-10 text-xl justify-center items-center text-green-600 font-semibold"
|
||||
>
|
||||
<a href="/" class="hover:underline">//Profile</a>
|
||||
<a href="/repos" class="hover:underline">//Repos</a>
|
||||
<a href="/contact" class="hover:underline">//Contact</a>
|
||||
</nav>
|
||||
|
||||
<a href="https://git.luke-else.co.uk" target="_blank">
|
||||
<PageIcon iconClass="devicon-git-plain" />
|
||||
</a>
|
||||
|
||||
<div class="container mx-auto justify-center items-center flex flex-col">
|
||||
<slot />
|
||||
<ToastContainer let:data>
|
||||
<FlatToast {data} />
|
||||
</ToastContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import Main from '../main.svelte';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Main></Main>
|
||||
<script>
|
||||
import Main from '../main.svelte';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Main></Main>
|
||||
</div>
|
||||
@@ -1,98 +1,103 @@
|
||||
<script lang="ts">
|
||||
import { toasts } from 'svelte-toasts';
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
|
||||
import { page } from '$app/state';
|
||||
const sent = page.url.searchParams.get('sent');
|
||||
|
||||
if (sent == 'true') {
|
||||
toasts.add({
|
||||
title: 'Message sent!',
|
||||
description: 'Thank you for contacting me.',
|
||||
type: 'success',
|
||||
duration: 4000,
|
||||
placement: 'bottom-center'
|
||||
});
|
||||
}
|
||||
|
||||
if (sent == 'false') {
|
||||
toasts.add({
|
||||
title: 'Message not sent!',
|
||||
description: 'Please try again later.',
|
||||
type: 'error',
|
||||
duration: 4000,
|
||||
placement: 'bottom-center'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<Card>
|
||||
<div slot="headerLeft">
|
||||
Contact Me
|
||||
</div>
|
||||
<!-- Contact Form -->
|
||||
<form slot="content" class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
|
||||
<div class="hidden">
|
||||
<input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
|
||||
<input type="hidden" name="replyTo" value="@">
|
||||
<input type="text" name="honeypot" style="display: none;">
|
||||
<input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="you@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="subject">Subject</label>
|
||||
<input
|
||||
id="subject"
|
||||
name="subject"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="Subject"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1" for="message">Message</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600 transition min-h-[80px] placeholder-gray-400"
|
||||
required
|
||||
placeholder="Your message"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- reCAPTCHA integration -->
|
||||
<div class="">
|
||||
<div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
|
||||
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="self-end bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1.5 px-8 rounded-lg transition"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</Card>
|
||||
<script lang="ts">
|
||||
import { toasts } from 'svelte-toasts';
|
||||
import { Card, Section } from '@luke-else/component-lib';
|
||||
|
||||
import { page } from '$app/state';
|
||||
const sent = page.url.searchParams.get('sent');
|
||||
|
||||
if (sent == 'true') {
|
||||
toasts.add({
|
||||
title: 'Message sent!',
|
||||
description: 'Thank you for contacting me.',
|
||||
type: 'success',
|
||||
duration: 4000,
|
||||
placement: 'bottom-center'
|
||||
});
|
||||
}
|
||||
|
||||
if (sent == 'false') {
|
||||
toasts.add({
|
||||
title: 'Message not sent!',
|
||||
description: 'Please try again later.',
|
||||
type: 'error',
|
||||
duration: 4000,
|
||||
placement: 'bottom-center'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<Section label="[Contact]">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<Card>
|
||||
<div slot="headerLeft">
|
||||
Contact Me
|
||||
</div>
|
||||
<!-- Contact Form -->
|
||||
<form slot="content" class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
|
||||
<div class="hidden">
|
||||
<input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
|
||||
<input type="hidden" name="replyTo" value="@">
|
||||
<input type="text" name="honeypot" style="display: none;">
|
||||
<input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
|
||||
</div>
|
||||
<div class="flex flex-row md:flex-row gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="you@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-xs font-medium mb-1" for="subject">Subject</label>
|
||||
<input
|
||||
id="subject"
|
||||
name="subject"
|
||||
type="text"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
|
||||
required
|
||||
placeholder="Subject"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1" for="message">Message</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
class="w-full rounded-lg border border-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600 transition min-h-[80px] placeholder-gray-400"
|
||||
required
|
||||
placeholder="Your message"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- reCAPTCHA integration -->
|
||||
<div class="">
|
||||
<div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
|
||||
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="self-end bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1.5 px-8 rounded-lg transition"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
@@ -1,71 +1,73 @@
|
||||
<script lang="ts">
|
||||
import { loadRepos, repos } from '$lib/stores';
|
||||
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
|
||||
import { toasts } from 'svelte-toasts';
|
||||
|
||||
import GridGallery from '$lib/components/GridGallery.svelte';
|
||||
import Card from '$lib/components/Cards/Card.svelte';
|
||||
import Loading from '$lib/components/Loading.svelte';
|
||||
|
||||
let repoImages: Record<string, string | null> = {};
|
||||
|
||||
// When repos load, check for images
|
||||
$: if ($repos.length) {
|
||||
(async () => {
|
||||
for (const repo of $repos) {
|
||||
if (repoImages[repo.name] === undefined) {
|
||||
const url = repo.html_url + IMAGE_URL_SUFFIX;
|
||||
repoImages[repo.name] = (await checkImage(repo)) ? url : null;
|
||||
}
|
||||
}
|
||||
})();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await loadRepos()}
|
||||
<Loading />
|
||||
{:then _}
|
||||
{#if $repos.length == 0}
|
||||
{console.log('No Repos')}
|
||||
<div style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Error',
|
||||
description: 'Failed to load repositories',
|
||||
duration: 5000,
|
||||
type: 'error',
|
||||
placement: 'bottom-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Repositories loaded successfully -->
|
||||
<GridGallery>
|
||||
{#each $repos as repo}
|
||||
<!-- <Loading /> -->
|
||||
<Card
|
||||
containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
|
||||
>
|
||||
<h2 slot="headerLeft">{repo.name}</h2>
|
||||
<h2 slot="headerRight" class="text-sm text-gray-500">
|
||||
{repo.language}
|
||||
</h2>
|
||||
<div slot="content">
|
||||
<div class="relative z-0">
|
||||
{repo.description}
|
||||
</div>
|
||||
{#if repoImages[repo.name]}
|
||||
<!-- svelte-ignore a11y_img_redundant_alt -->
|
||||
<img
|
||||
src={repoImages[repo.name]}
|
||||
alt="repo image"
|
||||
class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<h3 slot="footerLeft">
|
||||
Last Updated: {timeSince(repo.updated_at)}
|
||||
</h3>
|
||||
</Card>
|
||||
{/each}
|
||||
</GridGallery>
|
||||
{/await}
|
||||
<script lang="ts">
|
||||
import { loadRepos, repos } from '$lib/stores';
|
||||
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
|
||||
import { toasts } from 'svelte-toasts';
|
||||
|
||||
import { GridGallery, Card, Loading, Section, Collapsible } from '@luke-else/component-lib';
|
||||
|
||||
let repoImages: Record<string, string | null> = {};
|
||||
|
||||
// When repos load, check for images
|
||||
$: if ($repos.length) {
|
||||
(async () => {
|
||||
for (const repo of $repos) {
|
||||
if (repoImages[repo.name] === undefined) {
|
||||
const url = repo.html_url + IMAGE_URL_SUFFIX;
|
||||
repoImages[repo.name] = (await checkImage(repo)) ? url : null;
|
||||
}
|
||||
}
|
||||
})();
|
||||
}
|
||||
</script>
|
||||
<Section label="[Repositories]">
|
||||
{#await loadRepos()}
|
||||
<Loading />
|
||||
{:then _}
|
||||
{#if $repos.length == 0}
|
||||
{console.log('No Repos')}
|
||||
<div style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Error',
|
||||
description: 'Failed to load repositories',
|
||||
duration: 5000,
|
||||
type: 'error',
|
||||
placement: 'bottom-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
<p>Sorry... we can't show you anything here</p>
|
||||
{/if}
|
||||
<!-- Repositories loaded successfully -->
|
||||
<GridGallery>
|
||||
{#each $repos as repo}
|
||||
<!-- <Loading /> -->
|
||||
<Card
|
||||
containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300"
|
||||
>
|
||||
<h2 slot="headerLeft">{repo.name}</h2>
|
||||
<h2 slot="headerRight" class="text-sm text-gray-500">
|
||||
{repo.language}
|
||||
</h2>
|
||||
<div class="flex flex-col gap-5" slot="content">
|
||||
{repo.description}
|
||||
{#if repoImages[repo.name]}
|
||||
<Collapsible>
|
||||
<span slot="label" class="text-lg">See More</span>
|
||||
<!-- svelte-ignore a11y_img_redundant_alt -->
|
||||
<img
|
||||
slot="content"
|
||||
src={repoImages[repo.name]}
|
||||
alt="repo image"
|
||||
class=""
|
||||
/>
|
||||
</Collapsible>
|
||||
{/if}
|
||||
</div>
|
||||
<h3 slot="footerLeft">
|
||||
Last Updated: {timeSince(repo.updated_at)}
|
||||
</h3>
|
||||
</Card>
|
||||
{/each}
|
||||
</GridGallery>
|
||||
{/await}
|
||||
</Section>
|
||||
|
||||
@@ -1,132 +1,132 @@
|
||||
{
|
||||
"name": "Luke Else",
|
||||
"job_title": "Software Engineer",
|
||||
"location": "Crawley, Sussex <br /> UK",
|
||||
"profile_photo": "/profile.jpg",
|
||||
"about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at <a href='https://www.thalesgroup.com/en'>Thales UK</a> and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>.",
|
||||
"skills": [
|
||||
{
|
||||
"name": "Rust",
|
||||
"logo": "devicon-rust-plain",
|
||||
"colour": "bg-orange-400",
|
||||
"link": "https://rust-lang.org",
|
||||
"about": "Rust combines safety, efficiency, and clean code, making it a powerful choice for reliable software development.",
|
||||
"competency": 70
|
||||
},
|
||||
{
|
||||
"name": "C++",
|
||||
"logo": "devicon-cplusplus-plain",
|
||||
"colour": "bg-blue-400",
|
||||
"link": "https://cplusplus.com/",
|
||||
"about": "C++ offers high-level abstractions with low-level control, making it essential for performance-critical applications.",
|
||||
"competency": 80
|
||||
},
|
||||
{
|
||||
"name" : "Python",
|
||||
"logo": "devicon-python-plain",
|
||||
"colour": "bg-yellow-400",
|
||||
"link": "https://python.org",
|
||||
"about": "Python is a versatile language known for its simplicity and readability, making it ideal for rapid development and data analysis.",
|
||||
"competency": 70
|
||||
},
|
||||
{
|
||||
"name": "Git",
|
||||
"logo": "devicon-git-plain",
|
||||
"colour": "bg-red-400",
|
||||
"link": "https://git-scm.com",
|
||||
"about": "Git is an essential tool for version control, enabling efficient collaboration and streamlined code management.",
|
||||
"competency": 80
|
||||
},
|
||||
{
|
||||
"name": "Docker",
|
||||
"logo": "devicon-docker-plain",
|
||||
"colour": "bg-blue-500",
|
||||
"link": "https://docker.com",
|
||||
"about": "Docker simplifies deployment by packaging applications in lightweight containers, ensuring consistency across environments.",
|
||||
"competency": 100
|
||||
},
|
||||
{
|
||||
"name": "Kubernetes",
|
||||
"logo": "devicon-kubernetes-plain",
|
||||
"colour": "bg-blue-600",
|
||||
"link": "https://kubernetes.io",
|
||||
"about": "Kubernetes automates the deployment, scaling, and management of containerized applications, enhancing operational efficiency.",
|
||||
"competency": 40
|
||||
},
|
||||
{
|
||||
"name": "PostgreSQL",
|
||||
"logo": "devicon-postgresql-plain",
|
||||
"colour": "bg-blue-700",
|
||||
"link": "https://postgresql.org",
|
||||
"about": "PostgreSQL is a powerful, open-source relational database known for its robustness and advanced features.",
|
||||
"competency": 70
|
||||
},
|
||||
{
|
||||
"name": "MongoDB",
|
||||
"logo": "devicon-mongodb-plain",
|
||||
"colour": "bg-green-500",
|
||||
"link": "https://mongodb.com",
|
||||
"about": "MongoDB is a NoSQL database that provides flexibility and scalability for modern applications with unstructured data.",
|
||||
"competency": 70
|
||||
},
|
||||
{
|
||||
"name": "Redis",
|
||||
"logo": "devicon-redis-plain",
|
||||
"colour": "bg-red-600",
|
||||
"link": "https://redis.io",
|
||||
"about": "Redis is an in-memory data structure store, used as a database, cache, and message broker for high-performance applications.",
|
||||
"competency": 30
|
||||
},
|
||||
{
|
||||
"name": "JavaScript",
|
||||
"logo": "devicon-javascript-plain",
|
||||
"colour": "bg-yellow-500",
|
||||
"link": "https://javascript.com",
|
||||
"about": "JavaScript is a versatile language that powers dynamic web applications and enhances user interactivity.",
|
||||
"competency": 60
|
||||
},
|
||||
{
|
||||
"name": "Tailwind CSS",
|
||||
"logo": "devicon-tailwindcss-plain",
|
||||
"colour": "bg-blue-800",
|
||||
"link": "https://tailwindcss.com/",
|
||||
"about": "Tailwind CSS is a utility-first CSS framework that enables rapid UI development with a focus on customization and responsiveness.",
|
||||
"competency": 60
|
||||
},
|
||||
{
|
||||
"name": "Svelte",
|
||||
"logo": "devicon-svelte-plain",
|
||||
"colour": "bg-orange-400",
|
||||
"link": "https://svelte.dev",
|
||||
"about": "Svelte compiles to optimized JavaScript, offering a fast, efficient, and maintainable front-end development experience.",
|
||||
"competency": 55
|
||||
}
|
||||
],
|
||||
"timeline" : [
|
||||
{
|
||||
"duration" : "April 2025 - Present",
|
||||
"title" : "Thales UK (DDCC) - Software Engineer",
|
||||
"description" : "As a 3rd year apprentice at Thales UK’s Digital Data Competency Centre, I have taken on responsibility for developing microservices that encapsulate Machine Learning models provided by R&D teams, helping to advance product readiness. These services are primarily written in Python and deployed to Kubernetes clusters for use across the business. Our team also designs and maintains CI/CD pipelines to automate the deployment of both these services and their supporting infrastructure."
|
||||
},
|
||||
{
|
||||
"duration" : "September 2022 - April 2025",
|
||||
"title" : "Thales UK (ISR) - Software Engineer",
|
||||
"description" : "As a software engineering apprentice at Thales UK, Intelligence Surveillance and Reconnaissance, I worked within an agile team of six engineers, contributing to the ongoing development of a C++ system for the MOD. My role involved collaborating closely with colleagues, following Scrum methodologies, and leveraging internal frameworks to enhance and maintain the existing platform."
|
||||
},
|
||||
{
|
||||
"duration" : "September 2022 - Present",
|
||||
"title" : "University of Warwick - Digital and Technology Solutions",
|
||||
"description" : "The apprenticeship includes allocated time for studying a Digital and Thechnology Solutions degree with the University of Warwick, including modules relevant to business management, devlopment processes and data integrity etc..."
|
||||
},
|
||||
{
|
||||
"duration" : "September 2020 - July 2022",
|
||||
"title" : "The Norton Knatchbull School (A-Levels)",
|
||||
"description" : "Computer Science (<b>A*</b>) <br /> Mathematics (<b>A</b>) <br /> Physics (<b>A</b>)"
|
||||
},
|
||||
{
|
||||
"duration" : "September 2015 - July 2020",
|
||||
"title" : "The Norton Knatchbull School (GCSEs)",
|
||||
"description" : "Computer Science (<b>9</b>) <br /> Physics (<b>9</b>) <br /> Chemistry (<b>9</b>) <br /> Biology (<b>9</b>) <br /> Geography (<b>9</b>) <br /> FSMQ (C) <br /> Maths (8) <br /> Spanish (7) <br /> English (Literature & Language) (7, 7) <br />"
|
||||
}
|
||||
]
|
||||
{
|
||||
"name": "Luke Else",
|
||||
"job_title": "Software Engineer",
|
||||
"location": "Crawley, Sussex <br /> UK",
|
||||
"profile_photo": "/profile.jpg",
|
||||
"about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at <a href='https://www.thalesgroup.com/en'>Thales UK</a> and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>.",
|
||||
"skills": [
|
||||
{
|
||||
"name": "Rust",
|
||||
"logo": "devicon-rust-plain",
|
||||
"colour": "bg-orange-400",
|
||||
"link": "https://rust-lang.org",
|
||||
"about": "Rust combines safety, efficiency, and clean code, making it a powerful choice for reliable software development.",
|
||||
"competency": 70
|
||||
},
|
||||
{
|
||||
"name": "C++",
|
||||
"logo": "devicon-cplusplus-plain",
|
||||
"colour": "bg-blue-400",
|
||||
"link": "https://cplusplus.com/",
|
||||
"about": "C++ offers high-level abstractions with low-level control, making it essential for performance-critical applications.",
|
||||
"competency": 80
|
||||
},
|
||||
{
|
||||
"name" : "Python",
|
||||
"logo": "devicon-python-plain",
|
||||
"colour": "bg-yellow-400",
|
||||
"link": "https://python.org",
|
||||
"about": "Python is a versatile language known for its simplicity and readability, making it ideal for rapid development and data analysis.",
|
||||
"competency": 70
|
||||
},
|
||||
{
|
||||
"name": "Git",
|
||||
"logo": "devicon-git-plain",
|
||||
"colour": "bg-red-400",
|
||||
"link": "https://git-scm.com",
|
||||
"about": "Git is an essential tool for version control, enabling efficient collaboration and streamlined code management.",
|
||||
"competency": 80
|
||||
},
|
||||
{
|
||||
"name": "Docker",
|
||||
"logo": "devicon-docker-plain",
|
||||
"colour": "bg-blue-500",
|
||||
"link": "https://docker.com",
|
||||
"about": "Docker simplifies deployment by packaging applications in lightweight containers, ensuring consistency across environments.",
|
||||
"competency": 100
|
||||
},
|
||||
{
|
||||
"name": "Kubernetes",
|
||||
"logo": "devicon-kubernetes-plain",
|
||||
"colour": "bg-blue-600",
|
||||
"link": "https://kubernetes.io",
|
||||
"about": "Kubernetes automates the deployment, scaling, and management of containerized applications, enhancing operational efficiency.",
|
||||
"competency": 40
|
||||
},
|
||||
{
|
||||
"name": "PostgreSQL",
|
||||
"logo": "devicon-postgresql-plain",
|
||||
"colour": "bg-blue-700",
|
||||
"link": "https://postgresql.org",
|
||||
"about": "PostgreSQL is a powerful, open-source relational database known for its robustness and advanced features.",
|
||||
"competency": 70
|
||||
},
|
||||
{
|
||||
"name": "MongoDB",
|
||||
"logo": "devicon-mongodb-plain",
|
||||
"colour": "bg-green-500",
|
||||
"link": "https://mongodb.com",
|
||||
"about": "MongoDB is a NoSQL database that provides flexibility and scalability for modern applications with unstructured data.",
|
||||
"competency": 70
|
||||
},
|
||||
{
|
||||
"name": "Redis",
|
||||
"logo": "devicon-redis-plain",
|
||||
"colour": "bg-red-600",
|
||||
"link": "https://redis.io",
|
||||
"about": "Redis is an in-memory data structure store, used as a database, cache, and message broker for high-performance applications.",
|
||||
"competency": 30
|
||||
},
|
||||
{
|
||||
"name": "JavaScript",
|
||||
"logo": "devicon-javascript-plain",
|
||||
"colour": "bg-yellow-500",
|
||||
"link": "https://javascript.com",
|
||||
"about": "JavaScript is a versatile language that powers dynamic web applications and enhances user interactivity.",
|
||||
"competency": 60
|
||||
},
|
||||
{
|
||||
"name": "Tailwind CSS",
|
||||
"logo": "devicon-tailwindcss-plain",
|
||||
"colour": "bg-blue-800",
|
||||
"link": "https://tailwindcss.com/",
|
||||
"about": "Tailwind CSS is a utility-first CSS framework that enables rapid UI development with a focus on customization and responsiveness.",
|
||||
"competency": 60
|
||||
},
|
||||
{
|
||||
"name": "Svelte",
|
||||
"logo": "devicon-svelte-plain",
|
||||
"colour": "bg-orange-400",
|
||||
"link": "https://svelte.dev",
|
||||
"about": "Svelte compiles to optimized JavaScript, offering a fast, efficient, and maintainable front-end development experience.",
|
||||
"competency": 55
|
||||
}
|
||||
],
|
||||
"timeline" : [
|
||||
{
|
||||
"duration" : "April 2025 - Present",
|
||||
"title" : "Thales UK (DDCC) - Software Engineer",
|
||||
"description" : "As a 3rd year apprentice at Thales UK’s Digital Data Competency Centre, I have taken on responsibility for developing microservices that encapsulate Machine Learning models provided by R&D teams, helping to advance product readiness. These services are primarily written in Python and deployed to Kubernetes clusters for use across the business. Our team also designs and maintains CI/CD pipelines to automate the deployment of both these services and their supporting infrastructure."
|
||||
},
|
||||
{
|
||||
"duration" : "September 2022 - April 2025",
|
||||
"title" : "Thales UK (ISR) - Software Engineer",
|
||||
"description" : "As a software engineering apprentice at Thales UK, Intelligence Surveillance and Reconnaissance, I worked within an agile team of six engineers, contributing to the ongoing development of a C++ system for the MOD. My role involved collaborating closely with colleagues, following Scrum methodologies, and leveraging internal frameworks to enhance and maintain the existing platform."
|
||||
},
|
||||
{
|
||||
"duration" : "September 2022 - Present",
|
||||
"title" : "University of Warwick - Digital and Technology Solutions",
|
||||
"description" : "The apprenticeship includes allocated time for studying a Digital and Thechnology Solutions degree with the University of Warwick, including modules relevant to business management, devlopment processes and data integrity etc..."
|
||||
},
|
||||
{
|
||||
"duration" : "September 2020 - July 2022",
|
||||
"title" : "The Norton Knatchbull School (A-Levels)",
|
||||
"description" : "Computer Science (<b>A*</b>) <br /> Mathematics (<b>A</b>) <br /> Physics (<b>A</b>)"
|
||||
},
|
||||
{
|
||||
"duration" : "September 2015 - July 2020",
|
||||
"title" : "The Norton Knatchbull School (GCSEs)",
|
||||
"description" : "Computer Science (<b>9</b>) <br /> Physics (<b>9</b>) <br /> Chemistry (<b>9</b>) <br /> Biology (<b>9</b>) <br /> Geography (<b>9</b>) <br /> FSMQ (C) <br /> Maths (8) <br /> Spanish (7) <br /> English (Literature & Language) (7, 7) <br />"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
// import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-node';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
const config = {
|
||||
preprocess: vitePreprocess(),
|
||||
kit: { adapter: adapter() }
|
||||
};
|
||||
|
||||
export default config;
|
||||
// import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-node';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
const config = {
|
||||
preprocess: vitePreprocess(),
|
||||
kit: { adapter: adapter() }
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'one-bg': '#282c34',
|
||||
'one-bg-light': '#3a3f4b',
|
||||
'one-fg': '#abb2bf',
|
||||
'one-accent': '#61afef',
|
||||
'one-green': '#98c379',
|
||||
'one-orange': '#d19a66',
|
||||
'one-red': '#e06c75',
|
||||
'one-yellow': '#e5c07b',
|
||||
'one-purple': '#c678dd',
|
||||
'one-cyan': '#56b6c2',
|
||||
'one-comment': '#5c6370',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,18 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
sveltekit(),
|
||||
]
|
||||
});
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
sveltekit(),
|
||||
]
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user