Merge branch 'svelte' into svelte-prod

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

BIN
bun.lockb

Binary file not shown.

View File

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

View File

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

View File

@ -1,6 +1,29 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
@import "tailwindcss";
@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 {
min-height: calc(100vh - 4.75rem);

View File

@ -3,7 +3,10 @@
<head>
<title>nickbland.dev</title>
<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
rel="apple-touch-icon"
sizes="180x180"

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">
<a class="btn text-xl btn-ghost" href="/">nickbland.dev</a>
<p>
Copyright © 2024 - All right reserved | <a
class="link"
href="https://git.nickbland.dev/NickBland/website-2">Source Code</a
> | Made with ❤️ using SvelteKit
Copyright © {new Date().getFullYear()} - All right reserved |
<a class="link" href="https://git.nickbland.dev/NickBland/website-2">Source Code</a>
| Made with ❤️ using SvelteKit
</p>
</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">
<a
role="button"

View File

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

View File

@ -6,8 +6,8 @@
>
<defs>
<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:oklch(var(--a))" stop-opacity="1" offset="100%"></stop>
<stop style="stop-color:var(--color-primary)" stop-opacity="1" offset="0%"></stop>
<stop style="stop-color:var(--color-accent)" stop-opacity="1" offset="100%"></stop>
</linearGradient>
</defs>
<g stroke-width="4" stroke="url(#oooscillate-grad)" fill="none" stroke-linecap="round">

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

File diff suppressed because one or more lines are too long

View File

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

View File

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

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">
import { page } from "$app/stores";
</script>
<div
class="hero height-minus-nav bg-gradient-to-br from-primary from-10% to-accent to-80%"
>
<div class="hero height-minus-nav bg-linear-to-br from-primary from-10% to-accent to-80%">
<div class="hero-overlay bg-opacity-30"></div>
<div class="hero-content text-left text-accent-content flex-col lg:flex-row">
<div>
<h1
class="mb-6 text-5xl md:text-7xl lg:text-9xl font-bold text-primary-content text-center"
>
Whoah!
</h1>
<h3
class="text-3xl md:text-5xl lg:text-7xl 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}:
{$page.error?.message}"
>
{$page.status}:
{$page.error?.message}
</h3>
</h1>
</div>
</div>
</div>

View File

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

View File

@ -7,9 +7,7 @@
import Timeline from "$lib/components/portfolio/timeline.svelte";
</script>
<div
class="hero height-minus-nav bg-gradient-to-br from-primary from-10% to-accent to-80%"
>
<div class="hero height-minus-nav bg-linear-to-br from-primary from-10% to-accent to-80%">
<div class="hero-overlay bg-opacity-30"></div>
<div class="hero-content text-left text-accent-content flex-col lg:flex-row">
<SkeletonImage
@ -111,7 +109,7 @@
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
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>

View File

@ -1,22 +1,13 @@
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: {
// 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({
fallback: "plaintext",
routes: {
include: ["/*"],
exclude: ["<all>"],
},
}),
},
};
export default config;

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",
};

View File

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