Portfolio

XR Developer Portfolio

A modern, 3D portfolio website showcasing XR development projects with immersive Three.js interactions.

Tech Stack

• React.js with TypeScript
• Three.js for 3D visualization
• Framer Motion for animations
• TailwindCSS + shadcn/ui for styling
• PostgreSQL for data storage
• Express.js backend

Prerequisites

• Node.js (v20 recommended)
• PostgreSQL database
• npm or yarn package manager

Local Development Setup

1. Clone the repository and install dependencies:

   npm install
   

2. Set up your environment variables: Create a .env file in the root directory with:

   DATABASE_URL=postgresql://user:password@localhost:5432/your_database
   

3. Create the attached_assets directory in the root folder:

   mkdir attached_assets
   

   Place any project media files (videos, images) in this directory.

4. Initialize the database:

   npm run db:push
   

5. Start the development server:

   npm run dev
   

The application will be available at http://localhost:5000

Project Structure

• /client - Frontend React application
  • /src/components - React components
  • /src/pages - Page components
  • /src/lib - Utility functions and configurations
• /server - Express.js backend
  • routes.ts - API routes
  • storage.ts - Database operations
• /shared - Shared types and schemas
• /attached_assets - Project media files

Features

• Interactive 3D VR headset visualization
• Holographic cursor effects
• Responsive design
• Project showcase with video previews
• Modern, dark theme with neon accents

Building for Production

npm run build
npm start

Notes

• The development server runs both frontend and backend on port 5000
• Any attached assets (videos, images) should be placed in the /attached_assets directory
• Database schema changes can be pushed using npm run db:push
• For local development, make sure to create a PostgreSQL database and update the DATABASE_URL accordingly