[Feature]: Add Responsive Design

[Colin23]

🌟 Situation

The current portfolio design may not fully adapt to different screen sizes, which can lead to a suboptimal user experience on mobile devices. Ensuring a responsive design will make the portfolio accessible and visually appealing across desktops, tablets, and smartphones.

🎯 Task

Adapt all components of the portfolio website to be mobile-friendly using Tailwind CSS.

🛠️ Action

1. Review all existing components and identify areas where responsiveness needs to be improved.
2. Use Tailwind CSS utility classes to ensure responsive layouts
   • Use sm:, md:, lg:, and xl: prefixes for responsive styling.
   • Use flexible grid layouts (grid, flex, gap, justify-*, items-*) to adapt content to various screen sizes.
   • Apply responsive text sizes using Tailwind’s text-sm, text-base, text-lg, etc.
3. Test and refine layouts for key components
   • About Me: Ensure text and images adjust to smaller screens without overlapping or losing alignment.
   • Work Experience: Ensure lists or timelines display correctly on narrow screens.
   • Skills: Ensure progress bars, badges, or icons scale appropriately.
   • Projects: Ensure project cards stack vertically on small screens and maintain proper spacing.
4. Test across multiple screen sizes (e.g., mobile, tablet, desktop) using browser developer tools or tools like Responsively.
5. Adjust padding, margins, and spacing for a consistent look and feel across all breakpoints.
6. Implement responsive navigation if applicable (e.g., hamburger menu on smaller screens).

🏆 Result

The portfolio will have a fully responsive design, ensuring all components look great and function properly on any device, from smartphones to large desktop screens. This enhances accessibility and provides a seamless user experience for all visitors.

🙋‍♀️ Are you willing to contribute to this feature?

Yes, I'm ready to contribute!

📝 Code of Conduct

• I agree to follow this project's Code of Conduct