Designer Portfolio

Designer Portfolio

Featuredbeginner

A case-study driven portfolio for graphic designers and illustrators with project pages, before/after blocks, client logos, and a private admin page to upload artwork.

portfoliodesigndesignerillustrationillustratorcreativecase-studyvisual

What you'll configure

Your name or studioRequired

e.g. Mara Studio

text
TaglineOptional

e.g. Brand identity & illustration for ambitious teams

text
Work categories (comma-separated)Optional

e.g. Brand Identity, Illustration, Web Design, Posters

text
Visual styleOptional
select
Extra requirementsOptional

e.g. Process diagrams, services list, blog

textarea

Example use case

“A graphic designer portfolio with branded case studies, client logos, and a private admin to upload new work”

Prompt previewClick to expand
Create a designer/illustrator portfolio for {person_name}. Tagline: {tagline}. Work categories: {categories}. Visual style: {style}.

Pages: Home (oversized type hero + selected work), Work index (filterable case-study cards), Case study detail (problem/process/solution sections with large image blocks, before/after comparison slider, embedded quotes), About (bio + skills + client logos strip), Contact, and a sign-in protected /admin page for uploading new work.

Use GenMB File Storage for artwork uploads (window.genmb.storage with the <genmb-uploader> web component, folder='work'), GenMB Auth to gate /admin (window.genmb.auth - owner-only), and a GenMB PostgreSQL projects table (window.genmb.db.projects) with id, title, slug, category, client, year, description (markdown), hero_image_url, gallery_urls (JSON), display_order, published_at.

Incrementally reveal images on scroll using IntersectionObserver. Image grid: <img loading="lazy" decoding="async"> with aspect-ratio to avoid CLS. Include a lightbox (Esc + ArrowLeft/ArrowRight + swipe) built inline in React.

Seed the projects table with 8 placeholder works using these exact Picsum URLs:
- https://picsum.photos/seed/design-brand-1/1400/1000
- https://picsum.photos/seed/design-brand-2/1400/1000
- https://picsum.photos/seed/design-illust-1/1400/1000
- https://picsum.photos/seed/design-illust-2/1400/1000
- https://picsum.photos/seed/design-poster-1/1000/1400
- https://picsum.photos/seed/design-poster-2/1000/1400
- https://picsum.photos/seed/design-web-1/1600/1000
- https://picsum.photos/seed/design-web-2/1600/1000

Dark mode default + toggle. Mobile responsive with 44x44 tap targets. URL-synced ?category= filter.

{extra}

Highlighted values like {variable} will be replaced with your inputs.

Fill in the fields and generate your app instantly

CategoryApp Starters
Difficultybeginner
Inputs5 fields
TypeFrontend
FrameworkReact
GenMB

Build apps with AI. Transform your ideas into reality.

Product

  • Features
  • How it works
  • Why GenMB
  • Pricing
  • Integrations

Solutions

  • Founders
  • Developers
  • Marketers
  • Educators

Use Cases

  • Prototyping
  • Internal Tools
  • Landing Pages
  • MVP Development

Explore

  • Showcase
  • Free Tools
  • Create New
  • Compare

Company

  • Team
  • Blog
  • Docs
  • Support

© 2026 GenMB. All rights reserved.

Privacy·Terms