CHIT THWAY

Slide1 / 6

Use the controls, arrow keys or swipe to move through the case study.Download presentation ↓
Projects

A case study about this very website

Portfolio Web

yes, you are looking at it... this is the project and the place where the project is being explained. I rebuilt the portfolio so the useful stuff is easy to find, the deeper proof is there when someone wants it, and the whole thing still feels like me.

View repository
View the live site
Status
Live and still being polished
Role
Design, writing, build and delivery
Hosting
Cloudflare Pages
Backend
Pages Functions, D1 and R2

The process

How this portfolio grew

  1. Initial Problem

    LinkedIn could not keep the evidence together

    I wanted employers to watch project demonstrations easily, but LinkedIn’s project section did not support video. Live projects, GitHub repositories, reports and presentations were also scattered across different places.

  2. First idea

    Give every project one complete home

    I built my own portfolio so each project could bring its explanation, technology, video demonstration, repository, reports and supporting files together without LinkedIn’s layout and media limits.

  3. Problem

    Too much detail could overwhelm a quick visitor

    Employers might leave if they had to read an entire case study before understanding the project.

  4. Solution

    Create layers of information

    The homepage provides the quick version, project pages provide more detail, and presentations offer the complete case study.

  5. Problem

    A professional feed is not a personal scrapbook

    LinkedIn was useful for professional updates, but it was not the right place for sharing casual photos, audio and everyday moments.

  6. Unexpected idea

    Solution

    The personal section became a Diary

    The original idea was simply to share casual moments and show life outside the IDE. While developing it, I realised those stories deserved their own Instagram-like Diary with photos, videos, writing and audio.

  7. Result

    Employers can choose how deeply to explore

    They can scan the homepage, open a project, watch a demonstration or read the complete case study.

  8. Result

    Professional work and personality can coexist

    The project pages remain focused while the Diary provides an optional view of life outside the IDE.

  9. Lesson

    Content structure matters as much as visual design

    Organising information around how employers browse was as important as choosing colors and layouts.

The personal side of the build

The Diary deserves its own little detour.

The Diary started as a small personal archive and quietly became a proper feature: multi-media posts, audio, links, editing and a private publisher. Cramming all of that into the main deck felt a bit rude, so it gets its own six-slide case study here.

Slide1 / 6

Use the controls, arrow keys or swipe to move through the case study.Download presentation ↓

Technology architecture

Portfolio Web

A React portfolio with a Cloudflare-backed personal archive

Interface

  • React
  • TypeScript
  • CSS Modules

Framework

  • Vinext
  • Vite

Cloud

  • Cloudflare Pages
  • Wrangler

Data and media

  • D1
  • R2

Quality

  • Rendered route checks
  • ESLint

The public portfolio stays mostly static and quick, while Cloudflare Pages Functions, D1 and R2 step in for the parts that genuinely need a backend—visitor data, Diary posts, private sessions and uploaded media.

Overview / 01

What the project demonstrates

The problem was pretty simple: a list of skills can say a lot without really proving much. I wanted the first screen to tell someone who I am and what I do, then give every serious claim a short path to something real—working software, a case study, a public repository or a downloadable artifact.

So I treated the portfolio like a product instead of a decorative résumé. The homepage handles the quick scan; project pages slow things down when the detail matters. Light and dark themes, keyboard-aware interactions, reduced-motion behaviour and clear fallbacks are part of the build rather than an accessibility paragraph added afterwards.

There is also a more personal corner of the site. The Diary has its own production backend and publishing workflow, but it stays a supporting character here; its companion case study below tells that story properly.

Thinking / 02

Decisions behind the work

01

Get to the point

The opening screen covers role, location, availability and the useful next actions before asking anyone to scroll through my life story.

02

Let the work explain itself

Project cards give the short version, while the deeper pages keep architecture, decisions, media and honest project status close together.

03

Keep the human bit

The visual system stays restrained, but the writing, photo directory, life outside the IDE and Diary stop the site from feeling like a very tidy spreadsheet.

04

Ship it like a real thing

Wrangler deployment, production bindings, rendered-route checks and backend tests make updates repeatable instead of depending on a lucky drag-and-drop release.

Evidence / 03

Skills and capabilities

  • Designed for quick scanning without flattening the work
  • Deeper case studies and downloadable evidence
  • Production Diary with private publishing and media storage
  • React
  • TypeScript
  • Vinext
  • CSS Modules
  • Cloudflare Pages
  • D1
  • R2

This page will probably keep changing a little, which is the point. The portfolio is live, but it is also allowed to grow as the work does.