Build a Portfolio — Create a site that gets you hired.

The Problem with Platform-Only Portfolios

If you are a designer or creative aspirant, you have likely been told to upload your work to social portfolio platforms. While these are useful for community engagement, relying on them as your primary portfolio can create friction for recruiters and limit how you showcase your work.

In this tutorial, we will cover why a personal website is essential for your career and guide you through building one for free using Framer.

Before we build, it is important to understand the design problem we are solving. When you rely solely on social portfolio networks, you encounter three main issues:

1. Login Friction: Recruiters often view portfolios on mobile or corporate devices where they are not logged in. If a platform forces a login to view your work, you risk losing that viewer immediately.

2. Lack of Context: Social platforms focus on the final visual (the "shot"). However, hiring managers need to see your process, sketches, and problem-solving methods—context that requires a dedicated case study page.

3. Standardization: On a social grid, your work looks identical to everyone else's. A personal website allows you to control the typography, layout, and branding to make a memorable impression.

Step 1: Setting Up Your Environment

We will use Framer for this tutorial because it allows you to design and publish without writing code, using an interface similar to design tools you already know.

1. Navigate to Framer.com and create a free account.

2. Once logged in, you will see your Dashboard. This is where your projects live.

Step 2: Selecting a Foundation

You can start from a blank canvas, but using a template (often called "Remixing") helps you understand how the tool works faster.

1. Open the Framer Marketplace and select the Templates category.

2. In the search bar, type "Portfolio" and select the Free filter.

3. Choose a template that has a layout you enjoy. Focus on the structure (navigation, grid), not the colors or images, as we will change those.

4. Click "Open in Framer" to copy the project to your dashboard.

Step 3: Customizing Your Content

Now that you have the structure, we need to personalize it.

Editing Text: Double-click on any text layer (like the Heading or Bio) to edit it. On the right-hand properties panel, you can adjust the font, size, and weight to match your personal brand.

Replacing Images

1. Select an image layer on the canvas.

2. On the right panel, look for the Fill or Image section.

3. Click "Choose Image" to upload your own project screenshots.

Tip: For a portfolio, curate your work. Select your top 3 best projects rather than uploading everything you have ever made.

Step 4: Creating a Case Study

Your homepage is the "menu," but the case study is the "meal." Most templates come with a project detail page.

1. On the left-hand Layers panel, navigate to the "Pages" section.

2. Click on the project page (often named /project or /detail).

3. Here, break your project down into sections: The Challenge, The Solution, and The Result.

4. Use the Insert menu (top left) to add new text blocks or image frames if you need more space.

Step 5: Mobile Optimization

A significant portion of web traffic is mobile. Framer handles responsiveness automatically, but you should always verify it manually.

1. At the top of the canvas, click the Mobile breakpoint icon.

2. Check that your text is readable and your buttons are large enough to tap.

3. If a headline is too large, you can reduce the font size specifically for the mobile version without affecting the desktop version.

Step 6: Publishing Your Site

The final step is making your work accessible to the world.

1. Click the blue Publish button in the top right corner.

2. Framer will generate a free staging domain for you (e.g., yourname.framer.website).

3. You can use this link immediately in your resume or social bio.

Wrap Up

By moving your portfolio to a custom website, you have removed the login barrier for recruiters and created a space where your work can shine with full context.

Remember, a portfolio is never truly "finished." Start with these steps, get your work live, and continue to refine your case studies as your skills grow.