Next.js and React with TypeScript, Tailwind CSS for styling, and Motion for the interactions. A few primitives (the scroll areas and pills) come from shadcn/ui; the rest is custom-built for this site. Icons are Tabler and Lucide, the interface sounds are synthesised live with cuelume, and the type is set in three faces: Geist for the interface, Geist Mono for the technical bits, and Caveat for the handwritten asides. Hosted on Vercel, with the images and video served from Cloudflare R2 so the site stays quick as the media grows.
AI helped me implement the ideas, but the ideas themselves are mine. The structure, visual direction, interactions, accessibility decisions, and every pixel were shaped by my own judgement.
About this site
My previous portfolio was built around visual direction and experimental ideas. It gave me a lot of creative freedom, and Framer was a big part of that process. It was also where I challenged myself to learn something I didn't know and eventually became comfortable with it.
Since then, my approach to design has grown.
I became more aware of the inconsistencies in my work and the things that can get lost when visual design takes the lead, particularly accessibility, clarity, and usability.
This redesign was a chance to step away from those habits and put UX first.
I wanted the visual design to support the experience rather than become the experience. A big part of that came from White by Kenya Hara, and his ideas around white space and how it can be used with intention. White space was already something I explored in my previous portfolio, so I wanted to carry that idea forward here, but with more restraint and purpose.
The goal was to find a balance between accessibility, minimalism, and small interactions that make the site feel personal without getting in the way.
I also wanted my work to be experienced, not just viewed. So wherever possible, my prototypes and experiments are live and interactive.
As a canvas
I've always treated my portfolio as a canvas, and this website as a piece of art in its own right.
I'm an artist myself, so the making matters to me as much as what it holds.
From the preloader to the fade ins and fade outs, the timing between them, the morphs, the easing curves, how the content is presented and designed, the responsiveness, and that small, pleasant feeling in the details, I've treated every part of it as a form of art.
Still evolving
This portfolio is not finished, and I don't think it needs to be.
I'm proud of what I've built, but there is always something to improve. For now, the aim is simple: make it easy to find what you're looking for, make it enjoyable to explore, and let a little of my personality come through in the details.
These are the start and end screens for my Avatar Woodsprites rebuild, the glowing seeds (atokirina') from the film. My first version used a frosted-glass panel. On its own it looked fine, but next to the scene it felt like a generic app sitting on top of it instead of being part of it.
I wanted the interface to fit the world of the film, and there were two ways to do that. One is the sci-fi tech the humans use in Avatar: holographic HUDs, thin precise lines, a hairline frame, scanlines. The other is the forest itself: bioluminescence, the same glow the woodsprites give off.
I built both to compare them. The HUD looks good and suits Avatar in general, but this scene is just the seeds drifting down to rest on you, with no technology anywhere in it, so the HUD felt out of place. The bioluminescent one fit: no panels, text sitting in a patch of light, buttons that glow at the edges and brighten when you press them.
Flip between the two above and go through the intro, the record step, and the end screen in each. I went with the bioluminescent one.
Thejas Hassan Ravishankar is a design engineer in Sydney. He designs and builds product UI, interactive experiences and creative technology, with a focus on how software feels to use.
