APortfolioApp

Overview

APortfolioApp is a companion tool for APortfolio — a visual, form-driven portfolio builder that runs entirely in the browser. It was built to solve a real gap: APortfolio was powerful but required cloning a repo and editing TypeScript config files, which put it out of reach for non-technical users. APortfolioApp puts the same customization surface behind a friendly UI — fill in your details, drag-drop your projects, pick your colors, and export a ready-to-deploy ZIP of real HTML pages.

Key Features

• Live preview that mirrors the exported site in real time, with desktop and mobile views
• Full editor for hero, bio, skills, projects, social links, contact, and theme colors
• Drag-and-drop project and skill reordering with keyboard accessibility
• Image uploads stored as base64 — images are packed directly into the exported ZIP
• One-click ZIP export containing complete, self-contained HTML pages (no build step needed)
• Auto-saves to localStorage; portfolio state importable/exportable as JSON

Technical Decisions

Built as a pure client-side SPA with React and Vite so the builder itself can be hosted as a static site with no backend. Zustand manages portfolio state globally with auto-persistence to localStorage. The export pipeline uses an in-browser HTML generator (htmlGenerator.ts) rather than bundling an Astro build — this means the exported ZIP is immediately deployable by anyone, with no Node.js or npm required on their machine. Images are converted to base64 data URLs on upload so they survive serialization and are correctly embedded in the ZIP alongside the HTML.