84 changed files with 1058 additions and 6689 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,3 +0,0 @@
 {
  "extends": "next/core-web-vitals"
 }
--- a/.gitignore
+++ b/.gitignore
@ -1,38 +1,21 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
 # testing
 /coverage
 # next.js
 /.next/
 /out/
 # production
 /build
 # misc
 .DS_Store
-*.pem
+node_modules
-
+dist
-# debug
+test-results/
-npm-debug.log*
+package-lock.json
-yarn-debug.log*
+yarn.lock
-yarn-error.log*
+vite.config.js.timestamp-*
-.pnpm-debug.log*
+/packages/create-svelte/template/CHANGELOG.md
-
+/packages/package/test/**/package
-# local env files
+/documentation/types.js
-.env*.local
+.env
-
+.vercel_build_output
-# vercel
+.svelte-kit
 .cloudflare
 .pnpm-debug.log
 .netlify
 .turbo
 .vercel
-
+.test-tmp
-# typescript
+symlink-from
-*.tsbuildinfo
+.idea/
 # vscode
 .vscode
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,52 +0,0 @@
 variables:
  DOCKER_BUILDKIT: 1
  IMAGE_DEPENDANCY: registry.nickbland.dev/nickbland/website-2/dependancy:latest
  IMAGE_BUILD: registry.nickbland.dev/nickbland/website-2/builder:latest
  IMAGE_FINAL: registry.nickbland.dev/nickbland/website-2/website:latest
  DOCKER_TLS_CERTDIR: "/certs"
 stages:
  - build
  - test
  - deploy
 # Run docker stuff before each stage to log into built in container registry and confirm version
 .base:
  image: docker:latest
  services:
    - docker:dind
  before_script:
    - docker --version
    - docker login -u "$CI_REGISTRY_USER" -p "$CI_JOB_TOKEN" "$CI_REGISTRY/$CI_PROJECT_PATH"
 # Create initial test cases below
 build:builder:
  extends: .base
  stage: build
  script:
    - docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_DEPENDANCY" --target dependancies -t "$IMAGE_DEPENDANCY" .
    - docker push "$IMAGE_DEPENDANCY"
 build:sourceCode:
  extends: .base
  stage: build
  script:
    - docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_DEPENDANCY" --cache-from "$IMAGE_BUILD" --target builder -t "$IMAGE_BUILD" .
    - docker push "$IMAGE_BUILD"   
 ## ADD TEST CASES BELOW ##
 test:linter:
  extends: .base
  stage: test
  needs: ["build:builder"]
  script:
    - docker run "$IMAGE_BUILD" npm run lint
 # Create final minified image of production code
 deploy: 
  extends: .base
  stage: deploy
  needs: ["test:linter"]
  script:
    - docker build --build-arg BUILDKIT_INLINE_CACHE=1 --cache-from "$IMAGE_DEPENDANCY" --cache-from "$IMAGE_BUILD" -t "$IMAGE_FINAL" .
    - docker push "$IMAGE_FINAL"
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,12 @@
 {
  "arrowParens": "avoid",
  "singleQuote": false,
  "printWidth": 90,
  "plugins": ["prettier-plugin-svelte"],
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
  "semi": true,
  "svelteSortOrder": "options-styles-scripts-markup",
  "svelteStrictMode": false,
  "svelteBracketNewLine": true,
  "svelteIndentScriptAndStyle": true
 }
--- a/36
+++ b/36
@ -1,36 +0,0 @@
 ARG BASE_IMAGE=node:17.9-alpine
 # Dependancy Stage
 FROM $BASE_IMAGE AS dependancies
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci
 # Source Code Stage
 FROM $BASE_IMAGE AS builder
 WORKDIR /app
 COPY --from=dependancies /app/node_modules ./node_modules
 COPY . .
 ENV NEXT_TELEMETRY_DISABLED 1
 RUN npm run build
 # Production Image Stage
 FROM $BASE_IMAGE AS runner
 WORKDIR /app
 ENV NODE_ENV=production
 RUN addgroup -g 1001 -S nodejs && adduser -S nextjs -u 1001
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 USER nextjs
 EXPOSE 3000
 ENV PORT 3000
 CMD ["node", "server.js"]
--- a/README.md
+++ b/README.md
@ -1,30 +1,28 @@
 # Website-2.0
-> A project to reface my old website.
+A project to reface my old website, and treat it as a portfolio.
-## Aim of Project
+## Aim of Project and Motivation
-The aim of the project is to simply make my website look more modern than it used to look. Originally I downloaded a template from some random website and worked off that. Sure it looked nice, but it wasn't really made by me. So, starting mostly from scratch, I'm rebuilding this website into something better than it was before. For reference, here is a picture of the website as of creating this project:
+Originally I downloaded a template from some random website and worked off that to create my very first website. Sure it looked nice, but it wasn't really made by me. So, starting mostly from scratch, I'm rebuilding this website into something better than it was before. For reference, here is a picture of the website as of creating this project:
-![ReferenceImage](./images/Old-Website.png "The Old Website")
+![ReferenceImage](./readme-images/oldWebsite.png "The Old Website")
-Really, I want to make something a lot more simple and use a more modern framework. While Rust is cool, it just isn't suited for this sort of project. Maybe in a few years time Rust will have matured enough to have easier web frameworks available. [Check here for more info on Rust development](https://www.arewewebyet.org/)
+Another motivation behind the project is creating something more professional. For my endevours in the job-space, a portfolio site is an excellent foot in the door in showing an employer what you are capable of, and what you have done in your own time.
---
+## Tools Used
 I wanted to make something a lot simpler and use a more modern framework. So like every developer ~2020, my eyes were drawn immediately to rust. While Rust is cool, it just isn't suited for this sort of project. Maybe in a few years time Rust will have matured enough and have easier frameworks. [Check here for more information on the Rust web ecosystem](https://www.arewewebyet.org/)
 Svelte seemed like the perfect mix between being something more modern than React, but with the familiarity of JavaScript and modern frameworks still present. Performance wise, it also holds up very well, and is a delight to work with.
 ## Starting Off
