fix: social icons visibility in light and dark theme

[AribaRazi]

Fixed issue #54

Overview

This PR improves the visibility and consistency of the social media icons displayed in the hero section by fixing GitHub icon rendering issues and increasing the overall icon size for better visual balance.

Changes Made

GitHub Icon Fix

Added explicit inline dimensions to the GitHub icon <img> element to ensure consistent rendering across different browsers and devices.

Added:

• width="28"
• height="28"

Social Icon Size Update

Updated the .hero-social img dimensions in css/components.css from 20px to 25px to improve visibility and alignment within the circular icon containers.
css:-
.hero-social img {
width: 25px;
height: 25px;
}

Files Changed

index.html
Added inline width and height styling to the GitHub icon

css/components.css
Updated .hero-social img size from 20px to 25px

BEFORE

In light mode-

### In dark mode-

AFTER

In light mode-

### In Dark mode-

Reason for Change

• Ensures consistent GitHub icon rendering across browsers
• Improves icon visibility and overall UI balance
• Enhances appearance without affecting existing functionality

Note:- This is a UI-only update with no functional impact.

[AribaRazi]

hello @revatikadam0607 plz review this PR

[revatikadam0607]

Hey, thanks for the PR!
I noticed it’s causing some UI issues in the Skills section — the layout/cards got misaligned after the changes. Could you please check the recent commits and fix the styling once? 🙌

[AribaRazi]

hello @revatikadam0607

Actually when i am running it locally the skills section is aligned properly

[revatikadam0607]

Actually when i am running it locally the skills section is aligned properly

Thanks for checking it locally
However, on my side the Skills section still doesn’t seem to be aligned properly. Could you please recheck it once again across different screen sizes/devices and make sure the alignment issue is fully resolved?
Once it looks consistent, I’ll review it again. Thanks