show skills corresponding to project

Author: HannesGitH

src/lib/components/projects/project.svelte

@@ -2,7 +2,9 @@
 	import type { ProjectData } from "$lib/data/projects";
 	import { hover3dFactory } from "$lib/utils/hooks/transformHover3d";
 
-    import Button, {Label} from '@smui/button'
+    // import Button, {Label} from '@smui/button'
+
+    import { currentlySelectedProjectName } from '$lib/stores/project-skill-relation';
 
 	import { _ } from 'svelte-i18n';
 	import { slide } from "svelte/transition";
@@ -25,7 +27,8 @@
 
     <div 
     class="wrapper" 
-
+    on:mouseenter={()=> currentlySelectedProjectName.set(projectData.name)}
+    on:mouseleave={()=> currentlySelectedProjectName.set(null)}
     use:hover3dFactory(false)
     >
     <div id="previewplaceholder">

src/lib/components/skill.svelte

@@ -3,15 +3,21 @@
 	import type { SkillData } from '$lib/data/skills';
 	import { hover3dFactory } from '$lib/utils/hooks/transformHover3d';
 
+	import { isActive } from '$lib/stores/project-skill-relation';
+
+	$: active = isActive(skill.name);
+
 	export let skill: SkillData;
-	let activated: boolean = false;
+	let _activated: boolean = false;
+	$: activated = _activated || $active;
+
 </script>
 
 <!-- svelte-ignore missing-declaration -->
 <div
 	id="skill"
-	on:mouseenter={(e) => (activated = true)}
-	on:mouseleave={(e) => (activated = false)}
+	on:mouseenter={(e) => (_activated = true)}
+	on:mouseleave={(e) => (_activated = false)}
 	use:hover3dFactory(true)
 	class:activated
 >

src/lib/data/projects.ts

@@ -4,7 +4,8 @@ export interface ProjectData {
 	iconUrl: string;
     previewUrl: string;
 	description: Description;
-    link: string
+    link: string;
+    relevantSkillNames: string[];
 }
 
 
@@ -17,7 +18,8 @@ const passCheck = {
     iconUrl: passCheckIcon,
     previewUrl: passCheckPreview,
     description: passCheckDescriptionComponent,
-    link: 'https://play.google.com/store/apps/details?id=hannepps.tools.passwordchecker'
+    link: 'https://play.google.com/store/apps/details?id=hannepps.tools.passwordchecker',
+    relevantSkillNames: ['Android', 'Svelte', 'Git', 'GitHub', 'VS Code', 'TypeScript', 'Sass'], 
 }
 
 

src/lib/stores/project-skill-relation.ts

@@ -0,0 +1,16 @@
+import shownProjects from "$lib/data/projects";
+import { writable, derived } from "svelte/store";
+import type { Writable, Readable } from "svelte/store";
+
+const currentlySelectedProjectName : Writable<string | null> = writable(null);
+
+const activeSkillNames : Readable<string[]> = derived(currentlySelectedProjectName, ($currentlySelectedProjectName) => {
+    if ($currentlySelectedProjectName === null) return [];
+    const activeProject = shownProjects.find((project) => project.name === $currentlySelectedProjectName);
+    if (activeProject === undefined) return [];
+    return activeProject.relevantSkillNames;
+});
+
+const isActive = (skillName: string) => derived(activeSkillNames, ($activeSkillNames) => $activeSkillNames.includes(skillName));
+
+export { currentlySelectedProjectName, activeSkillNames, isActive };