🌐 ProfileHub

Your digital calling card – elegant, animated, and 100% yours.

Live Preview »

📋 About

ProfileHub is a personal backup and showcase platform that serves as your digital identity hub. It's designed to be your central location for sharing your online presence, content, and professional information. This project is maintained by myexistences as a personal backup and template for creating beautiful profile pages.

🏗️ Project Structure

profilehub/
├── client/                 # Frontend application
│   ├── assets/            # Static assets (images, icons)
│   ├── index.html         # Main HTML file
│   ├── styles.css         # Main stylesheet
│   ├── script.js          # Main JavaScript file
│   ├── audio.mp3          # Background audio
│   └── background.mp4     # Background video
│
├── server/                # Backend application
│   ├── routes/           # API routes
│   ├── index.js          # Main server file
│   ├── bot.js            # Bot functionality
│   └── node_modules/     # Server dependencies
│
├── LICENSE               # MIT License
├── package.json         # Project dependencies
└── README.md           # Project documentation

✨ Key Features

Visual Elements

• 🎥 Full-screen background video support
• 🎵 Background audio with volume control
• 🖼️ Customizable avatar and profile elements
• ❄️ Animated effects and overlays
• 📱 Fully responsive design

Interactive Features

• 🔊 Audio controls (play/pause/volume)
• 🔗 Social media link integration
• 🎨 Theme customization
• ⚡ Smooth animations and transitions

Technical Features

• 🛠️ Simple and clean architecture
• 📦 Minimal dependencies
• 🔒 Secure and privacy-focused
• 🚀 Easy deployment

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/myexistences/profilehub.git
cd profilehub

2. Install Dependencies

npm install

3. Start the Development Server

# Start the server
cd server
node index.js

# The client files can be served using any static file server

🎨 Customization Guide

Basic Setup

1. Edit client/index.html:

   • Update personal information
   • Modify social media links
   • Change profile content

2. Customize client/styles.css:

   • Modify colors and themes
   • Adjust layout and spacing
   • Customize animations

3. Replace Media Files:

   • Replace background.mp4 with your video
   • Replace audio.mp3 with your audio
   • Update images in assets/ directory

Advanced Customization

• Modify client/script.js for custom functionality
• Add new features to the server in server/index.js
• Extend bot functionality in server/bot.js

📦 Deployment

Static Files Deployment

1. Upload the client/ directory contents to your hosting service
2. Ensure all media files are properly uploaded
3. Configure your domain to point to the hosting service

Server Deployment

1. Deploy the server/ directory to your hosting service
2. Set up environment variables if needed
3. Start the server using node index.js

🔧 Configuration

The project uses minimal configuration. Key files to modify:

• client/index.html - Main content and structure
• client/styles.css - Visual styling and animations
• client/script.js - Interactive features
• server/index.js - Server configuration
• server/bot.js - Bot functionality

🤝 Contributing

While this is primarily a personal backup, contributions are welcome:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Support

For support:

• Open an issue on GitHub
• Contact myexistences

---

Made with ❤️ by myexistences

Back to top