-Starting off, the easiest thing is creating a new logo. The previous logo is a screenshot of GTA 5 with a blur effect applied to make the text more visible. I'm a fan of the colourful visual style of this old logo, so wanted something as colourful, but with some more effort. With that said, I created the NickBland logo with an SVG creator, so it can scale infinitely, and created a colour bomb on each corner akin to something like the Festival of Colours in India. Additionally, a light and dark theme was made since some people like the choice; photoshop files can be found in the repository. Here's the result:
+Starting off, the easiest thing is creating a new logo. The previous logo is a screenshot of GTA 5 with a blur effect applied to make the text more visible. I'm a fan of the colourful visual style of this old logo, so wanted something as colourful, but with some more effort to make it truly mine.
-### Themes
+I created the NickBland logo with an SVG generator, so that it can scale infinitely, and added a colour bomb on each corner akin to something like the Festival of Colours in India. Here's the result:
-![New Dark Theme](./images/SplashDark2.jpg "New Dark theme splash")
+![New Dark Theme](./readme-images/splashDark.jpg "New Dark theme splash")
-![New Light Theme](./images/SplashLight1.jpg "New Light theme splash")
+![New Light Theme](./readme-images/splashLight.jpg "New Light theme splash")
-### Palettes
+In the exploratory phase of creating this theming, I initially wanted to create an animation where the burst would shoot out from either side of the screen -- at great expense to the user. While this seemed absolutely awesome in my head, I came to the realisation that people don't really care about that sort of stuff unless they can get to the content quickly.
 | Dark Theme | Light Theme |
 | :-----: | :-----: |
 | ![New Dark Palette](./images/DarkThemePalette.png "New Dark theme palette") | ![New Light Palette](./images/LightThemePalette.png "New Light theme palette") |
 ---
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/footer.tsx
+++ b/components/footer.tsx
@ -1,76 +0,0 @@
 import Link from "next/link";
 import {Fragment, useState} from "react";
 import {Dialog, Transition} from "@headlessui/react";
 import {IoLogoGithub, IoLogoGitlab} from "react-icons/io5";
 import {SiBitcoin, SiEthereum, SiMonero} from "react-icons/si";
 export const Footer = () => {
    const addresses: {[index: string]:string} = {
        Bitcoin: "bitcoinAddress",
        Ethereum: "ethereumAddress",
        Monero: "moneroAddress",
    };
    const [isOpen, setIsOpen] = useState(false);
    const [coin, setCoin] = useState<string>("bitcoin");
    return (
        <>
            <footer className="footer grid w-full grid-flow-row place-items-center text-center gap-y-10 gap-x-4 text-sm p-10 dark:bg-black bg-white dark:text-white text-black bottom-0 max-w-full">
                <div className="grid grid-flow-col gap-4">
                    <Link href="/"><a className="link link-hover">Home</a></Link>
                    <Link href="/"><a className="link link-hover">About</a></Link>
                    <Link href="/"><a className="link link-hover">Projects</a></Link>
                </div>
                <div className="grid grid-flow-col gap-4">
                    <Link href="https://github.com/NickBland"><a><IoLogoGithub></IoLogoGithub></a></Link>
                    <Link href="https://git.nickbland.dev/explore"><a><IoLogoGitlab></IoLogoGitlab></a></Link>
                    <span className="inline-block border-l border-solid mx-0"></span>
                    <SiBitcoin onClick={() => {setIsOpen(true); setCoin("Bitcoin")}} className="hover:text-[#F7931A] hover:cursor-pointer"></SiBitcoin>
                    <SiEthereum onClick={() => {setIsOpen(true); setCoin("Ethereum")}} className="hover:text-[#8A93B2] hover:cursor-pointer"></SiEthereum>
                    <SiMonero onClick={() => {setIsOpen(true); setCoin("Monero")}} className="hover:text-[#F26822] hover:cursor-pointer"></SiMonero>
                </div>
                <div>
                    <p>Made with ❤️ by Nick Bland</p>
                </div>
            </footer>
            <Transition appear show={isOpen} as={Fragment}>
                <Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
                    <Transition.Child
                        as={Fragment}
                        enter="ease-out duration-300"
                        enterFrom="opacity-0"
                        enterTo="opacity-100"
                        leave="ease-in duration-200"
                        leaveFrom="opacity-100"
                        leaveTo="opacity-0"
                    >
                        <div className="fixed inset-0 bg-black bg-opacity-25" />
                    </Transition.Child>
                    <div className="fixed inset-0 overflow-y-auto">
                        <div className="flex min-h-full items-center justify-center p-4 text-center">
                            <Transition.Child
                                as={Fragment}
                                enter="ease-out duration-300"
                                enterFrom="opacity-0 scale-95"
                                enterTo="opacity-100 scale-100"
                                leave="ease-in duration-200"
                                leaveFrom="opacity-100 scale-100"
                                leaveTo="opacity-0 scale-95"
                            >
                                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all">
                                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-dark-100">{coin}</Dialog.Title>
                                    <div className="text-sm text-dark-200 select-all">
                                        {addresses[coin]}
                                    </div>
                                </Dialog.Panel>
                            </Transition.Child>
                        </div>
                    </div>
                </Dialog>
            </Transition>
        </>
    );
 }
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@ -1,83 +0,0 @@
 import React, {Fragment, ReactNode, useState} from "react";
 import {HiX, HiMenu} from "react-icons/hi"
 import Head from "next/head";
 import Link from "next/link";
 import Image from "next/image";
 import { ThemeSwitch } from "./themeSwitch";
 type Props = {
    children?: ReactNode
    title?: string
    description?: string
 }
 const NavBar = ({children, title = "nickbland.dev | Home", description = "A website made by Nick Bland."}: Props) => {
    const [isOpen, setIsOpen] = useState(false);
    const handleCheck = () => {
        setIsOpen(!isOpen);
    }
    return (
        <header>
            <Head>
                <title>{title}</title>
                <meta charSet="utf-8" />
                <meta name="author" content="Nick Bland" />
                <meta name="description" content={description} />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <div className="navbar dark:bg-black bg-white">
                <div className="navbar-start">
                    <div className="flex-shrink-0 hidden dark:block">
                        <Image
                            className=""
                            src="/logo-white.svg"
                            alt="logo"
                            height={100}
                            width={100}
                        />
                    </div>
                    <div className="flex-shrink-0 dark:hidden block">
                        <Image
                            className=""
                            src="/logo-black.svg"
                            alt="logo"
                            height={100}
                            width={100}
                        />
                    </div>
                </div>
                <div className="navbar-center lg:hidden">
                    <div className="dropdown">
                        <label tabIndex={0} className="btn btn-ghost swap swap-rotate lg:hidden">
                            <input type="checkbox" checked={isOpen} onChange={handleCheck} />
                            <HiMenu className="block h-6 w-6 swap-off text-gray-400 hover:text-white hover:bg-gray-800" />
                            <HiX className="block h-6 w-6 swap-on text-gray-400 hover:text-white hover:bg-gray-800" />
                        </label>
                        <ul tabIndex={0} className="menu menu-compact dropdown-content mt-3 p-2 shadow dark:bg-black bg-white rounded-box w-52">
                            <li><Link href="/"><a className="dark:text-white text-black text-sm font-medium block">Home</a></Link></li>
                            <li><Link href="/"><a className="dark:text-white text-black text-sm font-medium block">About</a></Link></li>
                            <li><ThemeSwitch /></li>
                        </ul>
                    </div>
                </div>
                <div className="navbar-end">
                    <div className="hidden md:block">
                        <div className="ml-10 flex items-baseline space-x-4">
                            <Link href="/"><a className="dark:text-white text-black">Home</a></Link>
                            <Link href="/"><a className="dark:text-white text-black">About</a></Link>
                            <Link href="/"><a className="dark:text-white text-black">Projects</a></Link>
                        </div>
                        <div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
                            <ThemeSwitch />
                        </div>
                    </div>
                </div>
            </div>
        </header>
    )
 }
 export default NavBar
--- a/components/themeSwitch.tsx
+++ b/components/themeSwitch.tsx
@ -1,43 +0,0 @@
 import React, { useState } from "react";
 import { useTheme } from "next-themes";
 import { HiSun, HiMoon } from "react-icons/hi";
 export const ThemeSwitch = () => {
    const { theme, setTheme } = useTheme();
    const [enabled, setEnabled] = useState(true);
    const handleCheck = () => {
        setEnabled(!enabled);
    }
    // Use theme requires its own hook which uses Strings. Using an enabled, disabled for a bool hook and the following block translates that to a string.
    if (enabled) {
        setTheme("dark");
    } else {
        setTheme("light");
    }
    return (
        <div className="flex justify-start md:justify-end items-center space-x-2 mx-auto relative">
            <label className="swap swap-rotate">
                <input type="checkbox" checked={enabled} onChange={handleCheck}/>
                 <HiSun className="swap-off relative inline-flex items-center w-10 h-10 text-black" />
                 <HiMoon className="swap-on relative inline-flex items-center w-10 h-10 text-white" />
            </label>
            {/* <Switch.Group>
                <div className="flex items-center">
                    <Switch.Label className="mr-3 dark:text-white text-black">Dark Mode</Switch.Label>
                    <Switch
                        checked={enabled}
                        onChange={setEnabled}
                        className={`${enabled ? 'bg-gray-400' : 'bg-gray-200'} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2 dark:ring-white ring-black dark:focus:bg-gray-400 focus:bg-gray-400`}
                    >
                        <span
                            className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-black dark:bg-white rounded-full transition-transform`} />
                    </Switch>
                </div>
            </Switch.Group> */}
        </div>
    );
 };
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,38 @@
 import globals from "globals";
 import js from "@eslint/js";
 import eslintConfigPrettier from "eslint-config-prettier";
 import tsEslint from "typescript-eslint";
 import eslintPluginSvelte from "eslint-plugin-svelte";
 import svelteParser from "svelte-eslint-parser";
 export default tsEslint.config(
  js.configs.recommended,
  ...tsEslint.configs.recommended,
  ...eslintPluginSvelte.configs["flat/recommended"],
  eslintConfigPrettier,
  ...eslintPluginSvelte.configs["flat/prettier"],
  {
    files: ["**/*.svelte"],
    languageOptions: {
      ecmaVersion: 2022,
      sourceType: "module",
      globals: { ...globals.node, ...globals.browser },
      parser: svelteParser,
      parserOptions: {
        parser: tsEslint.parser,
        extraFileExtensions: [".svelte"],
      },
    },
  },
  {
    ignores: [
      "**/.svelte-kit",
      "**/.vercel",
      "**/.yarn",
      "**/build",
      "**/node_modules",
      "**/package",
      "**/app.d.ts",
    ],
  },
 );
--- a/images/DarkThemePalette.png
+++ b/images/DarkThemePalette.png
--- a/images/LightThemePalette.png
+++ b/images/LightThemePalette.png
--- a/images/Logo.psd
+++ b/images/Logo.psd
--- a/images/NickBland-logo/cover.png
+++ b/images/NickBland-logo/cover.png
--- a/images/NickBland-logo/info.txt
+++ b/images/NickBland-logo/info.txt
@ -1,11 +0,0 @@
 Hope you enjoy your new logo, here are the people that
 made your beautiful logo happen :)
 font name: kelson_rg
 font link: http://www.fontfabric.com/kelson-sans/
 font author: Bruno Mello
 font author site: http://www.myfonts.com/person/Bruno_Mello/
 {"bg":"#FCF2F7","icon-gradient-0":"#D418EA","icon-gradient-1":"#ECD062","font":"#321926","slogan":"#462d3a"}
