screen height

packages/react-cv/src/pdf-utils.ts

@@ -30,7 +30,7 @@ export function registerFonts(assetPath: string) {
 		family: "Brands",
 		fonts: [
 			{
-				src: path.resolve(assetPath, "fonts/brands.ttf"),
+				src: path.resolve(assetPath, "fonts/brands.otf"),
 			},
 		],
 	});

src/pages/_cmp/skill-icon.astro

@@ -1,13 +1,15 @@
 ---
 import { Icon } from "astro-icon/components";
 import type { dataTransform } from "../../lib/cv";
+import { twMerge } from "tailwind-merge";
 
 export interface Props {
 	skill: ReturnType<typeof dataTransform>[number]["keywords"][number];
+	containerClass?: string;
 	className?: string;
 }
 
-const { skill, className } = Astro.props as Props;
+const { skill, containerClass, className } = Astro.props as Props;
 
 const icon = (() => {
 	if (skill.name === "Go") return "tabler:brand-golang";
@@ -26,7 +28,15 @@ const icon = (() => {
 })();
 ---
 
-<div class={icon && className}>
-	{icon && <Icon class="hover:text-white" title={skill.name} name={icon} />}
+<div class={icon && containerClass}>
+	{
+		icon && (
+			<Icon
+				class={twMerge("hover:text-white", className)}
+				title={skill.name}
+				name={icon}
+			/>
+		)
+	}
 	<span class="sr-only">{skill.name}</span>
 </div>

src/pages/_cmp/skill-overview.astro

@@ -28,18 +28,22 @@ const { dt } = Astro.props;
 			<ul
 				id={skill.id}
 				class={twMerge(
-					"hidden flex-wrap justify-center gap-x-2 gap-y-4 mt-8",
+					"hidden flex-wrap justify-center gap-x-4 gap-y-4 mt-8",
 					`target:flex`
 				)}
 			>
 				{skill.keywords.map((k) => (
 					<li
-						title={`${k.score}`}
 						class={twMerge(
-							"flex flex-row items-center md:text-xl px-3 py-1 rounded-full bg-sky-100 text-sky-800"
+							"relative flex flex-row items-center md:text-lg px-3 py-1 rounded-full bg-sky-100 text-sky-800"
 						)}
 					>
 						<SkillIcon className="mr-2" skill={k} /> {k.name}
+						{k.score > 1 && (
+							<div class="z-10 drop-shadow-md bg-pink-600 text-white font-bold rounded-full text-xs -bottom-2 -right-2 absolute px-2">
+								{`${k.score} years`}
+							</div>
+						)}
 					</li>
 				))}
 			</ul>

src/pages/landing.astro

@@ -15,7 +15,7 @@ const dt = dataTransform(cv.skills, cv.work);
 	coverImage="./static/img/wave.svg"
 >
 	<div
-		class="flex flex-col h-screen font-sans overflow-hidden bg-gradient-to-b from-andri to-black text-white"
+		class="flex flex-col h-dvh font-sans overflow-hidden bg-gradient-to-b from-andri to-black text-white"
 	>
 		<div class="absolute inset-0 overflow-hidden pointer-events-none">
 			{