Cloud & systems
FocusSelf-hosted delivery, SSR architecture, CI/CD, and reliability budgets for small-scale production sites.
- Next.js SSR / SSG delivery
- Docker + nginx reverse proxy
- CI deploy and health checks
- Performance and cost-aware hosting
Loading command center
Théo Marini · Systems engineer and technical builder
theom.fr
Engineering systems across cloud, immersive web, and low-level experiments.
Investigates technologies, builds prototypes and production-oriented systems, tests constraints, and documents trade-offs.
Positioning
Explore, design, build, test, and document working systems.
Théo Marini explores emerging technologies, builds working systems, tests their limits, and documents what creates real technical and operational value. Focus areas are backed by shipped work on this site; investigation domains are labeled as such.
Immersive & low-level web
FocusClient-side WebGL scenes, scroll-driven interaction, and WebGPU/WASM labs kept off the critical SEO path.
- WebGL / React Three Fiber
- GLSL dither fields
- WebGPU experiments
- Rust → WASM scaffolds
Embedded & maker systems
InvestigationHardware/software prototypes, sensors, and edge constraints — explored as engineering interest, not claimed production portfolio yet.
- Microcontrollers
- Sensors / IoT patterns
- Edge constraints
- Hardware/software loops
Digital finance systems
InvestigationFintech infrastructure patterns and financial automation — tracked as investigation, not as shipped client work on this site.
- Payments infrastructure patterns
- Financial automation
- Data pipelines
- Risk-aware design
Selected work
Evidence over decoration.
Production systems, stable demos, and prototypes — labeled by maturity. No fabricated client case studies.
production · active
theom.fr — SSR portfolio with immersive hero
Sole designer/engineer — architecture, implementation, hosting, and content.
Problem — Present engineering work with a distinctive immersive surface without making the site invisible to crawlers and answer engines.
Outcome — Live site on Hetzner with SSR pages, JSON-LD, llms.txt, bidaily SEO audit pipeline, and progressive WebGL enhancement.
- Next.js
- TypeScript
- R3F
- Three.js
- MDX
- Docker
- nginx
experiment · stable demo
Dither wave field
Implementation of R3F canvas, adaptive DPR, reduced-motion fallback, and scroll coupling.
Problem — Create a memorable visual field that remains optional for accessibility and does not block text LCP.
Outcome — Stable dither shader experiment in the repo; homepage hero evolved to a procedural command-center storyboard (walkway / platform / curved HUD screen).
- Three.js
- R3F
- GLSL
- GSAP
experiment · stable demo
Command-center hero storyboard
Architecture, procedural assets, quality profiles (mobile/desktop), bloom budget, reduced-motion poster.
Problem — Deliver the cinematic storyboard (wide → approach → HUD → global map) without blocking SSR copy or requiring a Blender GLB on day one.
Outcome — Live on homepage with mobile/desktop quality tiers, storyboard camera sampling, and WebGL/poster fallbacks.
- Three.js
- R3F
- postprocessing
- canvas textures
experiment · stable demo
WASM light engine (wgpu)
Crate + wasm-pack artifacts + lab page WebGPU demo with honest maturity labeling.
Problem — Separate systems-engine experiments from the design-critical Three.js hero so iteration does not break SEO delivery.
Outcome — Live demo on /labs/wgpu-engine: WASM engine identity plus visitor-GPU WebGPU draw; reduced-motion and no-WebGPU fallbacks.
- Rust
- wasm-bindgen
- WebGPU
- WGSL
Labs
An active engineering environment
Prototypes, benchmarks, rendering experiments, and Rust/WASM work that may not yet be production-ready — maturity labeled honestly.
Stable demo
Dither wave field
Testing — Whether a scroll- and pointer-driven dithered WebGL field can brand a portfolio without blocking LCP or accessibility.
Why — Immersive differentiation must remain optional; crawlers and reduced-motion users still need the message.
- Three.js
- R3F
- GLSL
- GSAP
Stable demo
WASM light engine (wgpu)
Testing — A Rust→WASM control plane plus a minimal WebGPU draw path, isolated from the Three.js marketing hero.
Why — Compute-oriented labs need a systems stack; hero design velocity should not depend on that stack.
- Rust
- wasm-bindgen
- WebGPU
- WGSL
Work in progress
WebGPU particle field
Testing — Compute-shader particle density and interaction cost on recent GPUs and phones.
Why — Validates whether WebGPU compute is practical for portfolio-scale demos without remote streaming.
- WebGPU
- WGSL
Writing
Technical notes as evidence
Architecture decisions, SEO/GEO trade-offs, and engine comparisons — written to be citable.
webgl
How does an immersive WebGL hero stay SEO-friendly?
Keep the wow on the client GPU, put brand and answers in SSR HTML, and lazy-load the canvas after text LCP so crawlers and humans both win.
Read note →geo
What is generative engine optimization for a developer site?
GEO structures your pages so ChatGPT, Perplexity, and AI Overviews can quote accurate answer capsules about you, your stack, and your labs.
Read note →rust
When should you use Rust wgpu WASM instead of Three.js?
Use Three.js or R3F for marketing heroes and scroll storytelling; reserve Rust wgpu WASM for compute-heavy labs where a shared native/web engine matters.
Read note →
Method
How the work moves.
01
Explore
Map the problem, constraints, technologies, and failure modes before committing to an architecture.
02
Design
Define interfaces, trade-offs, validation criteria, and what “good enough” means for the next iteration.
03
Build
Ship a working implementation — prototype or production-oriented — that can be exercised end-to-end.
04
Test
Measure performance, resilience, feasibility, and limits. Prefer observable outcomes over claims.
05
Document
Record decisions, failures, and next steps so the work can be reused, cited, or challenged.
About
Théo Marini
Systems engineer and technical builder based in Marseille, France. Builds and documents working systems at the intersection of self-hosted infrastructure, immersive web rendering, and Rust/WebAssembly labs.
Immersive web is a differentiator inside a broader systems practice: delivery, measurement, documentation, and honest experiment maturity.
Working on a complex system, technical prototype, or experimental product?
Conversations about architecture, prototypes, and constrained engineering problems are welcome.