feat: enhance UI components with improved animations, styles, and accessibility features

Author: dkast

src/app/blog/[...slug]/page.tsx

@@ -123,10 +123,10 @@ function Header({
       <div className="space-y-3">
         <div className="text-muted-foreground flex flex-row items-center gap-1 font-mono text-xs font-normal md:text-sm">
           <time>{formattedDate}</time>
-          <div className="flex flex-row items-center gap-1">
+          {/* <div className="flex flex-row items-center gap-1">
             <span>-</span>
             <span className="text-muted-foreground">{author}</span>
-          </div>
+          </div> */}
           <Separator orientation="vertical" className="bg-border mx-2 h-5" />
           <span className="text-primary text-xs font-normal md:text-sm">
             {category}
@@ -141,7 +141,7 @@ function Header({
           )}
         </div>
       </div>
-      <Separator className="bg-border my-10 w-20" />
+      <Separator className="my-10 w-20 bg-transparent" />
     </div>
   )
 }

src/components/hero.tsx

@@ -6,29 +6,33 @@ import { motion, type Variants } from "framer-motion"
 const titleVariants: Variants = {
   visible: {
     opacity: 1,
+    filter: "blur(0px)",
     transition: {
       ease: "easeOut" as const,
       duration: 0.7
     }
   },
   hidden: {
-    opacity: 0
+    opacity: 0,
+    filter: "blur(8px)"
   }
 }
 
 const elVariants: Variants = {
   visible: (i: number) => ({
     opacity: 1,
     y: 0,
+    filter: "blur(0px)",
     transition: {
       ease: "easeOut" as const,
-      delay: i * 0.3,
+      delay: i * 0.2,
       duration: 0.3
     }
   }),
   hidden: {
     opacity: 0,
-    y: 10
+    y: 10,
+    filter: "blur(4px)"
   }
 }
 
@@ -43,16 +47,28 @@ const Hero = () => {
       >
         Hola, soy Daniel Castillejo
       </motion.h1>
-      <div className="text-muted-foreground flex flex-col gap-2 pt-4 text-base">
-        <p className="text-pretty sm:text-balance">
+      <motion.div className="text-secondary-foreground flex flex-col gap-2 pt-4 text-base sm:text-lg">
+        <motion.p
+          initial="hidden"
+          animate="visible"
+          custom={1}
+          variants={elVariants}
+          className="text-pretty sm:text-balance"
+        >
           Soy un ingeniero de software con más de 15 años de experiencia basado
           en México. Actualmente me desempeño como Arquitecto de Soluciones en
           la industria automotriz implementando aplicaciones full-stack.
-        </p>
-        <p className="text-pretty sm:text-balance">
+        </motion.p>
+        <motion.p
+          initial="hidden"
+          animate="visible"
+          custom={2}
+          variants={elVariants}
+          className="text-pretty sm:text-balance"
+        >
           Soy entusiasta del diseño, amante de la música y guitarrista promedio.
-        </p>
-      </div>
+        </motion.p>
+      </motion.div>
     </>
   )
 }

src/components/main-nav.tsx

