Design a Portfolio Website in Figma

Design a responsive, interactive portfolio website using Figma Sites.

Introduction

30 Second Summary

Every professional needs a way to show off their work. Whether you are a designer, developer, writer, or student, a portfolio website is your digital handshake with the world.

In this project, you will design a fully interactive, responsive portfolio website using Figma Sites. You will build it entirely in your browser without writing a single line of code.

What You'll Build

When you hit Preview, you will see a polished, animated portfolio page that responds to your mouse with hover effects on project cards and reveals sections as you scroll down. You can resize the browser window to watch the layout reflow from desktop to mobile.

By the end of this project, you'll have:

A hero section with your name, role title, and a call-to-action button with an arrow icon that visitors notice immediately through visual hierarchy.
A projects showcase with cards that respond to hover with subtle animations and link-out icons, so visitors can browse your work and feel the page come alive under their cursor.
A responsive layout that automatically adapts between desktop and mobile screen sizes using breakpoints, so your portfolio looks great on any device.
A shareable preview link you can send to anyone to experience your interactive portfolio with scroll-triggered animations that bring sections to life as the viewer scrolls down.
Secret Mission: Add a second "About Me" page with social media icons and navigation linking both pages together.

Are there any prerequisites?

None. You only need a modern web browser (Chrome, Firefox, or Edge) and a free Figma account, which you will create in the first step. Figma runs entirely in the browser, so there is nothing to install.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters.

A portfolio is how you show the world what you can do. Taking a moment now to picture your finished, interactive site will keep you focused through every design decision ahead.

Set Up Your Figma Account and Create a Sites File

You need a design workspace before you can start building your portfolio. Figma runs entirely in your web browser, so there is nothing to install.

In this step, you will create a free Figma account, open a blank Figma Sites file, and get familiar with the workspace panels you will use throughout the project.

In this step, get ready to:

Create a free Figma account in your browser.
Create a new blank Figma Sites file named "My Portfolio".
Identify the workspace panels you will use to design your portfolio.

Create your Figma account

Open your web browser (Chrome, Firefox, or Edge).
Go to figma.com.
Click Get started for free in the top-right corner of the page.
Enter your email address and create a password.
Check your email inbox for a confirmation message from Figma and click the verification link.

What if Figma asks about my role or team?

During sign-up, Figma may ask about your role or whether others will join you. You can select "personal use" or skip these questions to proceed. They do not affect the free Starter plan.

Once you are signed in, you land on the file browser. This is your home dashboard showing a Drafts section in the left sidebar and a large open area in the center where your files will appear.

Verification email not arriving?

Check your spam or junk folder.
Make sure you typed your email correctly during sign-up.
Try resending the verification from the Figma sign-up page.

Still stuck? Help me sign into Figma.

Create a new Figma Sites file

Now that you are in the file browser, you will create a Figma Sites file. This is the file type designed specifically for building websites.

In the file browser, look at the top-left area of the screen for file creation options.
Click the Site button (it may appear as a dropdown option under a New or + button, depending on your view).
A template picker appears showing pre-made website templates.
Select the Blank option to start from scratch.

Your new file opens on the canvas. You will see a grey rectangular webpage container in the center of the screen.

At the very top-center of the screen, click directly on the default file name (something like "Untitled").
Type My Portfolio and press Enter to confirm.

The file name at the top of the screen now reads "My Portfolio".

Can't find the Site option?

Look for a dropdown arrow next to the + or New button in the file browser toolbar.
The Site option is separate from the regular Design file option.
Make sure you are on the file browser (home dashboard), not inside another file.

Still stuck? Help me create a Figma Sites file.

Get oriented in the workspace

Before you start designing, confirm you can identify the four main areas of the Figma Sites workspace. You will use all of them throughout this project.

Look at the left sidebar. It shows a panel labeled with your page name and a layers tree. Every element you add will appear here.
Look at the center canvas. This is the large grey area taking up most of the screen. You will see the grey rectangular webpage container here with a label at its top showing the page name and a breakpoint width (e.g., "Page 1 - 1440").
Look at the right sidebar. It has two tabs you will switch between constantly: Design (for styling: colors, fonts, spacing, sizes) and Interaction (for adding animations and behaviors).
Look at the top toolbar. It has icons for the Frame tool (looks like a hash/grid icon), the Text tool (a "T" icon), and shape tools.

