A drag-and-drop portfolio builder for developers & designers — pick a theme, drop in your work, preview live, and export a deployable site in minutes.
Foliqo lets devs and designers ship a professional portfolio without writing a line
of code. The whole studio runs in the browser — a glassless, Apple-clean interface with a
live iframe preview on the right and contextual editor panels on the left. When you're
done, export a complete, self-contained HTML/CSS/JS bundle that hosts anywhere.
🔒 Local-first & private — your work lives in your browser. No account required, nothing uploaded. Add a backend only if you want sync, real auth, or one-click deploy.
✏️ Edit on the left → 👀 Live preview on the right → 📦 Export & deploy
| 🧩 Drag-and-drop sections | Hero, Projects, Skills, Experience, Contact — reorder by dragging |
| 🎨 Six refined themes | Minimal, Dark Pro, Glass, Neon, Typographic, Magazine — each fully tunable |
| 🖥️ Live responsive preview | Instant updates across desktop / tablet / mobile |
| ⚡ Animated skill bars | Proficiency meters that animate into view |
| 🗂️ Project & timeline builders | Cards with tags, images, links + a chronological experience timeline |
| 🌈 Custom colors & fonts | Per-theme palette with a live contrast guard + 20+ Google Fonts |
| 🤖 AI-assisted suggestions | Generate taglines, descriptions, tags & skill ideas (runs locally) |
| 🔍 SEO built in | Meta tags, Open Graph, JSON-LD structured data, live search preview |
| 💾 Autosave + save points | Continuous local autosave with named snapshots |
| 📦 One-click export | Download a complete static site as a ZIP — zero dependencies |
| 🚀 Deploy-ready | GitHub-aware deploy flow + guides for Netlify, Vercel, Pages |
| ♿ Accessible & responsive | Keyboard-navigable, reduced-motion aware, mobile-friendly |
| Minimal | Dark Pro | Glass | Neon | Typographic | Magazine |
|---|---|---|---|---|---|
| ⬜ | 🟦 | 🟪 | 🟦 | 🟨 | 🌸 |
| clean & light | sleek dark | frosted depth | glowing edges | bold type | editorial |
Each theme exposes editable accent / background / text colors and its own typeface, with a built-in WCAG contrast check so your portfolio always stays readable.
Add screenshots/GIFs here to make the page pop. Suggested shots: the landing page, the builder (left panels + live preview), and the theme switcher.
docs/screenshots/
├── landing.png
├── builder.png
└── themes.gif
- Vanilla JavaScript — small, framework-free modules (
GF_Store,GF_Render,GF_Builder,GF_Auth,GF_Suggest, …) - Modern CSS — custom properties, grid,
color-mix(), container-free responsive layout - Zero dependencies — including a tiny hand-rolled ZIP writer for export
- No build step — ship the folder as-is to any static host
foliqo/
├── index.html # landing page
├── app.html # the builder
├── auth.html # combined sign in / sign up (+ Google/GitHub, guest)
├── contact.html # contact page
├── 404.html # not-found page
├── logo.png # brand mark / favicon
├── css/
│ ├── site.css # landing / auth / contact
│ ├── app.css # builder UI
│ └── animations.css
├── js/
│ ├── store.js render.js preview.js builder.js
│ ├── dragdrop.js export.js suggest.js auth.js
│ ├── themes.js fonts.js site.js
│ └── lib/zip.js # dependency-free ZIP writer
└── docs/ # backend + deployment guides
Foliqo is fully functional as a static site. When you're ready to add real auth, a
database, contact delivery, or one-click deploy, the docs/ folder has you
covered:
- 🧭 Backend overview
- 🔐 Authentication (incl. Google / GitHub OAuth)
- 🗃️ Database — Supabase · Firebase
- ✉️ Contact form delivery
- 🚀 One-click GitHub deploy
- 🌐 Hosting — Netlify · Vercel / Pages / Cloudflare
- 🔑 Environment variables & secrets
Deploy in 30 seconds: drag the folder onto Netlify,
or push to a repo and enable GitHub Pages (Settings → Pages → branch main / root).
- Undo / redo history
- Reorder items within a section (projects, skills, timeline)
- Project import/export as JSON
- DEFLATE compression + image assets in export
- Real auth + cross-device sync (Supabase / Firebase)
- True one-click GitHub Pages publish
Contributions are welcome!
- Fork the repo
- Create a branch —
git checkout -b feature/your-idea - Commit —
git commit -m "Add your idea" - Push —
git push origin feature/your-idea - Open a Pull Request
Since there's no build step, just open the files and go. Please keep the no-dependency, vanilla-JS spirit.
Released under the MIT License — free to use, modify, and distribute.
Add a LICENSE file at the repo root to make it official.
Made with vanilla HTML, CSS & JavaScript — no frameworks, no build, no fuss.
⭐ If Foliqo helps you ship your portfolio, consider starring the repo.