WisyLink Blog

portfolio websitefreelancersdesignerscontact formpersonal website

How to Build a Portfolio Website With AI (Contact Form)

Build a portfolio website with AI: project pages with clean URLs, a contact form that saves and emails messages, an admin area and your own domain.

11 min read
How to Build a Portfolio Website With AI (Contact Form)

To build a portfolio website with AI, collect your best projects, images and a short bio, then describe the layout and tone you want. The builder creates project pages, an about section and a contact form that stores messages. You can add new work from a private admin area and publish the site on your own domain.

  • Eight to twelve strong projects, each with a short story, win more work than a gallery of everything you have made.
  • Attach your own images (up to 25 MB per file) when you describe the site. WisyLink uses them as they are and does not generate photos.
  • Ask for one page per project at a clean URL; projects you add later from the admin area go live without a rebuild.
  • The contact form saves every message. Email alerts need your own SMTP account, added once under Integrations.
  • Free links last 30 days. A paid plan keeps the site live while you're subscribed; your own domain works on any plan, the free one included.

What a portfolio needs to win clients

A portfolio website has one job: get the right person to contact you. That person is usually an art director, a hiring manager or a business owner scanning several portfolios in a row. They decide quickly whether you do their kind of work, whether it looks good, and whether contacting you is easy. Everything on the site should serve those three judgments.

The elements of a portfolio website that brings enquiries
ElementPurposeTip
Positioning lineSays who you help and how"Brand identity for independent restaurants" beats "Creative designer"
Selected work gridShows range and quality at a glanceLead with the project closest to the work you want more of
Project pagesProve how you think, not only how it looksContext, your role, process, result
AboutBuilds trust in the person behind the workA real photo of you and three or four sentences
Services and processAnswers "what would working together look like?"List what you deliver and roughly how a project runs
TestimonialsThird-party proofOnly real quotes, with the client's permission
Contact formTurns interest into a conversationAsk for project type and timeline to qualify leads
Share cardMakes your link look deliberate in messagesCheck it by pasting the link into a chat app before launch

Prepare your work: images, short case studies, bio

Preparation decides the quality of the result more than the prompt does. Spend an evening on it before you open the chat.

Images

Choose the projects first, then export their images at web size in JPEG, PNG or WebP, and give files descriptive names such as harbour-cafe-menu-cover.jpg rather than IMG_0412.jpg. Each file you attach to the chat can be up to 25 MB, and the chat accepts common image formats, PDF, Word documents and MP4 among others. Photographers should choose a series per project rather than single frames, and check that client agreements and model releases allow public use.

Can I upload my own images and videos?

Yes. Files you attach are used as they are; the builder never replaces your work with generated images. Short MP4 clips under 25 MB work as files on the site, but every upload counts toward your plan's storage and bandwidth. For a showreel or a long video library, host the videos on a video platform and ask for them to be embedded on the project pages.

Case studies and bio

Write each case study in five short parts: client and context, the problem, what you did, the result, and credits (your role on team projects). Three to six sentences per project is enough. For the about section, write in the first person if you work alone and in the third person if you present a studio. Put everything in one document and attach it to the chat; it saves you from typing it all into the prompt.

Build it: prompt template

If you have never built a site this way, the step-by-step guide to building a website with AI covers the basics. For a portfolio, the process looks like this:

  1. Create a free account on the Community plan and open a new chat.
  2. Attach your images and your case study document.
  3. Paste the prompt below, filled in with your own details.
  4. Answer Wisy's question if it asks one. Each turn it either asks one short question or starts the build.
  5. Watch the task list while the build runs, then open the live link on your phone and on a laptop.
  6. Ask for specific changes, one theme per message: "make project titles larger and move the client name under them" works better than "make it nicer".
  7. Add your SMTP details under Integrations so new messages reach your inbox.
  8. Connect your domain when you are ready to launch, and upgrade to keep the site live.

