📚 About

The medina project is a unique and interactive website created for a very special purpose: a girlfriend proposal. The site was designed to be a creative experience, almost like a game, combining 3D art with intuitive and engaging navigation.

The experience features various mouse interactions, encouraging the user to explore the environment and the animations that lead them to the big final question. It was an extremely rewarding personal project that allowed me to dive into the world of web development with 3D, improving my skills in UX (User Experience) and learning to create models and animations from scratch with Blender.

And the best part? It worked! She said yes, and the site was a success. If you want to check out the full experience, you can access the deployed link below.

🚀 Features

Content & Interactions

• Interactive Experience: A website with navigation and interactions that reveal a personal story.
• Intuitive Controls: Mouse interactions that allow you to drag and rotate 3D objects, as well as interact with magnetic and anti-magnetic buttons.
• Visual Narrative: A sequence of photos with personalized texts that appear as the user progresses through the journey.

3D Modeling & Animations

• 3D Envelope Model: An envelope model with float, hover, and click animations, revealing the content inside.
• 3D Heart Model: An animated heart model with a glass texture that the user can drag and rotate.
• Transitions and Effects: In and out animations, camera parallax effects to create depth, and smooth transitions between stages.

🛠 Built With

• Framework: Next.js
• 3D Rendering: Three.js
• Language: TypeScript
• 3D Modeling: Blender
• Deploy: Vercel

👨‍💻 How to Run

The project has a modular code structure with well-defined components and hooks, making it easy to maintain and understand.

1. Clone the repository:

   git clone https://github.com/dancpluz/medina.git

2. Navigate to the project directory:

   cd medina

3. Install dependencies:

   npm install

4. Start the production server:

   npm run start

5. Access the application in your browser:

   The application will be accessible at http://localhost:3000 after the server starts.

🌍 Deployment

The project is available online at the following link:

medina-theta.vercel.app

👥 Group / Author(s)

This project was developed by:

• Daniel Luz — GitHub

🤝 Contributions / Acknowledgements

This was a personal project and a gift. The biggest thanks goes to the inspiration behind it all, who made the development journey full of joy.

📄 License

This project is licensed under the MIT License.

⚠ Status / WIP

The project is complete for its main purpose.

Click to view task list and backlog

• 3D Envelope Model
  • Model
  • Float animation
  • Hover animation
  • Click animation
• 3D Heart Model
  • Model
  • Entry animation
  • Exit animation
  • Click animation
  • Drag to rotate
  • Glass texture
• Text & Content
  • Back text (name)
  • Front button (see why)
• Photos
  • Choose photos
  • Choose texts
  • Photo interaction
  • Each photo with its own text
  • Click to zoom
  • Hover animation
  • Photo sequence rotating with the heart
• Proposal
  • Anti-magnetic button
  • Magnetic button
• Other Interactions
  • Reverse magnetic button
• Design & UX
  • Find font
  • Responsive
  • Final joke
  • Camera Parallax effect
  • Improve Loading state
  • Context
  • Animation stages
  • Forward button
  • Button transitions
  • Organize Code

Backlog

• Custom music with a spinning record.
• Sound effects.
• Animated background.