Portfolio Template Generator

A modern, customizable portfolio website generator. Instantly create a beautiful, interactive HTML/CSS/JS portfolio with your own projects and contact info—no coding required!

Features

• Easy CLI: Answer a few prompts and generate your portfolio in seconds
• Customizable: Add your name, role, skills, projects, and contacts
• Modern Design: Responsive, animated, and stylish (HTML, CSS, JS)
• Contact Form: Optional backend (Node.js/Express) with Discord webhook support
• Deploy Anywhere: Works on GitHub Pages, Vercel, Netlify, or any static host

Quick Start

1. Install dependencies

npm install

2. Generate your portfolio

npx create-portfolio

Or, if installed globally:

npm install -g .
create-portfolio

You’ll be prompted for your name, role, skills, projects, and contact methods. Your site will be generated in the my-portfolio folder (or specify a custom output directory).

3. Preview your site

Open the generated index.html in your browser.

Advanced Usage

Use in JavaScript

You can use the generator programmatically:

import { createPortfolio } from 'portfolio-template';

await createPortfolio({
  name: 'Jane Doe',
  role: 'Web Developer',
  skills: ['JS', 'CSS', 'React'],
  projects: [
    { name: 'Cool App', description: '...', tech: ['React'], website: '...', github: '...' }
  ],
  contacts: [
    { method: 'Email', label: '[email protected]', link: 'mailto:[email protected]' }
  ]
}, 'output-folder');

Enable Contact Form (Optional)

1. Copy .env.example to .env and set your Discord webhook URL:

   cp .env.example .env
   # Edit .env and set DISCORD_WEBHOOK_URL

2. Install dependencies:

cd my-portfolio
npm install

3. Start the backend:

   npm start

   OR

   vercel dev

4. The contact form will send messages to your Discord!

Project Structure

cli.js                # CLI tool
index.js              # Main API
package.json          # Project config
README.md             # This file
template/             # HTML/CSS/JS template
  index.html          # EJS template
  styles.css          # Styles
  script.js           # JS
  api/                # Backend (optional)
    express-server.js # Express backend
    vercel-function-contact.js # Vercel serverless function
  favicon/            # Icons

Environment Variables

Create a .env file in the root:

ENABLE_CONTACT_FORM=true
DISCORD_WEBHOOK_URL=your_discord_webhook_url_here
PORT=3000

License

MIT

Portfolio generator by Elias (@elias4044)