Portivo Documentation

Everything you need to build your portfolio and get it live on the internet — from the first step to deployment.

Overview

Portivo is a completely free, browser-based portfolio builder. You fill in your details using a 9-step wizard, pick a theme and layout, customise colors and fonts, then export a ZIP file. The ZIP contains a complete, standalone website you can host anywhere.

Key things to know:

• No sign-up, no login, no account required
• Your data never leaves your browser — it is saved in localStorage on your device
• The exported portfolio is a plain HTML/CSS/JS website — it works on any static host
• 100% free, forever

How to Use Portivo

Building your portfolio takes 4 simple actions:

Wizard Steps — Explained

Step 1 — Personal Information

Fill in your full name, professional title (e.g. "Full Stack Developer"), email, phone, location, and a short bio. You can also add your portfolio URL and GitHub/LinkedIn profile URLs. The bio should be 2–4 sentences that summarise who you are professionally.

Step 2 — Skills

Add your technical skills. Each skill has a name (e.g. "React") and a proficiency level (Beginner / Intermediate / Advanced / Expert). Click "Add Skill" to add more. Drag to reorder. Aim for 6–12 skills — too many looks cluttered.

Step 3 — Projects

Add your portfolio projects. Each project includes a title, description, technologies used, and optional live demo and GitHub repo links. Focus on your best 3–5 projects rather than listing everything.

Step 4 — Experience

Add your work experience entries. Each has a job title, company, location, start/end date, and a description of your responsibilities. Leave the end date empty if it is your current role.

Step 5 — Education

Add your educational background: degree, institution, field of study, and graduation year. Add any relevant certifications here too.

Step 6 — Social Links

Paste your profile URLs for GitHub, LinkedIn, Instagram, Dribbble, Behance, and your personal website. Leave blank any that don't apply — they will not appear on your portfolio.

Step 7 — Theme

Pick from 20 themes. See the Themes page for a visual preview of each one. You can change this any time and immediately see the result in the preview.

Step 8 — Choose Your Layout

Pick the page structure for your portfolio — sidebar navigation, a bento grid, a terminal window, and more. This is a separate choice from Theme: theme controls colors and fonts, layout controls where things go. See the Layouts section below for a full explanation of each one. You can switch layouts any time, from this step or from the Layout Gallery reachable via the Preview and Export screens — your data and theme carry over instantly with no reload.

Step 9 — Customise

Fine-tune your portfolio with four tabs:

• Colors — 8 color pickers + 6 palette presets for instant styling
• Fonts — choose heading and body font families
• Shape — control button and card border-radius (sharp, rounded, pill)
• Sections — toggle contact form, skills, projects, experience, and education on/off

Preview & Export

Live Preview

Click the eye icon (or "Preview" button) in the builder to open a full-page live preview of your portfolio. Every change you make is reflected immediately.

Downloading the ZIP

Navigate to the Export section (accessible from the preview page). Click "Download Portfolio ZIP". The ZIP file is built entirely in your browser using JSZip — nothing is uploaded to any server.

The ZIP contains:

• index.html — your portfolio's main page
• css/style.css — all styles with your theme colours pre-baked
• js/app.js — the portfolio renderer
• portfolio-data.json — your data in editable JSON format
• README.txt — quick-start guide
• hosting-guide.pdf — Cloudflare deployment walkthrough

What Are Layouts?

A layout is the structure of your portfolio page — where the navigation sits, how the hero is arranged, whether projects show as a grid or a timeline, whether there's a sidebar at all. Portivo ships with 10 layouts you can preview and switch between at any time.

You can browse all 10 layouts with live, interactive previews on the dedicated Layouts page.

How Layouts Work

There are two ways to choose a layout, and they both lead to the same place:

Whichever way you choose a layout, the change is instant — no page reload, no re-entering data. Your selection is remembered automatically (in localStorage, separately from your portfolio data) so it's still applied the next time you open Portivo on the same device.

The 10 Layouts

Every layout below renders the exact same sections — Hero, About, Skills, Projects, Experience, Education, Contact — just arranged differently.

Layouts in Export

Whichever layout is selected when you download your ZIP is exactly what ships:

• For Classic, the exported ZIP keeps the familiar file structure — index.html, css/style.css, and js/app.js as separate files.
• For any of the other 9 layouts, the ZIP's index.html is a single, fully self-contained file (styles included inline) — the same file that powers your live preview, so what you saw is exactly what you get.