@@ -45,6 +45,10 @@ const MainNav = () => {
   return (
     <div className="relative z-10 h-20 max-h-20 sm:h-full">
       <GradientBlur className="fixed inset-0 h-20 rotate-180 sm:hidden" />
+      <div
+        aria-hidden="true"
+        className="from-background fixed inset-x-0 top-0 z-[15] h-20 bg-gradient-to-b to-transparent sm:hidden"
+      />
       <div className="transition-disabled fixed z-20 w-full px-6 sm:w-[100px] sm:px-0">
         <div className="flex grow flex-row items-center justify-between gap-10 py-4 sm:h-screen sm:flex-col sm:justify-start sm:gap-20">
           <header>
@@ -59,7 +63,7 @@ const MainNav = () => {
               {/* <span className="hidden font-semibold sm:inline">dkast.dev</span> */}
             </Link>
           </header>
-          <nav className="flex flex-row gap-2 rounded-full bg-white p-1 py-1 shadow sm:flex-col">
+          <nav className="flex flex-row gap-2 rounded-full bg-white/50 p-1 py-1 shadow inset-ring inset-ring-white/60 backdrop-blur sm:flex-col">
             {navItems &&
               navItems.map((navItem, index) => {
                 const selected =

src/components/mdx.tsx

@@ -6,6 +6,35 @@ interface MdxProps {
   code: string
 }
 
+function MdxCode({
+  children,
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLElement>) {
+  // Code blocks (inside <pre>) receive a data-language attribute from rehype-pretty-code
+  if ("data-language" in rest) {
+    return (
+      <code className={className} {...rest}>
+        {children}
+      </code>
+    )
+  }
+
+  return (
+    <code
+      className={[
+        "text-primary rounded-sm bg-white px-1.5 py-1 font-mono text-[0.85em] font-normal inset-ring inset-ring-black/10 before:content-none after:content-none dark:bg-gray-800",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      {...rest}
+    >
+      {children}
+    </code>
+  )
+}
+
 function MdxImage(
   props: DetailedHTMLProps<
     ImgHTMLAttributes<HTMLImageElement>,
@@ -42,8 +71,8 @@ function MdxImage(
 
 const Mdx = ({ code }: MdxProps) => {
   return (
-    <div className="prose prose-neutral lg:prose lg:prose-neutral prose-headings:font-display prose-headings:font-normal prose-headings:text-muted-foreground prose-h2:text-xl prose-a:decoration-primary prose-pre:-mx-6 prose-pre:overflow-x-auto prose-pre:rounded-none prose-pre:bg-gray-800 md:prose-pre:mx-0 md:prose-pre:rounded-lg max-w-none sm:px-0">
-      <MDXContent code={code} components={{ img: MdxImage }} />
+    <div className="prose prose-neutral prose-headings:font-display prose-headings:font-normal prose-headings:text-secondary-foreground prose-h2:text-xl prose-a:decoration-primary prose-pre:-mx-6 prose-pre:overflow-x-auto prose-pre:rounded-none prose-pre:bg-gray-800 md:prose-pre:mx-0 md:prose-pre:rounded-lg max-w-none sm:px-0">
+      <MDXContent code={code} components={{ img: MdxImage, code: MdxCode }} />
     </div>
   )
 }

src/components/post-card.tsx

@@ -1,19 +1,25 @@
 import React from "react"
+import type { Post } from "content-collections"
 import { Link } from "next-view-transitions"
 
 import { formatDate } from "@/lib/utils"
-import type { Post } from "content-collections"
 
 interface PostCardProps {
   post: Post
 }
 
 const PostCard = ({ post }: PostCardProps) => {
+  const formattedDate = new Intl.DateTimeFormat("es-MX", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }).format(new Date(post?.date))
+
   return (
     <article className="flex gap-4">
       <div className="min-w-[80px] text-right">
         <span className="text-muted-foreground font-mono text-xs leading-7 font-light sm:text-sm">
-          {formatDate(post.date)}
+          {formattedDate}
         </span>
       </div>
       <div>

src/components/project-card.tsx

@@ -16,6 +16,7 @@ type ProjectCardProps = {
   stack?: string[]
   className?: string
   href: string
+  index?: number
 }
 
 const ProjectCard = ({
@@ -24,11 +25,18 @@ const ProjectCard = ({
   children,
   stack,
   className,
-  href
+  href,
+  index = 0
 }: ProjectCardProps) => {
   const domain = new URL(href)
   return (
-    <motion.div className="rounded-2xl bg-zinc-200/40 p-1">
+    <motion.div
+      initial={{ opacity: 0, y: 16 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-50px" }}
+      transition={{ ease: "easeOut", duration: 0.4, delay: index * 0.1 }}
+      className="rounded-2xl bg-white p-1 shadow inset-ring shadow-black/5 inset-ring-black/10"
+    >
       <div
         className={cn(
           "relative grid h-[220px] grid-cols-1 gap-2 overflow-hidden rounded-xl border border-white/5 p-4",

styles/globals.css

@@ -59,6 +59,10 @@
   html {
     @apply font-sans;
   }
+
+  em {
+    @apply font-display italic;
+  }
 }
 
 @utility border {
@@ -164,9 +168,9 @@
   --primary: oklch(64.6% 0.222 41.116);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --secondary-foreground: oklch(37.15% 0.00004 271.152);
   --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
+  --muted-foreground: oklch(55.167% 0.01387 285.878);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);