This document is aimed at alleviating the challenges faced by Korean users learning Framer due to a lack of Korean resources. We've translated content from the official blog into Korean and added practical information. We hope this offers some help to all Framer users.

Making Your Portfolio More Attractive

Instead of simply listing your latest projects, creating a well-organized index page can make your entire site stand out. By crafting this as an interactive experience rather than just a simple list, you can leave a lasting impression on visitors. This article introduces several methods using Framer components, which you can remix and apply directly.

Hover Interaction for Enlarging Images

The first example uses a hover effect to reveal an image. The default state sets the image opacity to 0%, and the image is positioned smaller in the center. On hover, the image appears, enlarges, and shifts towards the edge for a dynamic feel. The Difference blend mode is applied to the text for a semi-transparent effect. Different effects are applied to each item, making each one uniquely crafted.

Filling Large-Scale Images

In the second example, hovering over a list item causes an image to fill the entire screen. The large image is hidden initially and set to appear on hover. An arrow appears from the left of the component, set with Overflow as Hidden so it remains unseen by default. The components are neatly organized using Stack, but the image's size and position are adjusted independently using Absolute positioning. You can easily customize the title, image, and year of this component through the Properties panel.

Cards with Accentuated Backgrounds

In the third example, a card has an accentuated background (Accent) appear on hover. The image is slightly rotated and moves from bottom to top, aligning vertically with the text for subtle motion. Customize the alignment direction (left/right), title, image, and accent background freely in the Properties panel.

Sliding Video Thumbnails

In the fourth example, hovering reveals a small video thumbnail sliding in from the left. Initially, the video thumbnail's opacity is set to 0% and its size reduced; on hover, it becomes visible, enlarges, and creates an effect as if the entire content shifts right. Customize the video file, title, and year as desired in the Properties panel.

Long List with Background Videos

The fifth example creates a long list composed of multiple items. Hovering over an item displays a video in the background for that item. Initially, the display status is set to “NO”, changing to “YES” only on hover. Thanks to the Stack configuration, all components are neatly organized. The video positioning is set with Absolute to freely adjust size and alignment. Easily customize the video, title, year, and tag display in the Properties panel.

Blurred Background Image with Text Mask

The final example uses a blurred image with a text mask. On hover, the blurred image appears across the screen, providing a unique effect by acting as a mask for the text. Keep in mind the size of the blurred image can affect performance, so adjust appropriately. Using the Text Mask component from Framer Supply, you can apply the mask easily and adjust the Y offset of the image within the text mask to achieve the desired look.

Creating a Memorable Portfolio

Beyond simple lists, an interactive portfolio index leaves a deeper impression on visitors. Applying the techniques introduced in this article allows you to showcase your work in a unique and visually compelling way. Which index effect would you like to try on your portfolio page first? Remix your projects to create a portfolio page that's uniquely yours.

Remix →

This article is a translated and adapted version of Framer's official blog post, ‘Engaging portfolio index pages to showcase your work’.