https://github.com/jongan69/next-linktree
https://github.com/jongan69/next-linktree
linktree nextjs suspense threejs
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jongan69/next-linktree
- Owner: jongan69
- Created: 2024-05-05T04:30:51.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-11T00:30:17.000Z (9 months ago)
- Last Synced: 2024-09-11T04:41:36.425Z (9 months ago)
- Topics: linktree, nextjs, suspense, threejs
- Language: JavaScript
- Homepage: https://jongan.com
- Size: 528 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js LinkTree Project
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Project Overview
This project is a customizable LinkTree-like application built with Next.js. It allows users to create a personal page with links to various social media profiles and referral links, all styled and organized in a visually appealing manner. The design is responsive and includes an interactive 3D background for a modern, dynamic user experience.
## Features
- **Personal Links**: Easily add and manage links to your social media profiles (Facebook, Twitter, LinkedIn, etc.).
- **Referral Links**: A dedicated section to display your referral links, complete with a customizable header for branding or messaging.
- **3D Background**: The page features a visually engaging 3D background powered by `@react-three/fiber`.
- **Styled Components**: Custom styling is done using `styled-components`, enabling flexible and reusable components.
- **Responsive Design**: The layout is optimized for both desktop and mobile views to ensure a smooth experience on all devices.
- **SEO-Friendly**: Pre-rendering and SEO enhancements come built-in with Next.js, improving the page’s discoverability.
- **Dark/Light Theme Toggle**: Toggle between dark and light modes for better accessibility and user preferences.
## Demo
[Link to live demo](https://jongan.com)
## Getting Started
To get started with the project, follow these steps:
### Prerequisites
- Node.js (version 14 or higher recommended)
- npm or yarn package manager
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/jongan69/next-linktree.git
```
2. **Navigate to the project directory:**
```bash
cd next-linktree
```
3. **Install dependencies:**
Using npm:
```bash
npm install
```
Or using yarn:
```bash
yarn install
```
### Running the Development Server
Once the dependencies are installed, run the development server:
Using npm:
```bash
npm run dev
```
Or using yarn:
```bash
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the application.
### Building for Production
To create an optimized production build:
Using npm:
```bash
npm run build
```
Or using yarn:
```bash
yarn build
```
Then, you can start the production server:
```bash
npm start
```
### Environment Variables
If the project requires environment variables (e.g., for social media API keys or referral link management), create a `.env.local` file in the root directory and define your variables there. Example:
```
NEXT_PUBLIC_API_KEY=your_api_key
```
## Technologies Used
- [Next.js](https://nextjs.org/) – Framework for server-rendered React applications.
- [@react-three/fiber](https://github.com/pmndrs/react-three-fiber) – React renderer for Three.js for the interactive 3D background.
- [Styled Components](https://styled-components.com/) – For writing actual CSS to style components.
- [Framer Motion](https://www.framer.com/motion/) – Used for animations and transitions.
- [Vercel](https://vercel.com/) – Deployment platform for modern web applications (optional, but highly recommended for deployment).
## Contributing
Contributions are welcome! Please submit a pull request or open an issue for any improvements or bugs.
1. Fork the repository.
2. Create a new branch (`git checkout -b feature-branch`).
3. Make your changes.
4. Commit your changes (`git commit -m 'Add some feature'`).
5. Push to the branch (`git push origin feature-branch`).
6. Open a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.