Implement testimonials

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

package.json

@@ -46,6 +46,7 @@
     "zod": "3.23.8"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "3.2.0",
     "@types/jest": "29.5.14",
     "@types/mdx": "2.0.13",
     "@types/node": "22.9.0",

src/app/blog/(posts)/blog-redesign/page.mdx

@@ -26,7 +26,7 @@ A powerful way of conveying your message—whatever that might be—is to make s
 
 ## Technologies
 
-Technology *needs* to serve a purpose. Sometimes—most times, let's be honest—we web developers focus too much on the technologies and frameworks we use. We should talk about them, be proud of what we use, and maybe even poke fun at others' choices, but only to a *certain* extent. Here, I'm mentioning some of the technologies I've used, what I've learned from them, and how they've empowered me to focus on what really matters: **the message**.
+Technology _needs_ to serve a purpose. Sometimes—most times, let's be honest—we web developers focus too much on the technologies and frameworks we use. We should talk about them, be proud of what we use, and maybe even poke fun at others' choices, but only to a _certain_ extent. Here, I'm mentioning some of the technologies I've used, what I've learned from them, and how they've empowered me to focus on what really matters: **the message**.
 
 - <Link to="https://nextjs.org/">
     <AccentText>Next.js</AccentText>
@@ -59,7 +59,7 @@ When using a starter, what I do is generate the template in a temporary folder a
 
 I also configured the project as I usually do, with [Prettier](https://prettier.io/), [ESLint](https://eslint.org/), [Husky](https://typicode.github.io/husky/), and [Lint Staged](https://github.com/lint-staged/lint-staged). How I configure the projects I work on could definitely be another post at some point.
 
-I made a conscious—perhaps also debatable—choice not to delve too deep into **best practices**, **testing**, and **architecture**. _Why_? Because I want to create a blog series where I can improve the codebase bit by *byte*. But hey, it's not like I coded the *thing* with my eyes closed (which could be an interesting challenge, to be honest). You can check the source code [here](https://github.com/cesalberca/blog/tree/6037908cf67122706665b3d8c00590bd0a5f5040) at the time of publishing this post. I think it's pretty neat.
+I made a conscious—perhaps also debatable—choice not to delve too deep into **best practices**, **testing**, and **architecture**. _Why_? Because I want to create a blog series where I can improve the codebase bit by _byte_. But hey, it's not like I coded the _thing_ with my eyes closed (which could be an interesting challenge, to be honest). You can check the source code [here](https://github.com/cesalberca/blog/tree/6037908cf67122706665b3d8c00590bd0a5f5040) at the time of publishing this post. I think it's pretty neat.
 
 What I decided to focus on instead was creating a clean design with a big focus on content and some subtle animations that would make the site b·e·a·u·t·i·f·u·l. Here are some:
 
@@ -91,14 +91,15 @@ What I decided to focus on instead was creating a clean design with a big focus
       </AccentCard>
 
     </div>
+
   </div>
 </div>
 
-I'm always on the lookout for inspiration. Seeing how others have tackled similar problems reassures me that I'm not alone in my quest for *my solution*. Some great places I <del>stole ideas from</del> looked for inspiration were [Codrops](https://tympanus.net/codrops/) and [Awwwards](https://www.awwwards.com/).
+I'm always on the lookout for inspiration. Seeing how others have tackled similar problems reassures me that I'm not alone in my quest for _my solution_. Some great places I <del>stole ideas from</del> looked for inspiration were [Codrops](https://tympanus.net/codrops/) and [Awwwards](https://www.awwwards.com/).
 
 ## MDX
 
-As you can see, all the components I'm developing for the website can be reused in blog posts, and that's thanks to [MDX](https://mdxjs.com/). MDX is like Markdown on Kombucha (meaning *super powerful*). Why? Because in **MDX, you can import React components**, which is a crazy thing to do.
+As you can see, all the components I'm developing for the website can be reused in blog posts, and that's thanks to [MDX](https://mdxjs.com/). MDX is like Markdown on Kombucha (meaning _super powerful_). Why? Because in **MDX, you can import React components**, which is a crazy thing to do.
 
 ```mdx
 **Foo**
@@ -122,7 +123,7 @@ Which will render this:
 
 Cool, right?
 
-Next.js comes with support for MDX using some extra libraries. I started configuring the project following the [Next.js MDX guide](https://nextjs.org/docs/pages/building-your-application/configuring/mdx), which at some point suggests using [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote). I found it a little cumbersome and noticed that it provided some functionality I don't really need (*YAGNI*).
+Next.js comes with support for MDX using some extra libraries. I started configuring the project following the [Next.js MDX guide](https://nextjs.org/docs/pages/building-your-application/configuring/mdx), which at some point suggests using [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote). I found it a little cumbersome and noticed that it provided some functionality I don't really need (_YAGNI_).
 
 After searching for simpler solutions, I stumbled upon [this fantastic post](https://www.alexchantastic.com/building-a-blog-with-next-and-mdx), which showed how to simplify the setup using just [next-mdx](https://www.npmjs.com/package/@next/mdx).
 
@@ -316,7 +317,7 @@ This removes the need of adding `front-matter` and a subsequent parser. **Simple
 
 ## TaildwindCSS
 
-In case you missed it, there's some code that might initially look **aberrant**. If so, it's because you haven't tried *yet* [TailwindCSS](https://tailwindcss.com/):
+In case you missed it, there's some code that might initially look **aberrant**. If so, it's because you haven't tried _yet_ [TailwindCSS](https://tailwindcss.com/):
 
 ```tsx
 <code {...props} className={cn(className, 'bg-muted px-[4px] py-[2px] mx-[2px] rounded not-prose text-base font-mono')}>
@@ -394,7 +395,7 @@ export default config
 
 ## ShadcnUI
 
-ShadcnUI introduces a concept that might initially make us shudder in fear: copying and pasting code. It does this by generating code for your components. But why would I want that? Well, it serves as a base for lightweight components, and from there, I can customize them as much as I want. The code is *mine* after all.
+ShadcnUI introduces a concept that might initially make us shudder in fear: copying and pasting code. It does this by generating code for your components. But why would I want that? Well, it serves as a base for lightweight components, and from there, I can customize them as much as I want. The code is _mine_ after all.
 
 Whenever I need a new component, I head [over to their documentation](https://ui.shadcn.com/docs) and find the component I need. Then, I generate it using the CLI:
 

src/app/blog/(posts)/create-angular-17-project/page.mdx

@@ -27,9 +27,9 @@ With the SSR option enabled, Angular will create two execution environments: cli
 
 If we examine the project structure, we will see that it has created a series of configuration files for both the client and server parts. Here's a summary:
 
-*	main.ts ➜ main.server.ts
-*	app.config.ts ➜ app.config.server.ts
-*	server.ts (Server-only file)
+- main.ts ➜ main.server.ts
+- app.config.ts ➜ app.config.server.ts
+- server.ts (Server-only file)
 
 ### `server.ts`
 

src/app/blog/_drafts/2024-a-review-of-a-transformative-year/page.mdx

@@ -21,7 +21,7 @@ A raíz de la baja comencé a documentar mis dolores. Leyendo mis diarios y nota
 
 Tenía que adentrarme en la desesperación y en el sentirme acorralado por mis achaques para que mi **motivación fuese inquebrantable**. Siempre he sido una persona (pro)activa, que lucha incesantemente y es que esa lucha continua era parte del problema. Necesitaba dejar ir. Y no era una rendición, si no aceptación.
 
-Así que sin saber qué construir decidé reconstruirme. Gimnasio, natación, escalada, calistenia y pilates fueron las herramientas que elegí. Empecé con peso muerto. 60 Kg estremecían y llevaban a mis músculos al límite. Y luego fueron 80 kg, 100 kg, 120 kg y...  150 kg, el doble de mi peso corporal. La medicación recetada por mi reumatólogo para aumentar mi serotonina decidí complementarla con meditaciones diarias. Unos 20-40 minutos, usando Headspace. A día de hoy llevo más de 80 horas totales meditando.
+Así que sin saber qué construir decidé reconstruirme. Gimnasio, natación, escalada, calistenia y pilates fueron las herramientas que elegí. Empecé con peso muerto. 60 Kg estremecían y llevaban a mis músculos al límite. Y luego fueron 80 kg, 100 kg, 120 kg y... 150 kg, el doble de mi peso corporal. La medicación recetada por mi reumatólogo para aumentar mi serotonina decidí complementarla con meditaciones diarias. Unos 20-40 minutos, usando Headspace. A día de hoy llevo más de 80 horas totales meditando.
 
 Hallé una nueva psicóloga con la que he estado y estoy trabajando un montón de heridas emocionales que de alguna forma afectan a mis dolores físicos. Aunque no he bebido nunca mucho empecé a sustituirlo por agua con gas. Intenté mejorar mi alimentación, aunque no ha sido a finales de 2024 donde ya he refinado mucho más mi nutrición. Daba paseos diarios, tomando el sol e intentando practicar mindfulness. No todos los días hacía todo. Algún día fallaba, pero nunca nunca podía fallar dos días seguidos. Y... empecé a ver cambios. Mi mente no parecía tan nublada, empecé a conectar con emociones las cuales eran muy ajenas a mí, como la rabia o la tristeza, ya que llevaba muchos años disociado. Empecé a cambiar el debo por el quiero. Empecé a priorizarme. En estos primeros meses de 2024 tomé dos decisiones: debía cortar con mi actual pareja y dejar la empresa para la que había trabajado 7 años como desarrollador de Software. Dos decisiones que me costaron mucho ya que han constituido una parte esencial de quien soy como persona.
 
@@ -64,12 +64,7 @@ En el coliving creé contenido y aproveché a practicar asiduamente con la nueva
 
 Volví a Madrid. Escalé. Escalé. Escalé. ¡Mi primer 7A!
 
-
-
-
-
-
-
+¿Y cómo me encuentro? Bien. No es un bien desde no sé cómo me encuentro o un bien desde la disociación. O desde está el perdido. O desde el querer enmascarar el dolor para no hacer sufrir de forma innecesaria a quien pregunte.
 
 export default function Page({ children }) {
   return <PostLayout slug="2024-a-review-of-a-transformative-year">{children}</PostLayout>

src/app/globals.css

@@ -81,6 +81,7 @@ html {
   h6 {
     @apply leading-tight;
     font-family: var(--font-azeret-mono);
+    scroll-margin-top: 5rem;
   }
 
   h1 {

src/app/talks/(talks)/advanced-javascript-patterns/page.mdx

@@ -1,50 +1,47 @@
 import Layout from '../../mdx-layout'
 
 export const metadata = {
-  title: "Advanced JavaScript Patterns",
+  title: 'Advanced JavaScript Patterns',
   length: 45,
-  slug: "advanced-javascript-patterns",
-  difficulty: "Advanced",
-  image: "advanced-javascript-patterns.png",
-  categories: [
-    "software-development",
-    "javascript"
-  ],
+  slug: 'advanced-javascript-patterns',
+  difficulty: 'Advanced',
+  image: 'advanced-javascript-patterns.png',
+  categories: ['software-development', 'javascript'],
   events: [
     {
-      name: "JSDay Madrid",
-      date: "2018-10-20",
-      slides: "https://drive.google.com/open?id=15tLH3xBpZbwHlhRGtiygc0x9NRaxNlPWhqghw5iNu4U",
-      code: "https://github.com/cesalberca/advanced-javascript-patterns/tree/2018-jsday-madrid",
-      video: "https://www.youtube.com/watch?v=aNf1Oos0ZB8"
+      name: 'JSDay Madrid',
+      date: '2018-10-20',
+      slides: 'https://drive.google.com/open?id=15tLH3xBpZbwHlhRGtiygc0x9NRaxNlPWhqghw5iNu4U',
+      code: 'https://github.com/cesalberca/advanced-javascript-patterns/tree/2018-jsday-madrid',
+      video: 'https://www.youtube.com/watch?v=aNf1Oos0ZB8',
     },
     {
-      name: "JSDay Canarias",
-      date: "2019-11-10",
-      slides: "https://drive.google.com/open?id=1Eoa1EVelW11x5Es7Ru0tnmWdzfQOAlEWz07TK1qLh_o",
-      code: "https://github.com/cesalberca/advanced-javascript-patterns/tree/2019-jsday-canarias",
-      video: "https://youtu.be/3nPPRvRcoo0"
+      name: 'JSDay Canarias',
+      date: '2019-11-10',
+      slides: 'https://drive.google.com/open?id=1Eoa1EVelW11x5Es7Ru0tnmWdzfQOAlEWz07TK1qLh_o',
+      code: 'https://github.com/cesalberca/advanced-javascript-patterns/tree/2019-jsday-canarias',
+      video: 'https://youtu.be/3nPPRvRcoo0',
     },
     {
-      name: "Codenares",
-      date: "2019-03-19",
-      slides: "https://drive.google.com/open?id=1LEWc3ErrzjaN3nzlsMtGVx1QKGsc8G2mgw-qP-WZhJo",
-      code: "https://github.com/cesalberca/advanced-javascript-patterns/tree/2019-codenares",
-      video: "https://youtu.be/MuCgyOTXIRU"
+      name: 'Codenares',
+      date: '2019-03-19',
+      slides: 'https://drive.google.com/open?id=1LEWc3ErrzjaN3nzlsMtGVx1QKGsc8G2mgw-qP-WZhJo',
+      code: 'https://github.com/cesalberca/advanced-javascript-patterns/tree/2019-codenares',
+      video: 'https://youtu.be/MuCgyOTXIRU',
     },
     {
-      name: "OS Weekends",
-      date: "2019-12-13",
-      slides: "https://docs.google.com/presentation/d/1D0Xe0Ch5eGcy-CDLwxpW_QwoDX6-mGxjprWmQ_EkH5c/edit?usp=sharing",
-      code: "https://github.com/cesalberca/advanced-javascript-patterns/tree/2019-osweekends"
+      name: 'OS Weekends',
+      date: '2019-12-13',
+      slides: 'https://docs.google.com/presentation/d/1D0Xe0Ch5eGcy-CDLwxpW_QwoDX6-mGxjprWmQ_EkH5c/edit?usp=sharing',
+      code: 'https://github.com/cesalberca/advanced-javascript-patterns/tree/2019-osweekends',
     },
     {
-      name: "Codemotion Meetup",
-      date: "2020-02-25",
-      slides: "https://docs.google.com/presentation/d/1htHNH9BfNdXmSn88eJNrLzeys6Het9i6EUqBn-v_01U/edit?usp=sharing",
-      code: "https://github.com/cesalberca/advanced-javascript-patterns/tree/2020-codemotion-meetup-madrid"
-    }
-  ]
+      name: 'Codemotion Meetup',
+      date: '2020-02-25',
+      slides: 'https://docs.google.com/presentation/d/1htHNH9BfNdXmSn88eJNrLzeys6Het9i6EUqBn-v_01U/edit?usp=sharing',
+      code: 'https://github.com/cesalberca/advanced-javascript-patterns/tree/2020-codemotion-meetup-madrid',
+    },
+  ],
 }
 
 When you tell people you code in JavaScript they usually look down on you. This talk will give you the tools to enlighten those heretics. We'll be entering the world of **design patterns** applied to JavaScript, looking through some of the cutting edge properties of ES6 such as **Proxies** and **default function parameter expressions**, dealing with **objects** and even some examples of **functional programming**. This talk is not allowed for cardiacs.

src/components/ui/avatar.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }