From 143879af971dcea64ccfc266fb35c2baddf671fb Mon Sep 17 00:00:00 2001 From: Claudio Moreno Date: Sun, 14 Sep 2025 13:36:25 -0600 Subject: [PATCH 01/12] :sparkles: - Normalize endling lines --- .gitattributes | 12 ++ README.md | 124 ++++++------ src/content/blog/resources_developers.mdx | 226 +++++++++++----------- 3 files changed, 187 insertions(+), 175 deletions(-) create mode 100644 .gitattributes 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 @@ -
-

🖥️ - Claudio Coder Blog - 📱

-
- -![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`). +
+

🖥️ - Claudio Coder Blog - 📱

+
+ +![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/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') - -
- Image created with OpenAI -
-
-
-# [Codecademy](https://www.codecademy.com/) -> Gratis y versión de pago | Inglés -
-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. -
-![](/blog/codecademy.png 'https://www.codecademy.com/') -
-
- -# [Frontend Masters](https://frontendmasters.com/) - -> Versión de pago | Inglés - -
-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. -
-![](/blog/frontendmasters.jpg 'https://frontendmasters.com/') -
-
- -# [Código Facilito](https://codigofacilito.com/) - -> Versión de pago, pero con cursos gratis, ofrece bootcamps y certificaciones | Español - -
-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. -
-![](/blog/codigo_facilito.jpg 'https://codigofacilito.com/') -

- -# [Platzi](https://platzi.com/) - -> Versión de pago, pero con cursos gratis | Español - -
-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. -
-![](/blog/platzi.jpg 'https://codigofacilito.com/') -
-
-# [Treehouse](https://teamtreehouse.com/) -> Versión de pago | Inglés -
-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.** -
-![](/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') + +
+ Image created with OpenAI +
+
+
+# [Codecademy](https://www.codecademy.com/) +> Gratis y versión de pago | Inglés +
+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. +
+![](/blog/codecademy.png 'https://www.codecademy.com/') +
+
+ +# [Frontend Masters](https://frontendmasters.com/) + +> Versión de pago | Inglés + +
+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. +
+![](/blog/frontendmasters.jpg 'https://frontendmasters.com/') +
+
+ +# [Código Facilito](https://codigofacilito.com/) + +> Versión de pago, pero con cursos gratis, ofrece bootcamps y certificaciones | Español + +
+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. +
+![](/blog/codigo_facilito.jpg 'https://codigofacilito.com/') +

+ +# [Platzi](https://platzi.com/) + +> Versión de pago, pero con cursos gratis | Español + +
+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. +
+![](/blog/platzi.jpg 'https://codigofacilito.com/') +
+
+# [Treehouse](https://teamtreehouse.com/) +> Versión de pago | Inglés +
+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.** +
+![](/blog/treehouse.png 'https://codigofacilito.com/') From 30f52d9d87dc3eabe3e290e27f532c1c259f524c Mon Sep 17 00:00:00 2001 From: Claudio Moreno Date: Sun, 14 Sep 2025 15:35:25 -0600 Subject: [PATCH 02/12] :sparkles: - Remove legacyBehavior social media links --- src/components/SocialNetworkContainer.tsx | 24 ++++------------------- 1 file changed, 4 insertions(+), 20 deletions(-) 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 (
- + - + - + - + Date: Sun, 14 Sep 2025 15:49:37 -0600 Subject: [PATCH 03/12] :sparkles: - Improve Card styles --- src/components/PostCard.tsx | 48 +++++++++++++++++++------------------ 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index f565b12..c7803b4 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -6,30 +6,32 @@ import { Blog } from '@/lib/models/Blog' const PostCard = (post: Blog) => { return ( -
-
- {post.title + +
+
+ {post.title +
+
+

+ {post.title as string} +

+ +
-
-

- {post.title as string} -

- -
-
+ ) } From e279ff2cf09c62d943241825fd90fdeec9071e74 Mon Sep 17 00:00:00 2001 From: Claudio Moreno Date: Sun, 14 Sep 2025 15:57:00 -0600 Subject: [PATCH 04/12] :sparkles: - Improve Card styles --- src/components/PostCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index c7803b4..267d1b3 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -7,14 +7,14 @@ import { Blog } from '@/lib/models/Blog' const PostCard = (post: Blog) => { return ( -
+
{post.title
From 9e56b1c9fc12201e004c32afd9973b8a15dd6f70 Mon Sep 17 00:00:00 2001 From: Claudio Moreno Date: Sun, 14 Sep 2025 17:04:53 -0600 Subject: [PATCH 05/12] :sparkles: - Improve Card styles --- src/app/page.tsx | 2 +- src/components/PostCard.tsx | 26 ++++++++++++-------------- src/constants/index.ts | 1 + 3 files changed, 14 insertions(+), 15 deletions(-) create mode 100644 src/constants/index.ts 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 () => { <>

Blog

-
+
{posts.map((post, idx) => ( ))} diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 267d1b3..4bb45e7 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -3,32 +3,30 @@ import Image from 'next/image' import { format, parseISO } from 'date-fns' import { _roboto } from '@/lib/utils/fonts' import { Blog } from '@/lib/models/Blog' +import { widthCard } from '@/constants' const PostCard = (post: Blog) => { return ( -
-
+
+
{post.title
-
-

+

{post.title as string} -

-
diff --git a/src/constants/index.ts b/src/constants/index.ts new file mode 100644 index 0000000..080f83f --- /dev/null +++ b/src/constants/index.ts @@ -0,0 +1 @@ +export const widthCard: number = 280 From 17f9b3a4e1a8cedc446003e73ebe3f77c994c4d4 Mon Sep 17 00:00:00 2001 From: Claudio Moreno Date: Sun, 14 Sep 2025 17:09:11 -0600 Subject: [PATCH 06/12] :sparkles: - Improve Card styles --- src/components/PostCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 4bb45e7..7fd64fc 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -9,7 +9,7 @@ const PostCard = (post: Blog) => { return (
-
+
Date: Sun, 14 Sep 2025 17:12:37 -0600 Subject: [PATCH 07/12] :sparkles: - Improve Card styles --- src/components/PostCard.tsx | 4 ++-- src/constants/index.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 7fd64fc..72ce3bc 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -3,7 +3,7 @@ import Image from 'next/image' import { format, parseISO } from 'date-fns' import { _roboto } from '@/lib/utils/fonts' import { Blog } from '@/lib/models/Blog' -import { widthCard } from '@/constants' +import { heightCard, widthCard } from '@/constants' const PostCard = (post: Blog) => { return ( @@ -12,7 +12,7 @@ const PostCard = (post: Blog) => {
{post.title Date: Sun, 14 Sep 2025 17:19:57 -0600 Subject: [PATCH 08/12] :sparkles: - Improve Card styles --- src/components/PostCard.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 72ce3bc..1f62b71 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -7,7 +7,7 @@ import { heightCard, widthCard } from '@/constants' const PostCard = (post: Blog) => { return ( - +
{ alt={post.title as string} />
-
+

{post.title as string}

-

+

+
From b3ccd02792f6438069ed4cd7aa14e88171438edc Mon Sep 17 00:00:00 2001 From: Claudio Moreno Date: Sun, 14 Sep 2025 17:22:17 -0600 Subject: [PATCH 09/12] :sparkles: - Improve Card styles --- src/components/PostCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 1f62b71..07332a5 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -24,7 +24,7 @@ const PostCard = (post: Blog) => { > {post.title as string} -
From 41983b3a8620c4788a67ccedc8efaa98030a8b34 Mon Sep 17 00:00:00 2001 From: Claudio Moreno Date: Sun, 14 Sep 2025 17:25:31 -0600 Subject: [PATCH 10/12] :sparkles: - Improve Card styles --- src/components/PostCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 07332a5..4e0d285 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -18,7 +18,7 @@ const PostCard = (post: Blog) => { alt={post.title as string} />
-
+

From 721b9cc344126e735a72669bed38b7d88f34a376 Mon Sep 17 00:00:00 2001 From: Claudio Moreno Date: Sun, 14 Sep 2025 17:29:06 -0600 Subject: [PATCH 11/12] :sparkles: - Improve Card styles --- src/components/PostCard.tsx | 49 ++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 4e0d285..48533ad 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -7,29 +7,34 @@ import { heightCard, widthCard } from '@/constants' const PostCard = (post: Blog) => { return ( - -
-
- {post.title + <> + +
+
+ {post.title +
+
+

+ {post.title as string} +

+ +
-
-

- {post.title as string} -

- -
-
- + + ) } From 7a04182448b6b38137fe7bc9f4ec5e901154b742 Mon Sep 17 00:00:00 2001 From: Claudio Moreno Date: Sun, 14 Sep 2025 17:33:40 -0600 Subject: [PATCH 12/12] :sparkles: - Improve Card styles --- src/components/PostCard.tsx | 45 +++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 48533ad..587fce9 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -7,34 +7,35 @@ import { heightCard, widthCard } from '@/constants' const PostCard = (post: Blog) => { return ( - <> +
-
-
- {post.title -
-
-

- {post.title as string} -

- -
+
+ {post.title +
+
+

+ {post.title as string} +

+
- +
) }