Portfolio Builder

Create, preview, and publish beautiful developer portfolios with Next.js 14, TypeScript, Tailwind CSS, and shadcn/ui. This project supports static export and GitHub Pages deployment with CI/CD.

Live (GitHub Pages): https://CICD-PROJECT-S103.github.io/Portfolio-builder

Features

• Multiple portfolio templates (Modern, Minimal, Creative, Professional)
• Builder flow to start from a template: /builder?template={id}
• Fullscreen preview in a new tab: /preview/{template} (no navbar/footer) Responsive design, dark/light theme App Router (Next.js 14) with static export for GitHub Pages Ready for CI/CD (build, type-check, lint, and deploy)

Tech Stack

• Next.js 14 (App Router, TypeScript)
• Tailwind CSS v4 + shadcn/ui components
• lucide-react icons, @vercel/analytics

Quick start

Prerequisites: Node.js 18+ (LTS recommended) and your preferred package manager (pnpm or npm).

Install dependencies and run the dev server:

# using pnpm (recommended)
pnpm install
pnpm dev

# or using npm
npm install
npm run dev

Open http://localhost:3000 (or the next available port) to view the app.

Useful scripts

{
	"dev": "next dev",
	"build": "next build",
	"start": "next start",
	"export": "next build",            // static export is enabled via next.config.mjs (output: 'export')
	"deploy": "npm run export && gh-pages -d out"  // optional local deploy helper
}

Project structure (high level)

portfolio_FE/
	app/
		preview/[template]/         # fullscreen preview (minimal layout, opens in new tab)
		templates/                  # template gallery
		builder/                    # start building from a template (?template=modern)
		landing/, login/, ...       # other pages
	components/
		portfolio-templates/        # template implementations
		ui/                         # shadcn/ui components
	lib/, hooks/, public/, styles/

Fullscreen preview (new)

• From /templates, use the Preview button to open a new tab with a full-window preview: /preview/{templateId}.
• The preview route uses a minimal layout (no navbar/footer) so the portfolio fills the screen.
• A small floating toolbar in preview lets you “Use This Template” (go to builder) or “Close”.

Static export and GitHub Pages

This project is configured for static export:

• next.config.mjs sets output: 'export' and trailingSlash: true.
• In production builds, it uses basePath and assetPrefix set to /Portfolio-builder to work under GitHub Pages.
• Running next build will create the static site under out/.

Local one-off publish to GitHub Pages using gh-pages:

# ensure you have push access to the repo remote
npm run deploy

CI/CD with GitHub Actions

Below are two example workflows. Pick one deploy method (official Pages deploy or gh-pages). Both include a CI job that type-checks and builds.

1) Official GitHub Pages (upload-pages-artifact + deploy-pages)

Save as .github/workflows/pages.yml:

name: Deploy to GitHub Pages

on:
	push:
		branches: ["main"]
	workflow_dispatch:

permissions:
	contents: read
	pages: write
	id-token: write

concurrency:
	group: "pages"
	cancel-in-progress: true

jobs:
	build:
		runs-on: ubuntu-latest
		steps:
			- uses: actions/checkout@v4
			- uses: actions/setup-node@v4
				with:
					node-version: 18
					cache: "pnpm"
			- name: Install pnpm
				run: npm i -g pnpm
			- name: Install deps
				run: pnpm install --frozen-lockfile
			- name: Type check
				run: pnpm tsc --noEmit
			- name: Build (static export)
				run: pnpm build
			- name: Upload artifact
				uses: actions/upload-pages-artifact@v3
				with:
					path: ./out

	deploy:
		needs: build
		runs-on: ubuntu-latest
		environment:
			name: github-pages
			url: ${{ steps.deployment.outputs.page_url }}
		steps:
			- name: Deploy
				id: deployment
				uses: actions/deploy-pages@v4

Notes:

• Ensure your repository’s Pages settings are set to “GitHub Actions”.
• The base URL will be https://<your-org>.github.io/Portfolio-builder.

2) Deploy using gh-pages (peaceiris/actions-gh-pages)

Save as .github/workflows/gh-pages.yml:

name: CI & Deploy (gh-pages)

on:
	push:
		branches: ["main"]
	workflow_dispatch:

jobs:
	build-and-deploy:
		runs-on: ubuntu-latest
		steps:
			- uses: actions/checkout@v4
			- uses: actions/setup-node@v4
				with:
					node-version: 18
					cache: "pnpm"
			- name: Install pnpm
				run: npm i -g pnpm
			- name: Install deps
				run: pnpm install --frozen-lockfile
			- name: Type check
				run: pnpm tsc --noEmit
			- name: Build (static export)
				run: pnpm build
			- name: Deploy to gh-pages
				uses: peaceiris/actions-gh-pages@v4
				with:
					github_token: ${{ secrets.GITHUB_TOKEN }}
					publish_dir: ./out
					force_orphan: true

Development tips

• The app uses the App Router. Add new routes under app/.
• Because this is a static export, avoid server-only features that require SSR at runtime.
• When adding new routes, consider basePath in production (GitHub Pages).

Contributing

Issues and PRs are welcome. If you change public behavior, please add or update minimal tests or docs.

License

MIT License. See LICENSE (add one if missing).

Portfolio-builder