What to build
Create the Vite + React 18 SPA architecture for the Portfolio template. This gives users a lightweight, client-side-only option for portfolios that don't need SSR/SEO (e.g., internal portfolios, creative showcases with heavy animations).
Files to create
templates/portfolio/vite-react/package.jsontemplates/portfolio/vite-react/index.htmltemplates/portfolio/vite-react/vite.config.tstemplates/portfolio/vite-react/tsconfig.jsontemplates/portfolio/vite-react/tsconfig.node.jsontemplates/portfolio/vite-react/postcss.config.jstemplates/portfolio/vite-react/src/main.tsxtemplates/portfolio/vite-react/src/App.tsxtemplates/portfolio/vite-react/src/index.csstemplates/portfolio/vite-react/src/components/Layout.tsxtemplates/portfolio/vite-react/src/pages/Home.tsxtemplates/portfolio/vite-react/src/pages/Projects.tsxtemplates/portfolio/vite-react/src/pages/About.tsxtemplates/portfolio/vite-react/src/pages/Contact.tsx
Specs
- Use
react-router-dom for client-side routing.
- Same theme system (CSS variables,
data-theme attribute on <html>).
- Same Handlebars tags:
{{projectName}}, {{variant}}, {{design}}, {{includeSidebar}}.
- Pages should mirror the Next.js portfolio content.
Acceptance criteria
Dependencies
What to build
Create the Vite + React 18 SPA architecture for the Portfolio template. This gives users a lightweight, client-side-only option for portfolios that don't need SSR/SEO (e.g., internal portfolios, creative showcases with heavy animations).
Files to create
templates/portfolio/vite-react/package.jsontemplates/portfolio/vite-react/index.htmltemplates/portfolio/vite-react/vite.config.tstemplates/portfolio/vite-react/tsconfig.jsontemplates/portfolio/vite-react/tsconfig.node.jsontemplates/portfolio/vite-react/postcss.config.jstemplates/portfolio/vite-react/src/main.tsxtemplates/portfolio/vite-react/src/App.tsxtemplates/portfolio/vite-react/src/index.csstemplates/portfolio/vite-react/src/components/Layout.tsxtemplates/portfolio/vite-react/src/pages/Home.tsxtemplates/portfolio/vite-react/src/pages/Projects.tsxtemplates/portfolio/vite-react/src/pages/About.tsxtemplates/portfolio/vite-react/src/pages/Contact.tsxSpecs
react-router-domfor client-side routing.data-themeattribute on<html>).{{projectName}},{{variant}},{{design}},{{includeSidebar}}.Acceptance criteria
package.jsonhas"name": "{{projectName}}"and includesreact-router-dom.src/App.tsxusesBrowserRouterwith routes for Home, Projects, About, Contact.{{includeSidebar}}.npx vite buildpasses without errors.node index.jsselecting Portfolio + Vite.Dependencies