microfolio

🥈Silver

Microfolio is a static portfolio generator for creatives. It uses SvelteKit 2 and Tailwind CSS 4 to create portfolios from Markdown files. Ideal for designers, artists, and architects who need a simple, customizable portfolio solution.

13630Updated 1mo ago

Intermediate30min to implementautomation

Saves ~45 min per use

Quick InstallView Source

git clone https://github.com/aker-dev/microfolio.git

Works with:

Claude

Overview

About This Skill

Microfolio is a file-based portfolio generator that eliminates the need for databases by organizing projects as folders and Markdown files. Built with SvelteKit 2 and Tailwind CSS 4, it offers multiple viewing modes—grid, list, and interactive map—along with smart tagging, EXIF/IPTC metadata extraction, and a responsive mobile-first design. The tool includes dark mode, image optimization with WebP thumbnail generation, shareable URLs with synced filters, and internationalization support for English and French. Ideal for creatives who need a fast, customizable, and professionally deployed portfolio without backend complexity.

How to Use

1. **Define Your Requirements:** List your creative focus (e.g., photography, architecture), preferred style (minimalist, dark mode), and required sections (About, Projects, Contact). Use tools like [Coolors](https://coolors.co/) to generate a color palette. 2. **Prepare Content:** Create Markdown files for each project, about section, and blog post. Store them in `/src/lib/content/projects/` and `/src/lib/content/about.md`. Include high-resolution images (optimized for web) in `/static/images/`. 3. **Customize Theme:** Modify `tailwind.config.js` to adjust colors, fonts, and spacing. Edit `theme.css` for custom styles. Preview changes with `npm run dev` in your browser. 4. **Deploy:** Push the code to GitHub. Use [Vercel](https://vercel.com/) or [Netlify](https://www.netlify.com/) to deploy with one click. Add a custom domain if needed. 5. **Iterate:** Update your portfolio by editing Markdown files and redeploying. Use GitHub Actions to automate builds on content changes.

Use Cases

Designer portfolios with project galleries and client filtering

Architect portfolios showcasing geolocated projects on interactive maps

Artist portfolios with image metadata and lightbox galleries

Photography portfolios with EXIF data display and dark mode

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/aker-dev/microfolio

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a static portfolio website for [CREATIVE_NAME] using Microfolio. Include sections for [PROJECT_TYPES, e.g., graphic design, architecture, photography]. Use [STYLE_THEME, e.g., minimalist, dark mode, vibrant] with [COLOR_PALETTE, e.g., monochrome, pastel, high contrast]. Structure the portfolio with [SECTIONS, e.g., about, projects, contact, blog]. Export the complete codebase as a ZIP file ready for deployment to [HOSTING_PLATFORM, e.g., Vercel, Netlify, GitHub Pages].

Example Output

Here’s a complete Microfolio portfolio for **Lena Chen**, a graphic designer specializing in branding and typography. The portfolio follows a **minimalist dark mode** theme with a **monochrome color palette**, featuring sections for **About**, **Projects**, **Contact**, and a **Blog** for case studies.

**File Structure:**
```
my-microfolio/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── ProjectCard.svelte
│   │   │   ├── Nav.svelte
│   │   │   └── Footer.svelte
│   │   ├── content/
│   │   │   ├── projects/
│   │   │   │   ├── brand-identity.md
│   │   │   │   ├── packaging-design.md
│   │   │   │   └── web-ui.md
│   │   │   └── about.md
│   │   └── styles/
│   │       └── theme.css
│   ├── routes/
│   │   ├── +page.svelte
│   │   ├── projects/
│   │   │   └── +page.svelte
│   │   ├── about/+page.svelte
│   │   ├── contact/+page.svelte
│   │   └── blog/+page.svelte
│   └── app.html
├── static/
│   └── favicon.ico
├── package.json
└── tailwind.config.js
```

**Key Features:**
- **Projects Section:** Displays Lena’s work with high-resolution images, descriptions, and project tags (e.g., *Branding*, *Typography*, *Packaging*). Each project links to a detailed case study in the blog.
- **About Section:** A concise bio with a professional photo and a downloadable PDF resume.
- **Contact Section:** Includes a form for inquiries, social media links (Instagram, Behance, LinkedIn), and an email address.
- **Blog Section:** Features 3 case studies (e.g., *Rebranding for EcoStart*, *Typography System for TechCorp*) with markdown support for easy updates.
- **Responsive Design:** Optimized for mobile, tablet, and desktop with smooth transitions and a sticky navigation bar.

**Deployment:**
1. Run `npm install` to install dependencies.
2. Execute `npm run dev` to preview locally.
3. Push the code to GitHub and deploy to Vercel with zero configuration.

The ZIP file includes all assets, optimized images, and a `README.md` with setup instructions.