Persona — Free Personal vCard & Freelancer Portfolio Template
Persona is a single-page personal site built for freelancers, designers, and consultants who are tired of the same cold, centered, purple-gradient portfolio. It ships with a split photo hero, a filterable work grid, a hand-built testimonial slider, and a validated contact form — all in a deep-forest-and-marigold identity you can actually make your own. No jQuery, no build step, no icon fonts: just clean Bootstrap 5, vanilla JavaScript, and hand-drawn SVG.
Features
- Split hero with a framed portrait, live "available for work" badge, inline social icons, and dual call-to-action buttons
- Filterable portfolio grid with animated hover overlays (All / Product / Brand / Editorial) driven by vanilla JS
- Testimonial slider built on native scroll-snap with prev/next controls, progress dots, and keyboard focus support
- Animated count-up stats and IntersectionObserver scroll reveals that respect
prefers-reduced-motion - Front-end-validated contact form with project-type and budget selectors plus a friendly success state
- Auto-scrolling tools/skills marquee that pauses on hover and disables under reduced-motion
- Sticky glass header with active-section scroll spy and an accessible off-canvas mobile menu
- 100% self-contained: self-hosted Bootstrap, hand-written inline SVG icons, and local images — deploys clean on strict-CSP hosts
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 — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Persona really free to use for client work?
Yes. Persona is free for both personal and commercial projects. Use it for your own portfolio or hand it to a client — no attribution required, though a link back to uiCookies is always appreciated.
Do I need Node, npm, or a build step?
No. Persona is plain HTML, CSS, and vanilla JavaScript with a self-hosted copy of Bootstrap 5. Open `index.html` in a browser or drop the folder on any static host and it just works.
How do I swap in my own photos and copy?
Every image lives in the `img/` folder and is referenced by a local path, so replace `hero.jpg`, `about.jpg`, and the `p1`–`p6` project shots with your own. All copy is plain text in `index.html`, and the palette and fonts are CSS variables at the top of `css/style.css`.
Are the icons going to break on my server?
No. There are zero icon fonts and zero external scripts. Every icon is hand-drawn inline SVG and the only remote request is the Google Fonts stylesheet, so Persona passes strict Content-Security-Policy setups that block CDNs.
