Julian Garnier Portfolio
The entire homepage is a stack of gray iMessage-style chat bubbles on a plain white background — "Hey there 👋 / I'm Julian / I design and code things on the web…" No nav, no hero image, no case studies. It reads like a text conversation, not a website, and it works because Anime.js needs no further introduction.
Location
Unlisted — probably wherever the wifi is strongest.
Skills
Notable
- Creator of the anime.js JavaScript animation library
What makes it work
A breakdown of the choices that make this portfolio stand out.
The whole page is a text-message thread, not a document
Every line of content — greeting, occupation, current project, contact links, sign-off — sits inside a rounded gray speech bubble stacked top to bottom, exactly like a phone's messaging app. There is no header, no card layout, no grid: the chat metaphor IS the layout.
One project link, chosen deliberately
"I'm currently working on anime.js v4" is the only project mentioned, linked to its GitHub Sponsors page. Anime.js has tens of thousands of GitHub stars and ships in production at companies worldwide — Julian doesn't need a project grid when one link already outweighs anything else he could list.
A human sign-off instead of a contact form
The last two bubbles read "Have a nice day" (or "Have a nice evening" / "Have a good night", depending on the visitor's local time) and "~ J." — a closing that belongs in a text message, not a resume. It's a small, consistent detail that makes an extremely minimal page feel personal rather than lazy.
Confidence measured in bytes, not sections
The entire page is eight short lines of text on a white background — no color, no imagery, no animation demo despite being built by one of the web's best-known animation library authors. When your library speaks for itself, restraint reads as confidence rather than incompleteness.
What Frontend Developers can take from this
Specific, actionable tips to apply to your own portfolio — no generic advice.
A genuinely novel layout metaphor (a chat thread, a terminal, a notebook) can replace a conventional portfolio entirely if it stays legible — commit to it fully rather than blending it with a standard hero section.
If you have one dominant project, link it once, clearly, and resist the urge to also list five smaller ones around it.
End your page with something a person would actually say — a sign-off, a joke, an initial — instead of a generic "Get in touch" button.
The less content on the page, the more each remaining word has to earn its place — eight lines with no filler beats twenty lines with padding.
If your open-source work has real adoption numbers (stars, downloads, production usage), you don't need to restate them everywhere — one confident mention is enough.
Projects
One link, and nothing around it. Julian Garnier's site mentions a single project, anime.js, and lets it do the job most portfolios hand to a grid of smaller ones. Cutting to one is a harder editorial call than adding a tenth.
anime.js Animation Engine
A fast, flexible, MIT-licensed JavaScript animation engine. v4 is modular: Timer, Animation, Timeline, Animatable, Draggable, Scroll, Scope, SVG, Stagger, Spring and WAAPI can each be imported separately. Per animejs.com, the full bundle is 27.13 KB. Built-in SVG utilities handle shape morphing, line drawing and motion paths; a Scroll Observer syncs animations to scroll position.
Designing an animation API that stays simple for one-line tweens yet composes into timelines, springs, draggables and scroll-linked sequences is architecture work. Shipping it modular so users import only what they need shows bundle-size discipline at library scale.
73k+ GitHub stars — one of the most-starred JavaScript animation libraries
No runtime dependencies; Three.js is only an optional peer dependency for its adapter
Modular v4 API: import just Timer, Timeline, Draggable, Scroll and so on to keep bundles small
Ships its own documentation site with an easings editor at animejs.com
A playable 3D chess game rendered in HTML and CSS rather than WebGL, modeled on the Bauhaus-era Hartwig chess set. The page credits two libraries: Photon for the lighting effect and chess.js for moves and validation. The UI has Themes, Play and About panels; the README notes it works only in WebKit.
It shows DOM and CSS 3D pushed to render a full game board with lighting, while game rules are delegated to an existing engine instead of rebuilt. That split between custom rendering and reused logic is the same judgement production frontend work needs.
3D board and pieces built from HTML/CSS, not canvas or WebGL
Lighting via Photon, move validation via chess.js
540 stars and 236 forks on a 2012 repo
A solar system data visualisation "done in HTML/CSS and a bit of Javascript," per the README. The page lists the Sun and eight planets and has Speed, Size and Distance controls that switch how the orbits and planet scales are shown.
It turns a data set (planet sizes, distances, orbital speeds) into an interactive 3D view using mostly CSS, with a few controls to switch scales. That is animation and layout work done without a graphics library.
Orbits animated with CSS, JavaScript only for the controls
Speed, Size and Distance toggles to compare real vs. readable scales
473 stars and 141 forks
More Frontend Developer portfolios
Ready to build your portfolio?
Follow the Frontend Developer roadmap — skills, projects, and timeline to get hired.