--- a/images/NickBland-logo/profile.png
+++ b/images/NickBland-logo/profile.png
--- a/images/NickBland-logo/vector/default-monochrome.svg
+++ b/images/NickBland-logo/vector/default-monochrome.svg
@ -1 +0,0 @@
 <svg data-v-423bf9ae="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.2764786795048 60" class="font"><!----><!----><defs data-v-423bf9ae=""><linearGradient data-v-423bf9ae="" gradientTransform="rotate(25)" id="a671bdf1-bca5-4943-a78a-b7a48d74d044" x1="0%" y1="0%" x2="100%" y2="0%"><stop data-v-423bf9ae="" offset="0%" style="stop-color: rgb(212, 24, 234); stop-opacity: 1;"></stop><stop data-v-423bf9ae="" offset="100%" style="stop-color: rgb(236, 208, 98); stop-opacity: 1;"></stop></linearGradient></defs><g data-v-423bf9ae="" id="f5acc262-8412-4485-93f1-5978cf5a360e" fill="url(#a671bdf1-bca5-4943-a78a-b7a48d74d044)" transform="matrix(5.281980514526367,0,0,5.281980514526367,-5.488296031951904,-17.7028865814209)"><path d="M1.04 3.88L1.04 14.55L2.35 14.55L2.35 6.45L6.20 14.55L7.59 14.55L7.59 3.88L6.27 3.88L6.27 12.08L2.45 3.88ZM10.89 6.24L9.60 6.24L9.60 14.55L10.89 14.55ZM10.91 3.35L9.59 3.35L9.59 4.70L10.91 4.70ZM17.18 11.84L17.18 11.96C17.18 12.98 16.79 13.58 15.57 13.58C14.34 13.58 13.94 12.95 13.94 11.51L13.94 9.24C13.94 7.76 14.39 7.22 15.60 7.22C16.77 7.22 17.15 7.77 17.15 8.78L17.15 8.90L18.40 8.90L18.40 8.76C18.40 6.99 17.57 6.08 15.60 6.08C13.64 6.08 12.66 6.97 12.66 9.25L12.66 11.51C12.66 13.80 13.58 14.71 15.55 14.71C17.58 14.71 18.42 13.76 18.42 11.94L18.42 11.84ZM26.07 6.24L24.51 6.24L22.16 9.51L21.36 9.51L21.36 3.74L20.08 3.74L20.08 14.55L21.36 14.55L21.36 10.65L22.16 10.65L24.88 14.55L26.49 14.55L23.23 10.02ZM34.19 11.38C34.19 9.97 33.45 9.21 32.61 8.90C33.32 8.61 33.77 7.91 33.77 6.76L33.77 6.57C33.75 4.40 32.56 3.88 30.48 3.88L27.75 3.88L27.75 14.55L30.80 14.55C33.14 14.55 34.19 13.73 34.19 11.65ZM32.86 11.65C32.86 12.92 32.38 13.48 30.93 13.48L29.02 13.48L29.02 9.59L30.73 9.59C32.14 9.59 32.86 10.02 32.86 11.48ZM29.02 4.94L30.51 4.94C31.75 4.94 32.49 5.19 32.49 6.69L32.49 6.80C32.49 8.01 32.03 8.55 30.70 8.55L29.02 8.55ZM38.29 13.47C37.30 13.50 37.04 13.30 37.04 11.97L37.04 3.74L35.76 3.74L35.76 11.90C35.76 13.99 36.20 14.81 38.29 14.60ZM43.90 14.55L45.05 14.55L45.05 8.83C45.05 6.79 44.06 6.08 42.36 6.08C40.47 6.08 39.56 6.90 39.56 8.79L40.74 8.79C40.74 7.53 41.30 7.14 42.31 7.14C43.36 7.14 43.82 7.67 43.82 8.90L43.82 9.93C43.43 9.87 42.85 9.83 42.48 9.83C40.25 9.83 39.31 10.64 39.31 12.38C39.31 13.94 40.25 14.71 41.75 14.71C42.63 14.71 43.41 14.43 43.86 13.78ZM43.82 11.80C43.82 13.03 42.98 13.65 42.03 13.65C41.08 13.65 40.60 13.19 40.60 12.26C40.60 11.28 41.10 10.81 42.52 10.81C42.85 10.81 43.44 10.85 43.82 10.91ZM46.91 6.24L46.91 14.55L48.20 14.55L48.20 8.89C48.20 7.77 48.85 7.21 49.81 7.21C51.02 7.21 51.38 7.81 51.38 9.17L51.38 14.55L52.67 14.55L52.67 9.06C52.67 7.11 52.01 6.08 50.08 6.08C49.20 6.08 48.51 6.36 48.10 6.87L48.03 6.24ZM59.04 14.55L60.16 14.55L60.16 3.74L58.87 3.74L58.87 6.79C58.49 6.36 57.79 6.08 56.99 6.08C55.52 6.08 54.35 6.96 54.35 9.21L54.35 11.51C54.35 13.59 55.17 14.71 56.87 14.71C57.88 14.71 58.59 14.41 58.95 13.87ZM58.87 11.91C58.87 13.03 58.23 13.58 57.23 13.58C56.11 13.58 55.64 12.92 55.64 11.54L55.64 9.28C55.64 7.74 56.27 7.21 57.26 7.21C58.17 7.21 58.87 7.69 58.87 9.03Z"></path></g><!----><!----></svg>
--- a/images/NickBland-logo/vector/logo-black.svg
+++ b/images/NickBland-logo/vector/logo-black.svg
@ -1 +0,0 @@
 <svg data-v-423bf9ae="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.2764786795048 60" class="font"><!----><!----><!----><g data-v-423bf9ae="" id="c591323e-c114-424b-ab8f-c368856a1040" fill="black" transform="matrix(5.281980514526367,0,0,5.281980514526367,-5.488296031951904,-17.7028865814209)"><path d="M1.04 3.88L1.04 14.55L2.35 14.55L2.35 6.45L6.20 14.55L7.59 14.55L7.59 3.88L6.27 3.88L6.27 12.08L2.45 3.88ZM10.89 6.24L9.60 6.24L9.60 14.55L10.89 14.55ZM10.91 3.35L9.59 3.35L9.59 4.70L10.91 4.70ZM17.18 11.84L17.18 11.96C17.18 12.98 16.79 13.58 15.57 13.58C14.34 13.58 13.94 12.95 13.94 11.51L13.94 9.24C13.94 7.76 14.39 7.22 15.60 7.22C16.77 7.22 17.15 7.77 17.15 8.78L17.15 8.90L18.40 8.90L18.40 8.76C18.40 6.99 17.57 6.08 15.60 6.08C13.64 6.08 12.66 6.97 12.66 9.25L12.66 11.51C12.66 13.80 13.58 14.71 15.55 14.71C17.58 14.71 18.42 13.76 18.42 11.94L18.42 11.84ZM26.07 6.24L24.51 6.24L22.16 9.51L21.36 9.51L21.36 3.74L20.08 3.74L20.08 14.55L21.36 14.55L21.36 10.65L22.16 10.65L24.88 14.55L26.49 14.55L23.23 10.02ZM34.19 11.38C34.19 9.97 33.45 9.21 32.61 8.90C33.32 8.61 33.77 7.91 33.77 6.76L33.77 6.57C33.75 4.40 32.56 3.88 30.48 3.88L27.75 3.88L27.75 14.55L30.80 14.55C33.14 14.55 34.19 13.73 34.19 11.65ZM32.86 11.65C32.86 12.92 32.38 13.48 30.93 13.48L29.02 13.48L29.02 9.59L30.73 9.59C32.14 9.59 32.86 10.02 32.86 11.48ZM29.02 4.94L30.51 4.94C31.75 4.94 32.49 5.19 32.49 6.69L32.49 6.80C32.49 8.01 32.03 8.55 30.70 8.55L29.02 8.55ZM38.29 13.47C37.30 13.50 37.04 13.30 37.04 11.97L37.04 3.74L35.76 3.74L35.76 11.90C35.76 13.99 36.20 14.81 38.29 14.60ZM43.90 14.55L45.05 14.55L45.05 8.83C45.05 6.79 44.06 6.08 42.36 6.08C40.47 6.08 39.56 6.90 39.56 8.79L40.74 8.79C40.74 7.53 41.30 7.14 42.31 7.14C43.36 7.14 43.82 7.67 43.82 8.90L43.82 9.93C43.43 9.87 42.85 9.83 42.48 9.83C40.25 9.83 39.31 10.64 39.31 12.38C39.31 13.94 40.25 14.71 41.75 14.71C42.63 14.71 43.41 14.43 43.86 13.78ZM43.82 11.80C43.82 13.03 42.98 13.65 42.03 13.65C41.08 13.65 40.60 13.19 40.60 12.26C40.60 11.28 41.10 10.81 42.52 10.81C42.85 10.81 43.44 10.85 43.82 10.91ZM46.91 6.24L46.91 14.55L48.20 14.55L48.20 8.89C48.20 7.77 48.85 7.21 49.81 7.21C51.02 7.21 51.38 7.81 51.38 9.17L51.38 14.55L52.67 14.55L52.67 9.06C52.67 7.11 52.01 6.08 50.08 6.08C49.20 6.08 48.51 6.36 48.10 6.87L48.03 6.24ZM59.04 14.55L60.16 14.55L60.16 3.74L58.87 3.74L58.87 6.79C58.49 6.36 57.79 6.08 56.99 6.08C55.52 6.08 54.35 6.96 54.35 9.21L54.35 11.51C54.35 13.59 55.17 14.71 56.87 14.71C57.88 14.71 58.59 14.41 58.95 13.87ZM58.87 11.91C58.87 13.03 58.23 13.58 57.23 13.58C56.11 13.58 55.64 12.92 55.64 11.54L55.64 9.28C55.64 7.74 56.27 7.21 57.26 7.21C58.17 7.21 58.87 7.69 58.87 9.03Z"></path></g><!----><!----></svg>
