NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'svelte' into svelte-prod

Browse Source
This commit is contained in:
Nick Bland 2025-05-14 22:51:24 +10:00
commit f072b215fe
Signed by: NickBland
GPG Key ID: 31CADD9E5FDD798C
17 changed files with 470 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

28
package.json
View File

@ -3,7 +3,7 @@
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev", "dev": "CF_PAGES=1 vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@ -13,32 +13,32 @@
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.12.0", "@eslint/js": "^9.12.0",
"@sveltejs/adapter-auto": "^3.2.5", "@sveltejs/adapter-auto": "6.0.1",
"@sveltejs/adapter-cloudflare": "^4.7.3", "@sveltejs/adapter-cloudflare": "^7.0.3",
"@sveltejs/kit": "^2.7.1", "@sveltejs/kit": "^2.7.1",
"@sveltejs/vite-plugin-svelte": "^4", "@sveltejs/vite-plugin-svelte": "5.0.3",
"autoprefixer": "^10.4.20", "@tailwindcss/postcss": "^4.1.6",
"daisyui": "^4.12.13", "daisyui": "5.0.35",
"eslint": "^9.12.0", "eslint": "^9.12.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "10.1.5",
"eslint-plugin-svelte": "^2.45.1", "eslint-plugin-svelte": "3.6.0",
"globals": "^15.11.0", "globals": "16.1.0",
"postcss": "^8.4.47", "postcss": "^8.4.47",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.7", "prettier-plugin-svelte": "^3.2.7",
"svelte": "^5", "svelte": "^5",
"svelte-check": "^4.0.5", "svelte-check": "^4.0.5",
"svelte-eslint-parser": "^0.43", "svelte-eslint-parser": "1.1.3",
"svelte-preprocess": "^6.0.3", "svelte-preprocess": "^6.0.3",
"tailwindcss": "^3.4.13", "tailwindcss": "^4.1.6",
"tslib": "^2.7.0", "tslib": "^2.7.0",
"typescript": "^5.6.3", "typescript": "^5.6.3",
"typescript-eslint": "^8.9.0", "typescript-eslint": "^8.9.0",
"vite": "^5.4.9" "vite": "6.3.5"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"caniuse-lite": "", "@tailwindcss/vite": "^4.1.6",
"lucide-svelte": "^0.453.0" "lucide-svelte": "0.510.0"
} }
} }

3
postcss.config.js
View File

@ -1,6 +1,5 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, "@tailwindcss/postcss": {},
autoprefixer: {},
}, },
}; };

29
src/app.css
View File

