Build a configurable portfolio from your public github projects.
see sample.html or github.com/modularizer.github.io which was used to build https://torinhalsted.com
Visit https://torinhalsted.com/folio
- Make a github repo to host a free GitHubPages Site
- name the repo
yourusername.github.io(using your actual name) if you want to create a site at your pages root https://youusername.github.io - if you name the repo anything else, e.g.
folio, your site will be at https://youusername.github.io/folio
- name the repo
- Add an
index.htmlfile in the project root which imports the bundle from CDN or self-hosted
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/gh/modularizer/folio@latest/dist/folio.bundle.js"
data-init="true"
data-username="modularizer"
data-token="ghp_......"
data-background="https://images.unsplash.com/photo-1470115636492-6d2b56f9146d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
></script>
</html>Option 1: GitHub Pages (Recommended - Always Up-to-Date)
<!DOCTYPE html>
<html lang="en">
<script src="https://modularizer.github.io/folio/dist/folio.bundle.js"
data-init="true"
data-username="subdomain"></script>
</html>✅ Best for staying current: Auto-deploys on every push via GitHub Actions
✅ Fast & reliable: Served from GitHub's CDN
✅ Free: No setup required
📝 Setup: Enable GitHub Pages in repo settings, use .github/workflows/deploy-bundle.yml
Option 2: jsdelivr (with commit hash for latest)
<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.jsdelivr.net/gh/modularizer/folio@latest/dist/folio.bundle.js"
data-init="true"
data-username="subdomain"></script>
</html>@latest may have caching delays. For guaranteed latest, use specific commit hash: @abc123def456
Option 3: npm + unpkg (if published to npm)
<!DOCTYPE html>
<html lang="en">
<script src="https://unpkg.com/@modularizer/folio-bundle@latest/dist/folio.bundle.js"
data-init="true"
data-username="subdomain"></script>
</html>📦 Requires publishing to npm first
NOTE:
- Use
data-username="subdomain"to auto-detect username from github.io subdomain (e.g.,modularizer.github.io→modularizer) - For custom domains, set explicitly:
data-username="yourusername" - Add
data-base-path="/folio"only if your routes are under a subdirectory (e.g., forexample.com/folio/project). Omit for root deployment. - Script can be loaded from anywhere (CDN, different path, etc.) - routing is based on your page location, not script location
- Create one at
https://github.com/settings/tokens/new?scopes=public_repo&description=Portfolio%20App - Either...
a. Hardcode it in your
index.htmlusing&token=ghp_...OR b. Insert it into the built site using a github workflow (it will still be publicly accessible, but given the limited scope that is okay, and this way it will not be committed to your github repo)- under your project's Settings > Secrets and variables > Actions > Repository secrets > + New repository secret > PORTFOLIO_GITHUB_TOKEN
- copy .github/workflows/deploy.yml.example into your repo as
.github/workflows/deploy.yml
- Clone this repo
npm install- Create a token to use in the github api at
https://github.com/settings/tokens/new?scopes=public_repo&description=Portfolio%20App - Copy
.env.exampleto.env npm run startto start serving locally- modify users/ folder to configure
- 🎨 Parameterized Theme System - Dark mode with support for additional themes
- 📱 Responsive Design - Works beautifully on desktop, tablet, and mobile
- 🖼️ Background Image Support - Customizable dark background images
- 🎯 TypeScript - Strong typing throughout the codebase
- 🚀 Expo Router - File-based routing for easy navigation
- 💻 React Native Web - Write once, run on web and mobile
- 🔧 Customizable Builders - Each project can have its own custom rendering logic
- 👤 User Data Separation - Personal info and projects are separated from generic code