--- a/images/NickBland-logo/vector/logo-white.svg
+++ b/images/NickBland-logo/vector/logo-white.svg
@ -1 +0,0 @@
 <svg data-v-423bf9ae="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.2764786795048 60" class="font"><!----><!----><!----><g data-v-423bf9ae="" id="00793d48-0c53-44a2-9504-73743fce1cc8" fill="white" transform="matrix(5.281980514526367,0,0,5.281980514526367,-5.488296031951904,-17.7028865814209)"><path d="M1.04 3.88L1.04 14.55L2.35 14.55L2.35 6.45L6.20 14.55L7.59 14.55L7.59 3.88L6.27 3.88L6.27 12.08L2.45 3.88ZM10.89 6.24L9.60 6.24L9.60 14.55L10.89 14.55ZM10.91 3.35L9.59 3.35L9.59 4.70L10.91 4.70ZM17.18 11.84L17.18 11.96C17.18 12.98 16.79 13.58 15.57 13.58C14.34 13.58 13.94 12.95 13.94 11.51L13.94 9.24C13.94 7.76 14.39 7.22 15.60 7.22C16.77 7.22 17.15 7.77 17.15 8.78L17.15 8.90L18.40 8.90L18.40 8.76C18.40 6.99 17.57 6.08 15.60 6.08C13.64 6.08 12.66 6.97 12.66 9.25L12.66 11.51C12.66 13.80 13.58 14.71 15.55 14.71C17.58 14.71 18.42 13.76 18.42 11.94L18.42 11.84ZM26.07 6.24L24.51 6.24L22.16 9.51L21.36 9.51L21.36 3.74L20.08 3.74L20.08 14.55L21.36 14.55L21.36 10.65L22.16 10.65L24.88 14.55L26.49 14.55L23.23 10.02ZM34.19 11.38C34.19 9.97 33.45 9.21 32.61 8.90C33.32 8.61 33.77 7.91 33.77 6.76L33.77 6.57C33.75 4.40 32.56 3.88 30.48 3.88L27.75 3.88L27.75 14.55L30.80 14.55C33.14 14.55 34.19 13.73 34.19 11.65ZM32.86 11.65C32.86 12.92 32.38 13.48 30.93 13.48L29.02 13.48L29.02 9.59L30.73 9.59C32.14 9.59 32.86 10.02 32.86 11.48ZM29.02 4.94L30.51 4.94C31.75 4.94 32.49 5.19 32.49 6.69L32.49 6.80C32.49 8.01 32.03 8.55 30.70 8.55L29.02 8.55ZM38.29 13.47C37.30 13.50 37.04 13.30 37.04 11.97L37.04 3.74L35.76 3.74L35.76 11.90C35.76 13.99 36.20 14.81 38.29 14.60ZM43.90 14.55L45.05 14.55L45.05 8.83C45.05 6.79 44.06 6.08 42.36 6.08C40.47 6.08 39.56 6.90 39.56 8.79L40.74 8.79C40.74 7.53 41.30 7.14 42.31 7.14C43.36 7.14 43.82 7.67 43.82 8.90L43.82 9.93C43.43 9.87 42.85 9.83 42.48 9.83C40.25 9.83 39.31 10.64 39.31 12.38C39.31 13.94 40.25 14.71 41.75 14.71C42.63 14.71 43.41 14.43 43.86 13.78ZM43.82 11.80C43.82 13.03 42.98 13.65 42.03 13.65C41.08 13.65 40.60 13.19 40.60 12.26C40.60 11.28 41.10 10.81 42.52 10.81C42.85 10.81 43.44 10.85 43.82 10.91ZM46.91 6.24L46.91 14.55L48.20 14.55L48.20 8.89C48.20 7.77 48.85 7.21 49.81 7.21C51.02 7.21 51.38 7.81 51.38 9.17L51.38 14.55L52.67 14.55L52.67 9.06C52.67 7.11 52.01 6.08 50.08 6.08C49.20 6.08 48.51 6.36 48.10 6.87L48.03 6.24ZM59.04 14.55L60.16 14.55L60.16 3.74L58.87 3.74L58.87 6.79C58.49 6.36 57.79 6.08 56.99 6.08C55.52 6.08 54.35 6.96 54.35 9.21L54.35 11.51C54.35 13.59 55.17 14.71 56.87 14.71C57.88 14.71 58.59 14.41 58.95 13.87ZM58.87 11.91C58.87 13.03 58.23 13.58 57.23 13.58C56.11 13.58 55.64 12.92 55.64 11.54L55.64 9.28C55.64 7.74 56.27 7.21 57.26 7.21C58.17 7.21 58.87 7.69 58.87 9.03Z"></path></g><!----><!----></svg>
