Guides → Build a portfolio site on SGEN in 30 minutes

Build a portfolio site on SGEN in 30 minutes

A 30-minute walkthrough for designers, photographers, artists, and writers â€" project gallery, About, Contact, case studies, published.

This tutorial takes a working creative â€" anyone with a body of finished work and a need to put it on the public web â€" from a fresh SGEN account to a published portfolio site in about half an hour. The build covers six visible 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.

What you'll have at the end: a live portfolio site at a *.sgen.com preview URL (or your own domain, if you have one), six pages published, a gallery showing eight to twelve project tiles, four case-study deep-dives, an About page that reads like you wrote it, and a Contact form that delivers messages to your inbox. The site is responsive, accessible, and ready to send to clients.

What is this for?

This page is for creative professionals who need a portfolio site they can show clients, not a sandbox they'll embarrass themselves with. The thirty-minute target assumes you already have the work â€" photos, case studies, project descriptions, a headshot â€" sitting in folders on your machine. The build is the publish step, not the create step.

The structure is opinionated on purpose. Five sections of a portfolio matter to a hiring client or buying gallery: who you are, what you've made, the depth behind one or two pieces, how to reach you, and what you charge or how you work. The template covers four of those five out of the box and gives you a place to add the fifth.

This is a tutorial in the strict sense â€" you build the example, then keep it. Unlike the five-minute quickstart, the portfolio you publish here is meant to be the real thing, not a throwaway. The sample data slots are placeholders for your actual work; swap them inline as you go.

If you have already shipped a portfolio on Squarespace, Wix, Webflow, or WordPress, the SGEN path will feel familiar in structure and faster in finish. The performance and ownership characteristics differ from those platforms, but the authoring flow is recognizable.

Good use cases

Reach for this tutorial when:

You are a freelance designer or art director needing a portfolio for new-client outreach and you want it shipped before the next pitch.
You are a photographer migrating off a closed builder and you want full control of your image presentation without the export hassle of starting over.
You are an illustrator or visual artist showing a series and you need a gallery layout that respects aspect ratio and color fidelity.
You are a copywriter, technical writer, or content strategist publishing a clip-and-case-study portfolio with long-form depth on a handful of pieces.
You are a creative agency principal launching a personal brand alongside the agency site and you want a faster authoring loop than the agency stack offers.
You are a student or recent graduate building the first version of your professional presence and you want a result that holds up next to working pros.

What NOT to use this for

This tutorial does not cover:

Multi-contributor agency sites with case-study editing workflows across a team. That is a different build â€" agency tutorial covers it.
Print-portfolio PDF generation. SGEN is a web platform; the work shown here lives on the public web.
Stock-image licensing storefronts or paid downloads. That is an ecommerce build with a different starter.
Image-heavy blogs with thousands of posts. The portfolio template is shaped for ten to fifty projects, not five hundred. For a larger archive, start with the Blog Starter and add a portfolio section.
Wedding or event photographers running a booking workflow. Use the event tutorial for the booking flow; you can link out from a portfolio page if you want both.

How this connects to other features

The portfolio build touches five surfaces. Each is named here so you know where to come back when you extend the site later.

SG-Builder â€" the visual editor where the project tiles, case-study pages, and About layout get arranged. Most of the thirty minutes is spent here.
SG-Core â†' Media â€" the image library where your project photos and case-study assets live. The build assumes you upload here once, then place into pages from the picker.
SG-Modules â†' Forms â€" the form module powering the Contact page. The default contact form delivers to the email on your account; you can route to a team inbox later.
SG-Modules â†' SEO â€" the per-page meta description and OG image surface. Skip on first pass; revisit when you have time to write the descriptions.
SG-Dashboard â†' Analytics â€" the visit and referrer dashboard. Available once the site has traffic; not relevant during the build itself.

For the build steps alone, the only two surfaces you actively work in are SG-Builder and SG-Core â†' Media. The others are flagged so you know they exist when you need them.

See also the SGEN quickstart for the foundational five-minute account-creation flow, and the event tutorial, SaaS landing tutorial, and nonprofit tutorial for adjacent vertical builds.

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, "Jane Doe Studio" or "Mark Lee 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, the media library shows your images as a grid. 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 the Add Tile button 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 at the top 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: "Case Study 1," "Case Study 2," and so on. 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 the Replace Image button on the hero to swap in a hero shot from the media library. Rename the page title from "Case Study 1" 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 in the page list with real titles, each containing hero image and four sections of 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 from the media library. Click into the bio block and replace the placeholder copy with your own. The template ships about two hundred words of working sample bio you can use as a structural guide.

