Nothing Phone (1) - Website Redesigned

A stunning, interactive website showcasing the Nothing Phone (1) with smooth animations, scroll effects, and a modern design aesthetic.

🌐 Live Demo

Check out the live website: https://reimagine-nine.vercel.app

✨ Features

• Smooth Scroll Animations: Powered by Locomotive Scroll for buttery-smooth scrolling experience
• GSAP Animations: Advanced animations and transitions using GreenSock Animation Platform
• Responsive Design: Optimized for various screen sizes and devices
• Interactive UI: Dynamic hover effects and scroll-triggered animations
• Product Showcase: Complete specs and features of Nothing Phone (1)
  • Display specifications
  • Camera capabilities (50MP Sony IMX766, 50MP Samsung JN1, 16MP front camera)
  • Snapdragon 778G+ chipset details
  • Battery and charging features
  • Design and build quality

🛠️ Technologies Used

• HTML5: Semantic markup structure
• CSS3: Modern styling with custom animations
• JavaScript: Interactive functionality
• Locomotive Scroll: Smooth scrolling library
• GSAP (GreenSock): Professional-grade animation library
• ScrollTrigger: Scroll-based animations
• Remix Icon: Beautiful icon library

📁 Project Structure

NothingPhone-1/
├── index.html              # Main HTML file
├── dex.css                 # Main stylesheet
├── script.js               # JavaScript functionality
├── NothingPhoneImages/     # Image assets directory
└── fonts/                  # Custom fonts directory

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• Basic understanding of HTML, CSS, and JavaScript (for modifications)

Installation

1. Clone the repository:

git clone https://github.com/rishabhrawat05/NothingPhone-1.git

2. Navigate to the project directory:

cd NothingPhone-1

3. Open index.html in your browser:

# On macOS
open index.html

# On Linux
xdg-open index.html

# On Windows
start index.html

Alternatively, use a local development server like Live Server (VS Code extension) for better development experience.

📱 Product Specifications Highlighted

Display

• 6.55" flexible AMOLED display
• HDR10+ with 10-bit colour depth
• 120Hz adaptive refresh rate
• 1200 nits peak brightness

Camera System

• Main Camera: 50MP Sony IMX766 with OIS
• Ultra Wide: 50MP Samsung JN1 with 114° FOV
• Front Camera: 16MP Sony IMX471

Performance

• Snapdragon™ 778G+ chipset (6nm)
• Up to 12GB RAM + 256GB storage
• 596,815 AnTuTu benchmark score

Battery

• 4500 mAh capacity
• 33W wired charging
• 15W Qi wireless charging
• 5W reverse charging

Design

• IP53 water and dust resistance
• Symmetrical bezels with aluminium frame
• Available in Shining White and Shining Black

🎨 Key Sections

1. Hero Section: Dramatic introduction with "PURE INSTINCT" tagline
2. Features Showcase: Interactive display of phone capabilities
3. Camera Details: Comprehensive camera specs and capabilities
4. Display & Performance: Technical specifications
5. Design Elements: Build quality and aesthetics
6. Footer: Links to products, support, and company information

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is created for educational and portfolio purposes. Nothing Phone (1) and related trademarks are property of Nothing Technology Limited.

👨‍💻 Author

Rishabh Rawat

• GitHub: @rishabhrawat05

🌟 Acknowledgments

• Nothing Technology Limited for the original design inspiration
• Locomotive Scroll for the smooth scrolling library
• GSAP for the powerful animation framework
• All the open-source libraries used in this project

---

⭐ If you found this project interesting, please consider giving it a star!