MInor changes and 🍩

Author: PacifiK2460

next.config.js

@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    i18n: {
+        locales: ["en", "es"],
+        defaultLocale: "en",
+        localeDetection: false
+    }
+}
 
 module.exports = nextConfig

src/app/page.tsx

@@ -9,9 +9,11 @@ import { Button } from "@/components/ui/button";
 import { RESUME_DATA } from "@/data/resume-data";
 import { ProjectCard } from "@/components/project-card";
 
+import Donut from "@/components/donut";
+
 export const metadata: Metadata = {
   title: `${RESUME_DATA.name} | ${RESUME_DATA.about}`,
-  description: RESUME_DATA.summary,
+  description: RESUME_DATA.summary["en"],
 };
 
 export default function Page() {
@@ -22,7 +24,7 @@ export default function Page() {
           <div className="flex-1 space-y-1.5">
             <h1 className="text-2xl font-bold">{RESUME_DATA.name}</h1>
             <p className="max-w-md text-pretty font-mono text-sm text-muted-foreground print:text-[12px]">
-              {RESUME_DATA.about}
+              {RESUME_DATA.about["en"]}
             </p>
             <p className="max-w-md items-center text-pretty font-mono text-xs text-muted-foreground">
               <a
@@ -95,16 +97,16 @@ export default function Page() {
         <Section>
           <h2 className="text-xl font-bold">About</h2>
           <p className="text-pretty font-mono text-sm text-muted-foreground print:text-[12px]">
-            {RESUME_DATA.summary}
+            {RESUME_DATA.summary["en"]}
           </p>
         </Section>
         <Section>
           <h2 className="text-xl font-bold">Competitions</h2>
           <div className="flex flex-wrap gap-1">
             {RESUME_DATA.competitions.map((skill) => {
               return (
-                <Badge className="print:text-[10px]" key={skill}>
-                  {skill}
+                <Badge className="print:text-[10px]" key={skill["en"]}>
+                  {skill["en"]}
                 </Badge>
               );
             })}
@@ -202,6 +204,12 @@ export default function Page() {
             })}
           </div>
         </Section>
+        <div className="w-full flex items-center justify-center print:hidden">
+          <Donut 
+            frameInterval={32}
+            scaleX={2}
+          />
+        </div>
       </section>
 
       <CommandMenu

src/components/command-menu.tsx

@@ -35,9 +35,9 @@ export const CommandMenu = ({ links }: Props) => {
 
   return (
     <>
-      <p className="fixed bottom-0 left-0 right-0 hidden border-t border-t-muted bg-white p-1 text-center text-sm text-muted-foreground print:hidden xl:block">
+      <p className="fixed bottom-0 left-0 right-0 hidden border-t border-t-muted backdrop-blur-3xl bg-black/10 p-1 text-center text-sm text-muted-foreground print:hidden xl:block">
         Press{" "}
-        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+        <kbd className="pointer-events-none inline-flex h-7 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
           <span className="text-xs">⌘</span>J
         </kbd>{" "}
         to open the command menu

src/components/donut.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import donutFrames from './donutFrames';
+
+const Donut = ({
+    scaleX = 1,
+    scaleY = 1,
+    color = "#000",
+    fontSize = 8,
+    frameInterval = 100
+}) => {
+    const [currentFrame, setCurrentFrame] = useState(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCurrentFrame((currentFrame + 1) % donutFrames.length);
+        }, frameInterval);
+
+        return () => clearInterval(interval); // Clear interval on unmount
+    }, [currentFrame]);
+
+    const donutStyle = {
+        transform: `scale(${scaleX}, ${scaleY})`,
+        color: color,
+        fontSize: fontSize
+    };
+
+    return (
+        <div className="donut-container">
+            <pre className="donut" style={{
+                fontFamily: "Courier New, Courier, monospace",
+                whiteSpace: "pre",
+                ...donutStyle
+            }}>
+                {donutFrames[currentFrame]}
+            </pre>
+        </div>
+    );
+};
+
+export default Donut;

src/components/donutFrames.tsx

@@ -25,10 +25,17 @@ const _RESUME_DATA = {
   initials: "SL",
   location: "San Luis Potosí, México",
   locationLink: "https://www.google.com/maps/place/san-luis-potosi",
-  about:
-    "Retired competitive programmer. Full Stack Developer. Keen on attention to details.",
-  summary:
-    "Experienced in Linux, NextJS (Typescript), Python, C, and I am always eager to learn new skills and explore new domains. I love to solve problems and help others with my coding abilities, which helps me ensure the quality and accuracy of my work. I am looking for opportunities to collaborate with other passionate developers and create innovative and impactful solutions.",
+  about: {
+    en: "Retired competitive programmer. Full Stack Developer. Keen on attention to details.",
+    es: "Programador competitivo retirado. Desarrollador Full Stack. Detallista.",
+  },
+
+  summary: {
+    en:
+      "Experienced in Linux, NextJS (Typescript), Python, C, and I am always eager to learn new skills and explore new domains. I love to solve problems and help others with my coding abilities, which helps me ensure the quality and accuracy of my work. I am looking for opportunities to collaborate with other passionate developers and create innovative and impactful solutions.",
+    es:
+      "Experiencia en Linux, NextJS (Typescript), Python, C, y siempre estoy ansioso por aprender nuevas habilidades y explorar nuevos dominios. Me encanta resolver problemas y ayudar a otros con mis habilidades de codificación, lo que me ayuda a garantizar la calidad y precisión de mi trabajo. Estoy buscando oportunidades para colaborar con otros desarrolladores apasionados y crear soluciones innovadoras e impactantes.",
+  },
   avatarUrl: "https://avatars.githubusercontent.com/u/42554588?v=4",
   personalWebsiteUrl: "https://santiago-lara.dev",
   contact: {
@@ -53,8 +60,18 @@ const _RESUME_DATA = {
     ],
   },
   competitions: [
-    "International Olympiad in Informatics",
-    "Mexican Informatics Olympiad",
+    {
+      en:
+        "International Olympiad in Informatics",
+      es:
+        "Olimpiada Internacional de Informática",
+    },
+    {
+      en:
+        "Mexican Informatics Olympiad",
+      es:
+        "Olimpiada Mexicana de Informática",
+    }
   ],
   education: [
     {