changes

app/[lang]/assets/index.ts

@@ -1 +1 @@
-export * from './svgs'
+export * from './svgs/media'

app/[lang]/assets/svgs/media/index.ts

@@ -0,0 +1,3 @@
+export * from './linkedin-icon'
+export * from './fiverr-icon'
+export * from './udemy-icon'

app/[lang]/assets/svgs/linkedinIcon.tsx → app/[lang]/assets/svgs/media/linkedin-icon.tsx

@@ -17,9 +17,9 @@ export default function LinkedinIcon(props: SVGProps<SVGSVGElement>) {
       <g fill="currentColor">
         <path
           fill="currentColor"
-          fill-rule="evenodd"
+          fillRule="evenodd"
           d="M1 2.838A1.838 1.838 0 0 1 2.838 1H21.16A1.837 1.837 0 0 1 23 2.838V21.16A1.838 1.838 0 0 1 21.161 23H2.838A1.838 1.838 0 0 1 1 21.161V2.838Zm8.708 6.55h2.979v1.496c.43-.86 1.53-1.634 3.183-1.634c3.169 0 3.92 1.713 3.92 4.856v5.822h-3.207v-5.106c0-1.79-.43-2.8-1.522-2.8c-1.515 0-2.145 1.089-2.145 2.8v5.106H9.708V9.388Zm-5.5 10.403h3.208V9.25H4.208v10.54ZM7.875 5.812a2.063 2.063 0 1 1-4.125 0a2.063 2.063 0 0 1 4.125 0Z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         />
       </g>
     </svg>

app/[lang]/components/marquee.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@/util/classNames";
+
+interface MarqueeProps {
+  className?: string;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+  children?: React.ReactNode;
+  vertical?: boolean;
+  repeat?: number;
+  [key: string]: any;
+}
+
+export default function Marquee({
+  className,
+  reverse,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ...props
+}: MarqueeProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]',
+        {
+          'flex-row': !vertical,
+          'flex-col': vertical,
+        },
+        className
+      )}
+    >
+      {Array(repeat)
+        .fill(0)
+        .map((_, i) => (
+          <div
+            key={i}
+            className={cn('flex shrink-0 justify-around [gap:var(--gap)]', {
+              'animate-marquee flex-row': !vertical,
+              'animate-marquee-vertical flex-col': vertical,
+              'group-hover:[animation-play-state:paused]': pauseOnHover,
+              '[animation-direction:reverse]': reverse,
+            })}
+          >
+            {children}
+          </div>
+        ))}
+    </div>
+  );
+}

app/[lang]/resume/page.tsx

@@ -1,8 +1,8 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import profile from '../../../public/images/me.jpg';
-import FiverrIcon from '../assets/svgs/fiverrIcon';
-import LinkedinIcon from '../assets/svgs/linkedinIcon';
+import FiverrIcon from '../assets/svgs/media/fiverr-icon';
+import LinkedinIcon from '../assets/svgs/media/linkedin-icon';
 import { calSans } from '@/app/fonts';
 import { getTranslation } from '@/get-translation';
 import { Navigation } from '../components/navigation';
@@ -11,7 +11,7 @@ import { LangParams } from '@/interfaces';
 import { experience } from '@/constants/experience';
 import { certifications } from '@/constants/certifications';
 import { BorderBeam } from '../components/borderBeam';
