Refactor: about me section

[Zyruks]

Changes Made 🎉

• [x] refactor: improved code readability and organization
• [x] style: updated component styling for better layout and responsiveness

Describe Changes

This pull request includes several updates aimed at improving the code quality and user experience of our project.

1. Refactor BasicInfo Component:

   • Refactored the Sections/BasicInfo.astro component to enhance its structure and readability.
   • Introduced the CardWrapper component for consistent styling of cards.
   • Improved the responsiveness of the layout by adjusting grid properties and media queries.
   • Updated the styles to use modern CSS techniques, such as custom properties and flexbox, for better maintainability.

2. Update General Styles:

   • Updated _general.scss to include text color and font size variables for the body:
     • Set body text color to white for improved readability.
     • Introduced font size variable for consistency across the site.

3. Update Container Styles:

   • Updated _container.scss to improve responsive design:
     • Adjusted max-inline-size for large screens to 90rem.
     • Added padding and margin adjustments for small screens.

4. Refactor CardWrapper Component:

   • Refactored CardWrapper.astro for better maintainability and consistency:
     • Ensured consistent formatting and structure in the code.
     • No functional changes, purely code quality improvements.

Visuals (Optional)

https://github.com/AnaRangel/anarangel.github.io/assets/14036522/34c25b1f-672a-4017-a689-f5045744e37b

Checklist ✅

• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.

[felixicaza]

En móvil luce de esta manera:

Se puede solucionar removiendo la propiedad margin-inline: 1rem; de la línea 175:

[Zyruks]

@felixicaza

Si, señor, todo lo que no es basic-info se va a romper.

En otro PR estoy trabajando esos detalles.

[felixicaza]

Genial