My Website

This project is an interactive 3D environment built with Next.js and Three.js. It features a dynamic 3D scene with interactive elements, environment controls, a contact form, and various visualizers.

Features

• Interactive 3D environment with changeable presets
• Floating interactive links within the 3D space
• Dynamic abstract 3D form as a centerpiece
• Environment controls (zoom, rotate, auto-rotate)
• Responsive design with mobile menu
• Contact form with animated submission feedback
• Multiple visualizers for different data representations
• Responsive Alebrije gallery in /alebrijes

Technologies Used

• Next.js - React framework for building the application
• React Three Fiber - React renderer for Three.js
• Three.js - 3D library for creating and displaying animated 3D computer graphics
• Framer Motion - Animation library for React
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Re-usable components built with Radix UI and Tailwind CSS
• TypeScript - Typed superset of JavaScript
• Lucide React - Icon library
• D3.js - Data visualization library (for visualizers)

Getting Started

Follow these steps to get the project running on your local machine:

Prerequisites

• Node.js (v14 or later)
• npm (v6 or later) or yarn

Installation

1. Clone the repository:

   git clone https://github.com/lpolish/Luis-Pulido-Website.git
   cd Luis-Pulido-Website

2. Install the dependencies:

   pnpm install

Running the Development Server

1. Start the development server:

   pnpm dev

2. Open http://localhost:3000 in your browser to view the application.

Publishing to Production

To publish just do:

vercel --prod

Or plug this repository into any build system that supports Nextjs (Netlify, Firebase, Amplify, Surge, Fly).

Project Structure

• `components/EnvironmentShowcase.tsx`: The main component containing the 3D environment and interactive elements.
• `pages/index.tsx`: The main page that renders the EnvironmentShowcase component.
• `pages/api/contact.ts`: API route for handling contact form submissions.
• `pages/visualizers/`: Directory containing various visualizer components.
• `pages/alebrijes/`: Contains the responsive Alebrije gallery.

Customization

To customize the content or styling:

1. Modify the `EnvironmentShowcase` component in `components/EnvironmentShowcase.tsx`.
2. Update the environment presets, floating links, or abstract form in the same file.
3. Adjust the Tailwind CSS classes or add custom styles as needed.
4. To add or modify visualizers, work in the `pages/visualizers/` directory.
5. To update the Alebrije gallery, modify the components in `pages/alebrijes/`.

Deployment

This project can be easily deployed on Vercel, the platform created by the founders of Next.js. Simply connect your GitHub repository to Vercel, and it will automatically deploy your application with each push to the main branch.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.