auto intendation

app/page.tsx

@@ -14,28 +14,40 @@ const BLUR_FADE_DELAY = 0.01;
 export default function Page() {
   const posts = getSortedPostsData().slice(0, 6);
   return (
-    <main className="flex flex-col min-h-[100dvh] space-y-10">
+    <main className="flex flex-col min-h-[100dvh] space-y-12">
       <section id="hero">
-        <div className="mx-auto w-full max-w-2xl space-y-8">
-          <div className="flex flex-col sm:flex-row items-center sm:items-start sm:justify-between gap-4">
+        <div className="mx-auto w-full max-w-2xl">
+          <div className="flex flex-col sm:flex-row items-center sm:items-start sm:justify-between">
             <div className="flex-col flex flex-1 space-y-1.5 items-center sm:items-start">
-              <TextAnimate delay={BLUR_FADE_DELAY} className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-center sm:text-left">
+              <TextAnimate
+                delay={BLUR_FADE_DELAY}
+                className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-center sm:text-left">
                 {`Hi, I'm ${DATA.name.split(" ")[0]}`}
               </TextAnimate>
-              <TextAnimate className="max-w-[400px] md:text-xl text-center sm:text-left" delay={BLUR_FADE_DELAY}>
+              <TextAnimate
+                className="max-w-[400px] md:text-xl text-center sm:text-left"
+                delay={BLUR_FADE_DELAY}>
                 AI Consultant & Researcher with a PhD in Computer Science.
               </TextAnimate>
             </div>
-            <div className="flex flex-col items-center gap-y-2">
+            <div className="flex flex-col items-center gap-y-4">
               <BlurFade delay={BLUR_FADE_DELAY}>
                 <Avatar className="size-28 border">
-                  <AvatarImage alt={DATA.name} src={DATA.avatarUrl} fetchPriority="high" />
+                  <AvatarImage
+                    alt={DATA.name}
+                    src={DATA.avatarUrl}
+                    fetchPriority="high"
+                  />
                   <AvatarFallback>{DATA.initials}</AvatarFallback>
                 </Avatar>
               </BlurFade>
               <BlurFade delay={BLUR_FADE_DELAY * 2}>
-                <TrackedLink href="/illium_cv_censored.pdf" eventName="cv-download" className="w-full" download>
-                  <Badge className="flex gap-2 px-3 py-1 text-sm shadow-sm transition-all duration-300 ease-out hover:shadow-lg dark:shadow-[var(--shadow-glow)] dark:hover:shadow-[var(--shadow-glow-hover)]">
+                <TrackedLink
+                  href="/illium_cv_censored.pdf"
+                  eventName="cv-download"
+                  className="w-full"
+                  download>
+                  <Badge className="flex px-3 py-1 text-sm shadow-sm transition-all duration-300 ease-out hover:shadow-lg dark:shadow-[var(--shadow-glow)] dark:hover:shadow-[var(--shadow-glow-hover)]">
                     Download CV
                   </Badge>
                 </TrackedLink>
@@ -48,10 +60,10 @@ export default function Page() {
         <BlurFade delay={BLUR_FADE_DELAY * 3}>
           <h2 className="text-xl font-bold">About</h2>
         </BlurFade>
-        <BlurFade delay={BLUR_FADE_DELAY * 4} className="prose max-w-full text-pretty font-sans text-sm text-muted-foreground dark:prose-invert">
-          <Markdown >
-            {DATA.summary}
-          </Markdown>
+        <BlurFade
+          delay={BLUR_FADE_DELAY * 4}
+          className="prose max-w-full text-pretty font-sans text-sm text-muted-foreground dark:prose-invert">
+          <Markdown>{DATA.summary}</Markdown>
         </BlurFade>
       </section>
       <section id="projects">
@@ -66,7 +78,8 @@ export default function Page() {
                   Check out my latest work
                 </h2>
                 <p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
-                  I&apos;ve worked on a variety of projects, from scientific research to managing projects. Here are a few of my latest.
+                  I&apos;ve worked on a variety of projects, from scientific
+                  research to managing projects. Here are a few of my latest.
                 </p>
               </div>
             </div>
@@ -75,23 +88,22 @@ export default function Page() {
             {posts
               .filter((post) => post.title)
               .map((post, id) => (
-              <BlurFade
-                key={post.title}
-                delay={BLUR_FADE_DELAY * 12 + id * 0.05}
-              >
-                <ProjectCard
-                  href={post.href}
+                <BlurFade
                   key={post.title}
-                  title={post.title!}
-                  description={post.excerpt || ""}
-                  dates={post.date}
-                  tags={post.tags}
-                  image={post.image || ""}
-                  video={post.video}
-                  links={[]}
-                />
-              </BlurFade>
-            ))}
+                  delay={BLUR_FADE_DELAY * 12 + id * 0.05}>
+                  <ProjectCard
+                    href={post.href}
+                    key={post.title}
+                    title={post.title!}
+                    description={post.excerpt || ""}
+                    dates={post.date}
+                    tags={post.tags}
+                    image={post.image || ""}
+                    video={post.video}
+                    links={[]}
+                  />
+                </BlurFade>
+              ))}
           </div>
         </div>
       </section>
@@ -108,7 +120,9 @@ export default function Page() {
                 </BlurFade>
                 <div className="flex flex-wrap gap-1">
                   {skills.map((skill, id) => (
-                    <BlurFade key={skill} delay={BLUR_FADE_DELAY * 10 + id * 0.05}>
+                    <BlurFade
+                      key={skill}
+                      delay={BLUR_FADE_DELAY * 10 + id * 0.05}>
                       <Badge key={skill}>{skill}</Badge>
                     </BlurFade>
                   ))}
@@ -126,8 +140,7 @@ export default function Page() {
           {DATA.work.map((work, id) => (
             <BlurFade
               key={work.company}
-              delay={BLUR_FADE_DELAY * 8 + id * 0.05}
-            >
+              delay={BLUR_FADE_DELAY * 8 + id * 0.05}>
               <ResumeCard
                 key={work.company}
                 href={work.href}
@@ -149,8 +162,7 @@ export default function Page() {
           {DATA.education.map((education, id) => (
             <BlurFade
               key={education.school}
-              delay={BLUR_FADE_DELAY * 8 + id * 0.05}
-            >
+              delay={BLUR_FADE_DELAY * 8 + id * 0.05}>
               <ResumeCard
                 key={education.school}
                 href={education.href}
@@ -166,23 +178,31 @@ export default function Page() {
       </section>
       <section id="contact">
         <div className="grid items-center justify-center gap-4 px-4 text-center md:px-6 w-full py-12">
-            <BlurFade delay={BLUR_FADE_DELAY * 16}>
-                <div className="space-y-3">
-                    <div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm">
-                        Contact
-                    </div>
-                    <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Get in Touch</h2>
-                    <p className="mx-auto max-w-[800px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
-                        Want to collaborate or have a question?<br/>I&apos;d love to hear from you.
-                    </p>
-                </div>
-            </BlurFade>
+          <BlurFade delay={BLUR_FADE_DELAY * 16}>
+            <div className="space-y-3">
+              <div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm">
+                Contact
+              </div>
+              <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
+                Get in Touch
+              </h2>
+              <p className="mx-auto max-w-[800px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+                Want to collaborate or have a question?
+                <br />
+                I&apos;d love to hear from you.
+              </p>
+            </div>
+          </BlurFade>
           <BlurFade delay={BLUR_FADE_DELAY * 18}>
-            <div className="flex flex-wrap gap-2 justify-center">              
+            <div className="flex flex-wrap gap-2 justify-center">
               {Object.entries(DATA.contact.social)
                 //.filter(([_, social]) => !social.pub)
                 .map(([name, social]) => (
-                  <TrackedLink href={social.url} key={name} className="group" eventName={`${name}-social`}>
+                  <TrackedLink
+                    href={social.url}
+                    key={name}
+                    className="group"
+                    eventName={`${name}-social`}>
                     <Badge className="cards flex gap-2 px-3 py-1 text-sm">
                       <social.icon className="size-4" />
                       {name}

components/card-research.tsx

@@ -1,10 +1,6 @@
 "use client";
 
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import { ChevronRightIcon } from "lucide-react";
 import Image from "next/image";
@@ -35,7 +31,9 @@ export function ResearchCard({
   className,
 }: Props) {
   return (
-    <Link href={href} className={cn("block rounded-xl h-full cards", className)}>
+    <Link
+      href={href}
+      className={cn("block rounded-xl h-full cards", className)}>
       <Card className="py-2 px-0 group flex h-full flex-col overflow-hidden border transition-shadow duration-300 ease-out hover:shadow-lg">
         {video && (
           <video
@@ -66,18 +64,18 @@ export function ResearchCard({
               <ChevronRightIcon className="size-4 shrink-0 translate-x-0 transform opacity-0 transition-all duration-300 ease-out group-hover:translate-x-1 group-hover:opacity-100" />
             </CardTitle>
             <div className="flex items-center gap-x-2 text-xs text-muted-foreground mt-1">
-              {venue && <span className="font-semibold text-primary">{venue}</span>}
+              {venue && (
+                <span className="font-semibold text-primary">{venue}</span>
+              )}
               {venue && <span>•</span>}
               <time>{dates}</time>
             </div>
             <div className="prose max-w-full text-pretty font-sans text-xs text-muted-foreground dark:prose-invert">
-              <Markdown>
-                {description}
-              </Markdown>
+              <Markdown>{description}</Markdown>
             </div>
           </div>
         </CardHeader>
       </Card>
     </Link>
   );
-}
+}

components/providers.tsx

@@ -9,12 +9,9 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider attribute="class" defaultTheme="light">
-      {/* MotionConfig is the key fix for the animation issues */}
       <MotionConfig reducedMotion="user">
-        <TooltipProvider delayDuration={0}>
-            {children}
-        </TooltipProvider>
+        <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
       </MotionConfig>
     </ThemeProvider>
   );
-}
+}