Update the Services strip with the four to six services you offer (Brand Identity, Editorial Photography, Visual Strategy, etc.) 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, services that match what you sell, tools that match how you work, 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 email you want messages routed to. If you want to add a copy recipient (a partner, an assistant), enter it in the CC Recipient field. 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. Delete the test message after.

What you'll see at the end of step 6: the Contact page with a working form, your delivery email confirmed, project-type options matching your actual practice, 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 on the site with three columns: meta title, meta description, OG image. The template fills sensible defaults; the sweep is to update the four pages a visitor sees first.

For Home, write a one-line description in the Meta Description field â€" about thirty words, what you do and who you do it for. For Projects, write a one-line description naming your project count and primary discipline. For About, write a one-line description of your professional identity. For each case study, write a one-line description of the project.

Upload one OG image to use across the site â€" typically the strongest project shot â€" using Upload OG Image at the top of the SEO panel. SGEN applies it as the default; per-page OG images override it later.

What you'll see at the end of step 7: the SEO panel showing all four primary pages with custom meta descriptions, one OG image set as the site default, and the All Pages Configured banner showing green.

8. Publish and view the live site (â‰¤ 1 minute)

Return to Pages. The page list shows every page in the site with a status column reading Draft for each. Click the Publish All button at the top right of the page list. 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 in a new browser tab at https://.sgen.com. Click through the Home â†' Projects â†' a case study â†' About â†' Contact flow to verify each page loads with your real content.

Open the same URL on your phone. The template is responsive out of the box; navigation collapses to a hamburger on mobile, the gallery reflows to two columns, the case-study hero scales to viewport.

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 four body sections
An About page with your headshot, bio, services, and (optionally) tools
A working Contact form that delivers messages to your inbox, tested with a confirmed test submission
An SEO baseline â€" meta descriptions on the four primary pages, one OG image set as the site default

If you can send the live URL to a friend who has never seen the site, and they can navigate from Home to a case study to your About page to the Contact form and submit a message that lands in your inbox, the build worked. That is the verification.

Variations

Seven adaptations of the base build, each suited to a specific portfolio shape.

Photographer with a single ongoing series. Reduce the Projects grid from twelve tiles to one large hero project plus a six-tile sub-grid. Use the case-study page format for the lead series and skip individual case studies for the smaller works.

Designer with case studies that need long-form depth. Add a second body section to each case-study page using the Add Section button in SG-Builder. The template ships with one body block; cases that need process diagrams or before-after comparisons benefit from two or three.

Illustrator showing color-critical work. In step 7's SEO sweep, also visit SG-Modules â†' Media Settings and set the global image-rendering preference to High Fidelity (no recompression on display). The default re-renders for speed; high-fidelity preserves color but trades a few hundred milliseconds of load time.

Writer with a clip-driven portfolio. Swap the gallery tiles for text-led clip cards using the Tile Style â†' Text-Lead dropdown in the Projects page right rail. Each tile shows publication name, headline, and date instead of an image.

Multi-discipline creative (designer plus photographer plus writer). Add a discipline filter to the Projects page using Add Component â†' Tag Filter in SG-Builder. Tag each project with its discipline; the filter renders as a sticky toolbar at the top of the gallery.

Recent graduate with thin case studies. Cut the case-study count from four to two and use the saved time to write a stronger About page. Two strong case studies plus a strong About outperform four thin ones for hiring conversations.

Senior creative with twenty-plus projects. Add a Year filter to the Projects page and a Pagination component below the grid. The template handles up to fifty tiles per page; paginate at fifty.

Common pitfalls

Four things go wrong most often during a portfolio build. Each has a one-step fix.

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

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

The Contact form delivers to a spam folder. First-time deliveries from a new *.sgen.com subdomain sometimes land in spam until the receiving inbox marks the sender as safe. Send yourself a test submission, mark it as Not Spam, and subsequent submissions deliver to inbox. Plan ahead â€" set this up before you put the live URL on a business card.

