diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..de0cf91
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,12 @@
+# Set default behavior for all files
+* text=auto
+
+# Force specific file types to use LF
+*.js text eol=lf
+*.html text eol=lf
+*.css text eol=lf
+*.md text eol=lf
+
+# Mark binary files that shouldn't be modified
+*.png binary
+*.jpg binary
\ No newline at end of file
diff --git a/README.md b/README.md
index afed902..3695211 100644
--- a/README.md
+++ b/README.md
@@ -1,63 +1,63 @@
-<div align="center">
-  <h1>🖥️ - Claudio Coder Blog - 📱</h1>
-</div>
-
-![landing](./resources/LandingHomePage.png)
-
-[![UI-claudio-coder page](https://github.com/claudiocoder/claudio_coder_page/actions/workflows/ui.yml/badge.svg?branch=main)](https://github.com/claudiocoder/claudio_coder_page/actions/workflows/ui.yml) ![Vercel Deploy](https://deploy-badge.vercel.app/vercel/claudio-coder-page-9jtcve6fo-claudiocoders-projects?style=plastic&name=UI)
-
-
-## Description
-Claudio Coder Personal Blog is a personal blog platform where I share my thoughts, experiences, and knowledge about coding, technology, and software development. This project aims to provide insightful content for developers of all levels, offering tutorials, code snippets, and articles on various tech topics.
-
-## Main Features
-- **Responsive Design**: Accessible on all devices, ensuring a great reading experience on desktops, tablets, and mobile phones.
-- **Syntax Highlighting**: Enhanced code readability with syntax highlighting for various programming languages.
-- **SEO Optimized**: Improved search engine visibility for better reach.
-
-## Technologies Used
-- **Frontend**: Next.js
-- **Backend**: Node.js
-- **Styling**: Tailwind
-- **Deployment**: Vercel
-
-
-## Installation
-1. Clone the repository:
-    ```sh
-    git clone https://github.com/claudiocoder/claudio_coder_page.git
-    cd claudio-coder-page
-    ```
-2. Install dependencies:
-    ```sh
-    npm install
-    ```
-3. Start the application:
-    ```sh
-    npm run dev
-    ```
-5. Visit `http://localhost:3000` in your browser to see the blog in action.
-
-## Usage
-Once installed, you can use the following commands:
-- **Start Development Server**:
-    ```sh
-    npm run dev
-    ```
-- **Build for Production**:
-    ```sh
-    npm run build
-    ```
-- **Run Tests**:
-    ```sh
-    npm test
-    ```
-
-## Contribution
-Contributions are welcome! Please follow these steps:
-1. Fork the project.
-2. Create a new branch (`git checkout -b feature/YourFeature`).
-3. Make your changes.
-4. Commit your changes (`git commit -m 'Add some feature'`).
-5. Push to the branch (`git push origin feature/YourFeature`).
+<div align="center">
+  <h1>🖥️ - Claudio Coder Blog - 📱</h1>
+</div>
+
+![landing](./resources/LandingHomePage.png)
+
+[![UI-claudio-coder page](https://github.com/claudiocoder/claudio_coder_page/actions/workflows/ui.yml/badge.svg?branch=main)](https://github.com/claudiocoder/claudio_coder_page/actions/workflows/ui.yml) ![Vercel Deploy](https://deploy-badge.vercel.app/vercel/claudio-coder-page-9jtcve6fo-claudiocoders-projects?style=plastic&name=UI)
+
+
+## Description
+Claudio Coder Personal Blog is a personal blog platform where I share my thoughts, experiences, and knowledge about coding, technology, and software development. This project aims to provide insightful content for developers of all levels, offering tutorials, code snippets, and articles on various tech topics.
+
+## Main Features
+- **Responsive Design**: Accessible on all devices, ensuring a great reading experience on desktops, tablets, and mobile phones.
+- **Syntax Highlighting**: Enhanced code readability with syntax highlighting for various programming languages.
+- **SEO Optimized**: Improved search engine visibility for better reach.
+
+## Technologies Used
+- **Frontend**: Next.js
+- **Backend**: Node.js
+- **Styling**: Tailwind
+- **Deployment**: Vercel
+
+
+## Installation
+1. Clone the repository:
+    ```sh
+    git clone https://github.com/claudiocoder/claudio_coder_page.git
+    cd claudio-coder-page
+    ```
+2. Install dependencies:
+    ```sh
+    npm install
+    ```
+3. Start the application:
+    ```sh
+    npm run dev
+    ```
+5. Visit `http://localhost:3000` in your browser to see the blog in action.
+
+## Usage
+Once installed, you can use the following commands:
+- **Start Development Server**:
+    ```sh
+    npm run dev
+    ```
+- **Build for Production**:
+    ```sh
+    npm run build
+    ```
+- **Run Tests**:
+    ```sh
+    npm test
+    ```
+
+## Contribution
+Contributions are welcome! Please follow these steps:
+1. Fork the project.
+2. Create a new branch (`git checkout -b feature/YourFeature`).
+3. Make your changes.
+4. Commit your changes (`git commit -m 'Add some feature'`).
+5. Push to the branch (`git push origin feature/YourFeature`).
 6. Open a Pull Request.
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2366de2..e6bf43d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,7 +16,7 @@ const Home = async () => {
     <>
       <div className='sm:m-8 mx-4 my-2'>
         <h1 className='mb-6 sm:mb-8 text-3xl font-black'>Blog</h1>
-        <div className='flex flex-wrap gap-5 m-auto'>
+        <div className='flex flex-wrap gap-5 justify-center mx-auto lg:justify-start'>
           {posts.map((post, idx) => (
             <PostCard key={idx} {...post} />
           ))}
diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx
index f565b12..587fce9 100644
--- a/src/components/PostCard.tsx
+++ b/src/components/PostCard.tsx
@@ -3,32 +3,38 @@ import Image from 'next/image'
 import { format, parseISO } from 'date-fns'
 import { _roboto } from '@/lib/utils/fonts'
 import { Blog } from '@/lib/models/Blog'
+import { heightCard, widthCard } from '@/constants'
 
 const PostCard = (post: Blog) => {
   return (
-    <div className='w-[100%] md:w-[80%] lg:w-[60%] shadow-[0_5px_15px_rgba(0,0,0,0.35)] rounded-md flex items-center bg-slate-50 rounded-l-lg max-h-[180px]'>
-      <div className='rounded-l-lg'>
-        <Image
-          width={180}
-          height={150}
-          src={post.thumbnailUrl as string}
-          alt={post.title as string}
-          className='rounded-l-lg'
-        />
-      </div>
-      <div className='flex flex-col items-start justify-between px-3 w-full h-full'>
-        <h2
-          className={`${_roboto.className} my-5 text-base sm:text-xl font-bold w-full text-left`}
-        >
-          <Link href={post.slug as string}>{post.title as string}</Link>
-        </h2>
-        <time
-          dateTime={post.date as string}
-          className='mb-2 block text-xs w-full text-gray-600 text-right'
-        >
-          {format(parseISO(post.date as string), 'MMMM dd, yyyy')}
-        </time>
-      </div>
+    <div className='flex flex-col bg-white shadow-sm border border-slate-200 rounded-lg my-6 w-80 lg:w-96'>
+      <Link
+        href={post.slug as string}
+        aria-label={`Read more about ${post.title}`}
+      >
+        <div className='m-2.5 overflow-hidden rounded-md flex justify-center items-center'>
+          <Image
+            width={widthCard}
+            height={heightCard}
+            src={post.thumbnailUrl as string}
+            className='w-full h-full object-cover'
+            alt={post.title as string}
+          />
+        </div>
+        <div className='p-6 flex flex-col justify-between'>
+          <h4
+            className={`${_roboto.className} mb-1 text-xl font-semibold text-slate-800 text-left`}
+          >
+            {post.title as string}
+          </h4>
+          <time
+            className='w-full text-base text-slate-600 mt-4 font-light text-right'
+            dateTime={post.date as string}
+          >
+            {format(parseISO(post.date as string), 'MMMM dd, yyyy')}
+          </time>
+        </div>
+      </Link>
     </div>
   )
 }
diff --git a/src/components/SocialNetworkContainer.tsx b/src/components/SocialNetworkContainer.tsx
index b9fe7e1..b857b42 100644
--- a/src/components/SocialNetworkContainer.tsx
+++ b/src/components/SocialNetworkContainer.tsx
@@ -10,41 +10,25 @@ import Link from 'next/link'
 const SocialNetwork = () => {
   return (
     <div className='flex items-center justify-around w-full'>
-      <Link
-        href='https://twitter.com/claudio_coder'
-        target='_blank'
-        legacyBehavior
-      >
+      <Link href='https://twitter.com/claudio_coder' target='_blank'>
         <FontAwesomeIcon
           className='text-3xl text-black-500 cursor-pointer'
           icon={faXTwitter}
         />
       </Link>
-      <Link
-        href='https://github.com/claudiocoder'
-        target='_blank'
-        legacyBehavior
-      >
+      <Link href='https://github.com/claudiocoder' target='_blank'>
         <FontAwesomeIcon
           className='text-3xl text-gray-800 cursor-pointer'
           icon={faGithub}
         />
       </Link>
-      <Link
-        href='https://www.linkedin.com/in/cmorenomx'
-        target='_blank'
-        legacyBehavior
-      >
+      <Link href='https://www.linkedin.com/in/cmorenomx' target='_blank'>
         <FontAwesomeIcon
           className='text-3xl text-blue-800 cursor-pointer'
           icon={faLinkedin}
         />
       </Link>
-      <Link
-        href='https://www.twitch.tv/claudio_coder'
-        target='_blank'
-        legacyBehavior
-      >
+      <Link href='https://www.twitch.tv/claudio_coder' target='_blank'>
         <FontAwesomeIcon
           className='text-3xl text-purple-800 cursor-pointer'
           icon={faTwitch}
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 0000000..9996599
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,2 @@
+export const widthCard: number = 280
+export const heightCard: number = 280
diff --git a/src/content/blog/resources_developers.mdx b/src/content/blog/resources_developers.mdx
index d833032..b325426 100644
--- a/src/content/blog/resources_developers.mdx
+++ b/src/content/blog/resources_developers.mdx
@@ -1,113 +1,113 @@
----
-title: Mis 5 Sitios Favoritos para Aprender Programación
-date: 2023-12-12
-description: Mis 5 Sitios Favoritos para Aprender Programación
-thumbnailUrl: /blog/developer.jpg
-author: claudio_coder
----
-
-![](/blog/apps.png 'Image generated by OpenAI DALL-E')
-
-<div className='text-xs text-center w-full mx-auto text-gray-600 italic'>
-  <span>Image created with OpenAI</span>
-</div>
-<br />
-<br />
-# [Codecademy](https://www.codecademy.com/) 
-> Gratis y versión de pago | Inglés
-<br />
-Codecademy fue el primer sitio web donde empecé a aprender a programar. Te enseña
-a programar de forma interactiva, con ejercicios donde tendrás que cumplir retos
-para poder avanzar al siguiente tema, ofrece cursos de **HTML & CSS (Básico e Intermedio),
-Javascript, Python, Ruby, PHP, Java, SQL, Bash/Shell, Swift, C++, R, C#, Go, Kotlin,
-y Sass** y todos los años agregan nuevos temas a su catálogo. Ofrece una versión
-gratis y una versión de pago, la versión gratis te permite acceder a todos los cursos,
-pero no te permite acceder a los proyectos de certificación. En lo personal, nunca
-he necesitado pagar la versión de pago para aprender un tema, pero si eres un nuevo
-programador y quieres mejorar tu portafolio, la versión de pago te ayudaría a crear
-proyectos que puedas mostrar a tus futuros empleadores. Una ventaja de Codecademy
-es que al terminar cada curso te da un certificado de finalización.
-<br />
-![](/blog/codecademy.png 'https://www.codecademy.com/')
-<br />
-<br />
-
-# [Frontend Masters](https://frontendmasters.com/)
-
-> Versión de pago | Inglés
-
-<br />
-Frontend Masters es la plataforma que actualmente utilizo para mantenerme actualizado
-en mi carrera profesional y una de mis favoritas en los últimos meses. Dentro de
-su catálogo ofrece cursos de programación enfocada en el desarrollo web Frontend,
-que abarca temas desde los básicos de **HTML, CSS y JavaScript** hasta conceptos
-más avanzados como **React, Vue, Angular, Astro, Remix, GraphQL, entre otros,** además
-también podrás encontrar cursos de Backend con **NodeJS, Python, PHP y hasta cursos
-de diseño UI/UX.** Todos los cursos son impartidos por expertos de la industria que
-trabajan en empresas como **Netflix, Google, Stripe.** Uno de mis cursos favoritos
-es el de Qwik, impartido por su creador, Misko Hevery. A pesar de que los cursos
-se imparten en inglés, son muy visuales y fáciles de entender, incluso con un nivel
-básico o intermedio de inglés. Una de las razones por las que recomiendo Frontend
-Masters es que sus cursos son breves y concisos, lo que te permite aplicar rápidamente
-lo aprendido en tus proyectos profesionales al finalizarlos.
-<br />
-![](/blog/frontendmasters.jpg 'https://frontendmasters.com/')
-<br />
-<br />
-
-# [Código Facilito](https://codigofacilito.com/)
-
-> Versión de pago, pero con cursos gratis, ofrece bootcamps y certificaciones | Español
-
-<br />
-Código Facilito fue una de las primeras plataformas de educación en línea en español
-que conocí. Gracias a CodigoFacilito, elegi mi carrera profesional como Frontend
-Developer. Iniciaron como un canal de YouTube donde subían tutoriales de programación,
-y ahora son una **plataforma de educación en línea con cursos frontend, backend,
-Mobile y diseño**. Código Facilito es ideal para aquellos que quieren aprender desde
-cero e ir avanzando hasta un nivel intermedio, suficiente para poder trabajar como
-desarrollador junior. Durante todo el año, ofrecen bootcamps de diferentes temas
-que podrás tomar haciendo un mínimo pago. Al finalizar el bootcamp, obtendrás un
-certificado de finalización. Excelente si lo que quieres en aprender o reforzar temas
-específicos de programación.
-<br />
-![](/blog/codigo_facilito.jpg 'https://codigofacilito.com/')
-<br /> <br />
-
-# [Platzi](https://platzi.com/)
-
-> Versión de pago, pero con cursos gratis | Español
-
-<br />
-Platzi es una de las plataformas de educación en línea más populares en Latinoamérica.
-En Platzi, no solo encontrarás cursos de programación, sino también de negocios,
-marketing, diseño, entre otros. Personalmente, he tomado varios cursos de programación
-en Platzi y me han parecido muy buenos. Una de las cosas que más me gusta de Platzi
-es que en la mayoría de sus cursos, irás construyendo un proyecto al mismo tiempo
-que aprendes la tecnología. Al finalizar, tendrás un proyecto básico que podrás mostrar
-en tu portafolio y mejorar con los cursos siguientes que tomes. Al completar cada
-curso, tendrás que realizar un examen para obtener tu certificado de finalización.
-Esto es muy útil para reforzar los conocimientos aprendidos, y si no pasas el examen,
-puedes volver a revisar los temas que aprendiste e intentarlo cuantas veces sea necesario.
-Personalmente, he tomado **cursos de Inglés, React, JavaScript, Blockchain y diseño**,
-y todos son muy completos y fáciles de entender.
-<br />
-![](/blog/platzi.jpg 'https://codigofacilito.com/')
-<br />
-<br />
-# [Treehouse](https://teamtreehouse.com/) 
-> Versión de pago | Inglés
-<br />
-Treehouse es una plataforma de educación en línea que ofrece cursos de
-programación y diseño. Aunque no he utilizado la plataforma por mucho tiempo, he
-disfrutado mucho del contenido de sus cursos. Treehouse ofrece trayectorias de
-carrera ya predefinidas; lo único que debes hacer es elegir el área en la que te
-quieres especializar, y ellos te darán el orden para tomar los cursos. Lo que
-más me gusta de Treehouse es la calidad de sus cursos: son muy completos y
-fáciles de entender, además de contar con una excelente edición. Treehouse
-cuenta con una versión de pago llamada Techdegree, que te brinda acceso a
-proyectos de certificación y asesoría personalizada durante todo tu proceso de
-aprendizaje. **Si no tienes idea por dónde empezar en el mundo de la
-programación, Treehouse es una excelente opción para dar tus primeros pasos.**
-<br />
-![](/blog/treehouse.png 'https://codigofacilito.com/')
+---
+title: Mis 5 Sitios Favoritos para Aprender Programación
+date: 2023-12-12
+description: Mis 5 Sitios Favoritos para Aprender Programación
+thumbnailUrl: /blog/developer.jpg
+author: claudio_coder
+---
+
+![](/blog/apps.png 'Image generated by OpenAI DALL-E')
+
+<div className='text-xs text-center w-full mx-auto text-gray-600 italic'>
+  <span>Image created with OpenAI</span>
+</div>
+<br />
+<br />
+# [Codecademy](https://www.codecademy.com/) 
+> Gratis y versión de pago | Inglés
+<br />
+Codecademy fue el primer sitio web donde empecé a aprender a programar. Te enseña
+a programar de forma interactiva, con ejercicios donde tendrás que cumplir retos
+para poder avanzar al siguiente tema, ofrece cursos de **HTML & CSS (Básico e Intermedio),
+Javascript, Python, Ruby, PHP, Java, SQL, Bash/Shell, Swift, C++, R, C#, Go, Kotlin,
+y Sass** y todos los años agregan nuevos temas a su catálogo. Ofrece una versión
+gratis y una versión de pago, la versión gratis te permite acceder a todos los cursos,
+pero no te permite acceder a los proyectos de certificación. En lo personal, nunca
+he necesitado pagar la versión de pago para aprender un tema, pero si eres un nuevo
+programador y quieres mejorar tu portafolio, la versión de pago te ayudaría a crear
+proyectos que puedas mostrar a tus futuros empleadores. Una ventaja de Codecademy
+es que al terminar cada curso te da un certificado de finalización.
+<br />
+![](/blog/codecademy.png 'https://www.codecademy.com/')
+<br />
+<br />
+
+# [Frontend Masters](https://frontendmasters.com/)
+
+> Versión de pago | Inglés
+
+<br />
+Frontend Masters es la plataforma que actualmente utilizo para mantenerme actualizado
+en mi carrera profesional y una de mis favoritas en los últimos meses. Dentro de
+su catálogo ofrece cursos de programación enfocada en el desarrollo web Frontend,
+que abarca temas desde los básicos de **HTML, CSS y JavaScript** hasta conceptos
+más avanzados como **React, Vue, Angular, Astro, Remix, GraphQL, entre otros,** además
+también podrás encontrar cursos de Backend con **NodeJS, Python, PHP y hasta cursos
+de diseño UI/UX.** Todos los cursos son impartidos por expertos de la industria que
+trabajan en empresas como **Netflix, Google, Stripe.** Uno de mis cursos favoritos
+es el de Qwik, impartido por su creador, Misko Hevery. A pesar de que los cursos
+se imparten en inglés, son muy visuales y fáciles de entender, incluso con un nivel
+básico o intermedio de inglés. Una de las razones por las que recomiendo Frontend
+Masters es que sus cursos son breves y concisos, lo que te permite aplicar rápidamente
+lo aprendido en tus proyectos profesionales al finalizarlos.
+<br />
+![](/blog/frontendmasters.jpg 'https://frontendmasters.com/')
+<br />
+<br />
+
+# [Código Facilito](https://codigofacilito.com/)
+
+> Versión de pago, pero con cursos gratis, ofrece bootcamps y certificaciones | Español
+
+<br />
+Código Facilito fue una de las primeras plataformas de educación en línea en español
+que conocí. Gracias a CodigoFacilito, elegi mi carrera profesional como Frontend
+Developer. Iniciaron como un canal de YouTube donde subían tutoriales de programación,
+y ahora son una **plataforma de educación en línea con cursos frontend, backend,
+Mobile y diseño**. Código Facilito es ideal para aquellos que quieren aprender desde
+cero e ir avanzando hasta un nivel intermedio, suficiente para poder trabajar como
+desarrollador junior. Durante todo el año, ofrecen bootcamps de diferentes temas
+que podrás tomar haciendo un mínimo pago. Al finalizar el bootcamp, obtendrás un
+certificado de finalización. Excelente si lo que quieres en aprender o reforzar temas
+específicos de programación.
+<br />
+![](/blog/codigo_facilito.jpg 'https://codigofacilito.com/')
+<br /> <br />
+
+# [Platzi](https://platzi.com/)
+
+> Versión de pago, pero con cursos gratis | Español
+
+<br />
+Platzi es una de las plataformas de educación en línea más populares en Latinoamérica.
+En Platzi, no solo encontrarás cursos de programación, sino también de negocios,
+marketing, diseño, entre otros. Personalmente, he tomado varios cursos de programación
+en Platzi y me han parecido muy buenos. Una de las cosas que más me gusta de Platzi
+es que en la mayoría de sus cursos, irás construyendo un proyecto al mismo tiempo
+que aprendes la tecnología. Al finalizar, tendrás un proyecto básico que podrás mostrar
+en tu portafolio y mejorar con los cursos siguientes que tomes. Al completar cada
+curso, tendrás que realizar un examen para obtener tu certificado de finalización.
+Esto es muy útil para reforzar los conocimientos aprendidos, y si no pasas el examen,
+puedes volver a revisar los temas que aprendiste e intentarlo cuantas veces sea necesario.
+Personalmente, he tomado **cursos de Inglés, React, JavaScript, Blockchain y diseño**,
+y todos son muy completos y fáciles de entender.
+<br />
+![](/blog/platzi.jpg 'https://codigofacilito.com/')
+<br />
+<br />
+# [Treehouse](https://teamtreehouse.com/) 
+> Versión de pago | Inglés
+<br />
+Treehouse es una plataforma de educación en línea que ofrece cursos de
+programación y diseño. Aunque no he utilizado la plataforma por mucho tiempo, he
+disfrutado mucho del contenido de sus cursos. Treehouse ofrece trayectorias de
+carrera ya predefinidas; lo único que debes hacer es elegir el área en la que te
+quieres especializar, y ellos te darán el orden para tomar los cursos. Lo que
+más me gusta de Treehouse es la calidad de sus cursos: son muy completos y
+fáciles de entender, además de contar con una excelente edición. Treehouse
+cuenta con una versión de pago llamada Techdegree, que te brinda acceso a
+proyectos de certificación y asesoría personalizada durante todo tu proceso de
+aprendizaje. **Si no tienes idea por dónde empezar en el mundo de la
+programación, Treehouse es una excelente opción para dar tus primeros pasos.**
+<br />
+![](/blog/treehouse.png 'https://codigofacilito.com/')