✨ - Improve Card styles

.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

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.

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} />
           ))}

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>
   )
 }

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}

src/constants/index.ts

@@ -0,0 +1,2 @@
+export const widthCard: number = 280
+export const heightCard: number = 280