web-porto

A brutalist portfolio website built with Rust, WebAssembly, and Dioxus 0.7. Features an AI-powered chatbot that runs entirely in the browser using semantic search.

Tech Stack

• Rust + WebAssembly — compiled to WASM via wasm32-unknown-unknown
• Dioxus 0.7 — reactive UI framework with client-side routing
• Transformers.js — runs all-MiniLM-L6-v2 (fp16) in-browser for semantic embeddings
• Nix Flakes — reproducible dev environment and NixOS deployment module

Pages

• Home — hero section with interactive particle canvas
• Projects — project showcase with detail views
• Papers — research papers with detail views
• Chat — AI chatbot powered by semantic search over FAQ data

AI Chatbot

The chat page features a FAQ-based chatbot that uses:

• Semantic search — user queries are embedded with all-MiniLM-L6-v2 and matched against pre-computed FAQ embeddings via cosine similarity
• TF-IDF fallback — keyword-based matching when embeddings are unavailable
• Conversational features — greeting detection, follow-up handling, response variation
• Privacy-first — the ML model runs locally in the browser, no data leaves the device

The ~44MB model is loaded on-demand when the user clicks "Load AI Model".

Project Structure

├── porto-app/ # Main Dioxus WASM application
│ └── src/
│ ├── canvas/ # Interactive canvas animations
│ ├── components/ # Shared UI components (navbar, cursor)
│ ├── pages/ # Route pages (home, projects, papers, chat)
│ └── styles/ # Theme and global styles
├── porto-shared/ # Shared data types
│ └── src/
├── content/ # TOML content files (about, projects, papers, FAQ)
├── public/ # Static assets (photos, papers, models, favicon)
├── nix/
│ └── module.nix # NixOS module (nginx, ACME, security headers)
├── Cargo.toml # Workspace root
├── Dioxus.toml # Dioxus build configuration
└── flake.nix # Nix devShell, packages, nixosModules.default

Development

nix develop
dx serve --package porto-app

Production Build

nix develop -c dx bundle --package porto-app

Output: target/dx/porto-app/debug/web/public/

NixOS Deployment

This flake exports nixosModules.default for use in a NixOS configuration:

# In your flake inputs:web-porto.url="github:KeyCode17/web-porto";# In your machine config:imports=[web-porto.nixosModules.default];services.web-porto={enable=true;domain="daffakaryudi.web.id";acmeEmail="m.daffa.karyudi@gmail.com";};