Krystle Portfolio - Figma to Framer

I had the pleasure of working with Krystle Cruz to build her stunning portfolio website, showcasing her incredible design work. Krystle approached me with her Figma design and a clear vision of how she wanted her site to feel, elegant, interactive, and thoughtfully designed. This project was a blend of creativity and technical precision, and I’m excited to share the journey.

Krystle had her designs ready in Figma, and I took on the responsibility of transforming those static designs into a fully functional website using Framer. The challenge here was not only ensuring the design translated well but also enhancing the user experience with thoughtful interactions and animations.

From the start, I ensured every detail aligned with her vision, from hover interactions to seamless page transitions. Each page required its own unique attention to maintain the minimal yet sophisticated aesthetic Krystle envisioned

The project included three key pages:

I carefully structured this page to introduce Krystle’s work and personality in a visually captivating yet simple layout. The typography, spacing, and layout were all refined to ensure a clean yet impactful design.

This page was all about showcasing Krystle’s video content in a dynamic and engaging way. I added gentle fade-in animations for a smooth user experience and ensured videos only played when clicked to improve performance.

The Info page presented Krystle’s background, experience, and featured brands in a clean, organized layout. I ensured all text styles were consistent and made refinements like adjusting the spacing and text sizes for optimal readability.

Ensuring the site looked great across all devices was a priority. While Framer offers strong responsive capabilities, I spent extra time debugging an unusual scrolling issue on mobile screens. Initially, the site scrolled diagonally to the right on load, but after navigating to another page and returning home, the issue corrected itself. After extensive debugging, I reached out to the Framer team to help investigate the root cause.

I also implemented several performance optimizations to improve the website’s speed. This included optimizing images, refining animations, and ensuring content loaded efficiently.

After multiple rounds of testing, we successfully launched her portfolio website: