Portfolio Website

A showcase of my personality and skills.

HTML

CSS

JavaScript

My website’s gone through some major iterations, from clunky, to rough, finally to polished. Below, I’ll highlight some of the interesting interactive components I’ve built for it.

Terminal

This component tells you a bit about how I like to spend my time, in an interesting way. It mimics a Linux terminal interface by using HTML, CSS, and JavaScript to achieve a dynamic, interactive experience. An array of hobby strings are defined, then shuffled randomly so that each page load shows them in a different order, giving a different flavour of me every time!

The typing animation is controlled by a main function which co-ordinates typing speed, deletion speed, and pauses between words. It also pauses the animation when scrolled out of view to prevent layout shifts.

Sidebar

On page load, the sidebar grabs every section across the page, then adds a link for each. An event listener is attached to page scrolls, watching the current viewport to see which section is closest to the centre of the screen. That section’s corresponding link is then highlighted, making it stand out. The sidebar is only visible on wide screens — it’s hidden on mobile due to reduced horizontal space.

Work Timeline

Each icon on the work timeline is wrapped in a container with a date range. Hovering or tapping the icon opens a rich tooltip (via Tippy.js and Popper) with details for that career stage. Popper keeps the panel within the viewport by flipping and shifting, so long copy does not force horizontal scrolling.