fix(ui): restore Persona styling for modal close/profile

aspauldingcode · cursoragent · aspauldingcode · commit 1247c7aa6859 · 2026-05-20T18:44:51.000-07:00
Ensure the homepage profile image container has deterministic dimensions and align the project modal close button with Persona-style p6 button treatment.

Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/portfolio/src/app/page.tsx b/portfolio/src/app/page.tsx
@@ -360,12 +360,17 @@ export default function Home() {
               >
                 <motion.div
                   layoutId="profile-image"
+                  style={{
+                    width: responsiveStyles.showPortrait ? responsiveStyles.portraitSize.w : responsiveStyles.squareSize,
+                    height: responsiveStyles.showPortrait ? responsiveStyles.portraitSize.h : responsiveStyles.squareSize,
+                    skewX: -2,
+                  }}
                   animate={{
                     width: responsiveStyles.showPortrait ? responsiveStyles.portraitSize.w : responsiveStyles.squareSize,
                     height: responsiveStyles.showPortrait ? responsiveStyles.portraitSize.h : responsiveStyles.squareSize,
                     skewX: -2,
                   }}
-                  initial={{ skewX: -2 }}
+                  initial={false}
                   transition={springTransition}
                   className="relative border-4 border-base09 bg-base01 shadow-[12px_12px_0px_var(--base08)] overflow-hidden will-change-transform"
                 >
diff --git a/portfolio/src/components/ProjectModal.tsx b/portfolio/src/components/ProjectModal.tsx
@@ -585,34 +585,37 @@ export default function ProjectModal({
             aria-hidden
           />
 
-        {/* Close button - matches Contact / Resume modal style */}
-        <div className="absolute top-2 right-3 sm:top-3 sm:right-4 z-30 flex flex-col items-center group/close">
-          <button
-            ref={closeButtonRef}
-            onClick={onClose}
-            onMouseEnter={() => {
-              if (!bp.hasFinePointer) return;
-              showCloseHint();
-            }}
-            onMouseLeave={() => {
-              if (!bp.hasFinePointer) return;
-              setIsCloseHintVisible(false);
-            }}
-            onFocus={() => {
-              if (!bp.hasKeyboard) return;
-              showCloseHint();
-            }}
-            onBlur={() => setIsCloseHintVisible(false)}
-            className="p-2 bg-base00 bg-opacity-80 hover:bg-opacity-100 rounded-full text-base05 transition-all duration-200 shadow-sm touch-manipulation"
-            style={{
-              filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))'
-            }}
-            aria-label="Dismiss modal"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="w-5 h-5">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
+        {/* Close button - Persona 5 style */}
+        <div className="absolute top-2 right-3 sm:top-3 sm:right-4 z-30">
+          <div className="relative group/close">
+            <div
+              className="absolute inset-0 -skew-x-12 translate-x-1.5 translate-y-1.5 opacity-70 transition-transform pointer-fine:group-hover/close:translate-x-2 pointer-fine:group-hover/close:translate-y-2"
+              style={{ backgroundColor: eraColor }}
+            />
+            <button
+              ref={closeButtonRef}
+              onClick={onClose}
+              onMouseEnter={() => {
+                if (!bp.hasFinePointer) return;
+                showCloseHint();
+              }}
+              onMouseLeave={() => {
+                if (!bp.hasFinePointer) return;
+                setIsCloseHintVisible(false);
+              }}
+              onFocus={() => {
+                if (!bp.hasKeyboard) return;
+                showCloseHint();
+              }}
+              onBlur={() => setIsCloseHintVisible(false)}
+              className="relative p6-button p-2 bg-base00 text-base05 border-2 border-base05 flex items-center justify-center touch-manipulation"
+              aria-label="Dismiss modal"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor" className="w-5 h-5 skew-x-12">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
         </div>
         {bp.hasKeyboard && isCloseHintVisible && (
           <div
