Improve Responsiveness

- Remove old SVG and use a proper library for iconography
~ Adjust formatting for various objects, including the footer, and countdown
+ Add in a barebones home page
This commit is contained in:
Nick Bland 2024-04-20 15:48:54 +10:00
parent 1074f98c39
commit d0afdc696e
Signed by: NickBland
GPG Key ID: 31CADD9E5FDD798C
9 changed files with 44 additions and 44 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -35,5 +35,8 @@
"typescript-eslint": "^7.7.0", "typescript-eslint": "^7.7.0",
"vite": "^5.2.9" "vite": "^5.2.9"
}, },
"type": "module" "type": "module",
"dependencies": {
"lucide-svelte": "^0.372.0"
}
} }

View File

@ -81,7 +81,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<h3 class="p-5 text-4xl text-center">Time to Graduation<br /> {FORMATTED}</h3> <h3 class="p-5 text-4xl text-center">Time to Graduation<br /> ({FORMATTED})</h3>
<span class="flex countdown pb-5 font-mono text-4xl justify-center"> <span class="flex countdown pb-5 font-mono text-4xl justify-center">
<span style="--value:{years};"></span>y <span style="--value:{years};"></span>y
<span style="--value:{months};"></span>m <span style="--value:{months};"></span>m

View File

@ -1,5 +1,5 @@
<footer <footer
class="footer items-center p-4 bg-base-300 dark:bg-neutral dark:text-neutral-content" class="footer items-center pt-4 bg-base-300 dark:bg-neutral dark:text-neutral-content"
> >
<aside class="items-center grid-flow-col"> <aside class="items-center grid-flow-col">
<a class="btn btn-ghost text-xl" href="/">nickbland.dev</a> <a class="btn btn-ghost text-xl" href="/">nickbland.dev</a>

View File

@ -1,5 +1,6 @@
<script> <script>
import ThemeController from "./themeController.svelte"; import ThemeController from "./themeController.svelte";
import Menu from "lucide-svelte/icons/menu";
</script> </script>
<div <div
@ -8,18 +9,7 @@
<div class="navbar-start"> <div class="navbar-start">
<div class="dropdown"> <div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden"> <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg <Menu class="w-5 h-5 fill-current" />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-5 h-5"
>
<path
fill-rule="evenodd"
d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
clip-rule="evenodd"
/>
</svg>
</div> </div>
<ul <ul
tabindex="-1" tabindex="-1"

View File

@ -1,28 +1,13 @@
<script lang="ts">
import Sun from "lucide-svelte/icons/sun";
import Moon from "lucide-svelte/icons/moon";
</script>
<label class="swap swap-rotate"> <label class="swap swap-rotate">
<!-- this hidden checkbox controls the state --> <!-- this hidden checkbox controls the state -->
<input type="checkbox" class="theme-controller" value="acid" /> <input type="checkbox" class="theme-controller" value="winter" />
<!-- sun icon --> <Sun class="w-7 h-7 swap-on fill-current" />
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="w-7 h-7 swap-on fill-current"
>
<path
d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"
/>
</svg>
<!-- moon icon --> <Moon class="w-7 h-7 swap-off fill-current" />
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="w-7 h-7 swap-off fill-current"
>
<path
fill-rule="evenodd"
d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
clip-rule="evenodd"
/>
</svg>
</label> </label>

View File

@ -1 +1,12 @@
<h1>Home</h1> <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">
nickbland.dev
</h1>
</div>
</div>
</div>

View File

@ -2,6 +2,8 @@
import Divider from "../../components/divider.svelte"; import Divider from "../../components/divider.svelte";
import Countdown from "../../components/countdown.svelte"; import Countdown from "../../components/countdown.svelte";
import TextContent from "../../components/textContent.svelte"; import TextContent from "../../components/textContent.svelte";
import Skills from "../../components/skills.svelte";
import Timeline from "../../components/timeline.svelte";
</script> </script>
<div <div
@ -11,10 +13,10 @@
<div class="hero-content text-left text-accent-content flex-col lg:flex-row"> <div class="hero-content text-left text-accent-content flex-col lg:flex-row">
<div class="skeleton w-48 h-64 shadow-2xl max-w-sm"></div> <div class="skeleton w-48 h-64 shadow-2xl max-w-sm"></div>
<div> <div>
<h1 class="mb-6 text-6xl font-bold"> <h1 class="mb-6 text-6xl font-bold text-wrap text-center text-primary-content">
Hello,<br /> my name is Nick Hello, my name is Nick
</h1> </h1>
<p class="py-5 text-lg max-w-sm"> <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 I am an IT Student at Griffith University with a passion for developing neat
things. things.
</p> </p>
@ -58,4 +60,13 @@
I felt it appropriate to not hem myself in to a single major or minor. I felt it appropriate to not hem myself in to a single major or minor.
</TextContent> </TextContent>
<h1 class="my-6 text-6xl text-center text-base-content font-bold">Skills</h1> <h1 class="my-6 text-6xl p-5 text-center text-base-content font-bold">Skills</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 />

View File

@ -6,7 +6,7 @@ module.exports = {
}, },
plugins: [require("daisyui")], plugins: [require("daisyui")],
daisyui: { daisyui: {
themes: ["night", "acid"], themes: ["night", "winter"],
}, },
darkMode: "selector", darkMode: "selector",
}; };