What is Figma Sites?

Figma Sites is a product within Figma that lets you build real, interactive websites directly on the design canvas. Unlike regular Figma Design files (used for static mockups and prototypes), a Sites file gives you webpage containers, breakpoints, and web-specific interactions like scroll reveals and hover effects.

Everything you design in a Sites file can be previewed as a live webpage without writing any code.

Before moving on, take a moment to predict: what do you think you should see in your workspace right now?

You should see a blank Figma Sites workspace with an empty grey webpage container on the canvas. The top of the screen shows your file name as "My Portfolio". The left sidebar shows your page layers, the right sidebar shows Design and Interaction tabs, and the toolbar runs along the top.

Workspace looks different from the description?

If the right sidebar is collapsed or hidden, try clicking a panel edge or dragging it open from the right side of the screen.
If you see a welcome tour or overlay, dismiss it to reveal the full workspace.
Make sure you opened a Sites file and not a regular Design file. A Sites file shows a webpage container with a page label and width number.

Still stuck? Help me find all the workspace panels in Figma Sites.

Your workspace is set up and ready to go. Next up, you will build the hero section and see your first design come to life in the preview.

Build the Hero Section

Your Figma workspace is set up and ready to go. Now it's time to design the hero section, the first thing any visitor sees when they land on your portfolio.

The hero section establishes who you are with your name, role, and a call-to-action button. Building it first gives you a visible result right away and introduces the core building blocks of Figma Sites: frames, text layers, and auto layout.

In this step, get ready to:

Add text layers for your name, role, and description.
Create a call-to-action button with an arrow icon.
Preview the hero section in the browser.

Add text layers to the hero frame

Every section of a Figma Sites webpage lives inside a frame. You will create a hero frame first, then fill it with text layers for your name, role title, and a short description.

Click inside the grey webpage container on the canvas to select it. A blue outline appears around it.
Select the Frame tool from the toolbar at the top (the icon that looks like a hash/grid symbol, or press F).
Click and drag inside the webpage container to draw a frame. This frame will hold your entire hero section.
With the frame selected, look at the right sidebar under the Design tab. Find the width (W) field and set it to match the container width.

You should see a new empty frame inside your webpage container, outlined in blue.

Select the Text tool from the toolbar (the T icon, or press T on your keyboard).
Click inside your hero frame and type your name (e.g., Jane Smith).
With that text layer selected, find the font size field in the right sidebar and change it to 56.
Click below your name text inside the hero frame and add a second text layer with your role title (e.g., UI/UX Designer). Set its size to 24.
Add a third text layer below with a one-line description (e.g., Creating intuitive digital experiences). Set its size to 16.

You should see three text layers stacked on the canvas: your name in large text, your role title below it, and a short description at the bottom.

Text layers not appearing inside the frame?

Make sure you click inside the hero frame's boundaries before typing. If the text layer ended up outside the frame, drag it from the left sidebar layers panel into the hero frame.

If you cannot see your text at all, check the font color in the right sidebar. It may match the background color.

Why can't I see my text layers inside the hero frame?

Create the call-to-action button

A call-to-action button draws the visitor's eye and invites them to explore your work. You will build one with a brand color, white text, and an arrow icon.

Select the Frame tool (F) and draw a small rectangular frame below your text layers. Make it approximately 180 pixels wide and 48 pixels tall.
With the button frame selected, look at the right sidebar under Design. Find the Fill section and click the color swatch to open the color picker.
Choose a bold brand color (like a blue or purple) from the color picker.
Select the Text tool (T), click inside the button frame, and type View My Work.
With the text selected, change its color to white using the Fill section in the right sidebar.
Place your cursor after "View My Work", add a space, and type the arrow character →.

Your button frame should now show white text with an arrow on a colored background.

