🧰 Portfolio Generator

Generate a beautiful and customizable portfolio site from Markdown files — fast, flexible, and fully static.

📦 Installation

Download this package:

npm install portfolio-xs -g

✨ Features

• Write each project in its own folder using simple Markdown
• Auto-generate a stylish React-based portfolio site
• Live preview locally
• One-click deploy to GitHub Pages or any static host

🚀 Usage Guide

1. Initialize a New Project

Create a new project folder under doc/ with starter content:

portfolio init

This creates:

my-project/
|── about.md      # editable content
└── doc

2. Add your project

Add your new project under the doc fold:

portfolio add 'The name of your project'

3. Customize the Markdown

Open my-project/doc and update the frontmatter and content:

---
title: My Project
description: A short summary here
category: Web
order: 1
createDate: 2024-06-10
updateDate: 2024-06-12
---

order controls manual ranking in the portfolio list. Smaller numbers appear first (e.g. 1 before 10).

4. Add an About Section

To customize the "About" section in the sidebar, create a about.md file in the lib/ folder:

lib/about.md

Write your personal introduction in plain Markdown:

# 👋 Hello!

I'm Bowen, a developer passionate about building beautiful and functional software.

- 🔭 I’m currently working on ski video AI analysis
- 🌱 I’m exploring advanced motion estimation and pose modeling
- 📫 Reach me at: taobowen.dev@gmail.com

This file will be converted into a React component and automatically injected into the sidebar of the layout.

✅ You can even use raw HTML or <script>/ tags in about.md for redirect or custom logic if needed.

5. Update Global Settings

Edit lib/setting.json to update:

• Website title
• Favicon
• Other metadata

{
  "title": "Bowen's Portfolio",
  "favicon": "./lib/assets/favicon.png",
  "description": "A personal site showcasing my projects and skills"

}

6. Generate the Site

Compile the markdown content and metadata into a static site:

portfolio generate

7. Preview Locally

Launch a local dev server to view and test:

portfolio preview

Visit: http://localhost:3000

8. Build for Deployment

Compile final static assets using Webpack:

portfolio build

9. Deploy to GitHub Pages

You can push the contents of the dist/ folder to your GitHub Pages repository:

cp -r dist/* ../taobowen.github.io/
cd ../taobowen.github.io/
git add .
git commit -m "Deploy portfolio"
git push origin main

🧪 Available Commands

Command	Description
portfolio init	Create a new markdown project
portfolio add 'The name of your project'	Add your new project under the doc fold
portfolio generate	Convert markdown into React components and Build static files for deployment
portfolio preview	Start local development server
portfolio build	Compile final static assets using Webpack

Inside the generated site, you can sort projects by Manual, Created, Updated, or Title from the sidebar.

👨‍💻 Author

梁家河的扛麦郎
GitHub: @taobowen

📄 License

ISC © 2025 Bowen Tao