Persona — Free Personal vCard & Freelancer Portfolio Template
Persona is a free one-page vCard and freelancer portfolio built on Bootstrap 5, vanilla JavaScript, and hand-drawn SVG — no jQuery, no build step, and no icon fonts. It swaps the usual cold, purple-gradient portfolio for a warm deep-forest-and-marigold editorial identity, pairing a split photo hero with a filterable work grid, a testimonial slider, and a validated contact form.
Key features
- Split hero with framed portrait, "available for work" badge, and dual CTAs
- Filterable portfolio grid (All / Product / Brand / Editorial) with hover overlays
- Testimonial slider on native scroll-snap with prev/next, dots, and keyboard support
- Front-end-validated contact form with project-type and budget selectors
- Animated count-up stats and IntersectionObserver scroll reveals
- Auto-scrolling tools/skills marquee that pauses on hover
- Sticky glass header with active-section scroll spy plus off-canvas mobile menu
- Respects prefers-reduced-motion across all animations
- Self-contained: self-hosted Bootstrap, inline SVG icons, strict-CSP clean
Best for
- Freelance designers, developers, and consultants
- A one-page personal portfolio or vCard
- Anyone wanting a warm, non-generic portfolio look
- Client sites that must deploy on strict-CSP hosts
- Fast static hosting with no backend to set up
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1 (single-page long-scroll)
- Responsive: Yes
- Style: Editorial vCard — deep forest & warm marigold, Bricolage Grotesque display
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Persona free for client and commercial work?
Yes. Persona is free for both personal and commercial projects, with no attribution required — though a link back to uiCookies is always appreciated. Use it for your own portfolio or hand the finished site to a paying client either way.
Do I need Node, npm, or a build step to use it?
No. Persona is plain HTML, CSS, and vanilla JavaScript with a self-hosted copy of Bootstrap 5. Open index.html directly in a browser or drop the folder on any static host and it works as-is — nothing to compile, bundle, or install. Editing the plain-text copy in index.html needs no coding knowledge; restyling colours or layout takes only basic HTML/CSS comfort.
How do I change the colours and fonts?
The entire deep-forest-and-marigold palette and the Bricolage Grotesque display type are defined as CSS variables at the top of css/style.css. Edit those values once and the change flows through the whole page. To use a different typeface, swap the Google Fonts stylesheet link and update the font variable.
Is it responsive, and which browsers does it support?
Yes — Persona is built mobile-first on Bootstrap 5's grid and adapts cleanly from phones to large desktops. The navigation collapses into an accessible off-canvas menu on small screens, and the hero and work grid reflow to fit. It runs in all current versions of Chrome, Firefox, Safari, and Edge.
How do I swap in my own photos, and is it fast?
Every image lives in the img/ folder and is referenced by a local path, so replace hero.jpg, about.jpg, and the project shots p1 through p6 with your own files (keep the names or update the paths in index.html). Because there are no external scripts or icon fonts and only one Google Fonts request, the page stays light — just export your replacement images at a sensible size for best performance.
Does the contact form actually send messages?
No. Persona is a static front end, so the form validates input in the browser and shows a friendly success state, but it does not process or deliver anything on its own. To receive submissions, point the form at a service like Formspree or Netlify Forms, or wire it to your own backend endpoint. There is likewise no payment processing or CMS built in — it is a front-end template.
Will the icons or scripts break on a strict server?
No. Persona uses zero icon fonts and zero third-party scripts — every icon is hand-drawn inline SVG and Bootstrap is self-hosted locally. The only remote request is the Google Fonts stylesheet, so it deploys cleanly even on hosts with a strict Content-Security-Policy that blocks CDNs.
What interactive pieces are included, and do they need a library?
All of the motion is hand-built in vanilla JavaScript with no plugins. You get a filterable portfolio grid (All / Product / Brand / Editorial) with animated hover overlays, a testimonial slider on native scroll-snap with prev/next controls and progress dots, count-up stats, scroll reveals, an auto-scrolling skills marquee, and an active-section scroll spy. Every animation respects prefers-reduced-motion for users who opt out.
