Build a portfolio site on SGEN in 30 minutes

SG-Core Media library — Upload Files modal with WebP/Compression toggles, then the populated thumbnail grid

⏱ 60-second answer below · full tutorial ≈ 12 min · follow the step headers to move faster.

In short. Pick the Portfolio Starter template in SG-Dashboard, upload your images with WebP compression on, fill the gallery tiles, write four case studies, update the About page, wire the Contact form, run the SEO sweep, and publish. Eight steps. Thirty minutes with assets ready. You finish with a live portfolio at a *.sgen.com URL — responsive, real content, no placeholders.

On this page: Before you start · Steps · Variations · Common pitfalls · After the build

This tutorial takes a working creative — anyone with a body of finished work — from a fresh SGEN account to a published portfolio site in about half an hour. The build covers six pages, one project gallery, four case studies, an About page, and a Contact page with a working form. Every step lists the click path, the expected screen, and the time budget.

Good fit / not a fit

Use this tutorial	Use a different one
Freelance designer or photographer — solo portfolio, 10-50 projects	Multi-contributor agency case studies → agency tutorial
Illustrator, visual artist, copywriter, or content strategist	Booking flow for event/wedding photographers → event tutorial
Student or recent graduate building a first professional presence	Stock-image storefront or paid downloads → ecommerce tutorial

Surfaces this build touches

The thirty minutes splits between two active surfaces — SG-Builder (layout + content) and SG-Core → Media (image library). Three others are referenced for later:

Surface	Role in this build
SG-Builder	Project tiles, case-study pages, About layout
SG-Core → Media	Image library — upload once, place from picker
SG-Modules → Forms	Contact form (pre-wired to your account email)
SG-Modules → SEO	Meta descriptions + OG image (step 7)
SG-Dashboard → Analytics	Traffic dashboard — relevant after launch, not during build

Before you start

You need five things gathered before you begin. Each is a one-time collection; once you have them in a folder, the build is mechanical.

An SGEN account with at least the Launch tier active. The free trial covers the thirty-minute build.
Eight to twelve project images. JPG or WebP, exported at 1600 pixels on the long edge, color-corrected. If you shoot RAW, export web-ready versions before the build session — the upload step is not the place to color-grade.
A headshot. Square or three-by-four, 800 pixels on the long edge. If you do not have one, use a clear cropped photo from a recent project; you can swap later.
Four short case-study writeups. One paragraph per piece, covering the brief, the constraint, the decision, and the outcome. Two hundred to three hundred words each is the target.
Your contact details. Email address you check daily, optional phone and social handles, optional location city.

You do not need:

A custom domain on day one. The *.sgen.com preview URL is shareable from the moment step 6 finishes.
A logo. A typeset wordmark in your name is a strong default for a personal portfolio and the template includes one.
A copywriter. The About page templates carry working sample copy you can rewrite during the build.

Where to find it

Every step in the build starts from one of these three URLs:

Step	URL	What lives here
1 (template)	`https://dashboard.sgen.com`	New-site flow, Portfolio Starter pick
2-7 (build)	`https://.sgen.com/sg-admin`	Per-site editor, pages, media, forms
8 (view)	`https://.sgen.com`	The live public portfolio site

Steps

Eight steps. The first six are the build. Step seven is the SEO sweep. Step eight is the publish-and-view. Time budgets are per step; the total runs about thirty minutes for a first-time SGEN user with assets ready.

1. Pick the Portfolio Starter template (≤ 3 minutes)

From SG-Dashboard, click Create New Site. The starter grid shows six templates; pick Portfolio Starter. The thumbnail shows a hero with a single oversize photograph, a project grid below, and an About strip — that is the shape you will publish.

Name the site with your professional name (for example, "Your Name Studio" or "Your Name Photo"). Accept the suggested preview subdomain or pick a shorter version. Click Create Site. SGEN provisions in about five seconds.

What you'll see at the end of step 1: SG-Admin loaded with the Portfolio Starter pages already in place — Home, Projects, About, Contact, plus four placeholder case-study pages.

2. Upload your project images (≤ 5 minutes)

Click SG-Core → Media in the left sidebar. The media library opens with a single empty-state card and a large Upload Files button. Click it, then drag your eight-to-twelve project images and your headshot into the drop zone.

Before clicking Upload Files in the modal, toggle Format: WebP and Compression: On. Both default off and the upload runs uncompressed without them. SGEN converts and compresses on the server side; the conversion takes about two seconds per image.

When the upload finishes, tag the headshot with the about label and the project images with the project label using the right-rail tag field. Tags make the picker faster later.

What you'll see at the end of step 2: the media library with all uploaded images visible as thumbnails, each showing the new WebP file size in the footer of the card.

3. Build the project gallery on the Projects page (≤ 6 minutes)

