Rayyan Ahsan — Full-stack developer

Say Hey to Ray!
Welcome to Rayyan's Portfolio
Full-Stack Developer
Rayyan

Hi I'm Rayyan, a passionate full-stack developer!

Rayyan's character
EmailLinkedInProjects
Rayyan smiling and holding up a peace sign
Behind the projects

A little about me :)

I'm Rayyan, a full-stack developer with an interest in design and interactive software. My projects include collaborative tools, game lobbies, and data visualisations. I love learning and expanding my knowledge both independently and with the help of others.

I work on both development and visual design, with attention to usability and detail. I edited most of this site's artwork in Photoshop and use the portfolio to explore different styles.

Open to developer opportunitiesExplore my projects

What I work with

Languages

  • JavaScript
  • TypeScript
  • Python
  • Go
  • Java
  • Lua

Web & data

  • HTML
  • CSS
  • React
  • Vue.js
  • Next.js
  • Django
  • PostgreSQL
  • SQLite

Tools & design

  • Git
  • Docker
  • Photoshop

Outside of work!

Outside development, I spend a lot of time playing games and following esports (and sports).

I've also been watching more films this year, including Primetime, Spider-Man, and Resident Evil (2026). I follow VCT each year and have attended Masters in London and Toronto. I love to cook and bake too when something inspires me :)

Some favourites

  • Animal Crossing
  • Valorant
  • Slay the Spire
  • Clair Obscur: Expedition 33
  • Paper Mario
  • Resident Evil series

and plenty more.

A competitive streak

  • ValorantTop 1,000 EU
  • Teamfight TacticsMaster
  • DeadlockEternus
  • CS:GOGlobal Elite

As KCL's in-game leader, I helped the team win NSE Winter 2021 in UK collegiate Valorant.

  • Won two RDV league seasons as in-game leader.
  • Won Premier Elite 5 twice as in-game leader.
  • Coached the Valorant team TFT SilvX to a top 12 finish in GC3 NA 2023.
  • Achieved Grandmaster Complete in Voltaic Season 5.
A few things from my workshop

Things I've built

From real-time lobbies to a friendlier card table. Here's what I've been working on.

Valorant Queue title between two teams of five players, each with a crowned captainReal-time web app

Valorant Queue

A better way to organise custom games with friends. Queue up, draft two teams, and choose your maps before jumping into a match.

From a 10 player queue to a match ready lobby

  • Go
  • React
  • PostgreSQL
  • Docker
Captain's-view demo

Valorant queue matchmaking walkthrough.

  • Built a concurrent backend in Go to manage real-time lobbies and keep game-session state consistent across simultaneous users.
  • Implemented a captain-led team draft, series-length voting, and map veto flow for custom matches.
  • Used PostgreSQL for persistence and Docker with Google Cloud Run for deployment.
View code (opens in a new tab)
Notely logoCollaborative web app

Notely

A shared home for notes. Create, organise, and share content through a custom Markdown editor and a Django-powered backend.

Full-stack development & led a team of eight developers

  • React
  • TypeScript
  • Python
  • Django
  • SQLite
Implemented Markdown editor and preview

Tables, maths, code and diagrams.

1 / 2
  • Led a team of eight developers, coordinating tasks and keeping delivery aligned with project goals.
  • Designed REST APIs in Django to connect the frontend and backend.
  • Implemented session management and input validation to protect user data within the team's collaborative note-taking platform.
Source code private
Guandan title between an illustrated card back and a red Bicycle card backPublished game mod

Guandan

The card table, with less busywork. A Guandan mod for Tabletop Simulator with custom assets and Lua tools for dealing cards and sorting hands.

99 Workshop subscribers · 12 favourites

  • Lua
  • Tabletop Simulator
  • Custom assets
Guandan in Tabletop Simulator

Custom card assets with dealing and hand sorting controls.

  • Created custom assets and Lua scripts to bring the card game to Tabletop Simulator.
  • Automated card dealing and hand sorting to make setup and play more convenient.
  • Published on Steam Workshop and inspired a community-created adaptation whose creator explicitly credited the original project.
Steam Workshop (opens in a new tab)Community adaptation (opens in a new tab)
Books and Slides title between an open book and a presentation chartContent creation tool

Books and Slides

One piece of writing, two ways to explore it. Turn Markdown into interactive slideshows and book-style websites with a custom editor.

From custom editor to interactive reading experience

  • Next.js
  • React
  • TypeScript
  • Node.js
  • Write and structure content in the custom Markdown editor.
  • Choose a slideshow or book layout for the same content.
  • Present it as slides or explore it as an interactive book website.
  • Built a full-stack application that turns Markdown into slideshow and book-style presentations.
  • Wrote a custom document editor from scratch for creating and structuring content.
  • Handled dynamic rendering, layout transitions, and frontend navigation between views.
Source code private
House price explorer title between a map and a rising chartInteractive data visualisation

House Price Explorer

Explore England's house prices through an interactive map and quarterly charts, built with D3.js and Office for National Statistics data.

Nine English regions · 1993 to 2023

  • JavaScript
  • D3.js
  • HTML
  • CSS
Regional house price map

Year selection and regional price comparisons.

1 / 2
  • Mapped regional price data to TopoJSON boundaries to create a choropleth map with D3.js.
  • Added a year slider, regional tooltips, and colour scale modes for exploring changes over time.
  • Built a region drill-down view with animated quarterly charts and hover details.
Source code private
This portfolio title between browser and paintbrush iconsDesign & front-end experimentation

This Portfolio

My playground for clean UI and personal design flavour, with visuals edited in Photoshop and an Animal Crossing inspired design (for now).

Design experiments & Photoshop asset editing

  • Next.js
  • React
  • TypeScript
  • CSS
  • Motion
  • Photoshop
  • Use a familiar pinboard layout to make projects easy to browse, with more detail available on demand.
  • Combine Photoshop asset editing, a soft colour palette, and playful typography to give the site its own personality.
  • Add small moments of interaction through draggable cards, spring motion, and subtle hover effects.
  • Edited and composed most of the site's visual assets in Photoshop to create a consistent visual identity.
  • Balanced expressive artwork and playful interactions with readable content, clear navigation, and consistent controls.
  • Built spring animations, draggable elements, scroll reveals, and screenshot galleries, with responsive layouts and reduced motion support.
View code (opens in a new tab)
Back to the top