Feat: Add project description in readme

[quangptt0910]

PR Type

Documentation

---

Description

• Add project screenshots to README with responsive layout

• Uncomment Jest badge in tech stack section

• Improve markdown formatting and table alignment

• Minor text corrections for consistency

---

Diagram Walkthrough

flowchart LR
  A["README.md"] -->|Add Screenshots| B["Home & Results Images"]
  A -->|Add Table Layout| C["Calibration & Instructions"]
  A -->|Uncomment Badge| D["Jest Test Badge"]
  A -->|Format Improvements| E["Table Alignment & Text"]

Loading

File Walkthrough

Relevant files

Documentation

README.md Add screenshots and improve documentation formatting          README.md Added screenshot section with 4 images (Home, Results, Calibration, Instructions) in responsive table layout Uncommented Jest badge in tech stack badges section Improved markdown table formatting with proper column alignment Fixed minor text inconsistencies (e.g., "Saccades ?" to "Saccades?") Adjusted list item formatting for consistency +34/-19

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Third-party tracking Description: The README embeds external badge images from https://img.shields.io/..., which will trigger third-party network requests when rendered (e.g., on GitHub), potentially leaking viewer metadata such as IP address and user-agent to that third party. README.md [2-5] Referred Code    
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	✅ Use correct HTML style attribute Suggestion Impact: Updated the	elements to use the correct CSS style attribute for centering text (style="text-align: center;") instead of the invalid text-align attribute. code diff: - <td text-align="center"><b>Calibration</b></td> - <td text-align="center"><b>Instruction</b></td> - </tr> + <tr> + <td style="text-align: center;"><b>Calibration</b></td> + <td style="text-align: center;"><b>Instruction</b></td> + </tr> Replace the invalid text-align="center" attribute on	elements with the correct CSS style="text-align: center;" to center the text. README.md [21-24] <tr> - <td text-align="center"><b>Calibration</b></td> - <td text-align="center"><b>Instruction</b></td> + <td style="text-align: center;"><b>Calibration</b></td> + <td style="text-align: center;"><b>Instruction</b></td> </tr> [Suggestion processed] Suggestion importance[1-10]: 7 __ Why: The suggestion correctly points out that text-align is not a valid attribute for <td> and provides the correct fix using the style attribute, ensuring the intended rendering.	Medium
	Add missing alt attributes to images Add missing alt attributes to the img tags for the home, calibration, and instructions images to improve accessibility. README.md [13-25] -<img src="readme/Home.png" width="700"/> <br> +<img src="readme/Home.png" alt="SaccadeSync Home Page" width="700"/> <br> ... <table> <tr> - <td><img src="readme/Calibration.png" width="340"/></td> - <td><img src="readme/Instructions.png" width="340"/></td> + <td><img src="readme/Calibration.png" alt="SaccadeSync Calibration Screen" width="340"/></td> + <td><img src="readme/Instructions.png" alt="SaccadeSync Instructions Screen" width="340"/></td> </tr> ... </table> [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies missing alt attributes in img tags, which is an important accessibility improvement for screen readers.	Low
Update

[qodo-code-review]

Suggestion: Use correct HTML style attribute

Suggested change

	<tr>
	<td text-align="center"><b>Calibration</b></td>
	<td text-align="center"><b>Instruction</b></td>
	</tr>
	<tr>
	<td style="text-align: center;"><b>Calibration</b></td>
	<td style="text-align: center;"><b>Instruction</b></td>
	</tr>