Portfolio Template

The Portfolio Template is a free tool that lets you create a professional, single-page portfolio website for your tattoo work. No coding required. Everything is managed through the built-in admin panel, and your finished site can be published instantly or downloaded as a standalone website you can host anywhere.

What’s included:

• Complete single-page portfolio with 6 sections
• Visual admin panel (no code, no configuration files)
• Portfolio gallery with lightbox
• Dark and light themes
• 10 built-in style presets
• 22 heading fonts, 6 body fonts
• 24 accent colors with custom color picker
• Corner style options (rounded, pill, square)
• Full SEO settings
• Cloud saves (requires free Tattoo Studio Pro account)
• One-click publish to portfolio.ink, or download as ZIP

Quick Start

1. Open the Portfolio Template - Visit the Portfolio Template URL to open the editor. You’ll see a live preview of your portfolio with default placeholder content.
2. Open the Admin Panel - Click the floating settings button on the right edge of the page.
3. Add your content - In the Content tab, fill in your name, bio, specialties, and contact info. Every change updates the live preview instantly.
4. Upload portfolio images - Scroll to the Portfolio section in the Content tab and drag-and-drop your tattoo images.
5. Publish - Go to the Data tab and click Publish to go live at yourstudio.portfolio.ink, or click Download Site to get a ZIP file you can host yourself.

Admin Panel

The admin panel is your control center. A floating settings button is always visible on the right edge of the page - click it to open. The panel slides in from the right and the preview adjusts to make room.

The panel has four tabs:

All changes save automatically to your browser’s local storage as you work. Sign in with your Tattoo Studio Pro account to also save to the cloud.

Customizing Content

The Content tab lets you edit every section of the portfolio. Changes appear in the live preview instantly.

Hero Section

• Badge - A short label above your name (e.g. “Tattoo Artist,” “Custom Ink”)
• Heading - Your name or brand name, split into two lines; the second line uses your accent color
• Description - A short tagline or intro sentence
• CTA Buttons - Primary and secondary call-to-action buttons with customizable text and links (defaults: “View My Work” and “Get in Touch”)
• Background Image - Upload a hero background image; works best with high-contrast images

About Section

• Name & Location - Your artist name and city/region
• Bio - Two paragraphs to describe your background and what makes your work unique
• Photo - Upload a photo of yourself or your workspace
• Specialties - Tags for your tattoo styles (e.g. “Custom Design,” “Black & Grey,” “Fine Line”) - add, edit, or remove individual tags

Portfolio Section

See #Portfolio Images below.

Aftercare Section

• Heading & Subtitle - Section title and intro text
• Steps - Numbered aftercare instructions, each with a title and description. Add, edit, or remove steps. Defaults to 6 common aftercare steps.

Contact Section

