Content is driven by src/config/content.json and src/config/site.json, and the JSON configuration is validated with Zod during the build
ViteReactPortfolio
portfolio-template (andreaserradev-gbj) — Vite Portfolio Template
By andreaserradev-gbj
A personal portfolio template driven by JSON configuration, built on React 19, TypeScript, Tailwind CSS v4 and shadcn/ui, with multiple built-in design systems and light/dark theme switching.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-16View source
What stands out
A quick read of the recorded project description.
Four built-in design systems: corporate, hand-drawn, automotive and bauhaus, with dark/light mode switching and system preference detection
Supports sharing specific theme combinations via URL parameters in the form ?theme=dark&design=bauhaus
Provides animated metric cards (flip cards and animated counters)
Optional job aggregator that matches jobs from multiple providers by skills
Supports automatically generating portfolio content from a PDF resume via the Claude CLI
Template Details
This template separates portfolio content from presentation styling: data such as experience, skills and achievements is placed in src/config/content.json, site metadata and social links are placed in src/config/site.json, and the avatar image is placed in public/profile.jpg. During the build, Zod is used to validate the JSON configuration, and design tokens and index.html can be regenerated via npm run generate:css and npm run generate:html.
The template provides four design systems: corporate, hand-drawn, automotive and bauhaus. It supports dark/light mode and system preference detection, and specific theme combinations can be shared via URL parameters such as ?theme=dark&design=bauhaus. The README also mentions animated metric cards, an optional multi-provider job aggregator (matched by skills), and an import workflow that uses the Claude CLI to automatically generate a portfolio from a PDF resume.
The README does not explain the specific visual details of each design system, which providers the job aggregator supports, the accuracy or limitations of PDF import, or provide information on production performance and security.
ViteReactPortfolio
Is it right for your project?
Use Cases
- Individual developers or designers building a portfolio site that can switch between multiple visual styles
- Display pages that need resume content maintained in JSON form with automatic format validation
- Demo scenarios where a specific theme and design system combination is shared with others via URL parameters
- Including a job aggregation section matched by skills in a portfolio
Suitable For
- Front-end developers familiar with React, TypeScript and JSON configuration
- Individual users who want to start quickly from a template repository and replace the content themselves
- Portfolio projects that need multiple design systems and light/dark theme switching
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Click Use this template on GitHub to create a new repository, then clone it and run npm install
- 2
Edit src/config/content.json to fill in experience, skills and achievements, edit src/config/site.json to fill in site metadata and social links, and replace public/profile.jpg
- 3
Run npm run build and npm run dev to build and run locally
- 4
Configuration tools such as npm run generate:css, npm run generate:html, npm run portfolio:list and npm run resume:import can be used
- 5
For environment variables and deployment details, see docs/getting-started/environment-variables.md and docs/getting-started/deployment.md
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of that version and does not mean that external services or third-party assets are free.
Must comply with when using
- The code of this version may be used, modified, used commercially and distributed free of charge.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons and other third-party assets must be checked against their respective licenses and cannot be judged solely by the MIT license of the code.
- External services such as domains, hosting, databases, payments or AI may incur separate charges.
- The job aggregator is an optional feature; once enabled, it relies on the APIs of multiple external job providers and may require applying for keys yourself or complying with each provider's terms of use.
- The PDF resume import feature relies on the external Claude CLI tool, which must be installed and configured before use.
- Attribution and license conditions for third-party job APIs are recorded in LICENSES.md and must also be followed when using related features.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
- **Job Board** - Optional multi-provider job aggregator matched to your skills
Original README
- **PDF Import** - Auto-generate portfolio from your PDF resume using Claude CLI
Original README
https://github.com/andreaserradev-gbj/portfolio-template/blob/main/LICENSEhttps://github.com/andreaserradev-gbj/portfolio-template/blob/main/README.mdMIT - See [LICENSES.md](LICENSES.md) for third-party job API attributions.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-16. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 88 / 100
- Technologies
- Vite · React
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-07-20
- Screenshot last checked
- 2026-10-16
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: codex-user-requested-batch-review-20261017 · 2026-10-16
Inspect the recorded source material
SHA-256: 2869eff7f1d445aaa3f498dbc1138ab9d36ee12f6c48cf5c14775b8526f5e037
2026-10-16T11:56:07.546Z
Source file / repository# Portfolio Template A JSON-driven portfolio platform with multiple design systems. Built with React 19, TypeScript, Tailwind CSS v4, and shadcn/ui. **[Live Demo](https://portfolio-template-ten-eta.vercel.app/)**  ## Quick Start 1. Click **"Use this template"** → **"Create a new repository"** 2. Clone your new repo and install: ```bash git clone https://github.com/YOUR_USERNAME/portfolio-template.git cd portfolio-template npm install ``` 3. Customize your content: - `src/config/content.json` → Your experience, skills, achievements - `src/config/site.json` → Site metadata, social links - `public/profile.jpg` → Your photo 4. Build and run: ```bash npm run build npm run dev ``` See the [Quick Start Guide](docs/getting-started/quick-start.md) for detailed setup. ## Features - **Multi-Design System** - Switch between Corporate, Hand-Drawn, Automotive, and Bauhaus themes - **Dark/Light Mode** - Full theme support with system preference detection - **Shareable URLs** - Share specific theme combinations via `?theme=dark&design=bauhaus` - **Animated Metrics** - Flip cards with animated counters - **Job Board** - Optional multi-provider job aggregator matched to your skills - **PDF Import** - Auto-generate portfolio from your PDF resume using Claude CLI - **Build-time Validation** - Zod validates all JSON config at build time ## Design Systems | ID | Style | | ------------ | ----------------------------------- | | `corporate` | Professional Navy & Brass (default) | | `hand-drawn` | Sketch/paper aesthetic | | `automotive` | Neumorphic industrial | | `bauhaus` | Constructivist geometric | ## Documentation | Category | Topics | | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Getting Started](docs/getting-started/) | [Quick Start](docs/getting-started/quick-start.md), [Environment Variables](docs/getting-started/environment-variables.md), [Deployment](docs/getting-started/deployment.md) | | [Architecture](docs/architecture/) | [Design Systems](docs/architecture/design-systems.md), [Configuration](docs/architecture/configuration-system.md), [Template Variables](docs/architecture/template-variables.md) | | [Reference](docs/reference/) | [Components](docs/reference/component-api.md), [Skill Matcher](docs/reference/skill-matcher.md), [Location Classification](docs/reference/location-classification.md) | | [Job Board](docs/job-board/) | [Architecture](docs/job-board/architecture.md), [API Guide](docs/job-board/free-job-apis-guide.md) | | [Contributing](docs/contributing/) | [Testing](docs/contributing/testing.md), [Troubleshooting](docs/contributing/troubleshooting.md) | | [PDF Import](docs/pdf-import/) | [Guide](docs/pdf-import/guide.md) - Auto-generate portfolio from PDF resume | | [Configuration](src/config/README.md) | Full JSON schema reference | ## Commands ```bash npm run dev # Development server npm run build # Production build npm run test # Run tests npm run lint # Lint code # Config tools npm run generate:css # Regenerate design tokens npm run generate:html # Regenerate index.html npm run portfolio:list # List example configs npm run resume:import # Import portfolio from PDF resume ``` ## Tech Stack React 19, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Zod, Vitest ## Built With This project was entirely written using [Claude Code](https://claude.com/product/claude-code). ## Credits Inspired by: - [Design Prompts](https://www.designprompts.dev/) - Theme design inspiration - [JSON Resume](https://jsonresume.org/) - JSON-based configuration and job board concept ## License MIT - See [LICENSES.md](LICENSES.md) for third-party job API attributions.
Explore similar templates
Compare previews and descriptions within the same stack and category.
Resumify
Resumify is a browser-based resume builder built with React, TypeScript, and Vite.
Vite · Portfolio
showlit
Showlit is a personal website template built with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui.
Vite · Portfolio
folium
A developer portfolio template built with Vite, React, TypeScript, and Tailwind CSS.
Vite · Portfolio
kurizu-discord
A personal portfolio website built with React and Vite that mimics the Discord desktop app, organizing projects, skills, and experience into customizable channels, threads, a member list, and emoji reactions.
Vite · Portfolio
cv-educornelsen
A React + TypeScript personal portfolio template built with Vite, featuring a streaming AI chatbot powered by Google Gemini. An Express backend proxies requests to keep the API key server-side, with rate limiting, IP throttling, canary token injection, and LangFuse tracing.
Vite · Portfolio
about-me-personal-portfolio-website-template
AboutMe is a free personal website template built with Bootstrap and Vite, released under the MIT license. It provides a single-page index.html with organized src directories for images, JavaScript, and SCSS, along with npm scripts for development and build.
Vite · Portfolio