The hosted preview, the full-page Preview screen, and the ZIP export all always respect whichever layout is currently selected — there is nothing extra to configure.

Deploying to Cloudflare Pages

Cloudflare Pages is the recommended host for your Portivo portfolio. It is completely free, lightning-fast, and provides a custom .pages.dev domain automatically.

Step-by-step: Cloudflare Pages

Deploying to Hostinger

Hostinger is a popular paid hosting option that also works perfectly with Portivo portfolios. Follow these steps if you have a Hostinger account.

Step-by-step: Hostinger

Alternative: Upload the ZIP directly

Hostinger's File Manager also supports ZIP uploads. You can upload the original portfolio.zip file, right-click it in File Manager, and choose Extract. Then move all extracted files out of any subfolder into public_html.

Other Hosting Platforms

Your portfolio ZIP is a standard static website that works on any host that serves HTML files. Here is how to deploy on other popular platforms:

Adding a Custom Domain

Both Cloudflare Pages and Hostinger support custom domains.

Cloudflare Pages + Custom Domain

1. In your Pages project, click Custom domains tab
2. Click Set up a custom domain
3. Enter your domain (e.g. yourname.com)
4. Follow the DNS instructions to point your domain to Cloudflare Pages
5. If your domain is already on Cloudflare, it auto-configures. If not, add the CNAME record your registrar requires.

Hostinger + Custom Domain

Your Hostinger plan usually comes with a domain. If you bought one separately, point its DNS nameservers to Hostinger's nameservers. Hostinger's support docs cover this in detail.

Updating Your Portfolio

There are two ways to update your portfolio after deployment:

Option A — Edit JSON directly (quick updates)

Open portfolio-data.json in any text editor (Notepad, VS Code). Edit your details, save, then re-upload just that file to your host. The portfolio reads the JSON on every page load, so changes appear immediately.

// portfolio-data.json — example structure
{
  "name": "Your Name",
  "title": "Your Professional Title",
  "bio": "Your bio goes here...",
  "skills": [
    { "name": "React", "level": "Expert" }
  ],
  "projects": [ ... ],
  "experience": [ ... ]
}

Option B — Rebuild in Portivo (for theme/style changes)

1. Open Portivo — your data will be saved in the browser if you used the same device
2. Make your changes
3. Download a new ZIP
4. Upload the new files to your host (replace the old ones)

Brand Studio™ — Overview

Brand Studio™ is a built-in professional card and brand asset generator included with Portivo. After you build your portfolio, open Brand Studio to instantly create polished brand materials — all auto-filled from your portfolio data. No re-entering information.

How to open Brand Studio

9 Asset Types

Brand Studio™ can generate nine different brand assets from your portfolio data. Each one is rendered as a pixel-perfect card that you can export in multiple formats.

Themes & Colors

30 Premium Themes

Brand Studio™ includes 30 hand-crafted themes across 6 categories. Every theme includes a full colour palette — background, surface, primary, accent, text — and a paired heading font.

Custom Colors

In the Colors tab you can override any of the four main theme colors for the current card only:

• Primary Color — used for headings, buttons, and key highlights
• Accent Color — secondary highlights, borders, icons
• Background — card background
• Text Color — body text

Color overrides are saved per device. Click "Reset to Theme Defaults" to revert to the selected theme's original palette.

Templates & Layout

Template Layouts

The Templates tab shows layout variants available for the selected asset. Business Cards have the most variants:

• Classic — traditional left-aligned layout with logo area
• Modern — split design with photo on one side
• Minimal — clean, white-space focused
• Bold — large name treatment, strong typography
• Split — two-tone background divided diagonally
• Centered — all elements centered, ideal for networking cards

Layout Options

The Layout tab controls the card's visual elements:

• Card Shape — Rounded, Soft, or Sharp corners
• Show Profile Photo — toggles the circular avatar/initials badge
• Show QR Code — toggles the QR code linking to your portfolio URL
• Show Social Icons — toggles GitHub, LinkedIn, and other social icons
• Skills Display — Hide / Top 3 / Tags (shows your skills on the card)
• Typography — choose from 6 font families: Inter, Playfair Display, Roboto, Montserrat, JetBrains Mono, Georgia

Editing Content