-import UdemyIcon from '../assets/svgs/udemyIcon';
+import UdemyIcon from '../assets/svgs/media/udemy-icon';
 
 export default async function ResumePage({ params: { lang } }: LangParams) {
   const t = await getTranslation(lang);
@@ -39,21 +39,21 @@ export default async function ResumePage({ params: { lang } }: LangParams) {
             <article className="flex items-center gap-2">
               <Link
                 href="https://github.com/Santipac"
-                className="inline-flex items-center w-fit px-2 py-1  hover:text-neutral-300 transition-colors duration-300 gap-2 rounded group text-sm"
+                className="inline-flex items-center w-fit px-2 py-1  text-neutral-400 hover:text-neutral-300 transition-colors duration-300 gap-2 rounded group text-sm"
               >
                 <Github className="h-7 w-7 m-0 p-0" />
                 Github
               </Link>
               <Link
                 href="https://www.linkedin.com/in/santiagopacinidev/"
-                className="inline-flex items-center w-fit px-2 py-1  hover:text-blue-400 transition-colors duration-300 gap-2 rounded group text-sm"
+                className="inline-flex items-center w-fit px-2 py-1  text-neutral-400 hover:text-blue-400 transition-colors duration-300 gap-2 rounded group text-sm"
               >
                 <LinkedinIcon className="h-7 w-7 m-0 p-0" />
                 Linkedin
               </Link>
               <Link
                 href="https://www.fiverr.com/santipac"
-                className="inline-flex items-center w-fit px-2 py-1  hover:text-emerald-400 transition-colors duration-300 gap-2 rounded group text-sm"
+                className="inline-flex items-center w-fit px-2 py-1 text-neutral-400  hover:text-emerald-400 transition-colors duration-300 gap-2 rounded group text-sm"
               >
                 <FiverrIcon className="h-7 w-7 m-0 p-0" />
                 Fiverr
@@ -77,6 +77,7 @@ export default async function ResumePage({ params: { lang } }: LangParams) {
               </p>
             </section>
           </article>
+
           {/* Certifications */}
           <article className="flex flex-col lg:flex-row w-full gap-2">
             <section className="w-full lg:w-1/5">
@@ -92,7 +93,7 @@ export default async function ResumePage({ params: { lang } }: LangParams) {
                   </span>
                   <Link
                     href={cert.link}
-                    className="relative border border-neutral-800 bg-neutral-900 p-4 flex flex-col rounded-xl w-full gap-3 shadow-md hover:border-neutral-600 transition-colors duration-300"
+                    className="relative border border-neutral-800 bg-neutral-900 p-4 flex flex-col rounded-xl w-full gap-3 shadow-md hover:border-neutral-600 transition-colors duration-300 overflow-hidden"
                     target="_blank"
                   >
                     <BorderBeam colorFrom="#171717" colorTo="#f4f4f5" />

tailwind.config.js

@@ -91,13 +91,23 @@ module.exports = {
           "radial-gradient(50% 50% at 50% 50%, var(--tw-gradient-stops))",
       },
       animation: {
+        marquee: "marquee var(--duration) linear infinite",
+        "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
         "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
         "fade-in": "fade-in 3s ease-in-out forwards",
         title: "title 3s ease-out forwards",
         "fade-left": "fade-left 3s ease-in-out forwards",
         "fade-right": "fade-right 3s ease-in-out forwards",
       },
       keyframes: {
+        marquee: {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(calc(-100% - var(--gap)))" },
+        },
+        "marquee-vertical": {
+          from: { transform: "translateY(0)" },
+          to: { transform: "translateY(calc(-100% - var(--gap)))" },
+        },
         "border-beam": {
           "100%": {
             "offset-distance": "100%",

translations/en.json

@@ -5,7 +5,7 @@
     "experience": "Experience",
     "projects": "Projects",
     "services": "Services",
-    "skills": "Skills",
+    "stack": "Stack",
     "certifications": "Certifications"
   },
   "home": {
@@ -15,7 +15,7 @@
     "title": "About me",
     "profession": "Frontend Developer",
     "imageAlt": "Picture of Santiago",
-    "firstParagraph": "I'm a frontend developer with +2 years of experience dedicated to helping different companies achieve their goals through the building or improvement of applications/websites. I've extensive knowledge of the React ecosystem on the client side.",
+    "firstParagraph": "I'm a frontend developer with +2 years of experience helping different companies achieve their goals through the building or improvement of applications/websites. I've extensive knowledge of the React ecosystem on the client side.",
     "secondParagraph": "I can also create highly scalable and robust backend applications using technologies like NodeJS or NestJS."
   },
   "experience": {

translations/es.json

@@ -5,7 +5,7 @@
     "experience": "Experiencia",
     "projects": "Proyectos",
     "services": "Servicios",
-    "skills": "Habilidades",
+    "stack": "Stack",
     "certifications": "Certificaciones"
   },
   "home": {
@@ -15,7 +15,7 @@
     "title": "Sobre mi",
     "profession": "Desarrollador Frontend",
     "imageAlt": "Foto de Santiago",
-    "firstParagraph": "Soy un desarrollador frontend con +2 años de experiencia dedicados para ayudar a diferentes empresas a lograr sus objetivos a través de la construcción o mejora de aplicaciones / sitios webs. Tengo un amplio conocimiento en el ecosistema de React en el lado del cliente. ",
+    "firstParagraph": "Soy un desarrollador frontend con +2 años de experiencia dedicados ayudando a empresas a lograr sus objetivos a través de la construcción o mejora de aplicaciones / sitios webs. Tengo un amplio conocimiento en el ecosistema de React en el lado del cliente. ",
     "secondParagraph": "También puedo crear aplicaciones backend altamente escalables y robutas utilizando tecnologías como NodeJS o NestJS."
   },
   "experience": {