How to Build a Portfolio Website in 60 Seconds with Draftly
Your portfolio is your digital handshake. Before a client reads a single word about your experience, they have already formed an opinion based on how your site looks and feels. The problem? Most creatives spend days — sometimes weeks — wrestling with website builders, fighting templates, and second-guessing layouts. Draftly changes that entirely.
With Draftly's AI-powered 3D website builder, you can go from a blank screen to a live, fully-designed portfolio in under 60 seconds. No code. No drag-and-drop frustration. Just a single prompt and an instant website.
This tutorial walks you through every step: writing your prompt, customising the result, connecting your domain, and going live. Whether you are a graphic designer, photographer, frontend developer, or freelance consultant, this guide is built for you.
---
Step 1: Write a Strong Opening Prompt
The prompt is where everything begins. Think of it as the creative brief you would hand to a web designer. The more detail you provide, the better your first result will be.
Open draftly.space and type your prompt into the builder. Here is the difference between a weak and a strong prompt:
Weak prompt: "Make me a portfolio site."
Strong prompt: "Create a dark-mode 3D portfolio website for a freelance UI/UX designer based in London. Include a hero section with an animated headline, a project gallery with six slots, a short about section, client testimonials, and a contact form. Use a modern sans-serif font and deep navy and electric blue as primary colours."
The second prompt gives the AI direction on tone, layout, content sections, colour palette, and typography. You will get a result that is 80% ready straight away.
For more on writing great prompts, see our deep-dive guide: Writing Prompts That Generate Better 3D Websites.
---
Step 2: Review the AI-Generated Layout
Within seconds, Draftly renders a full 3D website from your prompt. Take a moment to review:
- Hero section — Does the headline reflect your positioning?
- Navigation — Are the right pages linked?
- Project gallery — Are placeholder slots in the right format (grid, masonry, carousel)?
- Colour and typography — Does it match your brand?
- Call-to-action — Is there a clear "Hire Me" or "Get in Touch" button?
---
Step 3: Customise Your Content
Now it is time to make the site yours. Click any section to edit it directly. Here is what to update:
Hero Section
- Replace the placeholder headline with your actual tagline (e.g., "Crafting interfaces people love to use")
- Upload your professional photo or a hero image
- Update the sub-headline with your speciality and location
Project Gallery
- Upload real project thumbnails (use 1200×800px images for best quality)
- Add project titles, short descriptions, and links to case studies or live work
- Tag each project by type: Branding, Web Design, Photography, etc.
About Section
- Write 2–3 sentences about who you are and what you do
- Mention the industries you serve and the tools you use
- Add a downloadable CV link if relevant
Contact Form
- Verify the form connects to your email
- Add your social links: LinkedIn, Behance, Dribbble, GitHub
- Consider adding a Calendly link for discovery calls (see our guide on adding a booking system to your site)
Step 4: Optimise for Mobile
Over 60% of portfolio visitors browse on mobile. Before publishing, switch to the mobile preview in Draftly and check:
- Text is readable without zooming
- Buttons are large enough to tap comfortably
- Images do not overflow their containers
- The navigation collapses cleanly into a hamburger menu
---
Step 5: Set Up Your SEO Basics
A beautiful portfolio that nobody can find is a missed opportunity. Spend five minutes on these SEO essentials:
- Page title: Use a format like "Jane Smith — Freelance UI/UX Designer in London"
- Meta description: Write 140–160 characters that include your speciality and location
- Image alt text: Add descriptive alt text to every project image
- Slug: Make sure your URL is clean and readable (e.g., janesmith.com or janesmith.draftly.space)
---
Step 6: Connect Your Custom Domain
Publishing to a custom domain instantly makes your portfolio look more professional. Draftly supports domains from any registrar.
- Go to Settings > Domains inside Draftly
- Enter your custom domain (e.g., janesmithdesign.com)
- Log in to your domain registrar (GoDaddy, Namecheap, Google Domains, etc.)
- Add the CNAME or A record that Draftly provides
- Wait 15–60 minutes for DNS propagation
- Draftly automatically provisions an SSL certificate for HTTPS
---
Step 7: Go Live
Once your domain is verified and SSL is active, hit Publish. Your 3D portfolio is live.
Here are a few things to do immediately after launch:
- Share the link on LinkedIn with a short post about your work
- Update your email signature with the new URL
- Add the link to your Behance, Dribbble, and GitHub profiles
- Submit your sitemap to Google Search Console so the site gets indexed
Tips for Different Creative Roles
Photographers: Use the full-width gallery layout and keep images under 500KB to maintain fast load times. Let the work speak — keep text minimal.
Graphic Designers: Create a project case study structure. Show the brief, your process, and the final output for each piece. Clients love transparency.
Frontend Developers: Include a GitHub activity section and link to live projects. Add a skills section that lists languages, frameworks, and tools.
Freelancers: Lead with outcomes, not just work samples. "Helped SaaS startup increase sign-ups by 32%" is more compelling than "Redesigned onboarding flow."
---
Final Thoughts
Building a portfolio website used to be a weekend project. With Draftly, it is a 60-second task. The real work — curating your best projects, writing compelling copy, and refining your personal brand — is where your energy should go.
The technical side is handled. You just need to show up with a great prompt and great work.
Ready to start? Head to draftly.space and type your first prompt now.
