microfolio

作者 aker-dev已验证

A modern static portfolio generator based on SvelteKit 2 and Tailwind CSS 4

136
Stars
3
Forks
Svelte
语言
2026/8/23
添加时间

⚠️ 第三方软件声明

本 Skill 为第三方开源软件,独立托管于 GitHub。SkillTip 仅为信息目录,不控制或维护底层仓库。所显示的安全检查为自动化且范围有限,安装前请自行审查源码。

阅读服务条款

安装

添加到你的 Claude Code skills 目录:

# Add to your Claude Code skills
git clone https://github.com/aker-dev/microfolio

快速入门

使用 microfolio 等 Skills 的指南。

安全报告

已验证

上次扫描:—

{
  "status": "PASSED",
  "issues": []
}

README.md

microfolio

🇫🇷 Lire en français

Deploy to GitHub Pages

A modern static portfolio generator built with SvelteKit 2 and Tailwind CSS 4 by AKER. Features a file-based content management system using folders and Markdown files. Perfect for designers, artists, architects, and creatives who want to showcase their projects elegantly and professionally.

Live Demo: https://aker-dev.github.io/microfolio/

We're looking for translators! Help us make microfolio accessible in more languages. Contact us at hello@aker.pro if you'd like to contribute a translation.

✅ Features

  • 📁 File-based CMS › No database needed, just folders and Markdown files
  • 🎨 Multiple Views › Projects grid, List, and Map modes
  • 📱 Responsive Design › Mobile-first approach
  • 🏷️ Smart Tagging › Filter counters and collapsible tag list
  • 🗺️ Interactive Map › MapLibre GL with geolocated projects, light and dark, on an OpenStreetMap basemap
  • 🚀 Static Generation › Optimal performance with SvelteKit adapter-static
  • 🖼️ Image Lightbox › Enhanced gallery with navigation arrows and metadata display
  • 📊 EXIF/IPTC Metadata › Automatic extraction and display of image technical information
  • 🌙 Dark Mode › Toggle in footer with persistent preference (system / manual / localStorage)
  • ⚡ Image Optimization › WebP thumbnails and sharing images, generated as part of the build
  • 🔗 Shareable URLs › Filter, search, sort, and pagination state synced to URL query params
  • 🌐 Internationalization › English/French via svelte-i18n, RTL-ready
  • 🏷️ Built to be shared and found › Open Graph and Twitter tags with absolute URLs, canonical links, and a sitemap.xml and robots.txt generated from your projects
  • 🔒 No cookies, no consent banner › nothing is tracked, so there is nothing to ask permission for. Legal notice and privacy pages come as templates to fill in. A YouTube or Vimeo address alone on its line becomes a player, routed through the platforms' no-cookie modes
  • 📄 Pagination & Sorting › Customizable rows-per-page, sort by date, title, type, or location

🔒 Privacy by construction

A portfolio should not spy on its readers, and this one cannot.

  • No cookies. document.cookie appears nowhere in the codebase
  • No analytics, no tracking scripts, no forms. The demo embeds one YouTube video, in YouTube's no-cookie mode — and says so in its privacy page
  • No consent banner, because none is required. The only thing kept on a visitor's device is the light/dark choice they made themselves, in localStorage under theme. French rules exempt an interface preference of that kind from consent — it does only what the visitor asked for
  • No Google Fonts. The typeface comes from Bunny.net, a third-party CDN, which therefore receives visitors' IP addresses like any file server would. This is declared in the privacy template rather than glossed over
  • A map with no API key and no account › OpenFreeMap, on OpenStreetMap data. Its tiles are fetched only on the map page

The generated site ships content/legal.md and content/privacy.md as templates. Fill them in: publishing someone else's legal notice is worse than publishing none.

⚡ Fast, and findable

Every page is prerendered: the content is in the HTML, so it is readable without JavaScript and search engines see it without executing anything.

Measured on the published demo, on a phone-sized viewport throttled to slow 4G with a 4× slower CPU — the conditions PageSpeed uses, median of three runs:

PageFirst paintLargest paintBlocking
Home780 ms780 ms0 ms
Projects808 ms808 ms26 ms
List808 ms808 ms45 ms
Map884 ms884 ms589 ms

The map is the exception, and honestly so: a mapping engine is around 380 kB compressed, and no amount of tuning makes that free. Every other page carries almost nothing.

What gets it there: thumbnails and 1200×630 sharing images generated at build, the webfont fetched in parallel rather than behind the stylesheet, video that downloads only when played, and images that reserve their space so nothing jumps.

For search engines and shared links: a title, description, canonical link and Open Graph and Twitter tags on every page, plus a sitemap.xml and robots.txt generated from your own projects.

🚀 Quick Start

Option 1: Homebrew Installation (macOS - Recommended)

# Install microfolio via Homebrew
brew trust aker-dev/tap
brew install aker-dev/tap/microfolio

# Create a new portfolio
microfolio new my-portfolio
cd my-portfolio

# Start the development server
microfolio dev

Option 2: Manual Installation

Prerequisites

  • Node.js 22.13 or later (required by pnpm 11; tested with 22.x and 24.x)
  • pnpm package manager
  • Git for version control
# Clone the template
git clone https://github.com/aker-dev/microfolio.git my-portfolio
cd my-portfolio

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Optional: unzip the thirty projects of the demo site next to yours
pnpm demo