With the button frame selected, find the corner radius field in the right sidebar (the small rounded-corner icon with a number). Set it to 8.
Select all elements inside the button frame (the text and arrow), then press Shift+A to add auto layout.
In the auto layout settings that appear, set the direction to horizontal so the text and arrow sit side by side.
Now select ALL the hero elements together: name, role, description, and the button frame. Hold Shift and click each one, or drag a selection box around them.
Press Shift+A to apply auto layout to the group. This stacks all elements vertically.
In the right sidebar, find the gap/spacing field and set it to 20 so each element has breathing room between them.
Select the outer hero frame. In the right sidebar, click the + next to Fill to add a background color. Pick a dark or light shade that contrasts with your text.

What is auto layout?

Auto layout is a Figma feature that automatically arranges elements inside a frame based on rules you set. Instead of manually positioning each layer, auto layout spaces them evenly in a direction you choose (vertical or horizontal).

It works like CSS Flexbox on the web. When you add or remove an element, everything else adjusts automatically.

Button text not visible on the colored background?

Make sure you selected the text layer (not the frame) before changing the fill to white. Click directly on the text to select it, then set the fill color.

If the button frame lost its color after adding auto layout, re-select the button frame and re-apply the fill color.

Help me fix my button styling in Figma.

Preview the hero section

Before you preview, take a moment to predict what you will see. Will it look like a real website header with your name prominently displayed and a clickable-looking button?

Press Shift+Space on your keyboard to open the inline preview.

You should see your hero section rendered as a real webpage. Your name appears in large text at the top, your role title sits below it, followed by a short description, and a colored button with rounded corners and the arrow icon next to "View My Work". Everything is stacked vertically with consistent spacing.

Press Shift+Space again to close the preview and return to editing.

Preview looks different from what you expected?

If elements overlap or appear misaligned, make sure auto layout is applied to the hero frame (select it and check for "Auto layout" in the right sidebar). Without auto layout, elements use absolute positioning and can stack on top of each other.

If the hero section does not fill the width of the preview, select your hero frame and set its width to Fill container in the right sidebar.

My Figma Sites preview looks wrong. Help me debug it.

Your hero section is looking sharp. Next up, you will add a projects showcase section with cards that display your work and make the portfolio feel complete.

Add the Projects Showcase Section

Your hero section is looking sharp. Visitors now land on a strong first impression with your name, role, and a clear call to action.

A portfolio page needs to show actual work. In this step, you will build a projects showcase section with cards that each feature a placeholder thumbnail, a title with a link-out icon, and a short description.

In this step, get ready to:

Create a projects section frame with a "Featured Projects" heading.
Build a project card with a thumbnail, title, link-out icon, and description.
Duplicate the card into a row of four and arrange them with horizontal auto layout.

Create the section frame and first project card

Every distinct section of a webpage lives in its own frame. You will create a new frame below the hero to hold the projects content.

Click on an empty area of the canvas below your hero section, but still inside the grey webpage container.
Select the Frame tool from the toolbar at the top (the hash/grid icon, or press F on your keyboard).
Click and drag inside the webpage container, below the hero section, to draw a new frame.
Select the Text tool from the toolbar (the "T" icon, or press T on your keyboard).
Click inside your new frame and type Featured Projects.
With that text selected, go to the right sidebar under the Design tab and set the font size to 36 and toggle Bold on.

You should see a "Featured Projects" heading sitting inside a new frame below your hero section on the canvas.

Now build the first project card inside this same section frame.

Select the Frame tool (F) and draw a smaller frame inside the projects section, below the heading.
In the right sidebar under Design, set the width (W) to 280 and the height (H) to 320.
Select the Rectangle tool from the toolbar (the square icon in the shape tools).
Draw a rectangle inside the card frame that fills the card width and is about 180px tall.
With the rectangle selected, find the Fill section in the right sidebar and click the color swatch to set it to a light grey.

This grey rectangle is a placeholder simulating a project thumbnail image. You should see it sitting at the top of your card frame.

Select the Text tool (T) and click below the grey rectangle inside the card.
Type E-commerce Redesign ↗ (copy-paste the ↗ character for the link-out icon).
Set this text to 18px and toggle Bold on in the right sidebar.
Add another text layer below the title by selecting the Text tool and clicking below the title text.
Type a short description like A complete UX overhaul for an online store and set the font size to 14.
Select all elements inside the card (grey rectangle, title, description) by clicking the first element and Shift+clicking the others.
Press Shift+A to apply auto layout.
In the right sidebar, confirm the direction is set to vertical and change the gap (spacing) value to 12.

