● DOC-001 / REV.2026.05.001 / PORTFOLIO

Quality, applied to everything that I build online.

View projects Get in touch
ayoub@portfolio:~$
> ROLE: Web Developer & front-end engineer
> LOCATION: Algiers, DZ — 36.75°N 03.06°E
> STATUS: Available for commissions
> STACK: Vanilla JS · Vite · PWA · static-first
> CONTACT: ayoubboukerroua@gmail.com
> UPTIME: Est. 2024 · 2+ years active

I build websites for people who need them done right. My background is in industrial environments where precision, documentation, and reliability come first — and I bring that same approach to every line of code. Narrow focus, deliberate craftsmanship, no unnecessary complexity.

02

Capabilities

2 DOMAINS · 12 LINES
DOMAIN.01

Front-end & design.

Performance-first · accessible · vanilla

  • Responsive, accessible front-end development with semantic HTML.
  • Performance-focused architecture. LCP under 1.5s on mobile.
  • Design tokens & system-first CSS. Consistent, maintainable, scalable.
  • Clean vanilla JS. No framework debt where it isn't needed.
  • Static-first deployment. Vite, CDN, zero infrastructure.
  • Bilingual FR/EN with i18n and AR-friendly typography.
DOMAIN.02

Web engineering.

Static-first sites · industrial clients

  • Static-first architecture. Vite + vanilla JS. No framework debt.
  • Portfolios & one-pagers for engineers, consultants, labs.
  • Product datasheets driven by spreadsheets, not a CMS.
  • Bilingual FR/EN with AR-aware typography where needed.
  • Performance budget: LCP < 1.5 s on a mid-range phone.
  • Deployed to a CDN. Handed off with a one-page edit guide.
03

Snapshots of my work

RECENT BUILDS · 4 PROJECTS
PWA Vanilla JS
01

MRS — Maintenance Reporting System

Offline-capable PWA for shop-floor maintenance logging. Replaces paper notebooks with a searchable, exportable digital record.

PWA Bilingual
02

Preciqual Metrology — Calibration Portal

Bilingual FR/EN spec sheet catalogue for a metrology consultancy. Offline-ready, searchable, printer-friendly.

React Supabase
03

QC Monitoring — Mixer Batch Validation

Local-first quality control validation with multi-device sync. Track product, colour, pH, and duration.

Vite Static
04

Industrial Portfolio — Static-First

Performance-focused portfolio for an industrial engineer. LCP under 1.5s, zero framework debt, CDN-deployed.

04

Selected work

CASE FILE INDEX · 3 ENTRIES · 21 SLIDES
  1. W-2025-MRS MRS — Maintenance Reporting System CLIENT: INDUSTRIAL MAINTENANCE · YEAR: 2025 · STACK: VITE · VANILLA-JS · PWA · STATUS: SHIPPED

    Bilingual, offline-capable PWA for shop-floor maintenance logging. Replaces paper notebooks with a searchable, exportable record. No backend, no login — localStorage as the database, hand-written service worker, jsPDF for reports.

    2. 02 Wireframing 18 FRAMES · 2 BREAKPOINTS
      Active list · archive · technical-report builder · settings.
    3. 03 User flow 4 STEPS · 1 PRIMARY PATH
      Inline edit at every step. Archive search is accent-insensitive.
    4. 04 Design system 2 THEMES · 14 TOKENS
      Shop-floor optimised. Dark mode default — lighting on the floor is rarely good.
    5. 05 System architecture 4 LAYERS · NO BACKEND
      Zero infrastructure. Zero hosting cost. Data never leaves the device.
    6. 06 Brand guide MARK · WORDMARK
      Italic serif monogram. Bilingual wordmark FR/EN. Single accent dot.
    7. 07 Security & privacy 5 GUARANTEES
      For industrial data that should never sit on a third-party server.
    01 / 07
  2. W-2025-PM Preciqual Metrology — calibration & qualification CLIENT: METROLOGY CONSULTANT · YEAR: 2025 · STACK: VITE · VANILLA JS · PWA · STATUS: SHIPPED

    Progressive web app for a metrology consultancy: catalogue étalonnage (pressure, temperature, speed) and qualification (HVAC, enceintes, analytique, sorbonne) with bilingual FR/EN spec sheets. Offline-ready, searchable, printer-friendly — replaces a stack of paper catalogues.

    2. 02 Wireframing 12 FRAMES · 6 PAGES
      Catalogue layout: spec sheets with bilingual FR/EN toggle.
    3. 03 User flow 3 PATHS · OFFLINE OK
      Browse catalogue → search by domain → view spec → contact.
    4. 04 Design system FR/EN TOKENS · 2 THEMES
      One design system, two languages. French default with English toggle.
    5. 05 System architecture PWA · STATIC-FIRST
      Offline-first PWA. Zero backend. Instant load after first visit.
    6. 06 Brand guide MONOGRAM · WORDMARK
      P monogram. Bilingual branding. Amber accent for CTAs.
    7. 07 Security & privacy 5 GUARANTEES
      Metrology spec sheets that never leave the device.
    01 / 07
  3. W-2025-QCM QC Monitoring — mixer batch validation CLIENT: IN-HOUSE QC · YEAR: 2025 · STACK: VANILLA JS · LOCALSTORAGE · SUPABASE · PWA · STATUS: SHIPPED

    Local-first QC validation for batch mixers. Track product, colour, capacity, pH, duration; filter by date, search remarks, export PDF or JSON. Multi-device sync via Supabase workspace key.

    2. 02 Wireframing 16 FRAMES · 4 STATES
      Active mixer cards on top, validation table below. Workspace modal overlays.
    3. 03 User flow 5 STEPS · 2 PATHS
      Sync happens via shared workspace key — no accounts to manage.
    4. 04 Design system TAILWIND V4 · 2 THEMES
      Yellow for in-progress · green for in-range · red for out-of-spec.
    5. 05 System architecture 5 LAYERS · CLOUD-OPTIONAL
      Works offline. Sync is opt-in via workspace key. AI calls are user-triggered.
    6. 06 Brand guide MONOGRAM · STATUS DOT
      QC monogram. Stop-light dots for batch state. Tabular numerals everywhere.
    7. 07 Security & privacy 5 GUARANTEES
      No user accounts. Workspace keys are revocable. AI calls are explicit.
    01 / 07
05

Method

OPERATING PRINCIPLES · 4 LINES
  1. M.01

    Static by default. Faster, cheaper, easier to maintain.

  2. M.02

    Specifications precede implementation. A one-pager before an editor opens.

  3. M.03

    Good tools earn trust through clarity, not complexity.

  4. M.04

    Every decision is logged. Every revision is dated.

06

Operator profile

FIRST-PERSON · 3 PARAGRAPHS

I build websites for people who need them done right. My background is in industrial environments where precision, documentation, and reliability come first — and I bring that same approach to every line of code.

The work you see here covers maintenance systems, metrology consultant sites, and QC tools — all built for real clients in Algeria and francophone North Africa. Narrow focus, deliberate craftsmanship, no unnecessary complexity.

Currently: open for freelance commissions — static sites, industrial portfolios, and small tools that ship fast. Algiers-based, remote-friendly.

07

What's in the workshop?

SNEAK PEEK · 1 PROJECT
Coming soon
TYPE Industrial dashboard
STACK React · Tailwind · Supabase · Gemini
STATUS In development
08

Transmissions

DIRECT CHANNELS · 4 ENTRIES

A short note about the project is plenty. Two working days for a first reply.