@ -1,6 +1,29 @@
@tailwind base; @import "tailwindcss";
@tailwind components; @import "tailwindcss";
@tailwind utilities;
@plugin "daisyui" {
themes:
sunset --default,
cmyk;
}
/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
.height-minus-nav { .height-minus-nav {
min-height: calc(100vh - 4.75rem); min-height: calc(100vh - 4.75rem);

5
src/app.html
View File

@ -3,7 +3,10 @@
<head> <head>
<title>nickbland.dev</title> <title>nickbland.dev</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="This is my personal website as a way to navigate through some of the projects I've done or am working on." /> <meta
name="description"
content="This is my personal website as a way to navigate through some of the projects I've done or am working on."
/>
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="180x180" sizes="180x180"

13
src/lib/components/footer.svelte
View File

@ -1,14 +1,15 @@
<footer class="footer items-center py-4 bg-neutral text-neutral-content"> <footer
class="footer sm:footer-horizontal bg-neutral text-neutral-content items-center p-4"
>
<aside class="items-center grid-flow-col mx-2"> <aside class="items-center grid-flow-col mx-2">
<a class="btn text-xl btn-ghost" href="/">nickbland.dev</a> <a class="btn text-xl btn-ghost" href="/">nickbland.dev</a>
<p> <p>
Copyright © 2024 - All right reserved | <a Copyright © {new Date().getFullYear()} - All right reserved |
class="link" <a class="link" href="https://git.nickbland.dev/NickBland/website-2">Source Code</a>
href="https://git.nickbland.dev/NickBland/website-2">Source Code</a | Made with ❤️ using SvelteKit
> | Made with ❤️ using SvelteKit
</p> </p>
</aside> </aside>
<nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end mx-2"> <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
<div class="tooltip" data-tip="GitHub"> <div class="tooltip" data-tip="GitHub">
<a <a
role="button" role="button"

2
src/lib/components/navbar/themeController.svelte
View File

@ -8,7 +8,7 @@
<input <input
type="checkbox" type="checkbox"
class="theme-controller" class="theme-controller"
value="fantasy" value="cmyk"
aria-label="Theme toggle button" aria-label="Theme toggle button"
/> />

4
src/lib/components/portfolio/divider.svelte
View File

@ -6,8 +6,8 @@
> >
<defs> <defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="oooscillate-grad"> <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="oooscillate-grad">
<stop style="stop-color:oklch(var(--p))" stop-opacity="1" offset="0%"></stop> <stop style="stop-color:var(--color-primary)" stop-opacity="1" offset="0%"></stop>
<stop style="stop-color:oklch(var(--a))" stop-opacity="1" offset="100%"></stop> <stop style="stop-color:var(--color-accent)" stop-opacity="1" offset="100%"></stop>
</linearGradient> </linearGradient>
</defs> </defs>
<g stroke-width="4" stroke="url(#oooscillate-grad)" fill="none" stroke-linecap="round"> <g stroke-width="4" stroke="url(#oooscillate-grad)" fill="none" stroke-linecap="round">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

133
src/lib/components/portfolio/skills.svelte
View File

File diff suppressed because one or more lines are too long

2
src/lib/components/portfolio/textContent.svelte
View File

@ -2,7 +2,7 @@
interface Props { interface Props {
middle?: boolean; middle?: boolean;
classes?: string; classes?: string;
children?: import('svelte').Snippet; children?: import("svelte").Snippet;
} }
let { middle = false, classes = "", children }: Props = $props(); let { middle = false, classes = "", children }: Props = $props();

125
src/lib/components/portfolio/timeline.svelte
View File

@ -7,39 +7,93 @@
<li> <li>
<div class="timeline-middle"><Circle class="fill-neutral" /></div> <div class="timeline-middle"><Circle class="fill-neutral" /></div>
<div <div
class="timeline-end timeline-box bg-neutral mb-10 max-w-3xl shadow-lg text-neutral-content" class="timeline-start timeline-box bg-neutral mb-10 max-w-3xl shadow-lg text-neutral-content text-base"
> >
<time class="font-mono" datetime="2020-3">Mar 2020 - Jul 2020</time> <time class="font-mono" datetime="2024-11">Nov 2024 - Present</time>
<div class="text-xl">Villanova College</div> <div class="text-xl">Villanova College</div>
<div class="text-sm">Information Technology Officer</div> <div class="text-sm pb-2">Casual Relief + Placement</div>
<div class="divider my-1"></div> <div class="divider my-1"></div>
Help Desk Role: Casual Relief:
<ul class="list-disc list-inside mt-2"> <ul class="list-disc list-inside mt-2">
<li>Performed repairs and troubleshooting for both students and teachers.</li> <li>Casual relief in the IT department while continuing with uni</li>
</ul>
<div class="divider my-1"></div>
Placement:
<ul class="list-disc list-inside mt-2">
<li>Placement project was beginning the migration process from SCCM to Intune</li>
<li> <li>
Logged warranty claims with suppliers and triaged with parents and students Required careful documentation of current systems and assessing the feasability
during this process. of moving to an Intune/Autopilot environment.
</li> </li>
<li> <li>
Collaborated with IT team on installing and configuring equipment inside a new Worked closely with different members of the department to gain access and
building. assessing what improvements could be made for the new system.
</li>
<li>
Assisted contractors with installation of Salto Systems and improved on existing
configuration throughout school.
</li> </li>
</ul> </ul>
<div class="divider my-1"></div> <div class="divider my-1"></div>
Key Experiences and Takeaways: Key Experiences and Takeaways:
<ul class="list-disc list-inside mt-2"> <ul class="list-disc list-inside mt-2">
<li>Became more comfortable and confident in an end-user facing role.</li>
<li> <li>
Experience in a <i>professional</i> team environment, learning of the strengths and Gained more experience in the Azure ecosystem, exposing me to AzureAD (Entra)
weaknesses that come with it. and Intune.
</li> </li>
<li> <li>
Gained first-hand experience using ticketing software (LanSweeper), and using it Important lessons in taking careful note of what is currently in place, how it
as a powerful tool for organisation. works, and how to migrate functionality to new platforms.
</li>
<li>
Gained further understanding on the importance of documentation, and how it can
be used by future staff members to understand the new environment.
</li>
<li>
Important experience gained in doing in-place migrations without affecting the
end-user experience and functionality of current systems.
</li>
</ul>
</div>
<hr class="bg-neutral-content" />
</li>
<li>
<hr class="bg-neutral-content" />
<div class="timeline-middle"><Circle class="fill-neutral" /></div>
<div class="timeline-end timeline-box bg-neutral mb-10 max-w-3xl shadow-lg text-neutral-content text-base">
<time class="font-mono" datetime="2023-07">Jul 2023</time>
<div class="text-xl">Back to University</div>
</div>
<hr class="bg-neutral-content" />
</li>
<li>
<hr class="bg-neutral-content" />
<div class="timeline-middle"><Circle class="fill-neutral" /></div>
<div
class="timeline-start timeline-box bg-neutral mb-10 max-w-3xl shadow-lg text-neutral-content text-base"
>
<time class="font-mono" datetime="2022-10">Oct 2022 - Feb 2023</time>
<div class="text-xl">St Pauls School</div>
<div class="text-sm pb-2">System Administrator</div>
<div class="divider my-1"></div>
System Administrator Role:
<ul class="list-disc list-inside mt-2">
<li>
Became more experienced in scripting languages, and streamlining legacy scripts
in use.
</li>
<li>
Continually worked on improving my knowledge in Python, Powershell, and
Bashscript for automation tasks, and small projects.
</li>
<li>
Assisted in streamlining SDS (Student Data Sync service) scripts, including
importing new users into TASS and AD.
</li>
</ul>
<div class="divider my-1"></div>
Key Experiences and Takeaways:
<ul class="list-disc list-inside mt-2">
<li>There is always something to be improved upon if you look hard enough.</li>
<li>
Gained significant experience in deploying Autotune and Intune, as well as how
AzureAD works under the hood.
</li> </li>
</ul> </ul>
</div> </div>
@ -49,7 +103,7 @@
<hr class="bg-neutral-content" /> <hr class="bg-neutral-content" />
<div class="timeline-middle"><Circle class="fill-neutral" /></div> <div class="timeline-middle"><Circle class="fill-neutral" /></div>
<div <div
class="timeline-start timeline-box bg-neutral mb-10 max-w-3xl shadow-lg text-neutral-content" class="timeline-end timeline-box bg-neutral mb-10 max-w-3xl shadow-lg text-neutral-content text-base"
> >
<div class="md:text-end"> <div class="md:text-end">
<time class="font-mono" datetime="2020-8">Aug 2020 - Oct 2022</time> <time class="font-mono" datetime="2020-8">Aug 2020 - Oct 2022</time>
@ -91,34 +145,39 @@
<hr class="bg-neutral-content" /> <hr class="bg-neutral-content" />
<div class="timeline-middle"><Circle class="fill-neutral" /></div> <div class="timeline-middle"><Circle class="fill-neutral" /></div>
<div <div
class="timeline-end timeline-box bg-neutral max-w-3xl shadow-lg text-neutral-content" class="timeline-start timeline-box bg-neutral max-w-3xl shadow-lg text-neutral-content text-base"
> >
<time class="font-mono" datetime="2022-10">Oct 2022 - Feb 2023</time> <time class="font-mono" datetime="2020-3">Mar 2020 - Jul 2020</time>
<div class="text-xl">St Pauls School</div> <div class="text-xl">Villanova College</div>
<div class="text-sm pb-2">System Administrator</div> <div class="text-sm">Information Technology Officer</div>
<div class="divider my-1"></div> <div class="divider my-1"></div>
System Administrator Role: Help Desk Role:
<ul class="list-disc list-inside mt-2"> <ul class="list-disc list-inside mt-2">
<li>Performed repairs and troubleshooting for both students and teachers.</li>
<li> <li>
Became more experienced in scripting languages, and streamlining legacy scripts Logged warranty claims with suppliers and triaged with parents and students
in use. during this process.
</li> </li>
<li> <li>
Continually worked on improving my knowledge in Python, Powershell, and Collaborated with IT team on installing and configuring equipment inside a new
Bashscript for automation tasks, and small projects. building.
</li> </li>
<li> <li>
Assisted in streamlining SDS (Student Data Sync service) scripts, including Assisted contractors with installation of Salto Systems and improved on existing
importing new users into TASS and AD. configuration throughout school.
</li> </li>
</ul> </ul>
<div class="divider my-1"></div> <div class="divider my-1"></div>
Key Experiences and Takeaways: Key Experiences and Takeaways:
<ul class="list-disc list-inside mt-2"> <ul class="list-disc list-inside mt-2">
<li>There is always something to be improved upon if you look hard enough.</li> <li>Became more comfortable and confident in an end-user facing role.</li>
<li> <li>
Gained significant experience in deploying Autotune and Intune, as well as how Experience in a <i>professional</i> team environment, learning of the strengths and
AzureAD works under the hood. weaknesses that come with it.
</li>
<li>
Gained first-hand experience using ticketing software (LanSweeper), and using it
as a powerful tool for organisation.
</li> </li>
</ul> </ul>
</div> </div>

269
src/routes/+error.svelte
View File

@ -1,24 +1,273 @@
<!-- Glitch effect from: https://10015.io/tools/css-text-glitch-effect-generator -->
<style>
.glitch {
position: relative;
font-size: 103px;
font-weight: 700;
line-height: 1.2;
color: var(--color-primary-content);
letter-spacing: 6px;
animation: shift 4s ease-in-out infinite alternate;
z-index: 1;
}
.glitch:before {
content: attr(data-glitch);
position: absolute;
top: 0;
left: -2px;
text-shadow: -1px 0 var(--color-info);
width: 100%;
color: var(--color-primary-content);
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-before 3s infinite linear alternate-reverse;
}
.glitch:after {
content: attr(data-glitch);
position: absolute;
top: 0;
left: 2px;
text-shadow: 1px 0 var(--color-error);
width: 100%;
color: var(--color-primary-content);
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-after 2s infinite linear alternate-reverse;
}
@keyframes noise-before {
0% {
clip: rect(61px, 9999px, 52px, 0);
}
5% {
clip: rect(33px, 9999px, 144px, 0);
}
10% {
clip: rect(121px, 9999px, 115px, 0);
}
15% {
clip: rect(144px, 9999px, 162px, 0);
}
20% {
clip: rect(62px, 9999px, 180px, 0);
}
25% {
clip: rect(34px, 9999px, 42px, 0);
}
30% {
clip: rect(147px, 9999px, 179px, 0);
}
35% {
clip: rect(99px, 9999px, 63px, 0);
}
40% {
clip: rect(188px, 9999px, 122px, 0);
}
45% {
clip: rect(154px, 9999px, 14px, 0);
}
50% {
clip: rect(63px, 9999px, 37px, 0);
}
55% {
clip: rect(161px, 9999px, 147px, 0);
}
60% {
clip: rect(109px, 9999px, 175px, 0);
}
65% {
clip: rect(157px, 9999px, 88px, 0);
}
70% {
clip: rect(173px, 9999px, 131px, 0);
}
75% {
clip: rect(62px, 9999px, 70px, 0);
}
80% {
clip: rect(24px, 9999px, 153px, 0);
}
85% {
clip: rect(138px, 9999px, 40px, 0);
}
90% {
clip: rect(79px, 9999px, 136px, 0);
}
95% {
clip: rect(25px, 9999px, 34px, 0);
}
100% {
clip: rect(173px, 9999px, 166px, 0);
}
}
@keyframes noise-after {
0% {
clip: rect(26px, 9999px, 33px, 0);
}
5% {
clip: rect(140px, 9999px, 198px, 0);
}
10% {
clip: rect(184px, 9999px, 89px, 0);
}
15% {
clip: rect(121px, 9999px, 6px, 0);
}
20% {
clip: rect(181px, 9999px, 99px, 0);
}
25% {
clip: rect(154px, 9999px, 133px, 0);
}
30% {
clip: rect(134px, 9999px, 169px, 0);
}
35% {
clip: rect(26px, 9999px, 187px, 0);
}
40% {
clip: rect(147px, 9999px, 137px, 0);
}
45% {
clip: rect(31px, 9999px, 52px, 0);
}
50% {
clip: rect(191px, 9999px, 109px, 0);
}
55% {
clip: rect(74px, 9999px, 54px, 0);
}
60% {
clip: rect(145px, 9999px, 75px, 0);
}
65% {
clip: rect(153px, 9999px, 198px, 0);
}
70% {
clip: rect(99px, 9999px, 136px, 0);
}
75% {
clip: rect(118px, 9999px, 192px, 0);
}
80% {
clip: rect(1px, 9999px, 83px, 0);
}
85% {
clip: rect(145px, 9999px, 98px, 0);
}
90% {
clip: rect(121px, 9999px, 154px, 0);
}
95% {
clip: rect(156px, 9999px, 44px, 0);
}
100% {
clip: rect(67px, 9999px, 122px, 0);
}
}
@keyframes shift {
0%,
40%,
44%,
58%,
61%,
65%,
69%,
73%,
100% {
transform: skewX(0deg);
}
41% {
transform: skewX(10deg);
}
42% {
transform: skewX(-10deg);
}
59% {
transform: skewX(40deg) skewY(10deg);
}
60% {
transform: skewX(-40deg) skewY(-10deg);
}
63% {
transform: skewX(10deg) skewY(-5deg);
}
70% {
transform: skewX(-50deg) skewY(-20deg);
}
71% {
transform: skewX(10deg) skewY(-10deg);
}
}
</style>
<script lang="ts"> <script lang="ts">
import { page } from "$app/stores"; import { page } from "$app/stores";
</script> </script>
<div <div class="hero height-minus-nav bg-linear-to-br from-primary from-10% to-accent to-80%">
class="hero height-minus-nav bg-gradient-to-br from-primary from-10% to-accent to-80%"
>
<div class="hero-overlay bg-opacity-30"></div> <div class="hero-overlay bg-opacity-30"></div>
<div class="hero-content text-left text-accent-content flex-col lg:flex-row"> <div class="hero-content text-left text-accent-content flex-col lg:flex-row">
<div> <div>
<h1 <h1
class="mb-6 text-5xl md:text-7xl lg:text-9xl font-bold text-primary-content text-center" class="text-3xl md:text-5xl lg:text-7xl font-bold text-primary-content text-center glitch"
> data-glitch="{$page.status}:
Whoah! {$page.error?.message}"
</h1>
<h3
class="text-3xl md:text-5xl lg:text-7xl font-bold text-primary-content text-center"
> >
{$page.status}: {$page.status}:
{$page.error?.message} {$page.error?.message}
</h3> </h1>
</div> </div>
</div> </div>
</div> </div>

2
src/routes/+layout.svelte
View File

@ -3,7 +3,7 @@
import Navbar from "$lib/components/navbar/navbar.svelte"; import Navbar from "$lib/components/navbar/navbar.svelte";
import Footer from "$lib/components/footer.svelte"; import Footer from "$lib/components/footer.svelte";
interface Props { interface Props {
children?: import('svelte').Snippet; children?: import("svelte").Snippet;
} }
let { children }: Props = $props(); let { children }: Props = $props();

6
src/routes/+page.svelte
View File

@ -7,9 +7,7 @@
import Timeline from "$lib/components/portfolio/timeline.svelte"; import Timeline from "$lib/components/portfolio/timeline.svelte";
</script> </script>
<div <div class="hero height-minus-nav bg-linear-to-br from-primary from-10% to-accent to-80%">
class="hero height-minus-nav bg-gradient-to-br from-primary from-10% to-accent to-80%"
>
<div class="hero-overlay bg-opacity-30"></div> <div class="hero-overlay bg-opacity-30"></div>
<div class="hero-content text-left text-accent-content flex-col lg:flex-row"> <div class="hero-content text-left text-accent-content flex-col lg:flex-row">
<SkeletonImage <SkeletonImage
@ -111,7 +109,7 @@
virtual machines and containers for various services that I use for myself and my virtual machines and containers for various services that I use for myself and my
friends. For a list of services that I am running, you can visit my <a friends. For a list of services that I am running, you can visit my <a
class="link" class="link"
href="https://status.nickbland.dev/">AWS-hosted status page here</a href="https://status.nickbland.dev/">Digital Ocean-hosted status page here</a
>. >.
</TextContent> </TextContent>
<TextContent> <TextContent>

15
svelte.config.js
View File

@ -1,22 +1,13 @@
import adapter from "@sveltejs/adapter-cloudflare"; import adapter from "@sveltejs/adapter-cloudflare";
import sveltePreprocess from "svelte-preprocess";
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: sveltePreprocess(),
export default {
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({ adapter: adapter({
fallback: "plaintext",
routes: { routes: {
include: ["/*"], include: ["/*"],
exclude: ["<all>"],
}, },
}), }),
}, },
}; };
export default config;

12
tailwind.config.js
View File

@ -1,12 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {},
},
plugins: [require("daisyui")],
daisyui: {
themes: ["sunset", "fantasy"],
},
darkMode: "selector",
};

3
vite.config.ts
View File

@ -1,6 +1,7 @@
import { sveltekit } from "@sveltejs/kit/vite"; import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()], plugins: [tailwindcss(), sveltekit()],
}); });