• Email, Phone, Location - Displayed with icons
• Hours - Studio hours (e.g. “Mon-Fri: 10am - 7pm”)
• Social Links - Instagram, TikTok, and Facebook URLs
• Contact Form - Configure a form handler so visitors can message you directly (see #Contact Form Setup)

Footer

• Name & Tagline - Shown at the bottom of the page
• Social Links - Same links from the contact section, repeated in the footer

Global Settings

The Global tab controls site-wide settings.

Theme

Switch between Dark and Light mode. The entire site updates instantly.

Corner Style

Controls the shape of buttons and UI elements:

• Rounded - Slightly rounded corners (default), balanced and modern
• Pill - Fully rounded capsule-shaped buttons, softer and friendly
• Square - Sharp angular corners, bold and industrial

Accent Color

Choose from 24 preset colors or enter any hex code with the custom color picker. The accent color applies to headings, buttons, links, and decorative elements throughout the site.

Presets include: Crimson, Blood Red, Classic Red, Coral, Hot Pink, Magenta, Deep Rose, Vibrant Orange, Gold, Amber, Forest Green, Emerald, Neon Green, Cyan, Ocean Blue, Electric Blue, Indigo, Deep Purple, Violet, Royal Purple, Lavender, Earth Brown, Steel Blue, and Charcoal.

Fonts

Heading fonts (22 options): Oswald (default), Syne, Montserrat, Playfair Display, Raleway, Arvo, Cinzel, UnifrakturMaguntia, Limelight, Great Vibes, Permanent Marker, Kaushan Script, Meow Script, Lacquer, Griffy, Pirata One, Rubik Dirt, Caprasimo, Gravitas One, Bangers, Racing Sans One, Inter

Body fonts (6 options): Outfit, Inter (default), DM Sans, Nunito Sans, Lora, Source Serif 4

Fonts load from Google Fonts and preview live.

SEO Settings

• Meta Title - Shown in search results and browser tabs
• Meta Description - The snippet shown in search results
• Meta Keywords - Comma-separated keywords
• Canonical URL - Your preferred URL (avoids duplicate content issues)
• Robots - Control whether search engines index your site
• OG Title & Description - What appears when shared on social media
• Twitter Card - Card type for Twitter/X sharing
• Google Analytics ID - Your GA measurement ID to track visitors

Style Presets

The Presets tab lets you change the entire look and feel in one click. Each preset applies a combination of theme, accent color, fonts, and corner style.

Built-In Presets

Custom Presets

After fine-tuning your theme, colors, fonts, and corner style, save the combination as a custom preset. Your saved presets appear at the top of the Presets tab under “My Presets.” You can delete them at any time.

Portfolio Images

Your gallery is the centerpiece of the site.

Uploading

1. Open the admin panel
2. In the Content tab, scroll to the Portfolio section
3. Drag images onto the upload area, or click it to browse
4. Images appear as thumbnails below the upload area

Organizing

• Reorder - Drag thumbnails to rearrange the display order. Put your strongest work first.
• Categories - Assign categories to let visitors filter your work (e.g. “Black & Grey,” “Color,” “Fine Line,” “Sleeve”)
• Remove - Click the X on any thumbnail to remove it

Lightbox

Visitors click any image to open it fullscreen. Navigate with arrow buttons or keyboard left/right arrows. Press Escape or click the close button to exit.

Where Images Are Stored

Images are stored locally in your browser using IndexedDB. They persist between sessions but are specific to the browser you’re using. When you export the site as a ZIP, all uploaded images are included automatically.

Image Optimization Tips

• Resize to 1200–1600px on the longest side
• Use JPG for photos (best compression)
• Compress before uploading (TinyPNG or Squoosh)
• Aim for under 500KB per image

Contact Form Setup

The contact form won’t send messages until you connect it to a form handling service. Without one, the form appears on the site but submissions go nowhere.

Option 1: FormSubmit (Recommended)

1. In the admin panel, go to the Contact section in the Content tab
2. Select FormSubmit as the form service
3. Enter your email address - no account or signup needed
4. After the first form submission, you’ll receive a confirmation email from FormSubmit to activate your form

Works with any hosting option including Tattoo Studio Pro Hosting.

Option 2: Netlify Forms

If you’re self-hosting on Netlify, forms work automatically with no extra setup. Netlify detects the form in your HTML and handles submissions. View submissions in the Netlify dashboard.

Option 3: Formspree

1. Create a free account at formspree.io
2. Create a new form and copy your endpoint URL
3. In the admin panel, paste the endpoint URL in the Form Service field

Free plan: 50 submissions/month.

Cloud Saves

Your portfolio saves automatically to your browser’s local storage as you work. For cloud backup and cross-device access, sign in with your Tattoo Studio Pro account.

• Local saves - Always active. Saves to the browser after every change.
• Cloud saves - Active when signed in. Syncs to the cloud with a short delay after each change.
• Loading - When you sign in, your cloud-saved config loads automatically. If you have newer local changes, the most recent version takes priority.

How to Sign In

• At download time - When you click “Download Site,” a sign-in prompt appears
• From the Data tab - Use the cloud sync controls to sign in at any time

Sign in with email and password or with Google. Signing in is free and gives you cloud backup - you won’t lose your work if you clear your browser data or switch devices.

Publish, Download & Export

Publish (Recommended)

In the Data tab, click Publish. Your site goes live instantly at yourstudio.portfolio.ink. SSL, CDN, and email forwarding are included if you have a hosting plan.

Hosting is $10/month. See Hosting for details.

Download as ZIP

In the Data tab, click Download Site. If you’re not signed in, you’ll be prompted to sign in. Your site downloads as a ZIP you can host anywhere.

What’s in the ZIP:

• index.html - your single-page portfolio with all content baked in
• css/style.css - all styles with your chosen theme values
• images/ - your uploaded portfolio photos
• Google Fonts configured for your chosen fonts
• SEO meta tags and Open Graph data
• Google Analytics code (if configured)
• A generated SVG favicon

What’s NOT in the ZIP:

• Admin panel code (the editor is stripped out)
• Download/export functionality
• Cloud save and account code

The exported site is pure HTML and CSS with no JavaScript dependencies. It works offline, loads fast, and can be hosted on any web server.

Deploying Your Site

Option 1: One-Click Publish (Recommended)

Click Publish in the Data tab. Your site goes live at yourstudio.portfolio.ink with SSL and a global CDN. Add a custom domain from the hosting dashboard at account.tattoostudiopro.com/hosting.

After publishing, manage your hosted site from the hosting dashboard:

• Change your subdomain (pick a different .portfolio.ink name)
• Connect a custom domain and verify activation
• Set up email forwarding
• View and manage DNS records

Option 2: Self-Host (Free)

Download the ZIP and upload to any static hosting platform:

Data Tab Reference

Clearing local storage removes all customizations from this browser. If you’re signed in you can reload to restore from cloud. If not, the data is gone permanently - export a backup first.

File Structure (Exported Site)

portfolio-site/
├── index.html          Your single-page portfolio
├── css/
│   └── style.css       All styles, theme baked in
├── images/
│   ├── img-1.jpg       Your portfolio images
│   └── img-2.jpg
└── favicon.svg         Generated site favicon

Troubleshooting

Admin panel won’t open - The floating settings button should always be visible on the right side of the page. Try a hard refresh (Ctrl+Shift+R / Cmd+Shift+R).

Images disappeared - Images are stored in browser local storage. They may be lost if you cleared browser data or switched to a different browser. Always export a ZIP before clearing data. Signing in to cloud saves prevents this.

Contact form not working - You must configure a form service. Without one, submissions go nowhere. See #Contact Form Setup.

Changes not saving - Check that your browser allows local storage for this site. Private/incognito windows may not persist data between sessions.

Related Articles

• Hosting - Publishing your site and custom domain setup
• Website Templates - The premium multi-page template option