3D Artist & Architectural Visualizer Portfolio

A premium, high-performance portfolio website designed for 3D artists and architectural visualizers. Built with Next.js 16, TypeScript, Tailwind CSS v4, and Three.js, this project focuses on immersive interactions and showcasing visual work with maximum impact.

Features

• Immersive 3D/Visual Elements: Integrated Three.js and @react-three/fiber for high-end 3D graphics and interactions.
• Scroll-Triggered Experiences: Virtual walkthrough effects using optimized image sequencing and Lenis for smooth scrolling.
• Dynamic Project Gallery: SEO-optimized project pages to showcase renders, walkthroughs, and case studies.
• Premium UI/UX: Custom Framer Motion animations, magnetic buttons, and polished micro-interactions.
• Performance Optimized: Built on Next.js 16 with optimization for heavy media assets.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• 3D & Canvas: Three.js, @react-three/fiber, @react-three/drei
• Animations: Framer Motion
• Icons: Lucide React
• Smooth Scroll: Lenis

Getting Started

Prerequisites

Ensure you have Node.js installed.

Installation

1. Clone the repository:

   git clone <repository-url>
   cd realestate

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

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

Usage

• Projects: content for projects is managed in src/lib/data.ts (or similar data source). Update this file to add new portfolio items.
• Assets: Place your renders and walkthrough videos in the public/ directory and reference them in the data file.
• Customization:
  • Styles: Global styles are in src/app/globals.css.
  • Components: UI components are located in src/components/.

Deployment

To deploy this application, the easiest way is using the Vercel Platform.

npm run build
npm start

Check out the Next.js deployment documentation for more details.