Template

UI/UX Portfolio Template

React Template AI

About this product

Diff View is a single-page portfolio template for freelance UI/UX designers. Case studies appear as code-review diffs with a draggable before/after slider, so your work looks different from a normal portfolio grid.

Built with React 19, Vite and Tailwind CSS 4. Case studies, services, process, skills, timeline and reviews live in one data file, so you can update most content without touching layout code.

Tech Stack

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • AI

Features

  • 4 case studies with draggable before/after diff slider
  • Keyboard shortcuts (?, I, W, arrow keys)
  • 8 sections: hero, work, services, process, toolkit, about, proof, contact
  • Responsive layout with mobile menu

Specifications

Type
Portfolio template
Frontend
React 19
Language
TypeScript
Layout
Single page
Sections
8 + footer
Case Studies
4 (data-driven)

Requirements

  • Node.js 18 or higher
  • npm

What’s included

Zip File
Source Code
prompt.txt
Inlcuded

Frequently asked questions

How do I edit the data?

Open src/data/portfolioData.ts to edit case studies, services, process, skills, timeline, reviews and stats. Name, email and intro text are in the component files, and the README has a full table.

Does the contact form work?

It is front-end only. It shows a success message but does not send emails. Connect your own form service or backend, or replace it with a mailto: link.

Can I use it for commercial projects?

Yes, for your own and client projects.

Need something custom?

Want this adapted to your brand or a different stack? Let’s talk about it.

Let’s Talk
All products →
$4.99 Buy now