chore: updates

src/components/CollapseText.tsx

@@ -10,7 +10,7 @@ export default function CollapseText({ children }: CollapseTextProps) {
   return (
     <div className="relative">
       <div
-        className={`relative flex flex-col gap-4 max-sm:!h-auto md:after:absolute md:after:bottom-0 md:after:h-12 md:after:w-full md:after:bg-gradient-to-t md:after:from-neutral-950 md:after:content-[''] print:!h-auto print:gap-2 print:after:hidden ${
+        className={`relative flex flex-col gap-4 max-sm:!h-auto md:after:absolute md:after:bottom-0 md:after:h-12 md:after:w-full md:after:bg-gradient-to-t md:after:from-neutral-950 md:after:content-[''] ${
           expanded ? "after:hidden" : ""
         }`}
         style={{ maxHeight: expanded ? "none" : "50px", overflow: "hidden" }}
@@ -19,7 +19,7 @@ export default function CollapseText({ children }: CollapseTextProps) {
       </div>
       <button
         onClick={() => setExpanded(!expanded)}
-        className="group/more flex w-fit cursor-pointer items-center justify-center gap-1.5 text-xs text-neutral-400 underline transition-all hover:text-neutral-200 print:hidden"
+        className="group/more flex w-fit cursor-pointer items-center justify-center gap-1.5 text-xs text-neutral-400 underline transition-all hover:text-neutral-200"
       >
         <span>{expanded ? "Show less" : "Show more"}</span>
         <svg

src/components/Section.astro

@@ -2,7 +2,7 @@
 const { className, title } = Astro.props;
 ---
 
-<section class:list={["flex flex-col gap-4 print:gap-2", className]}>
+<section class:list={["flex flex-col gap-4", className]}>
   {
     title && (
       <h2 class="text-sm font-bold uppercase tracking-widest text-neutral-200">

src/components/sections/Awards.astro

@@ -4,7 +4,7 @@ import { awards } from "@cv";
 ---
 
 <Section className={Astro.props.className} title="Awards">
-  <ul class="space-y-4 py-3 print:space-y-0">
+  <ul class="space-y-4 py-3">
     {
       awards.map(({ title, date, awarder, summary }) => {
         return (
@@ -19,7 +19,7 @@ import { awards } from "@cv";
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
-              class="mr-2 hidden h-5 w-5 self-start md:inline-block print:hidden"
+              class="mr-2 hidden h-5 w-5 self-start md:inline-block"
             >
               <circle cx="12" cy="8" r="7" />
               <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
@@ -30,7 +30,7 @@ import { awards } from "@cv";
               </h3>
               <p class="mt-1 text-sm text-neutral-400">{awarder}</p>
               <div
-                class="mt-4 flex flex-col gap-4 text-sm print:gap-0 print:text-xs"
+                class="mt-4 flex flex-col gap-4 text-sm"
                 x-data="{ expanded: false }"
               >
                 {summary && (

src/components/sections/Education.astro

@@ -4,7 +4,7 @@ import { education } from "@cv";
 ---
 
 <Section className={Astro.props.className} title="Education">
-  <ul class="space-y-4 py-3 print:space-y-0">
+  <ul class="space-y-4 py-3">
     {
       education.map(
         ({ institution, startDate, endDate, area, url, summary }) => {
@@ -25,7 +25,7 @@ import { education } from "@cv";
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                class="mr-2 hidden h-5 w-5 self-start md:inline-block print:hidden"
+                class="mr-2 hidden h-5 w-5 self-start md:inline-block"
               >
                 <path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" />
                 <path d="M22 10v6" />
@@ -63,7 +63,7 @@ import { education } from "@cv";
                 </h3>
                 <p class="mt-1 text-sm text-neutral-400">{area}</p>
                 <div
-                  class="mt-4 flex flex-col gap-4 text-sm print:gap-0 print:text-xs"
+                  class="mt-4 flex flex-col gap-4 text-sm"
                   x-data="{ expanded: false }"
                 >
                   {summary && (
@@ -85,7 +85,7 @@ import { education } from "@cv";
               </div>
             </div>
           );
-        },
+        }
       )
     }
   </ul>

src/components/sections/Experience.astro

@@ -24,15 +24,15 @@ import CollapseText from "../CollapseText";
           const endYear = endDate ? new Date(endDate).getFullYear() : "Present";
 
           return (
-            <li class="relative print:py-2">
-              <div class="group relative grid pb-1 transition-all sm:grid-cols-12 sm:gap-8 md:gap-6 lg:hover:!opacity-100 print:grid-cols-1 print:gap-1 print:pb-0">
+            <li class="relative">
+              <div class="group relative grid pb-1 transition-all sm:grid-cols-12 sm:gap-8 md:gap-6 lg:hover:!opacity-100">
                 <header class="relative mt-1 text-xs font-semibold text-neutral-500 sm:col-span-2">
                   <time datetime={startDate}>{startYear}</time>
                   <span class="mx-1">-</span>
                   <time datetime={endDate}>{endYear}</time>
                 </header>
-                <div class="relative flex flex-col pb-6 before:absolute before:-ml-6 before:mt-2 before:h-full before:w-px before:bg-neutral-500 sm:col-span-10 print:pb-0 print:before:hidden">
-                  <div class="absolute mt-2 h-2 w-2 -translate-x-[1.71rem] rounded-full bg-neutral-500 ring ring-neutral-500 print:hidden" />
+                <div class="relative flex flex-col pb-6 before:absolute before:-ml-6 before:mt-2 before:h-full before:w-px before:bg-neutral-500 sm:col-span-10">
+                  <div class="absolute mt-2 h-2 w-2 -translate-x-[1.71rem] rounded-full bg-neutral-500 ring ring-neutral-500" />
                   <h3 class="text-base font-medium leading-snug text-neutral-200">
                     <div class="inline-flex items-center">
                       <span>{position}</span>

src/layouts/Layout.astro

@@ -14,6 +14,12 @@ const { title } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
     <link rel="icon" type="image/x-icon" href="/favicon.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body
     class="relative z-10 bg-neutral-950 leading-relaxed tracking-wide text-neutral-200 antialiased selection:bg-neutral-300 selection:text-neutral-900"

src/pages/about.astro

@@ -22,7 +22,7 @@ import Skills from "@/components/sections/Skills.astro";
       elegant and intuitive interfaces.
     </p>
     <p
-      class="mt-2 text-justify text-sm leading-6 text-neutral-400 sm:mt-4 sm:text-base sm:leading-7 lg:mt-6 lg:text-lg lg:leading-8"
+      class="mb-8 mt-2 text-justify text-sm leading-6 text-neutral-400 sm:mt-4 sm:text-base sm:leading-7 lg:mt-6 lg:text-lg lg:leading-8"
     >
       I place a strong emphasis on creating seamless experiences, robust
       architecture, and high-quality code. Dedicated to continuous learning and
@@ -32,11 +32,9 @@ import Skills from "@/components/sections/Skills.astro";
       meaningful and impactful projects.
     </p>
 
-    <div
-      class="space-y-12 md:col-span-4 print:col-span-1 print:grid print:grid-cols-4 print:gap-2 print:space-y-0"
-    >
-      <Experience className="mt-8 print:col-span-3" />
-      <Skills className="print:hidden" />
+    <div class="space-y-12 md:col-span-4">
+      <Experience />
+      <Skills />
       <Awards className="order-first" />
       <Education className="order-first" />
     </div>

tailwind.config.mjs

@@ -2,7 +2,11 @@
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "sans-serif"],
+      },
+    },
   },
   plugins: [require("@tailwindcss/typography")],
 };