A high-performance, single-binary static site generator designed for creating minimalist, responsive, and gorgeous portfolios. Written entirely in Odin for maximum compilation speed and executable efficiency.

This template features a modern Neobrutalist aesthetic, a dynamic ASCII interactive canvas background, a cmd-palette search trigger (⌘K), and built-in privacy-preserving visitor logging.

• Blazing Fast: Compiles in milliseconds, executes in microseconds. No heavy Node/Go runtime dependencies needed.
• Embedded Templates: Page layout templates are compiled directly into the binary, reducing disk reads and ensuring single-binary portability.
• Markdown-Driven Content: Author your homepage, pages, and case studies in Markdown. The custom parser supports frontmatter configuration.
• Neobrutalist Facelift: Harmanous HSL color tokens, bold borders, sharp drop-shadows, and smooth micro-animations.
• Interactive ASCII Grid: Interactive canvas background rendering letters from the brand name (KiloLiqu) reacting to cursor movement.
• Command Palette (⌘K): Quick navigations and tags search right from a modal command menu.
• Privacy-Preserving Visitor Tracker: A lightweight backend logging pipeline integrated via Caddy reverse-proxy routing to n8n and PostgreSQL.

├── main.odin             # Core static site generator written in Odin
├── content/              # Portfolio text content
│   ├── about.md          # About page content
│   ├── contact.md        # Contact page content
│   ├── index.md          # Homepage markdown (Hero copy, value cards)
│   └── projects/         # Project case studies folders
│       └── <project-id>/
│           ├── index.md  # Project markdown details & frontmatter
│           ├── images/   # Project-specific gallery images
│           └── documents/# Project-specific PDF documentation files
├── static/               # Theme static assets (automatically copied to dist/)
│   ├── css/
│   │   ├── style.css     # Main stylesheet (Neobrutalist layout)
│   │   └── lightbox.css  # Image gallery modal stylesheet
│   ├── js/
│   │   ├── ascii-background.js # Interactive ASCII grid script
│   │   ├── command-palette.js  # Keyboard menu script
│   │   └── visitor-notify.js   # Beacon-based logging script
│   ├── hero2.png         # Optimized hero image
│   ├── Logo.png          # Main header logo image
│   ├── favicon.png       # Custom browser tab icon
│   └── favicon.ico       # Legacy favicon format
└── dist/                 # Regenerated static website output (Git ignored)

Microfolio scans directories and processes media automatically based on your project files structure:

• Place case-study images directly inside the content/projects/<project-id>/images/ directory.
• The generator detects all images (.png, .jpg, .jpeg, .webp, .gif) inside this folder, copies them to the global /dist/images/ directory to flatten assets, and automatically renders a Lightbox Gallery preview list on the project case page.

• Store PDF reports, studies, or CVs inside the content/projects/<project-id>/documents/ directory.
• The generator scans this folder for .pdf files and automatically renders download buttons on the detail page.

• Add video links directly inside your project case file frontmatter under a videos: key list:

  ---
  title: Case Study
  videos:
    - url: "https://www.youtube.com/watch?v=..."
      title: "Demo Video"
  ---

• The generator parses this list and embeds responsive YouTube player wrappers into the project case detail page.

Install the Odin Compiler.

Compile the site generator binary:

odin build main.odin -file -out:microfolio-odin

Run the compiled binary to clean and generate the static files inside the dist/ directory:

./microfolio-odin

A basic Python deployment script can be configured to push modified source files to a remote VPS, compile the binary remotely, run the generator, and update server permissions (e.g. for Caddy/Nginx).

This portfolio template generator is ready for codeveloping! We want to make it the most elegant static generator for developers. We are actively looking for contributions on:

• Adding CSS theme presets (Glassmorphic, Cyberpunk, E-ink/Monochrome).
• Implementing a lightweight dev-server with hot-reloading.
• Supporting custom Markdown extensions (like code block syntax highlighting).
• Optimizing automated image resizing/webp conversion during generation.

Feel free to fork the repository, open issues, or submit Pull Requests!