Your first project card should now show the grey thumbnail at the top, the bold title with the ↗ icon below it, and the description at the bottom, all neatly stacked with consistent 12px spacing.

What does the ↗ icon communicate?

The ↗ character is a link-out icon. It signals to visitors that clicking the card title will take them to an external page. This is a common UI pattern on portfolio sites to indicate viewable project links.

Card elements not stacking neatly?

Make sure you selected all three elements inside the card before pressing Shift+A. If only some elements are in the auto layout, click outside the card to deselect, then click the card frame name in the left sidebar layers panel and try applying auto layout to the frame itself.

If the spacing looks uneven, click on the auto layout frame and adjust the gap value in the right sidebar to 12.

Help me fix my card's auto layout in Figma

Duplicate cards into a horizontal row

One card is ready. Now you will duplicate it three more times and arrange all four cards side by side using horizontal auto layout.

Click on the card frame name in the left sidebar Layers panel to make sure the entire card frame is selected (not just a layer inside it).
Hold Alt (Windows) or Option (macOS) and drag the card to the right to duplicate it.
Repeat the Alt/Option-drag two more times so you have 4 cards total.

You should see four identical cards on your canvas. Now give each card a unique project name.

Double-click the title text on the second card and change it to Mobile Banking App ↗.
Double-click the title text on the third card and change it to Travel Blog Redesign ↗.
Double-click the title text on the fourth card and change it to SaaS Dashboard ↗.
Select all four card frames together by clicking the first card, then Shift+clicking the other three.
Press Shift+A to apply auto layout to the group.
In the right sidebar, click the horizontal direction arrow so the cards sit side by side.
Set the gap (spacing between cards) to 20.

Your four cards should now be arranged in a clean horizontal row with 20px spacing between each one.

If the cards extend beyond the webpage width, select each card and reduce its width, or set the card width to Fill so they distribute evenly.
Now select your entire projects section frame (containing the heading and the card row) from the left sidebar.
Press Shift+A to apply vertical auto layout to the section, so the heading sits above the card row.
Set the gap to 24 for spacing between the heading and the cards.

Why two layers of auto layout?

The card row uses horizontal auto layout to keep cards side by side. The section frame uses vertical auto layout to stack the heading above that row.

Nesting auto layout frames like this is how real responsive web design works. Each container controls the direction and spacing of its direct children.

Cards stacking vertically instead of side by side?

After pressing Shift+A, the default direction might be vertical. Look for the direction arrows in the auto layout section of the right sidebar and click the horizontal arrow (two arrows pointing left-right).

Help me arrange my cards horizontally in Figma

Preview the complete page

Your projects section is built. Before you move on, take a moment to predict what you expect to see when you preview the full page.

Think about what order the sections should appear in and how the four cards should be arranged.
Press Shift+Space to open the inline preview.

You should see your hero section at the top of the page, followed by the "Featured Projects" heading, and then four project cards displayed in a clean horizontal row below it. Each card shows a grey thumbnail, a bold title with the ↗ link-out icon, and a description.

Press Shift+Space again to close the preview and return to the canvas.

Cards overlapping or extending off-screen in preview?

Close the preview, select the card row auto layout frame, and reduce each card's width until all four fit within the webpage container. You can also set each card's width to Fill so they share the available space evenly.

Help me fix my card layout in the preview

Your portfolio now has real content to show off. Next up, you will make this layout responsive so it looks just as clean on a phone screen as it does on desktop.

Make It Responsive with Breakpoints

Your portfolio looks polished at desktop width. But try imagining someone opening it on their phone.

If you resize the preview window narrower right now, those four horizontal cards will overflow or overlap. Real websites need to work on every screen size. Breakpoints solve this by letting you define different layouts for different widths.

In this step, get ready to:

Add a mobile breakpoint at 390px to your webpage.
Adjust the card layout and text sizes for the narrower screen.
Preview the responsive reflow by dragging the preview window wider and narrower.

Add a mobile breakpoint

A breakpoint defines a screen width where your layout switches to a different arrangement. You will add one at 390px to represent a mobile phone screen.

