Skills Guide

Portfolio Forge

VerifiedSafe

Generates a static HTML portfolio and developer activity log from an Obsidian knowledge base. Builds project cards, activity timelines, and statistics dashboards. Ideal for turning your Obsidian notes into a personal portfolio site with the /portfolio command.

Sby Skills Guide Bot
DevelopmentIntermediate
606/2/2026
Claude Code
#obsidian#portfolio#static-site#html#devlog

Recommended for

Backend developerClaude CodeCode reviewFrontend developerFullstack developerRefactoring

Our review

Generates a static HTML portfolio and developer activity log from an Obsidian knowledge base.

Strengths

  • Directly transforms your Obsidian vault into a structured portfolio
  • Produces standalone pages without JavaScript dependencies
  • Includes visualizations like commit charts and contribution calendars

Limitations

  • Requires a compatible Obsidian vault structure
  • Limited customization without modifying the generated code
When to use it

Use this skill when you want to quickly create a developer portfolio from your existing Obsidian notes.

When not to use it

Avoid this skill if you need a portfolio with a dynamic CMS or real-time updates.

Security analysis

Safe
Quality score90/100

The skill only uses Read, Write, Glob, and Grep to scan and generate static HTML files from a local Obsidian vault. It does not execute external code, access the network, delete files, or handle secrets. No destructive or exfiltrating actions are present.

No concerns found

Examples

Generate full portfolio
Generate my portfolio from Obsidian vault
Create activity timeline only
Create dev log from my Obsidian notes
Build site with custom output
Build portfolio site and output to ~/Sites/my-portfolio

name: portfolio-forge description: | Generates static HTML portfolio and developer activity log from Obsidian knowledge base. Creates project cards, activity timelines, and statistics dashboards.

Triggers: "generate portfolio", "build site", "create dev log", "/portfolio" version: 1.0.0 author: Claude Code allowed-tools:

  • Read
  • Write
  • Glob
  • Grep

Portfolio Forge

Transforms your Obsidian knowledge base into a beautiful static HTML portfolio.

What It Generates

Project Portfolio Page

  • Project cards with tech stack badges
  • LOC statistics
  • Recent activity
  • Quick links to documentation

Activity Timeline

  • Chronological view of all sessions
  • Commit frequency charts
  • Project breakdown

Statistics Dashboard

  • Total lines written
  • Languages used
  • Projects active
  • Contribution calendar

Output Structure

~/Documents/Vaultage/06_Metadata/Portfolio/
├── index.html          # Main portfolio page
├── activity.html       # Activity timeline
├── stats.html          # Statistics dashboard
├── projects/
│   ├── atlas.html      # Individual project pages
│   └── ...
├── css/
│   └── style.css       # Styling
└── data/
    ├── projects.json   # Project data
    └── activity.json   # Activity feed

Usage

# Generate full portfolio
/portfolio

# Generate specific section
/portfolio --only projects

# Custom output directory
/portfolio --output ~/Sites/dev-portfolio

# Include private projects
/portfolio --include-private

Design

Clean, minimal design inspired by:

  • GitHub profile pages
  • Linear.app aesthetics
  • Vercel dashboard

Color Scheme

  • Background: #0a0a0a (dark)
  • Cards: #141414
  • Accent: #3b82f6 (blue)
  • Text: #e5e5e5

Features

  • Responsive design
  • Dark mode by default
  • Smooth animations
  • Fast loading (no JS frameworks)
Related skills

Next.js App Router Expert

Development

A skill that turns Claude into a Next.js App Router expert.

Claude CodeCursoradvanced
890
234
2,846
Admin

README Generator

Development

Creates professional and comprehensive README.md files for your projects.

claudeCursorWindsurfbeginner
259
72
821
Admin

API Documentation Writer

Development

Generates comprehensive API documentation in OpenAPI/Swagger format.

claudeCursorWindsurfintermediate
156
44
682
Admin