Merge branch 'svelte' into svelte-prod
This commit is contained in:
commit
0ea1fcd9ec
GPG Key ID:
31CADD9E5FDD798C
@ -1,11 +1,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import ThemeController from "./themeController.svelte";
|
import ThemeController from "./themeController.svelte";
|
||||||
import Menu from "lucide-svelte/icons/menu";
|
// import Menu from "lucide-svelte/icons/menu";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="navbar bg-neutral text-neutral-content">
|
<div class="navbar bg-neutral text-neutral-content">
|
||||||
<div class="navbar-start">
|
<div class="navbar-start">
|
||||||
<div class="dropdown">
|
<!-- <div class="dropdown">
|
||||||
<div
|
<div
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
role="button"
|
role="button"
|
||||||
@ -21,17 +21,17 @@
|
|||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
<li><a href="/portfolio">Portfolio</a></li>
|
<li><a href="/portfolio">Portfolio</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div> -->
|
||||||
<a class="btn btn-ghost text-xl hover:shadow-lg" href="/">nickbland.dev</a>
|
<a class="btn btn-ghost text-xl hover:shadow-lg" href="/">nickbland.dev</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-center hidden lg:flex">
|
<!-- <div class="navbar-center hidden lg:flex">
|
||||||
<ul class="menu menu-horizontal px-1">
|
<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="/" class="btn btn-ghost text-lg hover:shadow-lg">Home</a></li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/portfolio" class="btn btn-ghost text-lg hover:shadow-lg">Portfolio</a>
|
<a href="/portfolio" class="btn btn-ghost text-lg hover:shadow-lg">Portfolio</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<ul class="menu menu-horizontal px-1">
|
<ul class="menu menu-horizontal px-1">
|
||||||
<li class="focus:"><ThemeController /></li>
|
<li class="focus:"><ThemeController /></li>
|
||||||
|
|||||||
22
src/lib/components/portfolio/skeletonImage.svelte
Normal file
22
src/lib/components/portfolio/skeletonImage.svelte
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
export let src: string;
|
||||||
|
export let altText: string = "";
|
||||||
|
|
||||||
|
let loaded = 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" />
|
||||||
|
{/if}
|
||||||
File diff suppressed because one or more lines are too long
@ -1,12 +1,123 @@
|
|||||||
|
<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
|
<div
|
||||||
class="hero height-minus-nav bg-gradient-to-br from-primary from-10% to-accent to-80%"
|
class="hero height-minus-nav bg-gradient-to-br from-primary from-10% to-accent to-80%"
|
||||||
>
|
>
|
||||||
<div class="hero-overlay bg-opacity-30"></div>
|
<div class="hero-overlay bg-opacity-30"></div>
|
||||||
<div class="hero-content text-left text-accent-content flex-col lg:flex-row">
|
<div class="hero-content text-left text-accent-content flex-col lg:flex-row">
|
||||||
|
<SkeletonImage src="https://cdn.nickbland.dev/nickbland%2Fstatic%2Fimages%2Fprofile.webp" altText="Profile of me." />
|
||||||
<div>
|
<div>
|
||||||
<h1 class="mb-6 text-5xl md:text-7xl lg:text-9xl font-bold text-primary-content">
|
<h1 class="mb-6 text-6xl font-bold text-wrap text-center text-primary-content">
|
||||||
nickbland.dev
|
Hello, my name is Nick
|
||||||
</h1>
|
</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>
|
||||||
|
<div class="hidden lg:flex divider divider-horizontal divider-start">Scoll</div>
|
||||||
</div>
|
</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. I've made this
|
||||||
|
portfolio as a place for me to collate and show off some of the work that I've done.
|
||||||
|
</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 I
|
||||||
|
wished to highlight. Please see the next section for detailed information on how I have
|
||||||
|
utilised these skills in other workplaces.
|
||||||
|
</TextContent>
|
||||||
|
|
||||||
|
<h1 class="my-6 text-6xl text-center text-base-content font-bold">Education & Goals</h1>
|
||||||
|
<Countdown />
|
||||||
|
<TextContent>
|
||||||
|
I am currently studying a Bachelor of Information Technology at Griffith University,
|
||||||
|
opting for a no major or minor option. Having previously studied Computer Science at QUT
|
||||||
|
from 2019-2021, I decided to take a break from study and focus on work experience. As of
|
||||||
|
2023, I returned to studying at Griffith using the experiences I gained from both QUT
|
||||||
|
and from work.
|
||||||
|
</TextContent>
|
||||||
|
<TextContent middle={true}>
|
||||||
|
From my previous work experience, 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, and to not
|
||||||
|
choose a major.
|
||||||
|
</TextContent>
|
||||||
|
<TextContent>
|
||||||
|
As time has progressed, my goals and ambitions have also adapted. Initially, I wanted to
|
||||||
|
be a systems administrator. Upon reaching that goal, I shifted my gaze to what I wanted
|
||||||
|
to do work towards, setting on cybersecurity. Given that the industry is ever-changing,
|
||||||
|
I felt it appropriate to not hem myself in to a single major or minor.
|
||||||
|
</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 the future of the IT industry would look like. Coming away from that
|
||||||
|
panel, I felt better about the path I had taken. The experts all agreed that the
|
||||||
|
industry is an ever-changing field, so it really doesn't make sense to stay comfortable
|
||||||
|
with a single expertise.
|
||||||
|
</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">GitLab instance here</a
|
||||||
|
>
|
||||||
|
or my <a class="link" href="https://github.com/NickBland">GitHub here</a>.
|
||||||
|
</TextContent>
|
||||||
|
<TextContent middle={true} classes={"pt-5"}>
|
||||||
|
On top of that, I also have my own homelab setup. Utilising Proxmox, I run hosts and
|
||||||
|
containers for various services that both me, and my friends and family enjoy. 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 given 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>
|
||||||
|
|||||||
@ -1,125 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
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">
|
|
||||||
<img
|
|
||||||
class=" skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl"
|
|
||||||
alt="what i look like!"
|
|
||||||
src="https://cdn.nickbland.dev/nickbland%2Fstatic%2Fimages%2Fprofile.webp"
|
|
||||||
/>
|
|
||||||
<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-fit text-center text-primary-content">
|
|
||||||
I am an IT Student at Griffith University with a passion for developing neat
|
|
||||||
things.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="hidden lg:flex divider divider-horizontal divider-start">Scoll</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. I've made this
|
|
||||||
portfolio as a place for me to collate and show off some of the work that I've done.
|
|
||||||
</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 text-center text-base-content font-bold">Education & Goals</h1>
|
|
||||||
<Countdown />
|
|
||||||
<TextContent>
|
|
||||||
I am currently studying a Bachelor of Information Technology at Griffith University,
|
|
||||||
opting for a no major or minor option. Having previously studied Computer Science at QUT
|
|
||||||
from 2019-2021, I decided to take a break from study and focus on work experience. As of
|
|
||||||
2023, I returned to studying at Griffith using the experiences I gained from both QUT
|
|
||||||
and from work.
|
|
||||||
</TextContent>
|
|
||||||
<TextContent middle={true}>
|
|
||||||
From my previous work experience, 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, and to not
|
|
||||||
choose a major.
|
|
||||||
</TextContent>
|
|
||||||
<TextContent>
|
|
||||||
As time has progressed, my goals and ambitions have also adapted. Initially, I wanted to
|
|
||||||
be a systems administrator. Upon reaching that goal, I shifted my gaze to what I wanted
|
|
||||||
to do work towards, setting on cybersecurity. Given that the industry is ever-changing,
|
|
||||||
I felt it appropriate to not hem myself in to a single major or minor.
|
|
||||||
</TextContent>
|
|
||||||
|
|
||||||
<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 I
|
|
||||||
wished to highlight. Please see the next section for detailed information on how I have
|
|
||||||
utilised these skills in other workplaces.
|
|
||||||
</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 the future of the IT industry would look like. Coming away from that
|
|
||||||
panel, I felt better about the path I had taken. The experts all agreed that the
|
|
||||||
industry is an ever-changing field, so it really doesn't make sense to stay comfortable
|
|
||||||
with a single expertise.
|
|
||||||
</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">GitLab instance here</a
|
|
||||||
>
|
|
||||||
or my <a class="link" href="https://github.com/NickBland">GitHub here</a>.
|
|
||||||
</TextContent>
|
|
||||||
<TextContent middle={true} classes={"pt-5"}>
|
|
||||||
On top of that, I also have my own homelab setup. Utilising Proxmox, I run hosts and
|
|
||||||
containers for various services that both me, and my friends and family enjoy. 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 given 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>
|
|
||||||
Loading…
Reference in New Issue
Block a user