General updates (#450)

VIKTORVAV99 · Aug 17, 2024 · a6f8d33 · a6f8d33
2 parents 23f000b + 2070675
commit a6f8d33
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 78 deletions.
diff --git a/.github/workflows/CI.yaml b/.github/workflows/CI.yaml
@@ -111,34 +111,34 @@ jobs:
           languages: ${{ matrix.language }}
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v3
-  deploy:
-    name: Deploy to Cloudflare Pages
-    runs-on: ubuntu-latest
-    needs:
-      - build
-      - codeql
-    timeout-minutes: 5
-    permissions:
-      contents: read
-      pages: write
-      id-token: write
-    environment:
-      name: Cloudflare Pages
-      url: ${{ steps.deployment.outputs.url}}
-    steps:
-      - name: Download build artifact
-        uses: actions/download-artifact@v3
-        with:
-          name: build
-          path: .svelte-kit/cloudflare
-      - name: Publish to Cloudflare Pages
-        id: deployment
-        uses: cloudflare/pages-action@v1
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_DEPLOYMENT_KEY }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: portfolio
-          directory: .svelte-kit/cloudflare
-          branch: ${{ github.ref_name}}
-          # Optional: Enable this if you want to have GitHub Deployments triggered
-          gitHubToken: ${{ github.token }}
+  #deploy:
+  #  name: Deploy to Cloudflare Pages
+  #  runs-on: ubuntu-latest
+  #  needs:
+  #    - build
+  #    - codeql
+  #  timeout-minutes: 5
+  #  permissions:
+  #    contents: read
+  #    pages: write
+  #    id-token: write
+  #  environment:
+  #    name: Cloudflare Pages
+  #    url: ${{ steps.deployment.outputs.url}}
+  #  steps:
+  #    - name: Download build artifact
+  #      uses: actions/download-artifact@v3
+  #      with:
+  #        name: build
+  #        path: .svelte-kit/cloudflare
+  #    - name: Publish to Cloudflare Pages
+  #      id: deployment
+  #      uses: cloudflare/pages-action@v1
+  #      with:
+  #        apiToken: ${{ secrets.CLOUDFLARE_DEPLOYMENT_KEY }}
+  #        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+  #        projectName: portfolio
+  #        directory: .svelte-kit/cloudflare
+  #        branch: ${{ github.ref_name}}
+  #        # Optional: Enable this if you want to have GitHub Deployments triggered
+  #        gitHubToken: ${{ github.token }}
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -20,38 +20,38 @@
 		"format:check": "prettier --plugin-search-dir . --check ."
 	},
 	"devDependencies": {
-		"@fortawesome/free-brands-svg-icons": "^6.5.1",
-		"@fortawesome/free-solid-svg-icons": "^6.5.1",
-		"@sveltejs/adapter-cloudflare": "^4.0.2",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/enhanced-img": "^0.1.8",
-		"@sveltejs/kit": "^2.3.5",
-		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@types/bun": "^1.0.4",
+		"@fortawesome/free-brands-svg-icons": "^6.6.0",
+		"@fortawesome/free-solid-svg-icons": "^6.6.0",
+		"@sveltejs/adapter-cloudflare": "^4.7.2",
+		"@sveltejs/adapter-static": "^3.0.4",
+		"@sveltejs/enhanced-img": "^0.1.9",
+		"@sveltejs/kit": "^2.5.22",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@types/bun": "^1.1.6",
 		"@types/serviceworker": "^0.0.82",
-		"@typescript-eslint/eslint-plugin": "^6.19.0",
-		"@typescript-eslint/parser": "^6.19.0",
-		"autoprefixer": "^10.4.17",
-		"cssnano": "^6.0.3",
-		"eslint": "^8.56.0",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
+		"@typescript-eslint/parser": "^6.21.0",
+		"autoprefixer": "^10.4.20",
+		"cssnano": "^6.1.2",
+		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"postcss": "^8.4.33",
-		"prettier": "^3.2.4",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.9",
+		"eslint-plugin-svelte": "^2.43.0",
+		"postcss": "^8.4.41",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^4.2.18",
 		"svelte-awesome": "^3.3.1",
-		"svelte-check": "^3.6.3",
+		"svelte-check": "^3.8.5",
 		"svelte-eslint-parser": "^0.33.1",
-		"tailwindcss": "^3.4.1",
-		"tslib": "^2.6.2",
-		"typescript": "^5.3.3",
-		"vite": "^5.0.11",
+		"tailwindcss": "^3.4.10",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.4",
+		"vite": "^5.4.1",
 		"vite-plugin-tailwind-purgecss": "0.2.0"
 	},
 	"type": "module",
 	"dependencies": {
-		"@skeletonlabs/skeleton": "^2.7.1",
+		"@skeletonlabs/skeleton": "^2.10.2",
 		"@skeletonlabs/tw-plugin": "^0.3.1"
 	},
 	"module": "index.ts"

