🔗 Connecto - Connect Everything You AreThis is a Next.js project bootstrapped with create-next-app.

## Getting Started

First, run the development server:

A modern, beautiful, and responsive link-in-bio platform built with Next.js. Create your personalized profile page to showcase all your social media links, projects, and content in one place.npm run dev

# or

## ✨ Featuresyarn dev

# or

- **🎨 Modern Design**: Beautiful gradient backgrounds with glass-morphism effectspnpm dev

- **📱 Fully Responsive**: Optimized for all devices and screen sizes# or

- **⚡ Lightning Fast**: Built with Next.js 15 for optimal performancebun dev

- **🔄 Real-time Preview**: See your profile as you build it```

- **💾 Local Storage**: No database required - works entirely in the browser

- **🎭 Smooth Animations**: Powered by Framer Motion for delightful interactionsOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.

- **🔍 SEO Optimized**: Meta tags and structured data for better discoverability

- **🚀 Vercel Ready**: One-click deployment to VercelYou can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.



## 🚀 Live DemoThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.



[View Live Demo](https://your-demo-link.vercel.app) *(Replace with your actual deployed URL)*## Learn More



## 📸 ScreenshotsTo learn more about Next.js, take a look at the following resources:



### Home Page- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

![Home Page](public/screenshots/home.png)- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.



### Profile BuilderYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

![Profile Builder](public/screenshots/builder.png) 

## Deploy on Vercel

### Profile Page

![Profile Page](public/screenshots/profile.png)The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.



## 🛠️ Tech StackCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.


- **Framework**: Next.js 15
- **UI Library**: React 19
- **Styling**: Tailwind CSS
- **Animations**: Framer Motion
- **Icons**: Lucide React
- **Notifications**: React Toastify
- **Storage**: Browser localStorage

## 📦 Installation

1. **Clone the repository**
   ```bash
   git clone https://github.com/your-username/connecto.git
   cd connecto

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser Navigate to http://localhost:3000

🎯 Usage

1. Create Your Profile

   • Enter your unique handle
   • Add a profile picture URL (optional)
   • Write a description about yourself
   • Add your social media links and other URLs

2. Preview Your Profile

   • Use the real-time preview to see how your profile looks
   • Click "Preview" for a full-screen view

3. Save and Share

   • Save your profile (stored locally in your browser)
   • Share your custom URL: yoursite.com/your-handle

📁 Project Structure

connecto/
├── app/
│   ├── [handle]/          # Dynamic profile pages
│   ├── api/               # API routes
│   ├── generate/          # Profile creation page
│   ├── globals.css        # Global styles
│   ├── layout.js          # Root layout
│   └── page.js           # Home page
├── components/
│   └── Navbar.js         # Navigation component
├── public/               # Static assets
├── tailwind.config.js    # Tailwind configuration
└── package.json         # Dependencies

🎨 Customization

Color Scheme

The project uses a carefully crafted color palette defined in tailwind.config.js:

• Primary: Blue gradient (#0ea5e9 to #0369a1)
• Secondary: Purple gradient (#d946ef to #a21caf)
• Accent: Green (#22c55e)

Fonts

• Main Font: Inter (via Google Fonts)
• Mono Font: Fira Code for code elements

🚀 Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with one click

Deploy to Netlify

1. Build the project: npm run build
2. Deploy the out folder to Netlify

Deploy to Other Platforms

The project is a standard Next.js application and can be deployed to any platform that supports Node.js.

🧪 Features in Development

• Analytics dashboard
• Custom themes
• QR code generation
• Social media integration
• Click tracking
• Profile templates

🤝 Contributing

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

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 licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Apurva Ghare

• GitHub: @apurvaghare
• LinkedIn: Apurva Ghare

🙏 Acknowledgments

• Next.js for the amazing React framework
• Tailwind CSS for the utility-first CSS framework
• Framer Motion for smooth animations
• Lucide for beautiful icons
• Vercel for seamless deployment

---

⭐ If you found this project helpful, please give it a star on GitHub!