⚡ Bolt: Optimize README assets and URLs for performance

[Alex10007]

💡 What:

• Replaced Markdown image syntax for the hero GIF and LinkedIn badge with HTML <img> tags.
• Added explicit width and height attributes to prevent Cumulative Layout Shift (CLS).
• Added fetchpriority="high" to the hero GIF to improve Largest Contentful Paint (LCP).
• Fixed a malformed URL in the project table (corrected %20 to - in a Medium link).
• Removed a trailing slash from the LinkedIn profile URL to save a 301 redirect (~100-200ms RTT).

🎯 Why:

• Specifying image dimensions allows the browser to reserve space before the asset loads, eliminating layout jumps.
• Prioritizing the main hero asset ensures it loads faster as part of the critical path.
• Correcting malformed URLs ensures users reach the intended content without errors.

📊 Impact:

• Eliminates CLS for the main README header and LinkedIn badge.
• Improves LCP by signaling asset priority to the browser.
• Saves ~100-200ms of redirect latency for the LinkedIn profile link.

🔬 Measurement:

• Inspected README.md to verify the presence of HTML <img> tags with correct attributes.
• Verified the malformed Medium URL correction.
• Confirmed the removal of the trailing slash from the LinkedIn URL.

---

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

Summary by CodeRabbit

Documentation

• Optimized README performance with explicit image sizing and high-priority loading attributes to improve page responsiveness and reduce layout shift
• Enhanced social media badge markup with improved attributes and corrected image references

Bug Fixes

• Corrected broken URL in the 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

The README header is updated to replace Markdown image syntax with HTML <img> tags that include explicit width/height, fetchpriority="high", and a responsive style attribute for the poster GIF and LinkedIn badge. A malformed project table URL (time-seri%20es) is corrected to time-series. A new entry in .jules/bolt.md documents this optimization.

Changes

README Web Vitals Optimization

Layer / File(s)	Summary
README header markup and URL fix README.md	GIF embed and LinkedIn badge markup updated with explicit width/height, fetchpriority="high", and responsive style; malformed time-seri%20es project link corrected to time-series.
Jules bolt changelog .jules/bolt.md	New 2026-06-20 entry added documenting the switch from Markdown image syntax to HTML <img> with explicit dimensions and fetchpriority="high" for above-the-fold assets.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• Alex10007/500-AI-Machine-learning-Deep-learning-Computer-vision-NLP-Projects-with-code#13: Previously adjusted the same README header image references and paths, making it directly related to the poster GIF and fetchpriority markup changes in this PR.

Poem

🐇 Hop hop, the images load so fast,
fetchpriority="high" — a spell unsurpassed!
No more layout jumps, no more broken link,
time-series corrected in less than a blink.
The rabbit cheers: LCP scores shall last! 🥕

🚥 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 clearly summarizes the main change: optimizing README assets and URLs for performance, which aligns with the primary focus of the changeset across both modified files.
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-readme-optimization-16534307280197657859

---

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`:
- Line 5: The hero image tag lacks a required alt attribute for accessibility
compliance. Locate the img tag in README.md that references the Colorful
Futuristic Technology Poster GIF file and add an alt attribute with descriptive
text such as "Colorful Futuristic Technology Poster" to the existing img element
alongside its current src, width, height, fetchpriority, and style attributes.
This will satisfy WCAG accessibility standards and resolve the MD045 linter
check failure.

🪄 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: 2df610b4-3b78-4d72-a0a5-2ccb891a04d3

📥 Commits

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

📒 Files selected for processing (2)

• .jules/bolt.md
• README.md

[coderabbitai]

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Add missing alt attribute to the hero GIF image.

The hero GIF image lacks an alt attribute, violating WCAG accessibility standards and failing the linter check (MD045). This attribute is essential for screen readers and provides fallback text when the image cannot load.

Suggested alt text: "Colorful Futuristic Technology Poster" or similar descriptive text.

🔧 Proposed fix

-<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" fetchpriority="high" style="max-width: 100%; height: auto;">
+<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" fetchpriority="high" style="max-width: 100%; height: auto;" alt="Colorful Futuristic Technology Poster">

📝 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

	<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" fetchpriority="high" style="max-width: 100%; height: auto;">
	<img src="images/Colorful%20Futuristic%20Technology%20Poster.gif" width="1284" height="908" fetchpriority="high" style="max-width: 100%; height: auto;" alt="Colorful Futuristic Technology Poster">

🧰 Tools

🪛 markdownlint-cli2 (0.22.1)

[warning] 5-5: 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` at line 5, The hero image tag lacks a required alt attribute for
accessibility compliance. Locate the img tag in README.md that references the
Colorful Futuristic Technology Poster GIF file and add an alt attribute with
descriptive text such as "Colorful Futuristic Technology Poster" to the existing
img element alongside its current src, width, height, fetchpriority, and style
attributes. This will satisfy WCAG accessibility standards and resolve the MD045
linter check failure.