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

Move to $lib folder as intended...

Browse Source 
Also add in image pathing, will update on R2 when due date arrives.
This commit is contained in:
Nick Bland
2024-04-25 00:47:33 +10:00
parent 7b03db3e78
commit 3c7278bba9
12 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/footer.svelte
+34
View File
@@ -0,0 +1,34 @@
<script lang="ts">
import Github from "lucide-svelte/icons/github";
import Gitlab from "lucide-svelte/icons/gitlab";
</script>
<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"><Github /></a
>
</div>
<div class="tooltip" data-tip="GitLab">
<a
role="button"
class="btn btn-ghost hover:shadow-lg"
aria-label="Find me at my GitLab"
href="https://git.nickbland.dev/NickBland"><Gitlab /></a
>
</div>
</nav>
</footer>
src/lib/components/navbar/navbar.svelte
+40
View File
@@ -0,0 +1,40 @@
<script>
import ThemeController from "./themeController.svelte";
import Menu from "lucide-svelte/icons/menu";
</script>
<div class="navbar bg-neutral text-neutral-content">
<div class="navbar-start">
<div class="dropdown">
<div
tabindex="0"
role="button"
aria-label="menu button"
class="btn btn-ghost lg:hidden"
>
<Menu class="w-5 h-5 fill-current" />
</div>
<ul
tabindex="-1"
class="tablist menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-neutral rounded-box w-52 text-neutral-content"
>
<li><a href="/">Home</a></li>
<li><a href="/portfolio">Portfolio</a></li>
</ul>
</div>
<a class="btn btn-ghost text-xl hover:shadow-lg" href="/">nickbland.dev</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="/" class="btn btn-ghost text-lg hover:shadow-lg">Home</a></li>
<li>
<a href="/portfolio" class="btn btn-ghost text-lg hover:shadow-lg">Portfolio</a>
</li>
</ul>
</div>
<div class="navbar-end">
<ul class="menu menu-horizontal px-1">
<li class="focus:"><ThemeController /></li>
</ul>
</div>
</div>
src/lib/components/navbar/themeController.svelte
+18
View File
@@ -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="winter"
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>
src/lib/components/portfolio/countdown.svelte
+95
View File
@@ -0,0 +1,95 @@
<script lang="ts">
import { onMount } from "svelte";
let w: number = 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 = Math.abs(GRADUATION - Date.now().valueOf()) / 1000;
// Calculate time remaining from milliseconds to graduation (30 Jul, 2025)
$: years = Math.floor(timeTo / 31556926);
$: months = Math.floor(timeTo / 2629743) % 12;
$: days = Math.floor(timeTo / 86400) % 30;
$: hours = Math.floor(timeTo / 3600) % 24;
$: minutes = Math.floor(timeTo / 60) % 60;
$: seconds = 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}
src/lib/components/portfolio/divider.svelte
+30
View File
@@ -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
>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/lib/components/portfolio/skills.svelte
+176
View File
File diff suppressed because one or more lines are too long
src/lib/components/portfolio/skills/stars.svelte
+17
View File
@@ -0,0 +1,17 @@
<script lang="ts">
import Star from "lucide-svelte/icons/star";
import HalfStar from "lucide-svelte/icons/star-half";
export let count: number = 5;
export let half: boolean = false;
</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>
src/lib/components/portfolio/textContent.svelte
+19
View File
@@ -0,0 +1,19 @@
<script lang="ts">
export let middle: boolean = false;
export let classes: string = ""; // Further classes to pass through
</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}">
<slot />
</p>
{:else}
<p class="p-5 mx-auto text-xl max-w-3xl {classes}">
<slot />
</p>
{/if}
</div>
src/lib/components/portfolio/timeline.svelte
+120
View File
@@ -0,0 +1,120 @@
<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-base-300" /></div>
<div class="timeline-end timeline-box bg-base-300 mb-10 max-w-3xl shadow-lg">
<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" />
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" />
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 />
</li>
<li>
<hr />
<div class="timeline-middle"><Circle class="fill-base-300" /></div>
<div class="timeline-start timeline-box bg-base-300 mb-10 max-w-3xl shadow-lg">
<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" />
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" />
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 />
</li>
<li>
<hr />
<div class="timeline-middle"><Circle class="fill-base-300" /></div>
<div class="timeline-end timeline-box bg-base-300 max-w-3xl shadow-lg">
<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" />
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" />
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>