Skip to content
All work

Case study · 2026

Portfolio Website

My portfolio, redesigned as “Deep Signal”: a cinematic dark-blue site where my 3D logo floats in the hero and flies into the navbar as you scroll.

Role
Design and development
Timeline
October to November 2026
Type
Personal project
Status
In progress
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Three.js
  • React Three Fiber
  • Motion
  • Lenis

The problem

Why it needed more.

A portfolio has a few seconds to make a recruiter stop and look. My first version was clean and responsive, but it looked like many others: a four-color gradient behind the page, the default font, and a single project card.

I wanted a site that people remember, and that proves I care about design, motion and accessibility, not only that I can write React.

Users and goals

Who it is for.

  • Recruiters and hiring managers in Dubai

    See who I am, what I can do and how to reach me, within one screen and one scroll.

  • Developers who review my work

    Clean code, real performance and accessibility they can check for themselves.

  • Every visitor

    A site that works on a phone, with a keyboard, with reduced motion and even without JavaScript.

Research and decisions

What I decided, and why.

Studied award-winning developer portfolios on Awwwards and an Awwwards juror's advice on what judges reward.

Key lesson: one clear idea with one signature interaction beats many effects. Design and usability count for most of the score, and slow intros, weak mobile layouts and missing reduced-motion support pull it down.

  1. One signal color

    Midnight navy with a single teal accent, taken from the cursor in my <Lin_/> logo. Teal only marks what matters (actions, links, focus), so the eye always knows where to go.

  2. The logo is the 3D hero

    Instead of a random 3D object, the hero shows my own logo as glass blocks floating in the air. The signature moment and the brand are the same thing.

  3. The 3D logo becomes the navbar logo

    On scroll it flies in an arc into the navbar and turns into the flat logo. It links the cinematic first screen to the practical interface, and the arc keeps it away from the name.

  4. The intro is CSS, not JavaScript

    The name appears with the first paint and stays the fastest thing on the page. The 3D scene loads after, in its own chunk.

  5. Glass only where it helps

    The navbar is glass so it floats over everything. Cards and text stay solid, because readability comes first.

User flow

The journey, step by step.

  1. Step 1

    Arrive

    The name rises out of its mask, the status says I am available in Dubai, and the 3D logo floats on the right.

  2. Step 2

    Scroll

    The logo rises, shrinks and glides into the navbar, where the flat logo lights up. The interface takes over.

  3. Step 3

    Get to know me

    About explains how I work: every screen, everyone, and motion with a reason. Skills show the tools.

  4. Step 4

    See the work

    Each project opens a case study like this one: the problem, the people, the decisions and the result.

  5. Step 5

    Get in touch

    A short form with clear errors, and a footer that closes the page like the end of a film.

Visual design

How it looks.

  • Color: midnight navy surfaces, one teal signal, one rare warm accent for the “available for work” dot. Every text color pair is checked for at least 4.5:1 contrast, in dark and light themes.
  • Type: Instrument Serif for cinematic titles, Geist for reading, Geist Mono for labels that feel like code.
  • Texture: a faint film grain, a vignette in the hero, and deep-blue fog that lights the floor under the floating logo.

Motion and interaction

How it moves.

  • Hero: the name reveals line by line, the cursor blinks twice, the 3D logo fades up out of the fog and floats with a shadow that reacts to its height.
  • Scroll: the logo flies into the navbar; sections reveal their eyebrow, title and content in order; smooth wheel scrolling.
  • Details: magnetic primary buttons, a custom cursor that says “View case study” over projects, a navbar pill that slides to the current section.
  • Reduced motion: nothing moves. The 3D logo is a still frame in its place, there is no smooth scroll and no custom cursor, and content simply fades in.

Accessibility

Built for everyone.

  • Semantic HTML with one h1 per page and headings in order.
  • Text contrast of at least 4.5:1, checked for every color pair in both themes.
  • Every control works with the keyboard and shows a visible focus ring. The phone menu moves focus in and returns it on Escape.
  • Form errors are linked to their fields and the result is announced to screen readers.
  • The 3D scene is decorative and hidden from screen readers; all content is also in the HTML, and visible without JavaScript.

Result

Where it stands.

  • The redesign is live at linwai.dev and builds cleanly with every change.
  • Problem: the first version of the 3D hero froze the page while it loaded. Lighthouse’s mobile test gave it 64 for Performance, with 2.1 s of Total Blocking Time.
  • Fix: phones skip the glass reflection map and get two cheap lights instead, shaders compile in the background before the first frame, low-power devices keep the static logo, and the mouse-only extras (custom cursor, smooth scroll) load after the page is idle.
  • Result: Performance 90–91 and Total Blocking Time of about 0.17 s in the same mobile test. The live site scores 100 for Accessibility, Best Practices and SEO.

What I learned

What I learned.

  • Place 3D objects by measuring the HTML layout, not with fixed numbers. The logo now lands right on every screen size.
  • Glass made with “transmission” in three.js cannot see see-through objects behind it, so the glowing core of the cursor has to stay solid.
  • An element hidden inside a mask counts as invisible for IntersectionObserver, so the reveal watches the mask instead.