Areas and technologies
- web
- portfolio
- webgl
- Web
Nuxt, Vue and TypeScript
- Moving images
Three.js, shaders and video textures
- Content
Projects in Markdown, in Spanish and English
- Navigation
Card-to-project transitions, related projects and experiments
A personal portfolio gathering most of my projects, or at least the ones I have records of.
This is the portfolio you are browsing: a personal website gathering most of my projects — programming, interactive installations, applications and real-time experiments — or at least those I have records of. I designed and developed both the presentation of the work and the visual engine behind it.
One shared engine
Images and videos sit alongside a WebGL layer shared across the page. A Three.js engine synchronises media with its position in the document and applies deformations as you scroll or move the cursor. Where supported, rendering runs in a worker with OffscreenCanvas.
The content remains a website
Projects are validated and prepared when the site is built. Each page retains its text, links and media in HTML; if WebGL is unavailable, they continue to work as regular content. Reduced-motion preferences adapt the effects and playback.
The homepage includes a small game with a hand and geometric pieces. On the about page, a point cloud builds the portrait. Both present my work through the same tools I use to make it.
Franc Studio: 2024 website
Franc Studio's portfolio, with its projects, images and videos. Built with Vue, Vite and Firebase.
J.Franc Studio
J.Franc Studio's portfolio, with projects presented through objects and 3D scenes on the web.
MetricCanvas
A free tool for measuring on an image from a known distance.