Overview
mefolio is my personal intelligence hub — a portfolio site designed to be more than a static page. It is built as a living system with multiple interaction modes, progressive content disclosure, and plans for an integrated AI-powered news feed.
Design Philosophy
Most developer portfolios optimize for one audience. mefolio has three interaction modes:
Explorer mode (default): Clean, fast, static HTML. Blog posts, project summaries, work history. Zero JavaScript on most pages.
Terminal mode: Full keyboard-driven CLI interface. Type projects, blog, whoami, stack and navigate the content without touching a mouse. Keyboard shortcut: `Ctrl+“.
Architecture mode: Interactive system diagrams for each project. Click nodes to see component descriptions. Tabs switch between projects. For the technically curious visitor who wants to understand how things are built.
Layered Complexity
The site supports three depth levels, persisted in localStorage:
- Simple: Hero, metrics, projects, blog
- Curious: Adds tech stack details, system descriptions, full blog with AI summaries
- Expert: Adds architecture diagrams, pipeline details, infrastructure notes
Technical Architecture
Built on Astro 5’s island architecture — static HTML everywhere by default, SolidJS islands for interactive components. The terminal and architecture modes are lazy-loaded islands that don’t affect page load performance.
Content is managed through Astro’s typed content collections — every blog post and project entry is schema-validated at build time.
Tech Stack
Astro 5 · SolidJS · TypeScript · Tailwind CSS · MDX · Cloudflare Pages