--- a/images/SplashDark.jpg
+++ b/images/SplashDark.jpg
--- a/images/SplashDark.psd
+++ b/images/SplashDark.psd
--- a/images/SplashDarkFinal.jpg
+++ b/images/SplashDarkFinal.jpg
--- a/images/SplashLight.psd
+++ b/images/SplashLight.psd
--- a/images/SplashLight2.jpg
+++ b/images/SplashLight2.jpg
--- a/images/SplashLightFinal.jpg
+++ b/images/SplashLightFinal.jpg
--- a/images/colourSplash1.jpg
+++ b/images/colourSplash1.jpg
--- a/images/colourSplash1.psd
+++ b/images/colourSplash1.psd
--- a/images/colourSplash2.jpg
+++ b/images/colourSplash2.jpg
--- a/images/colourSplash2.psd
+++ b/images/colourSplash2.psd
--- a/images/reference-images/darkBlueSplash.jpg
+++ b/images/reference-images/darkBlueSplash.jpg
--- a/images/reference-images/greenSplash.jpg
+++ b/images/reference-images/greenSplash.jpg
--- a/images/reference-images/pinkSplash1.jpg
+++ b/images/reference-images/pinkSplash1.jpg
--- a/images/reference-images/pinkSplash2.jpg
+++ b/images/reference-images/pinkSplash2.jpg
--- a/images/reference-images/purpleSplash.jpg
+++ b/images/reference-images/purpleSplash.jpg
--- a/images/reference-images/tealSplash1.jpg
+++ b/images/reference-images/tealSplash1.jpg
--- a/images/reference-images/tealSplash2.jpg
+++ b/images/reference-images/tealSplash2.jpg
--- a/next-env.d.ts
+++ b/next-env.d.ts
@ -1,5 +0,0 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/next.config.js
+++ b/next.config.js
@ -1,10 +0,0 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
  output: 'standalone',
  experimental: {
    images: {
      allowFutureImage: true,
    }
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,30 +1,44 @@
 {
-  "name": "website-2.0",
+  "name": "testweb",
-  "version": "0.1.0",
+  "version": "0.0.1",
  "private": true,
  "scripts": {
-    "dev": "next dev",
+    "dev": "vite dev",
-    "build": "next build",
+    "build": "vite build",
-    "start": "next start",
+    "preview": "vite preview",
-    "lint": "next lint"
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-  },
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-  "dependencies": {
+    "lint": "eslint './src/**/*.{js,ts,svelte}' --fix",
-    "daisyui": "^2.25.0",
+    "format": "prettier --write ."
    "next": "^12.2.5",
    "next-themes": "^0.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.4.0"
  },
  "devDependencies": {
-    "@types/node": "18.7.16",
+    "@eslint/js": "^9.12.0",
-    "@types/react": "18.0.18",
+    "@sveltejs/adapter-auto": "^3.2.5",
-    "@types/react-dom": "18.0.6",
+    "@sveltejs/adapter-cloudflare": "^4.7.3",
-    "autoprefixer": "^10.4.8",
+    "@sveltejs/kit": "^2.7.1",
-    "eslint": "8.23.0",
+    "@sveltejs/vite-plugin-svelte": "^4",
-    "eslint-config-next": "^12.2.5",
+    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.16",
+    "daisyui": "^4.12.13",
-    "tailwindcss": "^3.1.8",
+    "eslint": "^9.12.0",
-    "typescript": "4.8.2"
+    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-svelte": "^2.45.1",
    "globals": "^15.11.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-preprocess": "^6.0.3",
    "tailwindcss": "^3.4.13",
    "tslib": "^2.7.0",
    "typescript": "^5.6.3",
    "typescript-eslint": "^8.9.0",
    "vite": "^5.4.9"
  },
  "type": "module",
  "dependencies": {
    "caniuse-lite": "",
    "lucide-svelte": "^0.453.0"
  }
 }
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -1,13 +0,0 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 import {ThemeProvider} from 'next-themes'
 function MyApp({ Component, pageProps }: AppProps) {
  return (
      <ThemeProvider attribute="class" defaultTheme="dark">
        <Component {...pageProps} />
      </ThemeProvider>
  )
 }
 export default MyApp
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -1,13 +0,0 @@
 import { Html, Head, Main, NextScript } from 'next/document'
 export default function Document() {
  return (
    <Html>
      <Head />
      <body className="dark:bg-black bg-white">
          <Main />
          <NextScript />
      </body>
    </Html>
  )
 }
--- a/pages/api/healthcheck.ts
+++ b/pages/api/healthcheck.ts
@ -1,5 +0,0 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 export default function handler(_req: NextApiRequest, res: NextApiResponse) {
    res.status(200).json({statusCode:200, message:"Ok"})
 }
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,27 +0,0 @@
 import type {NextPage} from 'next';
 import Image from "next/future/image";
 import NavBar from "../components/navbar";
 import {Footer} from "../components/footer"
 import splashDark from "../public/splashDarkFinal.jpg"
 import splashLight from "../public/splashLightFinal.jpg"
 const Home: NextPage = () => {
    return (
        <div className="">
            <NavBar title="Home | nickbland.dev"></NavBar>
            <main className="">
                {/* MAIN BANNER SECTION BELOW */}
                <div className="container relative min-w-full min-h-screen flex flex-col items-center py-12">
                    <div className="dark:block hidden"><Image className="flex-shrink-0 h-full w-auto" src={splashDark}/></div>
                    <div className="dark:hidden block"><Image className="flex-shrink-0 h-full w-auto" src={splashLight}/></div>
                </div>
                {/* <div className="w-full mt-8 relat" */}
            </main>
            <Footer></Footer>   
        </div>
  )
 }
 export default Home
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,6 +1,6 @@
-module.exports = {
+export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
-}
+};
--- a/public/SplashDarkFinal.jpg
+++ b/public/SplashDarkFinal.jpg
--- a/public/SplashLightFinal.jpg
+++ b/public/SplashLightFinal.jpg
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/logo-black.svg
+++ b/public/logo-black.svg
@ -1 +0,0 @@
 <svg data-v-423bf9ae="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.2764786795048 60" class="font"><!----><!----><!----><g data-v-423bf9ae="" id="c591323e-c114-424b-ab8f-c368856a1040" fill="black" transform="matrix(5.281980514526367,0,0,5.281980514526367,-5.488296031951904,-17.7028865814209)"><path d="M1.04 3.88L1.04 14.55L2.35 14.55L2.35 6.45L6.20 14.55L7.59 14.55L7.59 3.88L6.27 3.88L6.27 12.08L2.45 3.88ZM10.89 6.24L9.60 6.24L9.60 14.55L10.89 14.55ZM10.91 3.35L9.59 3.35L9.59 4.70L10.91 4.70ZM17.18 11.84L17.18 11.96C17.18 12.98 16.79 13.58 15.57 13.58C14.34 13.58 13.94 12.95 13.94 11.51L13.94 9.24C13.94 7.76 14.39 7.22 15.60 7.22C16.77 7.22 17.15 7.77 17.15 8.78L17.15 8.90L18.40 8.90L18.40 8.76C18.40 6.99 17.57 6.08 15.60 6.08C13.64 6.08 12.66 6.97 12.66 9.25L12.66 11.51C12.66 13.80 13.58 14.71 15.55 14.71C17.58 14.71 18.42 13.76 18.42 11.94L18.42 11.84ZM26.07 6.24L24.51 6.24L22.16 9.51L21.36 9.51L21.36 3.74L20.08 3.74L20.08 14.55L21.36 14.55L21.36 10.65L22.16 10.65L24.88 14.55L26.49 14.55L23.23 10.02ZM34.19 11.38C34.19 9.97 33.45 9.21 32.61 8.90C33.32 8.61 33.77 7.91 33.77 6.76L33.77 6.57C33.75 4.40 32.56 3.88 30.48 3.88L27.75 3.88L27.75 14.55L30.80 14.55C33.14 14.55 34.19 13.73 34.19 11.65ZM32.86 11.65C32.86 12.92 32.38 13.48 30.93 13.48L29.02 13.48L29.02 9.59L30.73 9.59C32.14 9.59 32.86 10.02 32.86 11.48ZM29.02 4.94L30.51 4.94C31.75 4.94 32.49 5.19 32.49 6.69L32.49 6.80C32.49 8.01 32.03 8.55 30.70 8.55L29.02 8.55ZM38.29 13.47C37.30 13.50 37.04 13.30 37.04 11.97L37.04 3.74L35.76 3.74L35.76 11.90C35.76 13.99 36.20 14.81 38.29 14.60ZM43.90 14.55L45.05 14.55L45.05 8.83C45.05 6.79 44.06 6.08 42.36 6.08C40.47 6.08 39.56 6.90 39.56 8.79L40.74 8.79C40.74 7.53 41.30 7.14 42.31 7.14C43.36 7.14 43.82 7.67 43.82 8.90L43.82 9.93C43.43 9.87 42.85 9.83 42.48 9.83C40.25 9.83 39.31 10.64 39.31 12.38C39.31 13.94 40.25 14.71 41.75 14.71C42.63 14.71 43.41 14.43 43.86 13.78ZM43.82 11.80C43.82 13.03 42.98 13.65 42.03 13.65C41.08 13.65 40.60 13.19 40.60 12.26C40.60 11.28 41.10 10.81 42.52 10.81C42.85 10.81 43.44 10.85 43.82 10.91ZM46.91 6.24L46.91 14.55L48.20 14.55L48.20 8.89C48.20 7.77 48.85 7.21 49.81 7.21C51.02 7.21 51.38 7.81 51.38 9.17L51.38 14.55L52.67 14.55L52.67 9.06C52.67 7.11 52.01 6.08 50.08 6.08C49.20 6.08 48.51 6.36 48.10 6.87L48.03 6.24ZM59.04 14.55L60.16 14.55L60.16 3.74L58.87 3.74L58.87 6.79C58.49 6.36 57.79 6.08 56.99 6.08C55.52 6.08 54.35 6.96 54.35 9.21L54.35 11.51C54.35 13.59 55.17 14.71 56.87 14.71C57.88 14.71 58.59 14.41 58.95 13.87ZM58.87 11.91C58.87 13.03 58.23 13.58 57.23 13.58C56.11 13.58 55.64 12.92 55.64 11.54L55.64 9.28C55.64 7.74 56.27 7.21 57.26 7.21C58.17 7.21 58.87 7.69 58.87 9.03Z"></path></g><!----><!----></svg>
--- a/public/logo-white.svg
+++ b/public/logo-white.svg
@ -1 +0,0 @@
 <svg data-v-423bf9ae="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.2764786795048 60" class="font"><!----><!----><!----><g data-v-423bf9ae="" id="00793d48-0c53-44a2-9504-73743fce1cc8" fill="white" transform="matrix(5.281980514526367,0,0,5.281980514526367,-5.488296031951904,-17.7028865814209)"><path d="M1.04 3.88L1.04 14.55L2.35 14.55L2.35 6.45L6.20 14.55L7.59 14.55L7.59 3.88L6.27 3.88L6.27 12.08L2.45 3.88ZM10.89 6.24L9.60 6.24L9.60 14.55L10.89 14.55ZM10.91 3.35L9.59 3.35L9.59 4.70L10.91 4.70ZM17.18 11.84L17.18 11.96C17.18 12.98 16.79 13.58 15.57 13.58C14.34 13.58 13.94 12.95 13.94 11.51L13.94 9.24C13.94 7.76 14.39 7.22 15.60 7.22C16.77 7.22 17.15 7.77 17.15 8.78L17.15 8.90L18.40 8.90L18.40 8.76C18.40 6.99 17.57 6.08 15.60 6.08C13.64 6.08 12.66 6.97 12.66 9.25L12.66 11.51C12.66 13.80 13.58 14.71 15.55 14.71C17.58 14.71 18.42 13.76 18.42 11.94L18.42 11.84ZM26.07 6.24L24.51 6.24L22.16 9.51L21.36 9.51L21.36 3.74L20.08 3.74L20.08 14.55L21.36 14.55L21.36 10.65L22.16 10.65L24.88 14.55L26.49 14.55L23.23 10.02ZM34.19 11.38C34.19 9.97 33.45 9.21 32.61 8.90C33.32 8.61 33.77 7.91 33.77 6.76L33.77 6.57C33.75 4.40 32.56 3.88 30.48 3.88L27.75 3.88L27.75 14.55L30.80 14.55C33.14 14.55 34.19 13.73 34.19 11.65ZM32.86 11.65C32.86 12.92 32.38 13.48 30.93 13.48L29.02 13.48L29.02 9.59L30.73 9.59C32.14 9.59 32.86 10.02 32.86 11.48ZM29.02 4.94L30.51 4.94C31.75 4.94 32.49 5.19 32.49 6.69L32.49 6.80C32.49 8.01 32.03 8.55 30.70 8.55L29.02 8.55ZM38.29 13.47C37.30 13.50 37.04 13.30 37.04 11.97L37.04 3.74L35.76 3.74L35.76 11.90C35.76 13.99 36.20 14.81 38.29 14.60ZM43.90 14.55L45.05 14.55L45.05 8.83C45.05 6.79 44.06 6.08 42.36 6.08C40.47 6.08 39.56 6.90 39.56 8.79L40.74 8.79C40.74 7.53 41.30 7.14 42.31 7.14C43.36 7.14 43.82 7.67 43.82 8.90L43.82 9.93C43.43 9.87 42.85 9.83 42.48 9.83C40.25 9.83 39.31 10.64 39.31 12.38C39.31 13.94 40.25 14.71 41.75 14.71C42.63 14.71 43.41 14.43 43.86 13.78ZM43.82 11.80C43.82 13.03 42.98 13.65 42.03 13.65C41.08 13.65 40.60 13.19 40.60 12.26C40.60 11.28 41.10 10.81 42.52 10.81C42.85 10.81 43.44 10.85 43.82 10.91ZM46.91 6.24L46.91 14.55L48.20 14.55L48.20 8.89C48.20 7.77 48.85 7.21 49.81 7.21C51.02 7.21 51.38 7.81 51.38 9.17L51.38 14.55L52.67 14.55L52.67 9.06C52.67 7.11 52.01 6.08 50.08 6.08C49.20 6.08 48.51 6.36 48.10 6.87L48.03 6.24ZM59.04 14.55L60.16 14.55L60.16 3.74L58.87 3.74L58.87 6.79C58.49 6.36 57.79 6.08 56.99 6.08C55.52 6.08 54.35 6.96 54.35 9.21L54.35 11.51C54.35 13.59 55.17 14.71 56.87 14.71C57.88 14.71 58.59 14.41 58.95 13.87ZM58.87 11.91C58.87 13.03 58.23 13.58 57.23 13.58C56.11 13.58 55.64 12.92 55.64 11.54L55.64 9.28C55.64 7.74 56.27 7.21 57.26 7.21C58.17 7.21 58.87 7.69 58.87 9.03Z"></path></g><!----><!----></svg>
