This document is designed to help domestic users who are learning Framer by addressing the challenges caused by the lack of Korean resources. We've translated content from the official blog into Korean and added practical information. We hope this will be of some help to Framer users.

Make Your Portfolio More Attractive

Instead of simply listing recent projects, creating a well-structured index page can make the entire site stand out. By crafting this not just as a simple list but as an interactive experience, you can leave a lasting impression on visitors. This article introduces several methods using various Framer components, which you can remix and apply yourself.

Hover Interaction for Enlarging Images

The first example uses an effect where the image appears on hover. In its default state, the image's opacity is set to 0% and is centrally positioned in a small size. When hovered over, the image becomes visible, enlarges, and moves towards the edges for a dynamic feel. The text employs the Difference blending mode to add a semi-transparent effect. Each item has its own unique effects, which were individually crafted for each.

Filling with Large Images

The second example shows an effect where the image fills the screen when hovering over a list item. The large image is hidden in its default state and set to display on hover. An arrow appears from the left of the component, set to be invisible in its default state using Overflow: Hidden. The component is organized as a Stack, but the image is independently adjusted in size and position using Absolute positioning. You can easily customize components by adding titles, images, and years in the Properties panel.

Cards with Accentuated Backgrounds

In the third example, hovering reveals an accentuated background behind the card. The image is slightly rotated and moves from the bottom to the top to align with the text, adding subtle motion. In the Properties panel, you can freely customize the alignment direction (left/right), title, image, and accent background.

Sliding Video Thumbnails

In the fourth example, when hovered over, a small video thumbnail slides in from the left. The thumbnail's opacity is 0% by default and it is reduced in size. Upon hover, it becomes visible, enlarges, and creates an effect where the entire content seems to shift to the right. You can customize the video file, title, and year in the Properties panel as desired.

Background Videos

The fifth example deals with a long list composed of several items. When you hover over an item, a video plays in the background of that item. The default state shows “NO” to visibility, switching to “YES” on hover. All components are neatly organized due to their Stack composition. The video uses Absolute positioning, allowing flexible adjustment of size and alignment. You can easily customize the video, title, year, and tag display in the Properties panel.

Text Masks with Blurred Background Images

The final example uses a blurred image and text mask. On hover, a blurred image is displayed across the full screen, using the text as a mask for a unique effect. Be aware that the size of the blurred image can impact performance, so adjust accordingly. Using the Text Mask component from Framer Supply makes it easy to apply the mask and adjust the Y offset of the image within the text mask to achieve the desired look.

Creating Unforgettable Portfolios

Moving beyond a simple list, an interactive portfolio index leaves a deeper impression on site visitors. By applying the techniques introduced in this article, you can showcase your work in a more creative and visually appealing way. Which effect would you try first on your portfolio page? Remix your project and create your own unique portfolio page.

Remix →

This article is adapted from the Framer official blog's ‘Engaging portfolio index pages to showcase your work’.