Close the preview if it is still open by pressing Shift+Space or clicking the X.
Click on the grey webpage container to select it. You can click its label at the top, which shows something like "Page 1 - 1440".
Look at the top edge of the webpage container. You will see a label showing the current breakpoint width and a small + icon next to it.
Click that + icon to add a new breakpoint.
A dialog appears asking for a width. Enter 390 and confirm.

A second, narrower version of your webpage appears on the canvas next to the original. This represents what your site looks like on a mobile phone.

Look at the narrow version closely. The project cards are either getting cut off, overlapping, or squishing together. The horizontal layout simply does not fit in 390px.

What is a breakpoint?

A breakpoint is a specific screen width where your layout changes to accommodate a smaller (or larger) device. The desktop breakpoint at 1440px shows the full wide layout. The mobile breakpoint at 390px shows a narrower layout optimized for phones.

In Figma Sites, you can edit each breakpoint independently so the same content rearranges itself depending on the viewer's screen.

Adjust the mobile layout

The broken card row is expected. You need to switch the cards from horizontal to vertical so they stack on a narrow screen.

Click inside the mobile (narrow) breakpoint version of your page to start editing it.
Find and select the auto layout frame that contains your four project cards. Click on the card row area, then check the left sidebar to confirm you have the horizontal auto layout container selected, not just one individual card.
In the right sidebar under the Design tab, look for the auto layout direction controls (horizontal/vertical arrows).
Click the vertical direction arrow to switch the cards from side-by-side to stacked on top of each other.

The cards should now stack vertically in the mobile breakpoint. If they are still narrow columns, you need to stretch them to the full mobile width.

Select each card individually and change their width to Fill container so they stretch to the full mobile width.
Select your hero section heading (your name text at 56px). Reduce the font size to 36 for this mobile breakpoint.
Select the "Featured Projects" heading. Reduce its font size to 28 for mobile.

Why reduce the heading sizes?

A 56px heading that looks great on a wide desktop screen will dominate and crowd out content on a 390px phone screen. Scaling text down proportionally keeps the visual hierarchy balanced across screen sizes.

Look at the mobile breakpoint on the canvas. Your cards should now stack vertically, each filling the container width, with smaller heading text above them.

Cards still overlapping on mobile?

Make sure you selected the auto layout container that holds all four cards, not just one card. Check in the left sidebar layers panel that you have the parent frame selected.

If the cards still overlap after switching to vertical, try setting the gap/spacing between them to 20 in the auto layout spacing field.

Help me fix my mobile breakpoint layout

Preview the responsive reflow

The real test is watching the layout switch live as you resize the preview window. This is responsive web design in action.

Before you preview, think about what you expect to see. At what width do you think the layout will snap from the horizontal card row to the vertical stacked cards?

Press Shift+Space to open the inline preview.
Drag the right edge of the preview window to make it narrower. Watch carefully as the width decreases.

As you drag past the 390px threshold, the layout snaps to the mobile version. The project cards switch from a horizontal row to a vertical stack, each filling the screen width. Your headings shrink to the mobile sizes you set.

Drag the preview window wider again. The cards snap back to the horizontal row at desktop width.
Try dragging back and forth a few times to watch the breakpoint transition. Both layouts should look clean without overlapping or cut-off content.

Layout not changing when you resize?

Make sure you set the mobile breakpoint to 390 and confirmed it. If no second breakpoint appears on the canvas, go back and click the + icon at the top of the webpage container again.

Also confirm that your edits (vertical direction, fill container width, reduced font sizes) were made inside the mobile breakpoint version, not the desktop one. Click into the narrower version on the canvas to edit it.

Help me troubleshoot my breakpoints

Your portfolio now adapts to any screen size. On desktop, visitors see an elegant horizontal card row. On mobile, they get a clean vertical scroll through each project. Next up, you will bring this layout to life with hover effects and scroll-triggered animations.

Add Interactions and Animations

Your portfolio now adapts beautifully from desktop to mobile. The layout is solid, but scrolling through it feels static.

Real portfolio websites respond to how visitors interact with them. Cards animate in as they scroll into view, elements react to hover, and background shapes shift with cursor movement. Figma Sites lets you add all of these interactions without writing a single line of code.

