fix(ui): restore cv preview and scroll reveal

src/App.css

@@ -387,7 +387,10 @@ h3 {
 .phone-frame img {
   display: block;
   filter: saturate(1.02) contrast(1.07);
+  height: auto;
+  position: relative;
   width: 100%;
+  z-index: 1;
 }
 
 .floating-note {
@@ -772,10 +775,19 @@ footer {
 }
 
 .reveal {
-  animation: revealIn 760ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0ms) both;
+  opacity: 1;
+  transform: none;
 }
 
-.reveal.is-visible {
+.has-reveal .reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition:
+    opacity 760ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0ms),
+    transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0ms);
+}
+
+.has-reveal .reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
 }
@@ -939,7 +951,6 @@ footer {
   }
 
   .reveal {
-    animation: none !important;
     opacity: 1;
     transform: none;
   }

src/App.tsx

@@ -116,6 +116,7 @@ function App() {
   )
 
   useEffect(() => {
+    document.documentElement.classList.add('has-reveal')
     const revealItems = document.querySelectorAll<HTMLElement>('.reveal')
     const observer = new IntersectionObserver(
       (entries) => {
@@ -130,7 +131,10 @@ function App() {
     )
 
     revealItems.forEach((item) => observer.observe(item))
-    return () => observer.disconnect()
+    return () => {
+      observer.disconnect()
+      document.documentElement.classList.remove('has-reveal')
+    }
   }, [])
 
   function handleAsk(nextQuestion = question) {
@@ -196,7 +200,15 @@ function App() {
           <div className="phone-frame">
             <div className="phone-speaker" />
             <div className="screen-scan" aria-hidden="true" />
-            <img src="/cv-preview.png" alt="Tran Quang Hung CV preview" />
+            <img
+              src="/cv-preview.png?v=2"
+              alt="Tran Quang Hung CV preview"
+              width="894"
+              height="1264"
+              loading="eager"
+              decoding="sync"
+              fetchPriority="high"
+            />
           </div>
           <div className="floating-note">
             <Sparkles size={18} />