Click Pages → Projects in the left sidebar. The Projects page opens in SG-Builder with a placeholder twelve-tile grid. Click the first tile to select it; the right rail shows the tile's settings — image, project name, role, and link target.

Click Replace Image in the right rail. The media picker opens. Filter by the project tag, click your first project image, and click Insert. Type the project name in the Project Name field and your role (Designer, Photographer, Lead, etc.) in the Role field. Set the link target to None for now; you will wire the case studies in step 4.

Repeat for each tile. The template ships with twelve tiles; if you have fewer projects, right-click an unused tile and choose Delete Tile. If you have more than twelve, click Add Tile at the bottom of the grid.

What you'll see at the end of step 3: the Projects page with your real images filling the grid, names and roles set, no broken placeholder tiles, and the page status pill reading Draft (autosaved 2s ago).

4. Write the four case studies (≤ 8 minutes)

Click Pages → Case Studies in the left sidebar. Four placeholder case-study pages appear in the list. Click the first one to open it in SG-Builder.

The case-study template has five sections: hero image, project metadata, problem, approach, outcome. Paste your prepared writeup into the corresponding sections. Use Replace Image on the hero to swap in a hero shot from the media library. Rename the page title to the real project name in the page settings.

Repeat for the other three case studies. When all four are written and titled, return to the Projects page and link each gallery tile to its matching case study using the Link Target field in the tile's right rail.

What you'll see at the end of step 4: four case-study pages with real titles, each with hero image and body copy, all linked from the corresponding gallery tile on the Projects page.

5. Customize the About page (≤ 3 minutes)

Click Pages → About. The About page loads in SG-Builder with a two-column layout — headshot on the left, bio on the right, plus a services strip and a tools strip below.

Click the headshot placeholder, then Replace Image in the right rail, and pick your tagged headshot. Click into the bio block and replace the placeholder copy with your own. Update the Services strip with the four to six services you offer and the Tools strip with the software or methods you use. If you are early-career or a specialist, delete the Tools strip entirely from the right rail.

What you'll see at the end of step 5: the About page showing your headshot, your bio in your voice, and zero placeholder text remaining.

6. Wire the Contact form (≤ 2 minutes)

Click Pages → Contact. The Contact page loads with a five-field form: name, email, project type, budget range, and message. The form is already wired to deliver to the email on your account.

Verify the email field at the top of the right rail shows the address you want messages routed to. Optional: update the Project Type dropdown options to match the work you take on; the defaults are "Brand Identity," "Editorial," "Commercial," and "Other," and you can edit them inline.

Click the form once, then Test Submission in the right rail. SGEN sends a test message to your account email; check your inbox to confirm delivery.

What you'll see at the end of step 6: the Contact page with a working form, your delivery email confirmed, and a test message confirmed in your inbox.

7. SEO sweep — meta descriptions and OG images (≤ 2 minutes)

Click SG-Modules → SEO. The SEO panel shows every page with three columns: meta title, meta description, OG image. The template fills sensible defaults; update the four pages a visitor sees first.

For Home, write a one-line description — about thirty words, what you do and who you do it for. For Projects, name your project count and primary discipline. For About, describe your professional identity. For each case study, describe the project in one line.

Upload one OG image across the site — typically the strongest project shot — using Upload OG Image at the top of the SEO panel.

What you'll see at the end of step 7: the SEO panel with custom meta descriptions on all four primary pages and one OG image set as the site default.

8. Publish and view the live site (≤ 1 minute)

Return to Pages. Click the Publish All button at the top right. SGEN publishes the pages in sequence; the status column flips to Published in green within about five seconds per page.

Click View Site in the top right of SG-Admin. The live portfolio opens at https://.sgen.com. Click through Home → Projects → a case study → About → Contact to verify each page loads with your real content. Check on your phone — the template is responsive out of the box.

What you'll see at the end of step 8: a live portfolio site at your *.sgen.com preview URL, six published pages, a working gallery, four case-study deep-dives, a contact form that delivers to your inbox, and a responsive mobile view.

What success looks like

You finish the build with seven concrete artifacts:

A live portfolio site at https://.sgen.com, publicly accessible
Six published pages: Home, Projects, four Case Studies, About, Contact
A project gallery with eight to twelve real images, no placeholders
Four case-study deep-dives, each linked from the gallery, each with hero and body copy
An About page with your headshot, bio, and services
A working Contact form delivering messages to your inbox, confirmed by a test submission
An SEO baseline — meta descriptions on the four primary pages, one OG image set site-wide

Verification: send the live URL to someone who hasn't seen it. If they can navigate Home → a case study → About → Contact form and the submission lands in your inbox, the build is done.

Variations