Build a portfolio website for [your name], a [discipline] based in [city] who works with [type of clients].

Pages: a home page with the line "[positioning line]" and a grid of selected work; a Work page listing all projects with a filter by [category list]; one page per project at /work/[project-name] with the case study text, the images I attached and links to the previous and next project; an About page with my bio and photo; a Contact page.

Contact form fields: name, email, project type, timeline, message. Save every message and show them in a private admin area. Email me each new message.

Admin area: a login only for me where I can add, edit, reorder and hide projects and upload their images.

Look and feel: [three adjectives], [colour preference], typography that feels [for example editorial and calm]. Let the images lead; keep text short.

Describe the style in concrete words rather than "modern" or "clean", which mean something different to everyone. More wording patterns are in the AI website builder prompt templates. On the free plan, Wisy keeps each build to a short first version, so if the first result skips the admin area, ask for it in a second message.

One page per project with clean URLs

A single scrolling page is fine for three projects. Beyond that, give each project its own page. A project page at an address like /work/harbour-cafe-rebrand can be sent directly to a prospect who asked for restaurant work, carries its own title and description in search results, and can rank for its own subject, for example "packaging design for a craft brewery".

On WisyLink, projects you add as records each get their own crawlable page, rendered from your saved data. A new project appears on the Work page, at its own URL and in the site's sitemap within about a minute of publishing it, with no rebuild. Make each project page say more than its card does: the context, two or three process images, the outcome and the credits. A page that only repeats the title and one photo gives neither visitors nor search engines a reason to stay.

Choose short, descriptive project addresses and keep them. If you rename a project after sharing its link, ask for a redirect from the old address so earlier links keep working.

A contact form that saves messages and emails you (SMTP)

The contact form stores each submission in the site's own database, and you read them in the admin area. That part works from the first build. Email alerts need one more step: the site sends mail through your own SMTP account, the outgoing-mail settings your email provider gives you. You paste the host, port, username, password and sender address under Integrations, where they are encrypted and never shown again. Until you do, messages are still saved; you just don't get an email about them. Never paste a password into the chat itself.

Three details make the form more useful:

  • Qualifying fields. Project type and timeline tell you in seconds which enquiry to answer first. A budget range works for some disciplines and scares people away in others; leave it out if unsure.
  • Spam limits. Ask the builder to limit repeated submissions from the same email address, so a script cannot fill your inbox or your database.
  • A sender address on your domain. Once your domain is connected, set the sender to an address such as hello@yourname.com, especially if you also ask for an automatic confirmation email to the person who wrote.

Before launch, send yourself a test message and confirm it appears in the admin area and in your inbox, including the spam folder.

Fast, shareable and findable: social cards and SEO basics

Every WisyLink site is rendered on the server, so search engines and link previews see the full page on the first request. Each page gets its own title, meta description and canonical URL, plus Open Graph and Twitter card tags, structured data, a favicon, a /sitemap.xml and a /robots.txt. The first build also designs a share image for the site, so your link shows a deliberate card instead of a blank box when you paste it into a message.

Know one limit: the share card is a single designed graphic for the whole site, drawn as vector art. It does not show your own photographs. If you want a different look for it, describe the change in the chat.

The rest is content, and that is your part:

  • Alt text. Describe what each image shows in plain words: "Hand-lettered menu cover for a harbourside café". Google's image SEO best practices call alt text the most important attribute for image metadata, and it also makes the site usable with a screen reader.
  • Words on project pages. Search engines read text, not pixels. Name the client type, the deliverable and, if you work locally, the place: "wedding photographer in Porto".
  • Image size. Web-sized exports keep pages fast on phones, where prospects often open a link someone forwarded.

Add new projects from an admin area

A portfolio that never changes starts to look abandoned. Ask for a private admin area in the first or second message, with a form for each project: title, address, summary, case study text, cover image, gallery images, category, display order and a published switch.

Can I add new projects without rebuilding the site?

