Web

LaTeX editor

Overleaf-style editor: an article introducing this portfolio, rendered live.

Done Sprint S13-S14 · 8 points

In short, no jargon for non-developersRead the summaryClose

What it is: An editor for scientific documents, in the style of Overleaf: you write on the left, the layout (headings, mathematical formulas) appears live on the right.
What it is for: LaTeX is the writing tool of researchers; the article you read in it presents this portfolio.
What it shows: Knowledge of the tools of the research world, and an editor that guides authors to their mistakes.

Source code

How the pieces fit together

Editor (source and preview) → Parser (TypeScript, hand-written): at each keystroke
Parser (TypeScript, hand-written) → Renderer (two passes, KaTeX): tree
Renderer (two passes, KaTeX) → Preview (safe HTML)
Parser (TypeScript, hand-written) → Diagnostics (line and column)
Diagnostics (line and column) → Editor (source and preview): lead to the line

Edit the article live

This article introduces the portfolio. It is parsed and rendered in your browser by the project's TypeScript library, formulas by KaTeX: edit it, the preview follows.

LaTeX source

\documentclass{article}
\title{A portfolio generated by AI, reviewed and delivered properly}
\author{Charles Lepaire}
\date{October 2026}

\begin{document}
\maketitle

\begin{abstract}
This portfolio shows that a PhD in computer graphics can have AI generate code in about fifteen
languages, then review it, test it and deliver it. The common thread is the one of my thesis: 3D
meshes and their topology. This document is itself rendered by one of the projects, a \LaTeX{}
library written in TypeScript.
\end{abstract}

\tableofcontents

\section{Goal}\label{sec:goal}
A recruiter often sees a list of technologies without proof. Here, every project comes with unit and
integration tests, continuous integration green on Linux, Windows and macOS when it is compiled, an
online demo and two tracking files: \texttt{DECISIONS.md} for architecture choices, \texttt{REVIEW.md}
for the human review of the generated code.

\section{Method}\label{sec:method}
The work follows Scrum, in two-week sprints. At each step:
\begin{enumerate}
\item a specification and an architecture plan, reviewed;
\item tests first, then generation in small steps;
\item checking that a test fails when the code is broken\footnote{For instance, without the occurs
check of the toy language's type inference, the unit tests fail.};
\item a review of every diff, and every defect logged with its fix.
\end{enumerate}
The defects found this way are real: 32-bit integers under js\_of\_ocaml, three-digit exponents on
Windows, a JavaScript stack too small on macOS.

\section{The common thread: meshes}\label{sec:meshes}
The projects form a chain. A C library reads OBJ, PLY and STL files; a C++ library builds their
half-edge structure and computes their invariants. The first is the Euler characteristic of a surface
with $V$ vertices, $E$ edges and $F$ faces:
\begin{equation}
\chi = V - E + F. \label{eq:euler}
\end{equation}
For an orientable surface with $c$ components and $b$ boundary loops, it gives the genus $g$, the
number of ``holes'':
\begin{equation}
\chi = 2c - 2g - b. \label{eq:genus}
\end{equation}
The discrete Gaussian curvature at an interior vertex is the angle defect $K_v = 2\pi - \sum_i
\theta_i$, and the Gauss-Bonnet theorem ties geometry to topology:
\begin{equation}
\sum_v K_v = 2\pi\chi. \label{eq:gauss-bonnet}
\end{equation}
The tests check \eqref{eq:gauss-bonnet} to $10^{-9}$ on randomly deformed tori, and the toy language
Maille computes \eqref{eq:genus} on scenes: \texttt{genus (union t (union t s))} is 2 for two tori and
a sphere. These notions come from my thesis~\cite{thesis}, on generalized maps and the cerebral
vascular tree~\cite{wscg}.

\section{The projects}\label{sec:projects}
\begin{tabular}{lll}
\hline
\textbf{Project} & \textbf{Languages} & \textbf{What is proven} \\
\hline
Mesh library & C, WebAssembly & fuzzing, Valgrind, 3 systems \\
3D topology & C++, three.js & Gauss-Bonnet, online viewer \\
API & Python, FastAPI & Docker, invariants over HTTP \\
Machine learning & PyTorch, MLflow & blocking accuracy threshold \\
Crossroads & Ada, SPARK & absence of errors proved \\
Benchmark database & SQL, PostgreSQL & pgTAP, query plan \\
Toy language & C, Bison, OCaml & inferred types \\
This editor & TypeScript, KaTeX & located diagnostics \\
\hline
\end{tabular}

\noindent The full list, with the state of each project, is on the Projects page. Section
\ref{sec:method} describes how each one is reviewed.

\section{What this document shows}
It is parsed and rendered in your browser. Change a formula or delete a brace: the preview updates
and the diagnostics give the line and column of the problem.

\begin{thebibliography}{9}
\bibitem{thesis} C. Lepaire. \emph{Extraction par analyse topologique sur les G-cartes de
caractéristiques pour les systèmes d'apprentissage supervisé appliqués à l'arbre vasculaire
cérébral}. PhD thesis, University of Poitiers, 2025. \url{https://theses.fr/s342053}
\bibitem{wscg} C. Lepaire, H. Belhaouari, R. Pascual, P. Meseure. Exploitation of local adjacencies
for parallel construction of a Reeb graph variant: cerebral vascular tree case. \emph{Journal of
WSCG}, 2024. \url{https://doi.org/10.24132/JWSCG.2024.9}
\end{thebibliography}

\end{document}

Preview

Diagnostics

Outline

Tech stack

TypeScript
KaTeX
LaTeX

Who does what

TypeScript: The LaTeX parser into a located tree and the safe HTML rendering, with no dependency; run directly by Node for the tests.
KaTeX: Renders the mathematical formulas, without trusting it with links (trust: false).
LaTeX: The language read (structure, lists, tables, mathematics, references) and the article introducing the portfolio.

Definition of Done

Code reviewed, diff by diff
Unit and integration tests green
Green CI on Linux, Windows and macOS when compiled
README, REVIEW.md and DECISIONS.md up to date
Texts in French and English
Demo deployed and tested on mobile