By default, Brand Studio™ uses your portfolio data automatically. You never need to re-enter your name, title, email, or phone. However, you can override any field for the card only — useful for testing different titles or using a work email vs. personal email on different cards.

Open the Content tab to edit:

• Full Name
• Professional Title
• Company name
• Email address
• Phone number
• Website / Portfolio URL
• Tagline (a short one-liner that appears on some card layouts)

Exporting Assets

All exports are generated in your browser — nothing is uploaded to a server. Exported files go directly to your browser's download folder.

PNG Export — Technical Details

PNG export uses html2canvas 1.4.1 at 3× device pixel ratio. For a 480×274 business card, the exported PNG is 1440×822 px — suitable for print at 300 DPI for a card approximately 4.8×2.7 inches.

Because html2canvas renders DOM elements, all card styles use inline styles only (no external CSS classes). This ensures every element is captured exactly as visible on screen, regardless of browser or device.

Email Signature Setup

After clicking Email Signature in the Export tab, a modal opens with your signature rendered in a preview. There are two copy options:

• Copy HTML — copies the raw HTML table markup to your clipboard. Paste this in Gmail Settings → Signature (use the "Insert HTML" option in the rich-text editor)
• Copy Plain Text — a clean fallback for email clients that don't support HTML signatures

vCard (.vcf) Setup

The vCard download generates a vCard 3.0 .vcf file containing your name, title, email, phone, website, and social links. To use it:

• iPhone: AirDrop or email the .vcf file to yourself → tap it → "Add to Contacts"
• Android: Download the file → tap it in the notification or Files app → import
• Outlook: Double-click the .vcf file → "Import" in the contact preview window
• Google Contacts: Go to contacts.google.com → Import → select the .vcf file

Tips & Best Practices

Consistent branding across all assets

Pick a single theme and stick to it across all 9 asset types. Your business card, LinkedIn banner, and email signature will all look like they belong together — this is what makes a brand feel professional.

Business Card — Front & Back

The Business Card asset supports a front and a back side. Use the Front / Back toggle above the card preview. Export each side as a separate PNG/PDF and send both to your print shop.

LinkedIn Banner dimensions

LinkedIn displays profile banners at 1584×396 px. Brand Studio renders and exports at exactly this size. After downloading the PNG, go to LinkedIn → Profile → Edit → Background photo → Upload.

GitHub Banner dimensions

GitHub profile README banners look best at 1280×640 px or wider. Brand Studio exports at 1280×640 px. Add it to your README with:

![Banner](./banner.png)

Print quality for business cards

The 3× PNG export gives you a 1440×822 px file. Standard business card printing requires 300 DPI at 3.5×2 inches (or 85×54 mm). Ask your print shop to auto-scale to their required size, or resize in an image editor before uploading.

Data privacy

Brand Studio preferences (selected theme, colors, overrides) are saved in localStorage under the key Portivo_brand_prefs on your device only. Nothing is transmitted. To clear Brand Studio preferences, clear your browser's site data for this domain.

Frequently Asked Questions

Is Portivo really free?

Yes. Portivo is 100% free with no hidden fees, no premium tier, and no limits. All 20 themes, all 10 layouts, and every feature are available to everyone.

Do I need to create an account?

No. Portivo requires no sign-up, no email, and no login. Your data is stored locally in your browser.

What happens if I clear my browser data?

Your saved progress will be lost. To avoid this, export your data as a JSON backup using the "Export JSON" button in the app before clearing browser data.

Can I use Portivo on mobile?

Portivo works in mobile browsers, but we recommend using a desktop or laptop for the best builder experience. The preview and export work on all devices.

Can I add a profile photo?

Yes. In Step 1 (Personal Info), there is an option to upload or link a profile photo. The photo is stored in your localStorage or referenced as a URL.

My portfolio is showing an old version after I re-uploaded files. What do I do?

This is a browser cache issue. Hard-refresh the page: Ctrl + Shift + R (Windows/Linux) or Cmd + Shift + R (Mac). If it still shows the old version, wait 5–10 minutes for the CDN to update.

Can I add Google Analytics or other scripts?

Yes. After downloading the ZIP, open index.html in a text editor and add your analytics script tag in the <head>. Re-upload only index.html.

Can I change the portfolio's colors after deployment without re-exporting?

Yes — edit the :root CSS variables at the top of css/style.css. Each variable like --c-primary controls a colour across the whole site.

Contact & Support