feat: customized Clarity analytics

app/_page_sections/ContactSection.tsx

@@ -34,17 +34,17 @@ const ContactSection: React.FC = () =>
 					<form className={ cls.container } action={ formAction }>
 						<FormStatusTracker onPendingChanged={ setPending } />
 
-						<input name="email" type="email" { ...sharedProps }
+						<input name="email" type="email" { ...sharedProps } data-clarity-mask
 							autoComplete="email" spellCheck="false"
 							maxLength={ 60 }
 							placeholder="Email" />
 
-						<input name="subject" type="text" { ...sharedProps }
+						<input name="subject" type="text" { ...sharedProps } data-clarity-mask
 							autoComplete="off" spellCheck="true"
 							maxLength={ 120 }
 							placeholder="Subject" />
 
-						<textarea name="message" { ...sharedProps } className={ cls.textarea }
+						<textarea name="message" { ...sharedProps } className={ cls.textarea } data-clarity-mask
 							autoComplete="off" spellCheck="true"
 							minLength={ 100 } maxLength={ 2000 }
 							placeholder="Message (min 100 characters)" />

app/_page_sections/ProjectsSection.tsx

@@ -7,7 +7,7 @@ import projects from "@/_data/projects";
 import shared from "@/_styles/gallery.module.scss";
 import { ArrowRight24Regular } from "@fluentui/react-icons";
 import Image from "next/image";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { networkFor } from "react-social-icons";
 import cls from "./ProjectsSection.module.scss";
 
@@ -15,6 +15,12 @@ const ProjectsSection: React.FC = () =>
 {
 	const [selection, setSelection] = useState<number | undefined>(undefined);
 
+	const select = useCallback((index: number | undefined) =>
+	{
+		setSelection(index);
+		window.clarity?.("set", "checked", "projects");
+	}, []);
+
 	return (
 		<section id="projects" className={ cls.section }>
 			<div className={ shared.list }>
@@ -25,7 +31,7 @@ const ProjectsSection: React.FC = () =>
 						className={ `${shared.listItem} ${cls.listItem}` }
 						appearance={ selection === index ? "primary" : "secondary" }
 						data-selected={ selection === index }
-						onClick={ () => setSelection(selection == index ? undefined : index) }
+						onClick={ () => select(selection == index ? undefined : index) }
 						aria-label={ `"${project.title}". ${project.subtitle}` }>
 
 						<div className={ shared.content }>

app/_page_sections/SkillsSection.tsx

@@ -5,7 +5,7 @@ import skills from "@/_data/skills";
 import shared from "@/_styles/gallery.module.scss";
 import { ArrowDownload24Regular } from "@fluentui/react-icons";
 import Image from "next/image";
-import React, { useId, useState } from "react";
+import React, { useCallback, useId, useState } from "react";
 import cls from "./SkillsSection.module.scss";
 import links from "@/_data/links";
 
@@ -14,6 +14,12 @@ const SkillsSection: React.FC = () =>
 	const [selection, setSelection] = useState<number>(0);
 	const illustrations = useId();
 
+	const select = useCallback((index: number) =>
+	{
+		setSelection(index);
+		window.clarity?.("set", "checked", "skills");
+	}, []);
+
 	return (
 		<section id="skills" className={ cls.section }>
 			<div id={ illustrations } className={ cls.illustrations } aria-live="polite" aria-atomic>
@@ -25,7 +31,13 @@ const SkillsSection: React.FC = () =>
 
 				{ selection === 4 &&
 					// [SPECIAL] It's a surprize tool that will help us later
-					<div role="button" aria-label="Click me" className={ cls.whatsThis } onClick={ () => window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ") } />
+					<div role="button" aria-label="Click me"
+						className={ cls.whatsThis }
+						onClick={ () =>
+						{
+							window.clarity?.("event", "ngguu");
+							window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
+						} } />
 				}
 			</div>
 			<div className={ `${shared.list} ${cls.list}` }>
@@ -35,7 +47,7 @@ const SkillsSection: React.FC = () =>
 					<Button key={ index } type="button" aria-current={ selection === index } aria-controls={ illustrations }
 						className={ shared.listItem } appearance={ selection === index ? "primary" : "secondary" }
 						data-selected={ selection === index }
-						onClick={ () => setSelection(index) }
+						onClick={ () => select(index) }
 						aria-label={ `${skill.title} skills. Associated stack: ${skill.description}` }
 						icon={ <skill.icon /> } >