--- a/readme-images/oldWebsite.png
+++ b/readme-images/oldWebsite.png
--- a/readme-images/splashDark.jpg
+++ b/readme-images/splashDark.jpg
--- a/readme-images/splashLight.jpg
+++ b/readme-images/splashLight.jpg
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
 .height-minus-nav {
  min-height: calc(100vh - 4.75rem);
  /* this is the full view height - the navbar(4rem + 0.75rem padding) */
 }
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -0,0 +1,25 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
  namespace App {
    interface Error {
      code: string;
      id: string;
      message: string;
    }
    // interface Locals {}
    interface PageData {}
    interface PageState {}
    interface Platform {
      env: {
        COUNTER: DurableObjectNamespace;
      };
      context: {
        waitUntil(promise: Promise<any>): void;
      };
      caches: CacheStorage & { default: Cache };
    }
  }
 }
 export {};
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,31 @@
 <!doctype html>
 <html lang="en" data-theme="night">
  <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." />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="%sveltekit.assets%/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="%sveltekit.assets%/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="%sveltekit.assets%/favicon-16x16.png"
    />
    <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
 </html>
--- a/src/lib/components/footer.svelte
+++ b/src/lib/components/footer.svelte
@ -0,0 +1,49 @@
 <footer class="footer items-center py-4 bg-neutral text-neutral-content">
  <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
    </p>
  </aside>
  <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end mx-2">
    <div class="tooltip" data-tip="GitHub">
      <a
        role="button"
        class="btn btn-ghost hover:shadow-lg"
        aria-label="Find me at my GitHub"
        href="https://github.com/NickBland"
        ><svg
          class="fill-current"
          width="32"
          height="32"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          ><path
            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
          /></svg
        ></a
      >
    </div>
    <div class="tooltip" data-tip="Gitea">
      <a
        role="button"
        class="btn btn-ghost hover:shadow-lg"
        aria-label="Find me at my Gitea"
        href="https://git.nickbland.dev/NickBland"
        ><svg
          class="fill-current"
          width="32"
          height="32"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          ><path
            d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"
          /></svg
        ></a
      >
    </div>
  </nav>
 </footer>
--- a/src/lib/components/navbar/navbar.svelte
+++ b/src/lib/components/navbar/navbar.svelte
@ -0,0 +1,14 @@
 <script>
  import ThemeController from "./themeController.svelte";
 </script>
 <div class="navbar bg-neutral text-neutral-content">
  <div class="navbar-start">
    <a class="btn btn-ghost text-xl hover:shadow-lg" href="/">nickbland.dev</a>
  </div>
  <div class="navbar-end">
    <ul class="menu menu-horizontal px-1">
      <li class="focus:"><ThemeController /></li>
    </ul>
  </div>
 </div>
--- a/src/lib/components/navbar/themeController.svelte
+++ b/src/lib/components/navbar/themeController.svelte
@ -0,0 +1,18 @@
 <script lang="ts">
  import Sun from "lucide-svelte/icons/sun";
  import Moon from "lucide-svelte/icons/moon";
 </script>
 <label class="swap swap-rotate" aria-label="Theme swapper">
  <!-- this hidden checkbox controls the state -->
  <input
    type="checkbox"
    class="theme-controller"
    value="fantasy"
    aria-label="Theme toggle button"
  />
  <Sun class="w-7 h-7 swap-on fill-current hover:shadow-lg" />
  <Moon class="w-7 h-7 swap-off fill-current hover:shadow-lg" />
 </label>