Yes. Projects are saved data, not code, so adding one from the admin area doesn't start a build and doesn't use your build allowance. The new page reaches visitors within about a minute. You only go back to the chat when you want to change the design or add a feature, such as a client logo strip or a "currently available" banner.

Images uploaded through the admin area are stored as public files, served quickly, and limited to 25 MB each. Public uploads don't accept SVG files, so export logos as PNG. The build's final note tells you how to get into the admin area: often the first account you register becomes the admin, or the note gives you sign-in details. Sign in, test it, and replace any starting password with your own.

Your own domain and launch

Your site starts at an address like https://<id>.wisylink.com, which is perfect for testing. On the free Community plan, links last 30 days, then stay marked for deletion for one more week before they are removed. You can connect yourname.com on any plan, but to keep the portfolio live past those 30 days, move to a paid plan; Starter is $7 a month (see plans).

In Domains you connect a domain you own; if you don't have one yet, register one with any domain registrar first. Connecting with a single DNS record keeps your email untouched; pointing your nameservers to WisyLink replaces every existing DNS record, including email, so only choose it if you are ready to recreate those. HTTPS is set up automatically once the domain verifies. The full walkthrough is in how to connect a custom domain to your AI-built website.

Before you share the link widely:

  1. Open every project page on a phone and check image cropping.
  2. Send a test enquiry and confirm both the admin entry and the email.
  3. Paste the link into a messaging app and check the preview card.
  4. Read every word once more; typos on a portfolio cost more than anywhere else.
  5. Add the link to your email signature, social profiles and invoices.

Build your portfolio from one message

You already have the hard part: the work. Gather your best projects, write five lines about each, attach the images and paste the prompt template above with your details filled in. Review the first version on your phone, ask for the changes that matter, and connect your domain when it feels right.

You can try all of it free: start on Community, no card required, and upgrade only when the portfolio is ready to stay live on your own domain.

F.A.Q.

Frequently asked questions

Can I upload my own images and videos?
Yes. Attach them in the chat when you describe the site, or upload them later through your admin area. Each file can be up to 25 MB, and common formats such as JPEG, PNG, WebP, GIF and MP4 are accepted. Uploads count toward your plan's storage and bandwidth, so host long videos or a showreel on a video platform and have them embedded on the project pages.
Can I add new projects without rebuilding the site?
Yes, once your site has an admin area. Adding, editing, hiding or reordering projects changes saved data, so no build is needed and the change reaches visitors within about a minute. You go back to the chat only for structural changes, such as a new field on project pages, a different layout or a new section. If your first build has no admin area, ask for one in a follow-up message.
Will my portfolio rank on Google?
It can, but nothing guarantees a ranking. The technical basics are in place on every WisyLink site: server-rendered pages, titles and descriptions, canonical URLs, structured data, a sitemap and robots.txt. The rest depends on content and reputation: descriptive project pages, alt text, your location if you work locally, and links from client sites, directories and your social profiles. Verify the site in Google Search Console after launch.
Can I password-protect client work?
Yes, in two ways. A whole-site password gate puts one shared password in front of every page, which suits a separate proofing site for a single client. For several clients on one site, ask for client logins so each client sees only their own galleries. The password gate stays off until you set the password under Integrations, so test it in a private browser window before sending the link.
Can I add animations or 3D effects?
Yes. Sites can use CSS and SVG animation, canvas effects and real-time 3D scenes in the browser, and 3D models you supply in .glb, .gltf or .fbx format are used as they are. For a portfolio, keep motion in service of the work: subtle transitions and hover reveals help, heavy effects slow phones down. Ask for animations to respect visitors' reduced-motion setting.
Is it free?
You can build and test it free on the Community plan, which gives one build per 5-hour window. Free links stay live for 30 days, then one more week marked for deletion. To keep the portfolio online for as long as you're subscribed, you need a paid plan: Starter is $7 a month. You can connect your own domain on any plan, and a domain costs extra unless you already own one.
Share