Refactor TechStack Component to Use SVG Icons and Text Labels

[DeveloperAmrit]

Description

This PR refactors the TechStack component to address the design issues with the current implementation of the tech stack section. The changes ensure that the tech stack icons are now SVG files served from the public folder, and the technology names are displayed as text labels instead of being part of the image.

Fixes #265

Type of change

• [ y] Refactor (does not change functionality, e.g. code style improvements, linting)
• [y ] UI/UX update (design changes, interface improvements)

How Has This Been Tested?

Tested locally

Before

After

Please include screenshots below if applicable.

Checklist:

• [ y] My code follows the style guidelines of this project
• [ y] I have performed a self-review of my own code
• [ y] I have commented my code, particularly in hard-to-understand areas
• [y ] I have made corresponding changes to the documentation
• [ y] My changes generate no new warnings
• [ y] I have added tests that prove my fix is effective or that my feature works
• [ y] New and existing unit tests pass locally with my changes
• [ y] Any dependent changes have been merged and published in downstream modules
• [ y] I have checked my code and corrected any misspellings

Maintainer Checklist

• closes #xxxx (Replace xxxx with the GitHub issue number)
• Tag the PR with the appropriate labels

Summary by CodeRabbit

• Refactor
  • TechStack updated to render technologies from a data-driven list; each entry now shows an icon plus visible name and uses styling for consistent layout.
  • Improves maintainability and makes it easier to add or update technologies without changing component structure, resulting in a cleaner, more scalable display for end users.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f2816a48-b2ee-4d56-8a6c-72d40f854d35

📥 Commits

Reviewing files that changed from the base of the PR and between 5da0151 and 0b68256.

📒 Files selected for processing (1)

• app/components/TechStack/TechStack.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• app/components/TechStack/TechStack.jsx

---

📝 Walkthrough

Walkthrough

Replaced static logo imports and fixed image elements in the TechStack component with a data-driven technologies array rendered via .map(). Each tech now renders an <img> using tech.icon, a <p> with tech.name, and uses new CSS classes; removed draggable={false} and direct .src imports.

Changes

Cohort / File(s)	Summary
TechStack refactor app/components/TechStack/TechStack.jsx	Removed hardcoded Flutter.png/Appwrite.png imports and direct .src usage. Introduced a technologies array of { name, icon }, replaced repeated JSX with .map() rendering each tech (<img className="tech-icon"> and <p className="tech-name">), and removed draggable={false} from images.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [FEAT]: Develop Full Resonate Landing Static Web Page #16: Prior change of TechStack logo rendering; shares intent and code-level overlap with this refactor.

Suggested reviewers

• M4dhav

Poem

🐰 I swapped the sprites for tidy arrays,
Hopped through JSX in sunny rays,
Icons drawn from lists so spry,
Names beside them waving hi,
A tiny refactor — hop, delight! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main refactor of replacing static image imports with a mapped technologies array using SVG icons and text labels.
Linked Issues check	✅ Passed	The PR addresses the core objective of issue #265 by replacing composite image assets with component-based rendering using SVG icons and separate text labels.
Out of Scope Changes check	✅ Passed	All changes are directly related to the TechStack component refactor specified in issue #265; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[M4dhav]

Please resolve merge conflicts

[DeveloperAmrit]

Hey @M4dhav I have resolved merge conflicts, you can merge it now