https://github.com/nick-stebbings/wasmer-clap-portfolio

Rust based Portfolio website using wasmer, x-term WASI module, and Clap
https://github.com/nick-stebbings/wasmer-clap-portfolio

clap-rs cli preact rust rust-lang wasi wasm webassembly

Last synced: 3 months ago
JSON representation

Rust based Portfolio website using wasmer, x-term WASI module, and Clap

• Host: GitHub
• URL: https://github.com/nick-stebbings/wasmer-clap-portfolio
• Owner: nick-stebbings
• Created: 2025-02-14T04:01:05.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-02-23T21:05:00.000Z (3 months ago)
• Last Synced: 2025-02-23T22:18:38.659Z (3 months ago)
• Topics: clap-rs, cli, preact, rust, rust-lang, wasi, wasm, webassembly
• Language: HTML
• Homepage: https://nickstebbingsportfolio.netlify.app/
• Size: 822 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Wasmer-Hosted Rust CLI - Portfolio Website

A unique portfolio website that showcases a Rust CLI application running directly in the browser. Built using Clap, in Rust, compiled for a WASI target, and executed by the `sharrattj/bash` x-term WASI module. This project demonstrates how to bring native CLI experiences to the web.

![portfolio](https://github.com/user-attachments/assets/7a56a401-eaa9-4d5c-b729-419834977834)

## 🚀 Features

- Interactive CLI interface in the browser

- Native Rust Clap CLI compiled for browser execution

- Command-line style navigation through portfolio sections

- Modern, minimalist web integration with Preact

## 🛠️ Tech Stack

- **CLI**:

  - Rust

  - [clap](https://github.com/clap-rs/clap) for CLI argument parsing

  - WASI target compilation

  

- **Web Integration**:

  - Preact to wrap the generated Framer html

  - Wasmer SDK used as the WASM host.

  - `sharrattj/bash` x-term module which executes the CLI binary

I run format and Clippy checks before each commit using the shell script at `/project-cli/scripts/check.sh`/

Here is a diagram showing the architecture of the app:

```mermaid

flowchart TD

    subgraph Frontend["Frontend Layer"]

        subgraph UI["UI Layer"]

            P[Preact App] --"wraps"-->  F[Framer Static Site]

        end

        

        UI --"implements"--> Runtime

        Runtime --"mounts onto"--> UI

        

        subgraph Runtime["Wasmer SDK + @xterm JS"]

            subgraph Shell["Terminal Layer"]

                B["

                sharrattj/bash WASI"] --"executes"--> M[Portfolio CLI WASI Module]

            end

        end

    end

    subgraph WASM["WebAssembly Layer"]

        R["Rust Clap CLI compiled for

        wasm32-wasip1

        "] --> M

    end

    subgraph Data["Data Layer"]

        Y[projects.yaml] --> C[ProjectConfig]

        C --> R

    end

    style Frontend fill:#2a3950,stroke:#4a5d78,stroke-width:2px,color:#fff

    style UI fill:#243245,stroke:#4a5d78,stroke-width:2px,color:#fff

    style Runtime fill:#1e2835,stroke:#4a5d78,stroke-width:2px,color:#fff

    style Shell fill:#182230,stroke:#4a5d78,stroke-width:2px,color:#fff

    style WASM fill:#1a2535,stroke:#4a5d78,stroke-width:2px,color:#fff

    style Data fill:#152030,stroke:#4a5d78,stroke-width:2px,color:#fff

    style B fill:#182230,stroke:#4a5d78,stroke-width:2px,color:#88a3c7

    style R fill:#1a2535,stroke:#4a5d78,stroke-width:2px,color:#fff

```