In this step, get ready to:

Add scroll-triggered reveal animations to your project cards.
Apply hover effects that make cards respond to the cursor.
Create a parallax element in your hero section for subtle depth.

Add scroll-triggered reveals to your project cards

When a visitor scrolls down your portfolio, the project cards should animate into view instead of just sitting there statically. Figma Sites offers a Reveal interaction that triggers an animation when an element enters the viewport.

Switch to the desktop breakpoint (1440px) on your canvas.
Click on your first project card to select it. Check the left sidebar layers panel to confirm you have the entire card frame selected, not just an element inside it.
Look at the right sidebar. You will see two tabs at the top: Design and Interaction. Click the Interaction tab to switch to it.
You will see a section labeled Interactions with a small + icon. Click that + icon.
A dropdown menu appears listing available interactions. Select Reveal from the list.
A configuration panel appears below. Make sure the trigger is set to When enters viewport. This means the animation fires when the card scrolls into the visible area.
Repeat this process for each of the other 3 project cards: select the card, go to the Interaction tab, click +, choose Reveal, and confirm the trigger is When enters viewport.

Press Shift+Space to open the inline preview. Scroll down slowly past the hero section toward the project cards.

You should see the cards fade or slide into view as they enter the viewport instead of just sitting there statically.

What is a Reveal interaction?

Reveal is one of the interactions unique to Figma Sites. It plays an entrance animation the moment an element scrolls into the viewer's screen.

This is different from traditional Figma Design prototyping, which requires click-based triggers between frames. Figma Sites interactions like Reveal respond to scroll position automatically.

Cards not animating on scroll?

Make sure you selected the entire card frame, not just a layer inside it. Check the left sidebar to confirm the selected layer is the card's parent frame.

Also confirm the trigger says When enters viewport in the Interaction details panel. If it says something else, click the trigger field and change it.

If the cards are already visible without scrolling (your preview window is large enough to show everything), scroll up first so the cards are below the fold, then scroll back down.

Still stuck? Help me troubleshoot why my Reveal interactions aren't triggering when I scroll in the Figma Sites preview.

Add hover effects to your project cards

Scroll reveals bring cards to life on entry. Hover effects make them respond when a visitor moves their cursor over them, signaling that the cards are interactive.

Close the preview by pressing Shift+Space again or clicking the X.
Select your first project card frame again.
In the Interaction tab on the right sidebar, click the + icon again to add a second interaction to the same card.
Look for a hover interaction in the dropdown (it may appear as a While hovering trigger with options for scale, opacity, or other transforms). Select it.
Configure the effect: set the scale to 1.02 or 1.05 so the card grows slightly when hovered. Alternatively, set an opacity change to 0.9 if scale is not available.
Apply this hover interaction to all four cards by repeating the process: select the card, Interaction tab, +, hover effect, configure the same scale value.

Press Shift+Space to preview again. Move your mouse over each project card.

Each card should scale up slightly (or change opacity) when your cursor hovers over it, then return to normal when you move away.

Why do both interactions work together?

Each card now has two interactions stacked on it: Reveal (fires once on scroll) and Hover (fires every time the cursor enters). Figma Sites evaluates each interaction independently based on its own trigger, so they never conflict.

Hover effect not visible?

A scale of 1.02 is a 2% size increase. It is subtle. Try increasing to 1.05 if you cannot see the difference.

Make sure you are hovering in the preview window (opened with Shift+Space), not on the canvas itself. Hover interactions only trigger in the preview.

Need more help? Help me figure out why hover effects aren't showing on my project cards in the Figma Sites preview.

Add a parallax element to the hero section

Parallax creates a sense of depth by shifting an element's position based on cursor movement. Adding it to a background shape in your hero section gives the page a polished, layered feel.

Close the preview and scroll up to your hero section on the canvas.
Select the Ellipse tool from the toolbar (click and hold the shape icon to reveal more shape options, then select the ellipse, or press O). Draw a circle or soft blob shape behind your hero text, roughly 200-300px wide.
Set the fill to a soft, semi-transparent color (like a light purple or blue at 30-50% opacity) using the Fill section in the right sidebar Design tab.
If the shape covers your text, right-click it and choose Send to back so it sits behind the text layers.
With the shape still selected, switch to the Interaction tab in the right sidebar.
Click the + icon and select Parallax from the dropdown.
This creates a subtle depth effect where the shape shifts position as the user moves their cursor around the screen.