The About page bio reads like the template. The placeholder bio is structural â€" first sentence states the role and city, second states the focus, third names a strength, fourth lists notable clients or publications. Use that structure but rewrite every sentence in your voice. A bio that retains template phrasing is the most common signal that a portfolio was rushed.

Examples

Three real-shape portfolio builds, one per primary creative discipline.

Example A â€" Independent designer (Jane Doe Studio)

Jane is a freelance brand designer with eleven projects and a focus on editorial and small-business identity. She picks the Portfolio Starter, uploads eleven project images and one headshot, fills the gallery with eleven tiles, writes four case studies (two editorial brands, two small businesses), updates her About page to lead with "Brand designer working with editorial and small-business clients out of Brooklyn," and ships a working Contact form. Total build time: 28 minutes.

Example B â€" Editorial photographer (Mark Lee Photo)

Mark is a working editorial photographer with three ongoing series and twenty-two finished pieces. He picks the Portfolio Starter, uploads twenty-two images plus a black-and-white headshot, restructures the Projects page to lead with a six-tile hero section (one series) plus a sixteen-tile secondary grid (the other two series), writes one long case study on the lead series, and updates his Contact form to add a "Print Inquiry" project type. Total build time: 33 minutes.

Example C â€" Senior copywriter (Sarah Choi Writing)

Sarah is a senior copywriter with eight years of agency work and a focus on technical-product launches. She picks the Portfolio Starter, swaps the gallery tile style to Text-Lead, fills twelve tiles with publication and headline metadata, writes four case studies on her largest launches (each about 350 words), updates her About to lead with "Copywriter for technical products â€" eight years agency-side, currently freelance," and adds a Contact project type for "Launch Copy." Total build time: 26 minutes.

Why the thirty-minute target works

The thirty-minute target is honest, not marketing. Internal timing runs on a portfolio build with prepared assets consistently land between twenty-six and thirty-four minutes for a first-time SGEN user and between eighteen and twenty-three minutes for an operator who has shipped one portfolio on the platform already. The variance lives in three steps.

Step 2 (media upload) varies the most. Twelve project images and a headshot at 1600 pixels on the long edge upload in about ninety seconds on a steady connection; on a hotel connection or rural broadband the upload can run three to four minutes. If you know your connection is slow, run the upload in a separate background tab while you write your About paragraph in step 5.

Step 4 (case studies) varies the second-most. The build assumes the writeups are prepared and pasted. If you write the case studies during the build, plan a separate session for that â€" case-study writing is a different cognitive task from site assembly and benefits from focused time rather than the build session.

Step 7 (SEO sweep) is the most-skipped step on first builds. Skipping it does not break the site; the template ships with default meta descriptions that work. But the meta description is what shows in search results and link previews â€" a one-line custom description per primary page is worth the two minutes the sweep takes.

If any single step runs longer than its target by more than fifty percent, stop and check: you are usually solving a different problem than the build (writing copy from scratch, color-grading photos, hunting for the headshot). Pause the build, finish the off-build task, and return.

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 (recommended: same week, 30-60 minutes):

Rewrite every case study with a stronger opening line. The first sentence is what gets read on a six-second scan.
Replace any project image you feel iffy about. Iffy images age fast on a portfolio.
Add a one-line testimonial to each case study from the client. A real client quote outperforms three hundred words of self-description.
Set up the SGEN Analytics dashboard so you see which projects get the most visits â€" those are the ones to lead with on outreach.

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

Point your custom domain at the site. SG-Admin â†' Settings â†' Domains. Add the domain, copy the two DNS records, paste them at your registrar, 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. A real favicon distinguishes the browser tab from twenty other portfolio tabs in a client's research session.
Wire Google Analytics or Plausible if you want richer traffic data than the built-in SGEN dashboard provides.

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 â€" pick your second read

The portfolio is shipped. Pick one of three second reads depending on what comes next:

You want to add a blog or writing section to the portfolio. Read the Blog setup guide for adding a writing surface alongside the gallery.
You want to add a contact-form workflow with CRM routing. Read the Forms module reference for routing rules, integrations, and submission archives.
You want to migrate from an existing portfolio platform. Read the Migrations index for the import paths from Squarespace, Wix, Webflow, and WordPress.

Guides

Reference

Changelog

Roadmap