⚡ Bolt: Improve CLS and fix malformed URL in README

[Alex10007]

💡 What:

• Replaced Markdown image syntax with an HTML <img> tag for the header GIF, adding explicit width="1284" and height="908" attributes.
• Fixed a malformed URL in the project table (row 4) by replacing %20 with a hyphen.

🎯 Why:

• Explicit image dimensions allow the browser to reserve space before the asset loads, eliminating Cumulative Layout Shift (CLS).
• Correcting the URL ensures users can access the linked article without a 404 or redirect error.

📊 Impact:

• Eliminates layout shift for the main header asset.
• Fixes a broken link in the documentation.

🔬 Measurement:

• Inspecting the README.md content reveals the new <img> tag and corrected link.
• Performance impact on CLS can be visually confirmed during page load on GitHub or any Markdown renderer that supports HTML tags.

---

PR created automatically by Jules for task 4331299787781953017 started by @Alex10007

Summary by CodeRabbit

• Documentation

  • Updated README with explicit width and height attributes for image optimization
  • Added CLS optimization technical note

• Bug Fixes

  • Corrected malformed Medium link URL in projects table

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

📝 Walkthrough

Walkthrough

README.md adds explicit width and height attributes to the hero image tag (with an HTML comment noting CLS optimization) and corrects a malformed Medium article URL for project 4 by removing the erroneous seri%20es path segment.

Changes

README Fixes

Layer / File(s)	Summary
Hero image dimensions and Medium URL correction README.md	Hero image tag gains explicit width/height attributes with a CLS comment; project 4's Medium link URL is corrected.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐇 A broken link hops no more,
Fixed with care from root to core.
The image now knows width and height,
No layout shift to cause a fright.
This README stands tall and bright! ✨

🚥 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 reflects the main changes: improving CLS performance through explicit image dimensions and fixing a malformed URL in the README.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch bolt-cls-url-fix-4331299787781953017

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@README.md`:
- Around line 5-6: The img tag with
src="images/Colorful%20Futuristic%20Technology%20Poster.gif" is missing an alt
attribute, which impacts accessibility and SEO. Add an alt attribute with
descriptive text that summarizes what the image shows (e.g., a description of
the colorful futuristic technology poster), so screen readers can convey the
image content to users and provide a fallback when the image fails to load.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 02518be0-0e35-487f-b8e7-e0b92af942c6

📥 Commits

Reviewing files that changed from the base of the PR and between 980f4d0 and ae999cc.

📒 Files selected for processing (1)

• README.md

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add alt text to the hero image for accessibility and SEO.

The <img> tag is missing an alt attribute. While the explicit width and height dimensions correctly optimize for CLS, the missing alternative text creates an accessibility barrier for screen readers and denies a fallback for users when the image fails to load.

🎯 Proposed fix

 <!-- ⚡ Bolt Optimization: Explicit dimensions to improve CLS -->
-<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908">
+<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" alt="500 Artificial Intelligence Projects List with Code">

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<!-- ⚡ Bolt Optimization: Explicit dimensions to improve CLS -->
	<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908">
	<!-- ⚡ Bolt Optimization: Explicit dimensions to improve CLS -->
	<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" alt="500 Artificial Intelligence Projects List with Code">

🧰 Tools

🪛 markdownlint-cli2 (0.22.1)

[warning] 6-6: Images should have alternate text (alt text)

(MD045, no-alt-text)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` around lines 5 - 6, The img tag with
src="images/Colorful%20Futuristic%20Technology%20Poster.gif" is missing an alt
attribute, which impacts accessibility and SEO. Add an alt attribute with
descriptive text that summarizes what the image shows (e.g., a description of
the colorful futuristic technology poster), so screen readers can convey the
image content to users and provide a fallback when the image fails to load.

Source: Linters/SAST tools