From 25f43a17812c3d96ddb081bc0133f4b03e5af285 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 25 May 2026 15:13:43 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Optimize=20section=20render?=
 =?UTF-8?q?ing=20with=20content-visibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: ImChong <74563097+ImChong@users.noreply.github.com>
---
 .jules/bolt.md | 5 +++++
 css/style.css  | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index 213e824..78d12c2 100644
--- a/.jules/bolt.md
+++ b/.jules/bolt.md
@@ -48,3 +48,8 @@
 
 **Learning:** Attaching individual event listeners to multiple similar DOM elements (like images opening a lightbox, or navigation links) scales poorly. It increases memory overhead and slows down initialization time.
 **Action:** Always favor event delegation for multiple similar elements. Attach a single listener to a common ancestor (like `document` or `document.body`) and check for the target element using `e.target.closest('selector')`.
+
+## 2026-05-19 - Content Visibility Auto for Off-Screen Rendering Optimization
+
+**Learning:** For single-page portfolios with many sections (like experience, projects, education, research, awards, and family), content far below the fold forces the browser to calculate layout and rendering for the entire page on initial load. This increases main thread work and delays interactivity.
+**Action:** Use CSS `content-visibility: auto;` (along with `contain-intrinsic-size`) on major independent sections. This allows the browser to skip layout and painting for off-screen sections until the user scrolls near them, dramatically improving initial rendering performance.
diff --git a/css/style.css b/css/style.css
index fc0158f..05428fb 100644
--- a/css/style.css
+++ b/css/style.css
@@ -334,6 +334,8 @@ ul {
 .section {
   padding: 56px 0;
   border-bottom: 1px solid var(--border);
+  content-visibility: auto;
+  contain-intrinsic-size: auto 500px;
 }
 .section-alt {
   background: var(--bg-alt);