What is Parallax in Figma Sites?

Parallax is one of the cursor-based interactions unique to Figma Sites. It tracks the visitor's mouse position and shifts the element slightly in response, creating an illusion of depth.

It works best on decorative background elements. Applying it to text or buttons would make them harder to read and click.

Before you preview, predict what you expect to see. Will the parallax shape move when you scroll, or when you move your cursor?

Press Shift+Space to open the full preview.
Move your cursor around the hero section area. Watch the background shape shift position subtly following your mouse.
Scroll down slowly past the hero section toward the project cards. Watch them fade or slide into view as they enter the viewport.
Hover your mouse over a project card and observe it scale up slightly.

The parallax shape responds to cursor movement, not scrolling. You should see three distinct behaviors in one preview: the parallax shift in the hero, the reveal animations on scroll, and the hover scale on the cards.

Parallax shape not moving?

Make sure you selected the shape itself (the ellipse or blob), not the hero frame that contains it. The Parallax interaction must be on the individual element.

The movement is intentionally subtle. Move your cursor in wide sweeps across the hero area to see the shift more clearly.

Still not working? Help me debug why my Parallax interaction isn't responding to cursor movement in the Figma Sites preview.

Your portfolio is now fully interactive. Visitors will see cards reveal on scroll, respond to hover, and a parallax shape that adds depth to the hero. All of this without a single line of code.

Next up is a bonus challenge: you will add a second page with navigation and social media icons to turn this into a multi-page portfolio site.

Secret mission

Add a Second Page with Navigation and Social Icons

Real portfolio websites have multiple pages and social links. Can you add a second "About Me" page with social media icons and wire up navigation between both pages, all without writing a single line of code?

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely on the free Figma Starter plan, so there are no ongoing costs.

Resources you used:

1 Figma Sites file (My Portfolio) stored in your free Figma account cloud storage.

Keep everything running

No action needed. Choose this if you plan to keep iterating on your portfolio design or want to reference it later.

Your file stays in your Figma Drafts indefinitely at no cost.
You can reopen it anytime at figma.com by clicking on My Portfolio in your Drafts.

Pause - I'll come back to this later

Since Figma is entirely cloud-based and free on the Starter plan, there is nothing to shut down or pause. Your file is already idle when you close the browser tab.

Close the Figma browser tab. Your work is auto-saved.
When you are ready to return, go to figma.com and open My Portfolio from your Drafts.

Delete - I don't want to use this again

Remove the portfolio file permanently from your Figma account. This cannot be undone once you permanently delete.

Navigate to the Figma file browser by clicking the Figma logo in the top-left corner or going to figma.com.
Find the My Portfolio file in your Drafts.
Right-click the file and select Move to trash.
Click Move file to trash to confirm.
To permanently delete, click Trash in the left sidebar of the file browser.
Right-click the My Portfolio file in Trash and select Permanently delete.
Click Permanently delete file to confirm. This removes the file forever.

What about my Figma account?

Your free Figma account has no ongoing costs and does not need to be deleted. You can keep it for future design projects.

The free Starter plan does not support publishing your site to a live public URL. Your site lives as a previewable prototype inside Figma. To publish to a live URL, you would need to upgrade to a paid plan.

Nice Work!

Nice work! You just designed a fully interactive, responsive portfolio website in Figma Sites without writing a single line of code.

You've learned how to:

Designed a personal portfolio website from scratch in Figma Sites, complete with a hero section using visual hierarchy and a projects showcase with icon-enhanced cards.
Made the layout responsive using breakpoints, letting your portfolio automatically adapt between desktop and mobile screen sizes.
Added professional interactions and animations including scroll-triggered reveals, hover effects, and parallax to make the portfolio feel alive.
Secret Mission: Built a multi-page portfolio with an About page, social media icons with clickable links, and functional navigation linking both pages together.

Ready to quiz yourself?