mrbontor.github.io — Engineering Portfolio

A personal engineering portfolio built with React + Vite, presented as an API reference rather than a conventional portfolio website.

The implementation is private. The engineering story is not.

Most of the work represented here has been delivered through private, NDA-bound, or internal engagements. This portfolio therefore focuses on the engineering shape of the work: responsibilities, architecture, technology, systems thinking, and career progression without exposing confidential implementation details.

Concept

The website intentionally uses an API/documentation-style interface:

GET /me
GET /projects
GET /packages
GET /principles
GET /changelog
GET /contact

Projects that can be publicly described return a 200 state.

Projects that are subject to NDA, client ownership, or restricted infrastructure return a 403 state.

The goal is not to simulate a real backend API. It is a visual and conceptual representation of how the portfolio is structured.

Tech Stack

• React
• Vite
• TypeScript
• Static JSON data
• GitHub Pages

No backend service or database is required.

Architecture

The portfolio is intentionally static and data-driven.

                    portfolio.json
                          │
                          ▼
                  ┌─────────────────┐
                  │   React / Vite  │
                  └─────────────────┘
                          │
          ┌───────────────┼───────────────┐
          ▼               ▼               ▼
      Profile        Experience       Open Source
          │               │               │
          └───────────────┼───────────────┘
                          ▼
                    Changelog
                          │
                          ▼
                       Contact

The public content is maintained in a single source of truth:

src/
└── data/
    └── portfolio.json

The UI consumes the JSON structure and renders the corresponding sections dynamically.

Why a Single JSON File?

The portfolio contains relatively small amounts of structured public data, so splitting the content into multiple data sources would add complexity without providing meaningful benefits.

portfolio.json keeps the public identity of the site in one place:

portfolio
├── meta
├── profile
├── experience
├── packages
├── principles
├── hobbies
├── quote
├── changelog
└── contact

This also makes content updates independent from most UI changes.

Privacy

The repository is public by design.

Only information that is safe to disclose publicly should be included in the repository or generated website.

Never commit

• Credentials
• API keys
• Tokens
• Internal URLs
• Private infrastructure details
• Database credentials or connection strings
• Confidential architecture documents
• Client-owned source code
• Internal service names that are not publicly attributable
• Sensitive business or customer data

For restricted engagements, the portfolio documents only publicly shareable information such as:

• Role
• General responsibilities
• Technology stack
• Architecture patterns
• Industry
• Engineering scope
• Non-confidential outcomes

A 403 project means the underlying work exists but its implementation cannot be publicly exposed.

Design Philosophy

This portfolio is intentionally different from a traditional:

Home
About
Skills
Projects
Experience
Contact

Instead, it treats an engineering career as a system.

Core ideas

Systems over screenshots

The portfolio emphasizes architecture, responsibilities, constraints, and engineering decisions rather than screenshots of private products.

Ownership over handoff

The goal is to communicate responsibility for systems, not merely participation in features.

Simplicity that scales

The implementation remains intentionally small even though the interface represents complex engineering work.

Documentation is part of delivery

The portfolio itself follows a documentation-oriented design because documentation is part of how production systems remain maintainable.

Private work can still demonstrate engineering ability

Confidentiality does not prevent describing the engineering problems, boundaries, technologies, and responsibilities involved.

Open Source

Public packages and personal projects are treated as additional evidence of engineering practice.

The portfolio may include packages from the mrbontor ecosystem, such as:

@mrbontor/*

These provide publicly inspectable examples of coding style, API design, package design, and reusable engineering patterns.

Career as Changelog

Career progression is represented as software releases:

v5.x
v6.x
v7.x
v8.x
v9.x
v10.x

Each version represents a meaningful stage in professional growth rather than an arbitrary version number.

The changelog format intentionally reinforces the central idea of the portfolio:

A career is also a system that evolves.

Deployment

The site is designed to be deployed as a static application.

Git repository
      │
      ▼
  Vite build
      │
      ▼
 Static assets
      │
      ▼
 GitHub Pages

No application server is required.

Development

Install dependencies:

npm install

Run the development server:

npm run dev

Build for production:

npm run build

Preview the production build:

npm run preview

Project Structure

.
├── public/
├── src/
│   ├── components/
│   ├── data/
│   │   └── portfolio.json
│   ├── pages/
│   ├── styles/
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

The exact structure may evolve as the UI develops.

Philosophy

This project intentionally follows a simple rule:

Static infrastructure.
Structured data.
Dynamic presentation.
Minimal operational complexity.

The website should feel like a living engineering system without requiring one.

---

mrbontor

Senior Software Engineer Distributed Systems · Microservices · API Architecture · Node.js · TypeScript