diff --git a/src/components/IconSet.svelte b/src/components/IconSet.svelte
@@ -21,13 +21,17 @@
 <!--
   @component
   IconSet that contains the social media icons and links them.
-  This component uses flex and flex row to align the icons horizontally.
+  This component uses flex to align the icons horizontally.
   -->
 
-<div class="flex flex-row justify-center items-center">
+<div class="flex justify-center items-center">
 	{#each icons as icon}
 		<a href={icon.url} class="m-3" title={icon.name}>
-			<Icon data={icon.icon} {scale} class="text-token" />
+			<Icon
+				data={icon.icon}
+				{scale}
+				class="text-surface-900-50-token hover:dark:brightness-[1.15] hover:brightness-75"
+			/>
 		</a>
 	{/each}
 </div>
diff --git a/src/components/ProjectPreview.svelte b/src/components/ProjectPreview.svelte
@@ -13,10 +13,10 @@
 	{/if}
 </svelte:head>
 
-<section id={project.id} class="flex flex-col card m-[1vw] variant-glass-primary max-w-[100ch] p-4">
+<section id={project.id} class="flex flex-col w-full card m-[1vw] variant-glass-primary max-w-[100ch] p-4">
 	<div class="flex flex-col md:flex-row">
-		<main class="flex flex-col px-4 order-2 md:order-1">
-			<h3 class="h3 mt-4 font-bold mb-8">
+		<main class="flex flex-col p-4 order-2 md:order-1 gap-4">
+			<h3 class="h3 font-bold">
 				{project.title}
 				{#if project.id == 'portfolio'}<span class="text-primary-800">(this website)</span>{/if}
 			</h3>

diff --git a/src/components/Projects.svelte b/src/components/Projects.svelte
@@ -10,9 +10,9 @@
 </script>
 
 {#each Object.entries(projectsByType) as [type, value]}
-	<section id={type} class="flex flex-col items-center mb-16">
+	<section id={type} class="flex flex-col w-full items-center justify-center mb-16">
 		<h2 class="h2 capitalize font-bold">{type} Projects</h2>
-		<section>
+		<section class="w-full flex flex-col justify-center items-center">
 			{#each value as project}
 				<ProjectPreview {project} />
 			{/each}

diff --git a/src/components/projectComponents/LinkBar.svelte b/src/components/projectComponents/LinkBar.svelte
@@ -4,7 +4,7 @@
 	export let links: Link[];
 </script>
 
-<ul class="flex w-full flex-wrap my-3">
+<ul class="flex w-full flex-wrap">
 	{#each links as link}
 		<li class="inline-flex">
 			<a class="text-sm mr-4 py-1" href={link.url}>{link.title}</a>

diff --git a/src/components/projectComponents/TechnologyBar.svelte b/src/components/projectComponents/TechnologyBar.svelte
@@ -3,7 +3,7 @@
 	export let technologies: ProjectConfig['technologies'];
 </script>
 
-<ul class="flex w-full flex-wrap mt-4">
+<ul class="flex w-full flex-wrap">
 	{#each technologies as technology}
 		{#if technology.preview}
 			<li class="inline-flex">

diff --git a/src/data/projects.json b/src/data/projects.json
@@ -135,7 +135,7 @@
 		"title": "Angular Demo",
 		"id": "angular-demo",
 		"showcase": true,
-		"type": "personal",
+		"type": "educational",
 		"links": [
 			{
 				"title": "GitHub Repository",
@@ -194,11 +194,60 @@
 			}
 		],
 		"preview": {
-			"description": "A simple Angular demo project to showcase the Angular framework and the Angular CLI."
+			"description": "A simple Angular demo project for a school project to showcase the Angular framework and the Angular CLI. "
 		},
 		"details": {
 			"tagline": "Project to showcase the use of Angular and Firebase to build a progressive single page app.",
 			"description": "The project was built with the use of Angular, Angular CLI, Angular Material, Angular Fire and Firebase. It is hosted and deployed on Firebase Hosting using a automated CI/CD pipeline with GitHub Actions to automatically publish the latest changes."
 		}
+	},
+	{
+		"title": "Upland pathfinding bot for Discord",
+		"id": "upland-pathfinding-bot",
+		"showcase": false,
+		"type": "personal",
+		"links": [
+			{
+				"title": "GitHub Repository",
+				"url": "https://github.com/viktorvav99/Upland-Travel-Bot"
+			}
+		],
+		"keywords": ["Upland-Travel-Bot", "Upland", "Bot", "Discord", "TypeScript"],
+		"technologies": [
+			{
+				"name": "Discord.js",
+				"description": "Discord API wrapper used to interact with the Discord API.",
+				"url": "https://discord.js.org/",
+				"preview": true
+			},
+			{
+				"name": "TypeScript",
+				"description": "Superset of JavaScript with strong typing support used to ensure the type safety of the project.",
+				"url": "https://www.typescriptlang.org/",
+				"preview": true
+			},
+			{
+				"name": "Node.js",
+				"description": "JavaScript runtime used to run the bot.",
+				"url": "https://nodejs.org/"
+			},
+			{
+				"name": "Google Cloud",
+				"description": "Cloud service used to host the bot.",
+				"url": "https://cloud.google.com/"
+			},
+			{
+				"name": "GitHub Actions",
+				"description": "CI/CD pipeline used to automatically test and build the project on GitHub Pages when changes are pushed. It employs caching and parallelization to speed up the test and build process.",
+				"url": "https://github.com/features/actions"
+			}
+		],
+		"preview": {
+			"description": "A Discord bot that helps players of the game Upland to find the shortest path between two properties."
+		},
+		"details": {
+			"tagline": "Discord bot that helps players of the game Upland to find the shortest path between two properties.",
+			"description": "The bot was built with the use of Discord.js and TypeScript. It is hosted on Google Cloud and uses a CI pipeline with GitHub Actions to automatically test the latest changes."
+		}
 	}
 ]
diff --git a/src/routes/projects/[slug]/+page.svelte b/src/routes/projects/[slug]/+page.svelte
@@ -13,27 +13,30 @@
 </svelte:head>
 
 <div class="flex justify-center">
-	<section class="card p-8 my-16 variant-glass-primary max-w-[100ch] flex flex-col">
+	<section class="card p-8 my-16 variant-glass-primary max-w-[100ch] flex flex-col gap-4">
 		<h1 class="h1 font-semibold mb-1">{data.project.title}</h1>
 		<Breadcrumb />
-		<hr class="my-4" />
+		<hr />
 		<LinkBar links={data.project.links} />
-		<hr class="my-4" />
+		<hr />
 		<p>
 			{data.project.details.tagline}
 		</p>
-		<hr class="my-4" />
-		<p>
-			{data.project.details.description}
-		</p>
-		<section class="pt-16">
+		<hr />
+		<section class="flex flex-col gap-1">
+			<h3 class="h3">Description</h3>
+			<p>
+				{data.project.details.description}
+			</p>
+		</section>
+		<section class="flex flex-col gap-1">
 			<h3 class="h3">Technologies used in the project</h3>
-			<ul class="list">
+			<ul class="list flex flex-col gap-2">
 				{#each data.project.technologies as technology}
 					<li>
-						<section>
+						<section class="ml-4">
 							<h4 class="h4">{technology.name}</h4>
-							<p>{technology.description}</p>
+							<p class="text-sm">{technology.description}</p>
 						</section>
 					</li>
 				{/each}