Quang Clients Map

Project Overview

An interactive mapping application that showcases my client portfolio and professional journey. The website features:

• Interactive 3D globe visualization of client locations worldwide
• Detailed client history and project information
• Timeline of professional collaborations past and present
• Modern React components with TypeScript
• Responsive and animated UI for engaging user experience
• Performance-optimized for smooth globe interactions
• Custom-themed interface with professional aesthetics

This application serves as a visual representation of my professional network, highlighting collaborations and projects across different regions and industries throughout my career.

Tech Stack

Core Technologies:

• Next.js (v15.1.0)
• React (v19.0.0)
• React DOM (v19.0.0)
• TypeScript (v5)

3D Rendering:

• Three.js (v0.171.0)
• @react-three/fiber (v9.0.0-rc.1)
• @react-three/drei (v9.120.4)

UI and Styling:

• Tailwind CSS (v3.4.1)
• Radix UI components:
  • @radix-ui/react-dialog (v1.1.3)
  • @radix-ui/react-scroll-area (v1.2.2)
  • @radix-ui/react-slot (v1.1.1)
• Lucide React (v0.468.0)
• class-variance-authority (v0.7.1)
• clsx (v2.1.1)
• tailwind-merge (v2.5.5)
• tailwindcss-animate (v1.0.7)
• Vaul (v1.1.2)

Development Tools:

• ESLint (v9)
• react-scan (v0.0.46)

Getting Started

Prerequisites:

• Node.js
• npm, yarn, pnpm, or bun

Development

1. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

2. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

3. Open http://localhost:3000 with your browser to see the result.

Development Features

• Turbopack Enabled: Using Next.js with Turbopack for faster development
• Hot Reload: The page auto-updates as you edit files
• React Scan: Includes development tools for React component analysis
• TypeScript: Strict type checking enabled
• Custom Font: Utilizes Geist font family