Shape	Adaptation
Photographer, single ongoing series	Reduce the grid to one hero project + a six-tile sub-grid. Use a case-study page for the lead series; skip individual case studies for smaller works.
Designer needing long-form depth	Add a second body section to each case-study page via Add Section in SG-Builder. Cases with process diagrams or before-after comparisons benefit from two or three sections.
Illustrator with color-critical work	In step 7, also visit SG-Modules → Media Settings and set the image-rendering preference to High Fidelity. Preserves color; trades a few hundred milliseconds of load time.
Writer with a clip portfolio	Swap gallery tiles to text-led clip cards via Tile Style → Text-Lead in the Projects page right rail. Each tile shows publication, headline, and date instead of an image.
Multi-discipline creative	Add a discipline filter via Add Component → Tag Filter in SG-Builder. Tag each project with its discipline; the filter renders as a sticky toolbar.
Recent graduate, thin case studies	Cut case studies from four to two and invest the time in a stronger About page. Two strong cases outperform four thin ones for hiring conversations.
Senior creative, 20+ projects	Add a Year filter and a Pagination component below the grid. The template handles up to fifty tiles per page.

Common pitfalls

Project images load slowly. Re-check that Compression: On and Format: WebP were toggled in step 2. If images were uploaded with defaults on, open the media library, select all project images, and click Re-process with WebP in the toolbar. SGEN re-compresses in place; the CDN refreshes within about a minute.

The gallery shows broken tiles after publish. A tile with an empty image slot renders as a broken thumbnail. Open Projects in SG-Builder, scan for tiles with the Image Missing badge, and either fill them or right-click and Delete Tile.

The Contact form goes to spam. First-time deliveries from a new *.sgen.com subdomain sometimes land in spam. Send yourself a test submission, mark it as Not Spam, and subsequent deliveries go to inbox. Do this before sharing the URL.

The About page bio reads like the template. The placeholder is structural — role and city, focus, a strength, notable clients. Use that structure but rewrite every sentence in your voice. Template phrasing is the most common signal that a portfolio was rushed.

Examples

Example A — Independent brand designer

Eleven projects, focus on editorial and small-business identity. Uploaded eleven project images and a headshot, filled the gallery with eleven tiles, wrote four case studies (two editorial brands, two small businesses), updated the About page, shipped a working Contact form. Total build time: 28 minutes.

Example B — Editorial photographer

Three ongoing series, twenty-two finished pieces. Uploaded twenty-two images, restructured the Projects page to lead with a six-tile hero section for the primary series plus a sixteen-tile secondary grid, wrote one long case study on the lead series, added a "Print Inquiry" project type to the Contact form. Total build time: 33 minutes.

Example C — Senior copywriter

Eight years of agency work, focus on technical-product launches. Swapped gallery tiles to Text-Lead, filled twelve tiles with publication and headline metadata, wrote four case studies on the largest launches, added a "Launch Copy" Contact project type. Total build time: 26 minutes.

After the build — second and third passes

The thirty-minute build is the publish step. Second and third passes are where the portfolio sharpens.

Second pass (same week, 30-60 minutes):

Rewrite every case study with a stronger opening line — that first sentence is what gets read on a six-second scan.
Replace any project image you feel unsure about. Weak images age fast on a portfolio.
Add a one-line client quote to each case study. A real quote outperforms three hundred words of self-description.
Check the SGEN Analytics dashboard to see which projects get the most visits — lead with those on outreach.

Third pass (when you have a custom domain, 15-30 minutes):

Point your domain at the site: SG-Admin → Settings → Domains. Add the domain, copy the two DNS records, paste them at your registrar, and wait for propagation.
Update the canonical URL in SG-Modules → SEO to the custom domain.
Add a favicon: SG-Admin → Settings → Site Identity → Favicon Upload.

What to do if it does not work

The case-study gallery is not showing all cases. Confirm each case-study record's status is Published (not Draft). Also confirm the gallery block's filter settings are not excluding any case by tag or category.
The contact form does not send a notification. SMTP must be configured under Site Settings → Email for form notification emails to send. Open the settings panel, send a test email, and confirm delivery before launching.
Images in the gallery are loading slowly or appearing blurry. Go to the Media Library and confirm images are uploaded at full resolution and that WebP optimization is enabled in the Media upload settings.
The public site shows a different layout than the SG-Builder preview. Open the page in SG-Builder and confirm all breakpoint-specific styles are saved. Missing mobile overrides are the most common cause of preview-vs-live layout differences.
A project page returns a page-not-found. Confirm the page slug is correct and the page is Published. If you changed the slug after publishing, add a redirect from the old slug under Modules → Redirects.

What's next

Add a blog or writing section — Blog setup guide
Add contact-form routing or CRM integration — Forms module reference
Migrate from an existing portfolio platform — Migrations index