Adjust colouring of timeline Details

Also move from using GitLab -> Gitea to reflect changes made on the server

package.json

@@ -12,32 +12,33 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@eslint/js": "^9.0.0",
+    "@eslint/js": "^9.12.0",
-    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/adapter-cloudflare": "^4.4.0",
+    "@sveltejs/adapter-cloudflare": "^4.7.3",
-    "@sveltejs/kit": "^2.5.6",
+    "@sveltejs/kit": "^2.7.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
-    "daisyui": "latest",
+    "daisyui": "^4.12.13",
-    "eslint": "^9.0.0",
+    "eslint": "^9.12.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.37.0",
+    "eslint-plugin-svelte": "^2.44.1",
-    "globals": "^15.0.0",
+    "globals": "^15.11.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.47",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.3",
+    "prettier-plugin-svelte": "^3.2.7",
-    "svelte": "^4.2.15",
+    "svelte": "^4.2.19",
-    "svelte-check": "^3.6.9",
+    "svelte-check": "^4.0.5",
-    "svelte-eslint-parser": "^0.34.1",
+    "svelte-eslint-parser": "^0.41.1",
-    "svelte-preprocess": "^5.1.4",
+    "svelte-preprocess": "^6.0.3",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.13",
-    "tslib": "^2.6.2",
+    "tslib": "^2.7.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
-    "typescript-eslint": "^7.7.0",
+    "typescript-eslint": "^8.9.0",
-    "vite": "^5.2.9"
+    "vite": "^5.4.9"
   },
   "type": "module",
   "dependencies": {
-    "lucide-svelte": "^0.372.0"
+    "caniuse-lite": "",
+    "lucide-svelte": "^0.453.0"
   }
 }

src/lib/components/footer.svelte

@@ -1,8 +1,3 @@
-<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>
@@ -19,15 +14,35 @@
         role="button"
         class="btn btn-ghost hover:shadow-lg"
         aria-label="Find me at my GitHub"
-        href="https://github.com/NickBland"><Github /></a
+        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="GitLab">
+    <div class="tooltip" data-tip="Gitea">
       <a
         role="button"
         class="btn btn-ghost hover:shadow-lg"
-        aria-label="Find me at my GitLab"
+        aria-label="Find me at my Gitea"
-        href="https://git.nickbland.dev/NickBland"><Gitlab /></a
+        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>

src/lib/components/navbar/navbar.svelte

@@ -1,37 +1,11 @@
 <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>

src/lib/components/navbar/themeController.svelte

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

src/lib/components/portfolio/timeline.svelte

@@ -5,8 +5,10 @@
 <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-middle"><Circle class="fill-neutral" /></div>
-    <div class="timeline-end timeline-box bg-base-300 mb-10 max-w-3xl shadow-lg">
+    <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>
@@ -41,12 +43,14 @@
         </li>
       </ul>
     </div>
-    <hr />
+    <hr class="bg-neutral-content" />
   </li>
   <li>
-    <hr />
+    <hr class="bg-neutral-content" />
-    <div class="timeline-middle"><Circle class="fill-base-300" /></div>
+    <div class="timeline-middle"><Circle class="fill-neutral" /></div>
-    <div class="timeline-start timeline-box bg-base-300 mb-10 max-w-3xl shadow-lg">
+    <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>
@@ -81,12 +85,14 @@
         </li>
       </ul>
     </div>
-    <hr />
+    <hr class="bg-neutral-content" />
   </li>
   <li>
-    <hr />
+    <hr class="bg-neutral-content" />
-    <div class="timeline-middle"><Circle class="fill-base-300" /></div>
+    <div class="timeline-middle"><Circle class="fill-neutral" /></div>
-    <div class="timeline-end timeline-box bg-base-300 max-w-3xl shadow-lg">
+    <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>

src/routes/+page.svelte

@@ -102,7 +102,7 @@
   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
+    href="https://git.nickbland.dev">Gitea instance here</a
   >
   or my <a class="link" href="https://github.com/NickBland">GitHub here</a>.
 </TextContent>

tailwind.config.js

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