📖 Detailed installation guide: doc/en/01-installation.md

📚 Documentation

🚀 Deployment

📖 Complete deployment guide: doc/en/05-publication.md

Quick Deploy to GitHub Pages

# Build the site
microfolio build  # or pnpm build

# Enable GitHub Pages in repository settings (Source: GitHub Actions)
# Push to main — automatic deployment

Updating

A release is a new engine; your content and settings stay yours. From your site, with everything committed:

pnpm update-microfolio

It applies the release file by file, never touches content/, config.js, your favicon or your sharing image, and leaves a .upstream copy wherever your edits and ours collide. Details in the publication guide.

🧭 Stability

1.0 is a promise: what you build on stays valid until 2.0.

Frozen until 2.0

  • The content layout — content/projects/<slug>/index.md with its images/, videos/ and documents/ — and the frontmatter keys: title and date required, everything else optional
  • The keys of src/lib/config.js: new ones may appear, none is renamed or removed
  • The commands: pnpm dev, build, deploy, demo, update-microfolio, optimize-images, and their microfolio counterparts
  • What pnpm update-microfolio never touches: content/, src/lib/config.js, static/favicon.svg, static/og.jpg and .env files

Free to evolve in 1.x: the look, the dependencies, the internals, the demo content, the interface texts. A change that would break the list above is a 2.0, and will say so.

🤝 Contributing

microfolio is built in the open, and every kind of help counts:

  • 🐛 Found a bug? Open an issue
  • 💡 Have an idea? Start a discussion
  • 🌍 Speak another language? Help translate microfolio — write to hello@aker.pro
  • 🔧 Want to code? Fork the project, create a feature branch, and submit a Pull Request

See CONTRIBUTING.md for the details, and the changelog for what's new.

📞 Support

📰 They talked about microfolio

Thank you, Korben, for the article — and thank you to the beta testers whose feedback shaped everything between 0.1 and 1.0.

🖼️ Built a site with microfolio?

Show it! Post it in Show and tell or write to hello@aker.pro — a wall of fame of sites made with microfolio is in the making, and yours belongs on it.

🙏 Heritage

microfolio owes its founding idea to Subfolio by Area 17: a portfolio that is nothing more than a folder of files, shown well. Subfolio proved the idea years ago; microfolio carries it into a static, privacy-first generator for today's web. Thank you, Area 17.

📄 License

MIT License - See LICENSE file for details.

🖥️ Screenshots

Homepage

microfolio Homepage

Project Views

microfolio Projects Gallery microfolio Project Detail 1 microfolio Project Detail 2

The lightbox shows the image full height, with its title, caption, credit and EXIF metadata in a panel you open when you want it:

microfolio Lightbox with image metadata

List View

microfolio List View

Map View

microfolio Interactive Map

Dark Mode

Follows the system preference, with a toggle in the footer that remembers your choice.

microfolio Homepage in dark mode microfolio Project detail in dark mode microfolio List view in dark mode microfolio Map in dark mode microfolio Lightbox in dark mode


Made with ❤️ by AKER

常见问题

What is microfolio?

microfolio is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by aker-dev. A modern static portfolio generator based on SvelteKit 2 and Tailwind CSS 4. It has 136 GitHub stars.

Is microfolio safe to use?

Yes. microfolio passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.

How do I install microfolio?

Clone the repository with "git clone https://github.com/aker-dev/microfolio" and add it to your Claude Code skills directory (see the Installation section above).

What programming language is microfolio written in?

microfolio is primarily written in Svelte. It is open-source under aker-dev on GitHub, so you can review or fork the full source.

Are there alternatives to microfolio?

Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh microfolio against similar tools.

评论 (0)

暂无评论,成为第一个分享想法的人!

ECC

by affaan-m

10

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

242,21936,702JavaScript
AI 智能体ai-agentsanthropicclaude-code
查看详情
15

An agentic skills framework & software development methodology that works.

234,96620,863Shell
AI 智能体ai-agentsbrainstorming
查看详情

hermes-agent

by NousResearch

10

The agent that grows with you

234,43747,175Python
AI 智能体ai-agentsagent-orchestration
查看详情

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

185,94028,768JavaScript
AI 智能体ai-agentsanthropicclaude-code
查看详情

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

128,8688,826Rust
AI 智能体claude-codeai-tools
查看详情

claude-code

by anthropics

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

120,03119,897Shell
AI 智能体
查看详情

开发者还喜欢

基于喜欢此 Skill 的开发者投票和收藏

ECC

by affaan-m

10

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

242,21936,702JavaScript
AI 智能体ai-agentsanthropicclaude-code
查看详情
15

An agentic skills framework & software development methodology that works.

234,96620,863Shell
AI 智能体ai-agentsbrainstorming
查看详情

hermes-agent

by NousResearch

10

The agent that grows with you

234,43747,175Python
AI 智能体ai-agentsagent-orchestration
查看详情

n8n

by n8n-io

12

Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.

201,88160,308TypeScript
MCP 服务器apisai-tools
查看详情

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

185,94028,768JavaScript
AI 智能体ai-agentsanthropicclaude-code
查看详情

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

128,8688,826Rust
AI 智能体claude-codeai-tools
查看详情