Refactor Profile Page: Avatar Handling, Month Layout, and Styling.

[Shrutik-0101]

Title: Enhance Profile Page: Avatar Upload, Heatmap Improvements, and Styling Updates

🔷 Description:

This PR introduces several enhancements to the profile page to improve UX and UI:

✅ Added avatar upload functionality and storage via localStorage.
✅ Displayed the Activity Heatmap title inside the heatmap card above month columns.
✅ Updated .achievement-card.earned styling with blue glow effect.
✅ Fixed layout to ensure months appear horizontally in the heatmap.
✅ Lightened background colors for better readability and visual appeal.

🔷 Issue Fixed:

Closes #88

🔷 Screenshots:

Streak Tracker via a monthly heatmap.

Progress Bar fixed

Recent Activity UI enhanced.

Achievements now have a glow effect.

Upon clicking the avatar button, we can now upload our own avatar file from local system.

[greptile-apps]

Greptile Summary

This PR enhances the CodeClip profile page with several user experience improvements, addressing Issue #88. The changes introduce avatar upload functionality that allows users to click their profile avatar to upload a custom image, which is then stored in localStorage for persistence across sessions. The implementation uses the FileReader API to convert uploaded images to base64 data URLs.

The PR adds a comprehensive activity heatmap displaying a 12-month grid layout with individual day cells, providing visual tracking of user coding activity. The heatmap is structured horizontally with month columns and includes proper labeling. Additionally, the styling has been updated with a cohesive light blue theme, including a blue glow effect for earned achievement cards and lightened background colors throughout the profile sections.

These changes integrate with CodeClip's existing client-side architecture, following the established pattern of using localStorage for data persistence (similar to how user progress and completed challenges are stored). The avatar functionality enhances user personalization, while the heatmap provides gamification elements to encourage consistent coding practice.

Confidence score: 2/5

• This PR has significant implementation issues that could cause problems in production, particularly around code quality and maintainability.
• The score reflects concerns about duplicate code in scripts/app.js, a massive hardcoded heatmap structure that doesn't represent real data, missing error handling for file operations, and potential localStorage quota issues.
• Files needing attention: scripts/app.js (duplicate code cleanup, error handling), pages/profile.html (hardcoded heatmap implementation, CSS optimization)

_{3 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

[adityai0]

@Shrutik-0101 resolve merge conflicts