--- a/src/lib/components/portfolio/countdown.svelte
+++ b/src/lib/components/portfolio/countdown.svelte
@ -0,0 +1,95 @@
 <script lang="ts">
  import { onMount } from "svelte";
  let w: number = $state(0); // Width of the screen, using the svelte binding
  const GRADUATION = new Date(1753797600000).valueOf();
  const FORMATTED = new Date(1753797600000).toDateString();
  let interval: ReturnType<typeof setInterval>;
  let timeTo = $state(Math.abs(GRADUATION - Date.now().valueOf()) / 1000);
  // Calculate time remaining from milliseconds to graduation (30 Jul, 2025)
  let years = $derived(Math.floor(timeTo / 31556926));
  let months = $derived(Math.floor(timeTo / 2629743) % 12);
  let days = $derived(Math.floor(timeTo / 86400) % 30);
  let hours = $derived(Math.floor(timeTo / 3600) % 24);
  let minutes = $derived(Math.floor(timeTo / 60) % 60);
  let seconds = $derived(Math.floor(timeTo % 60));
  // Update the timeTo variable every 1000 milliseconds
  // Don't go past 0 though! Stop the updates afterwards
  function update() {
    timeTo = (GRADUATION - Date.now().valueOf()) / 1000;
    if (timeTo <= 0) {
      clearInterval(interval);
      timeTo = 0;
    }
  }
  onMount(() => {
    // Create a timer
    interval = setInterval(update, 1000);
    return () => {
      clearInterval(interval);
    };
  });
 </script>
 <svelte:window bind:innerWidth={w} />
 <!-- Display a different type of countdown for smaller screens, as larger one won't fit -->
 {#if w >= 768}
  <h2 class="p-5 text-4xl text-center">Time to Graduation</h2>
  <div class="grid grid-flow-col gap-5 pb-5 text-center auto-cols-max justify-center">
    <div class="flex flex-col">
      <span class="countdown font-mono text-5xl place-self-center">
        <span style="--value:{years};"></span>
      </span>
      years
    </div>
    <div class="flex flex-col">
      <span class="countdown font-mono text-5xl place-self-center">
        <span style="--value:{months};"></span>
      </span>
      months
    </div>
    <div class="flex flex-col">
      <span class="countdown font-mono text-5xl place-self-center">
        <span style="--value:{days};"></span>
      </span>
      days
    </div>
    <div class="flex flex-col">
      <span class="countdown font-mono text-5xl place-self-center">
        <span style="--value:{hours};"></span>
      </span>
      hours
    </div>
    <div class="flex flex-col">
      <span class="countdown font-mono text-5xl place-self-center">
        <span style="--value:{minutes};"></span>
      </span>
      minutes
    </div>
    <div class="flex flex-col">
      <span class="countdown font-mono text-5xl place-self-center">
        <span style="--value:{seconds};"></span>
      </span>
      seconds
    </div>
  </div>
 {:else}
  <h2 class="p-5 text-4xl text-center">Time to Graduation<br /> ({FORMATTED})</h2>
  <span class="flex countdown pb-5 font-mono text-4xl justify-center">
    <span style="--value:{years};"></span>y&nbsp;
    <span style="--value:{months};"></span>m&nbsp;
    <span style="--value:{days};"></span>d
  </span>
  <span class="flex countdown pb-5 font-mono text-4xl justify-center">
    <span style="--value:{hours};"></span>:
    <span style="--value:{minutes};"></span>:
    <span style="--value:{seconds};"></span>
  </span>
 {/if}
--- a/src/lib/components/portfolio/divider.svelte
+++ b/src/lib/components/portfolio/divider.svelte
@ -0,0 +1,30 @@
 <svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 2400 800"
 >
  <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>
    </linearGradient>
  </defs>
  <g stroke-width="4" stroke="url(#oooscillate-grad)" fill="none" stroke-linecap="round">
    <path d="M 0 518 Q 600 -100 1200 400 Q 1800 900 2400 518" opacity="1.00"></path>
    <path d="M 0 481 Q 600 -100 1200 400 Q 1800 900 2400 481" opacity="0.93"></path>
    <path d="M 0 444 Q 600 -100 1200 400 Q 1800 900 2400 444" opacity="0.85"></path>
    <path d="M 0 407 Q 600 -100 1200 400 Q 1800 900 2400 407" opacity="0.78"></path><path
      d="M 0 370 Q 600 -100 1200 400 Q 1800 900 2400 370"
      opacity="0.71"
    ></path><path d="M 0 333 Q 600 -100 1200 400 Q 1800 900 2400 333" opacity="0.63"
    ></path><path d="M 0 296 Q 600 -100 1200 400 Q 1800 900 2400 296" opacity="0.56"
    ></path><path d="M 0 259 Q 600 -100 1200 400 Q 1800 900 2400 259" opacity="0.49"
    ></path><path d="M 0 222 Q 600 -100 1200 400 Q 1800 900 2400 222" opacity="0.42"
    ></path><path d="M 0 185 Q 600 -100 1200 400 Q 1800 900 2400 185" opacity="0.34"
    ></path><path d="M 0 148 Q 600 -100 1200 400 Q 1800 900 2400 148" opacity="0.27"
    ></path><path d="M 0 111 Q 600 -100 1200 400 Q 1800 900 2400 111" opacity="0.20"
    ></path><path d="M 0 74 Q 600 -100 1200 400 Q 1800 900 2400 74" opacity="0.12"
    ></path></g
  ></svg
 >
--- a/src/lib/components/portfolio/skeletonImage.svelte
+++ b/src/lib/components/portfolio/skeletonImage.svelte
@ -0,0 +1,26 @@
 <script lang="ts">
  import { onMount } from "svelte";
  interface Props {
    src: string;
    altText?: string;
  }
  let { src, altText = "" }: Props = $props();
  let loaded = $state(false);
  onMount(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => {
      loaded = true;
    };
  });
 </script>
 {#if loaded}
  <img {src} class="w-48 h-64 shadow-2xl max-w-sm rounded-2xl" alt={altText} />
 {:else}
  <div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl"></div>
 {/if}
--- a/src/lib/components/portfolio/skills.svelte
+++ b/src/lib/components/portfolio/skills.svelte
--- a/src/lib/components/portfolio/skills/stars.svelte
+++ b/src/lib/components/portfolio/skills/stars.svelte
@ -0,0 +1,21 @@
 <script lang="ts">
  import Star from "lucide-svelte/icons/star";
  import HalfStar from "lucide-svelte/icons/star-half";
  interface Props {
    count?: number;
    half?: boolean;
  }
  let { count = 5, half = false }: Props = $props();
 </script>
 <div class="flex">
  {#each Array(count) as _}
    <!-- Need to use the var somewhere -->
    <Star name={_} class="stroke-neutral-content fill-neutral-content" />
  {/each}
  {#if half}
    <HalfStar class="stroke-neutral-content fill-neutral-content" />
  {/if}
 </div>
--- a/src/lib/components/portfolio/textContent.svelte
+++ b/src/lib/components/portfolio/textContent.svelte
@ -0,0 +1,24 @@
 <script lang="ts">
  interface Props {
    middle?: boolean;
    classes?: string;
    children?: import('svelte').Snippet;
  }
  let { middle = false, classes = "", children }: Props = $props();
 </script>
 <!-- If the text is between some other text, adjust padding to not seperate it out too much -->
 <!-- Default behaviour is to leave as is, unless true is passed through the props -->
 <div>
  {#if middle}
    <p class="px-5 mx-auto text-xl max-w-3xl {classes}">
      {@render children?.()}
    </p>
  {:else}
    <p class="p-5 mx-auto text-xl max-w-3xl {classes}">
      {@render children?.()}
    </p>
  {/if}
 </div>
--- a/src/lib/components/portfolio/timeline.svelte
+++ b/src/lib/components/portfolio/timeline.svelte
@ -0,0 +1,126 @@
 <script lang="ts">
  import Circle from "lucide-svelte/icons/circle";
 </script>
 <h3 class="p-5 text-4xl text-center">Work Experience</h3>
 <ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical pb-8">
  <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"
    >
      <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>
      Help Desk Role:
      <ul class="list-disc list-inside mt-2">
        <li>Performed repairs and troubleshooting for both students and teachers.</li>
        <li>
          Logged warranty claims with suppliers and triaged with parents and students
          during this process.
        </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.
        </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.
        </li>
        <li>
          Gained first-hand experience using ticketing software (LanSweeper), and using it
          as a powerful tool for organisation.
        </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-start timeline-box bg-neutral mb-10 max-w-3xl shadow-lg text-neutral-content"
    >
      <div class="md:text-end">
        <time class="font-mono" datetime="2020-8">Aug 2020 - Oct 2022</time>
        <div class="text-xl">St Pauls School</div>
        <div class="text-sm pb-2">Information Technology Officer</div>
      </div>
      <div class="divider my-1"></div>
      Help Desk Role:
      <ul class="list-disc list-inside mt-2">
        <li>
          Assisted students and teachers with level 1 and 2 issues, and logged warranty
          jobs. Continued triaging until issue was resolved.
        </li>
        <li>
          Gained experience in cloud-based solutions in the enterprise environment, namely
          AWS. I was able to apply some of the teaching for my homelab setup.
        </li>
        <li>
          Gained more experience in Azure ecosystem, SCCM deployment, and networking.
        </li>
      </ul>
      <div class="divider my-1"></div>
      Key Experiences and Takeaways:
      <ul class="list-disc list-inside mt-2">
        <li>Working in a larger group to cover more ground</li>
        <li>
          The importance of relationships with end-users and suppliers to get issues
          sorted in a timely manner.
        </li>
        <li>
          Much more experience in networking (both Cisco and Unifi), and configuration in
          an enterprise environment.
        </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 max-w-3xl shadow-lg text-neutral-content"
    >
      <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>
  </li>
 </ul>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -0,0 +1 @@
 // place files you want to import through the `$lib` alias in this folder.
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@ -0,0 +1,24 @@
 <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-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"
      >
        {$page.status}:
        {$page.error?.message}
      </h3>
    </div>
  </div>
 </div>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,16 @@
 <script lang="ts">
  import "../app.css";
  import Navbar from "$lib/components/navbar/navbar.svelte";
  import Footer from "$lib/components/footer.svelte";
  interface Props {
    children?: import('svelte').Snippet;
  }
  let { children }: Props = $props();
 </script>
 <Navbar />
 {@render children?.()}
 <Footer />
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -0,0 +1,128 @@
 <script lang="ts">
  import SkeletonImage from "$lib/components/portfolio/skeletonImage.svelte";
  import Divider from "$lib/components/portfolio/divider.svelte";
  import Countdown from "$lib/components/portfolio/countdown.svelte";
  import TextContent from "$lib/components/portfolio/textContent.svelte";
  import Skills from "$lib/components/portfolio/skills.svelte";
  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-overlay bg-opacity-30"></div>
  <div class="hero-content text-left text-accent-content flex-col lg:flex-row">
    <SkeletonImage
      src="https://cdn.nickbland.dev/nickbland%2Fstatic%2Fimages%2Fprofile.webp"
      altText="Profile of me."
    />
    <div>
      <h1 class="mb-6 text-6xl font-bold text-wrap text-center text-primary-content">
        Hello, my name is Nick
      </h1>
      <p class="py-5 text-lg max-w-xl text-center text-primary-content">
        I am a Junior Systems Administrator with a passion for building stuff. I have my
        own homelab which I use to test my new creations on the path to my goal-career in
        cybersecurity. At the moment, I'm a student at Griffith University.
      </p>
    </div>
    <div class="hidden lg:flex divider divider-horizontal divider-start">Scroll</div>
  </div>
 </div>
 <h1 class="my-6 text-6xl text-center text-base-content font-bold">About Me</h1>
 <TextContent>
  Since 2014, I've had an interest in programming and making things. This portfolio serves
  as a place for me to collate and show off some of the work that I've done and
  experiences I've had.
 </TextContent>
 <TextContent>
  At the moment, I've returned back to Uni to finish my degree after achieving a point in
  my career that I am happy with. With the experience I've gained, and after finishing my
  studies, my plan is to work in the cybersecurity field.
 </TextContent>
 <Divider />
 <h1 class="my-6 text-6xl p-5 text-center text-base-content font-bold">
  Skills & Confidence
 </h1>
 <Skills />
 <TextContent>
  While this isn't an exhaustive list of all my skills, it is a brief list of skills and
  interests I wished to highlight.
 </TextContent>
 <h1 class="my-6 text-6xl text-center text-base-content font-bold">Education & Goals</h1>
 <Countdown />
 <TextContent>
  As of 2023, I have returned to studying a Bachelor of Information Technology at Griffith
  University using the experiences I gained from both QUT and work environments. Having
  previously studied Computer Science at QUT from 2019-2021, I gained critical knowledge
  on how computers worked at a low-level, and other concepts such as networking. Following
  the COVID pandemic, I decided to take a break from studying to pursue getting hands-on
  experience in work environments.
 </TextContent>
 <TextContent middle={true}>
  From my previous work experience, I found that employers look more for relevant skills
  and industry knowledge over the type of degree or the majors and minors you study. The
  mentorship I gained from those jobs was what influenced me to change my degree over from
  Computer Science, and opt for the no major or minor route.
 </TextContent>
 <TextContent>
  As time has progressed, my goals and ambitions have also adapted. Initially, I wanted to
  be a systems administrator. But upon reaching that goal, I shifted my gaze to another
  long-held interest: cybersecurity. Given that the industry is ever-changing, I felt it
  appropriate to not hem myself in to a single major or minor, and to focus on the bigger
  picture the IT industry presents.
 </TextContent>
 <h1 class="my-6 text-6xl p-5 text-center text-base-content font-bold">Experiences</h1>
 <Timeline />
 <h3 class="p-5 text-4xl text-center">Informal Experience</h3>
 <TextContent>
  Griffith University has also been helpful in engaging me with industry panels and
  experiences. In early 2024, one of my units had a panel with some industry experts who
  discussed what they thought the future of the IT industry would look like. Between talks
  of AI, and other new technologies, I came away from that panel feeling better about the
  path I had taken. All the experts agreed that the IT industry is a constantly changing
  field, and that standing still is the worst mistake you can make as a newcomer.
 </TextContent>
 <TextContent middle={true}>
  Another extracurricular activity I undertook was the 2023 'James-Jam'. In this activity,
  groups were formed and given two weeks to construct a working game in p5play.js. The
  theme was a game remniscient of Homeworld (1999). While this wasn't a competition, our
  group did an amazing job at constructing a fully working game. You can play the game at
  <a class="link" href="https://gamejam2023.nickbland.dev/">this link here</a>. And if you
  want to view the source code, it can be found
  <a class="link" href="https://github.com/NickBland">on my GitHub</a>.
 </TextContent>
 <TextContent middle={true} classes={"pt-5"}>
  Outside of work experience and university, I also aim to learn new projects in my own
  time. For example, the website you are reading this on was built by hand, by me. You can
  find the source code for this project, and others at my personal <a
    class="link"
    href="https://git.nickbland.dev">Gitea instance here</a
  >
  or my <a class="link" href="https://github.com/NickBland">GitHub here</a>.
 </TextContent>
 <TextContent middle={true} classes={"pt-5"}>
  Moreover, I also have my own homelab setup. Utilising Proxmox, I use Proxmox to run
  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
  >.
 </TextContent>
 <TextContent>
  The homelab is a constantly evolving project that has enabled me to self-teach myself
  aspects of linux administration in a safer environment. In the future, I may have a blog
  with some of the more interesting projects I've worked on.
 </TextContent>
 <h1 class="my-6 text-6xl p-5 text-center text-base-content font-bold">Contact</h1>
 <TextContent>
  Thanks for checking out my site, if you want to get in contact with me, you can find me
  on <a class="link" href="https://github.com/NickBland">GitHub</a>, or send an email to
  <a class="link" href="mailto:hello@nickbland.dev">hello@nickbland.dev</a>.
 </TextContent>
--- a/src/routes/api/healthcheck/+server.ts
+++ b/src/routes/api/healthcheck/+server.ts
@ -0,0 +1,3 @@
 export function GET() {
  return new Response();
 }
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
--- a/static/android-chrome-512x512.png
+++ b/static/android-chrome-512x512.png
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
--- a/static/favicon-16x16.png
+++ b/static/favicon-16x16.png
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/site.webmanifest
+++ b/static/site.webmanifest
@ -0,0 +1,11 @@
 {
  "name": "",
  "short_name": "",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@ -1,14 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
 /* hide scrollbar but allow scrolling */
 body {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
 }
 body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
 }
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,22 @@
 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(),
  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({
      routes: {
        include: ["/*"],
      },
    }),
  },
 };
 export default config;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,42 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "class",
+  content: ["./index.html", "./src/**/*.{html,js,svelte,ts}"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
-    extend: {
+    extend: {},
      colors: {
        dark: {
          100: '#6D327C',
          200: '#4954AA',
          300: '#0074CB',
          400: '#0092D8',
          500: '#00ABD0',
          600: '#00C2B5',
        },
        light: {
          100: '#F924F1',
          200: '#FF11B1',
          300: '#FF6079',
          400: '#FF9D53',
          500: '#FFCF4C',
          600: '#F9F871',
        },
      },
      display: ['dark'],
    },
  },
-  variants: {
+  plugins: [require("daisyui")],
    extend: { 
      backgroundImage: ['dark'],
      display: ['dark'],
    },
  },
  plugins: [
    require("daisyui")
  ],
  daisyui: {
-    themes: false,
+    themes: ["sunset", "fantasy"],
  },
-}
+  darkMode: "selector",
 };
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,20 +1,18 @@
 {
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
-    "skipLibCheck": true,
+    "checkJs": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
-    "module": "esnext",
+    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
-    "isolatedModules": true,
+    "skipLibCheck": true,
-    "jsx": "preserve",
+    "sourceMap": true,
-    "incremental": true
+    "strict": true,
-  },
+    "moduleResolution": "bundler"
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  }
-  "exclude": ["node_modules"]
+  // 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
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,6 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 export default defineConfig({
  plugins: [sveltekit()],
 });
		`@ -1 +0,0 @@`
			<svg data-v-423bf9ae="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.2764786795048 60" class="font"><!----><!----><defs data-v-423bf9ae=""><linearGradient data-v-423bf9ae="" gradientTransform="rotate(25)" id="a671bdf1-bca5-4943-a78a-b7a48d74d044" x1="0%" y1="0%" x2="100%" y2="0%"><stop data-v-423bf9ae="" offset="0%" style="stop-color: rgb(212, 24, 234); stop-opacity: 1;"></stop><stop data-v-423bf9ae="" offset="100%" style="stop-color: rgb(236, 208, 98); stop-opacity: 1;"></stop></linearGradient></defs><g data-v-423bf9ae="" id="f5acc262-8412-4485-93f1-5978cf5a360e" fill="url(#a671bdf1-bca5-4943-a78a-b7a48d74d044)" transform="matrix(5.281980514526367,0,0,5.281980514526367,-5.488296031951904,-17.7028865814209)"><path d="M1.04 3.88L1.04 14.55L2.35 14.55L2.35 6.45L6.20 14.55L7.59 14.55L7.59 3.88L6.27 3.88L6.27 12.08L2.45 3.88ZM10.89 6.24L9.60 6.24L9.60 14.55L10.89 14.55ZM10.91 3.35L9.59 3.35L9.59 4.70L10.91 4.70ZM17.18 11.84L17.18 11.96C17.18 12.98 16.79 13.58 15.57 13.58C14.34 13.58 13.94 12.95 13.94 11.51L13.94 9.24C13.94 7.76 14.39 7.22 15.60 7.22C16.77 7.22 17.15 7.77 17.15 8.78L17.15 8.90L18.40 8.90L18.40 8.76C18.40 6.99 17.57 6.08 15.60 6.08C13.64 6.08 12.66 6.97 12.66 9.25L12.66 11.51C12.66 13.80 13.58 14.71 15.55 14.71C17.58 14.71 18.42 13.76 18.42 11.94L18.42 11.84ZM26.07 6.24L24.51 6.24L22.16 9.51L21.36 9.51L21.36 3.74L20.08 3.74L20.08 14.55L21.36 14.55L21.36 10.65L22.16 10.65L24.88 14.55L26.49 14.55L23.23 10.02ZM34.19 11.38C34.19 9.97 33.45 9.21 32.61 8.90C33.32 8.61 33.77 7.91 33.77 6.76L33.77 6.57C33.75 4.40 32.56 3.88 30.48 3.88L27.75 3.88L27.75 14.55L30.80 14.55C33.14 14.55 34.19 13.73 34.19 11.65ZM32.86 11.65C32.86 12.92 32.38 13.48 30.93 13.48L29.02 13.48L29.02 9.59L30.73 9.59C32.14 9.59 32.86 10.02 32.86 11.48ZM29.02 4.94L30.51 4.94C31.75 4.94 32.49 5.19 32.49 6.69L32.49 6.80C32.49 8.01 32.03 8.55 30.70 8.55L29.02 8.55ZM38.29 13.47C37.30 13.50 37.04 13.30 37.04 11.97L37.04 3.74L35.76 3.74L35.76 11.90C35.76 13.99 36.20 14.81 38.29 14.60ZM43.90 14.55L45.05 14.55L45.05 8.83C45.05 6.79 44.06 6.08 42.36 6.08C40.47 6.08 39.56 6.90 39.56 8.79L40.74 8.79C40.74 7.53 41.30 7.14 42.31 7.14C43.36 7.14 43.82 7.67 43.82 8.90L43.82 9.93C43.43 9.87 42.85 9.83 42.48 9.83C40.25 9.83 39.31 10.64 39.31 12.38C39.31 13.94 40.25 14.71 41.75 14.71C42.63 14.71 43.41 14.43 43.86 13.78ZM43.82 11.80C43.82 13.03 42.98 13.65 42.03 13.65C41.08 13.65 40.60 13.19 40.60 12.26C40.60 11.28 41.10 10.81 42.52 10.81C42.85 10.81 43.44 10.85 43.82 10.91ZM46.91 6.24L46.91 14.55L48.20 14.55L48.20 8.89C48.20 7.77 48.85 7.21 49.81 7.21C51.02 7.21 51.38 7.81 51.38 9.17L51.38 14.55L52.67 14.55L52.67 9.06C52.67 7.11 52.01 6.08 50.08 6.08C49.20 6.08 48.51 6.36 48.10 6.87L48.03 6.24ZM59.04 14.55L60.16 14.55L60.16 3.74L58.87 3.74L58.87 6.79C58.49 6.36 57.79 6.08 56.99 6.08C55.52 6.08 54.35 6.96 54.35 9.21L54.35 11.51C54.35 13.59 55.17 14.71 56.87 14.71C57.88 14.71 58.59 14.41 58.95 13.87ZM58.87 11.91C58.87 13.03 58.23 13.58 57.23 13.58C56.11 13.58 55.64 12.92 55.64 11.54L55.64 9.28C55.64 7.74 56.27 7.21 57.26 7.21C58.17 7.21 58.87 7.69 58.87 9.03Z"></path></g><!----><!----></svg>
		`@ -0,0 +1 @@`
							// place files you want to import through the `$lib` alias in this folder.