{"id":30705986,"url":"https://github.com/hum2a/lifebalance","last_synced_at":"2025-09-02T19:56:03.059Z","repository":{"id":311058247,"uuid":"1041686084","full_name":"Hum2a/lifebalance","owner":"Hum2a","description":"LifeBalance is an interactive web application designed to help users assess their current life satisfaction across seven key areas and explore how additional resources (money and time) could impact their overall well-being. The tool provides personalized insights and actionable recommendations based on user responses.","archived":false,"fork":false,"pushed_at":"2025-08-21T21:32:15.000Z","size":607,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-21T22:49:36.158Z","etag":null,"topics":["css","html","javascript","onrender","react"],"latest_commit_sha":null,"homepage":"https://lifebalance.onrender.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hum2a.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-20T21:31:02.000Z","updated_at":"2025-08-21T21:31:58.000Z","dependencies_parsed_at":"2025-08-21T22:59:49.819Z","dependency_job_id":null,"html_url":"https://github.com/Hum2a/lifebalance","commit_stats":null,"previous_names":["hum2a/lifebalance"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/Hum2a/lifebalance","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hum2a%2Flifebalance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hum2a%2Flifebalance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hum2a%2Flifebalance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hum2a%2Flifebalance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hum2a","download_url":"https://codeload.github.com/Hum2a/lifebalance/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hum2a%2Flifebalance/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273341436,"owners_count":25088347,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","onrender","react"],"created_at":"2025-09-02T19:55:57.120Z","updated_at":"2025-09-02T19:56:03.043Z","avatar_url":"https://github.com/Hum2a.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LifeBalance - Life Assessment \u0026 Planning Tool\n\n\u003cdiv align=\"center\"\u003e\n\n![LifeBalance Logo](public/LifeSmart.png)\n\n**A comprehensive life assessment tool that helps users evaluate and plan improvements across all life areas**\n\n[![React](https://img.shields.io/badge/React-18.2.0-blue.svg)](https://reactjs.org/)\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n[![Build Status](https://img.shields.io/badge/Build-Passing-brightgreen.svg)](https://github.com/yourusername/lifebalance)\n[![Code Quality](https://img.shields.io/badge/Code%20Quality-A%2B-brightgreen.svg)](https://github.com/yourusername/lifebalance)\n\n[Live Demo](#) • [Report Bug](https://github.com/yourusername/lifebalance/issues) • [Request Feature](https://github.com/yourusername/lifebalance/issues)\n\n\u003c/div\u003e\n\n---\n\n## 🚀 Overview\n\nLifeBalance is an interactive web application designed to help users assess their current life satisfaction across seven key areas and explore how additional resources (money and time) could impact their overall well-being. The tool provides personalized insights and actionable recommendations based on user responses.\n\n### ✨ Key Features\n\n- **Comprehensive Life Assessment**: Evaluate 7 key life areas with intuitive sliders\n- **Resource Impact Analysis**: See how money and time could improve different aspects of life\n- **Personalized Insights**: Get tailored recommendations based on your responses\n- **Interactive UI**: Modern, responsive design with smooth animations and icons\n- **Progress Tracking**: Step-by-step assessment with progress indicators\n- **Actionable Results**: Practical suggestions for life improvement\n- **Export Functionality**: Download your results as images or PDFs\n- **Smart Navigation**: Auto-advancing cards with smart scrolling\n- **Professional Icons**: Material Design icons throughout the interface\n\n### 🎯 Life Areas Covered\n\n1. **🏥 Health \u0026 Well-being** - Physical and mental health assessment\n2. **👨‍👩‍👧‍👦 Family \u0026 Connections** - Relationships and social support\n3. **💼 Career \u0026 Income** - Professional satisfaction and financial security\n4. **🎉 Lifestyle, Spending \u0026 Fun** - Entertainment and quality of life\n5. **🏠 Housing, Safety \u0026 Security** - Living environment and personal safety\n6. **🤝 Giving \u0026 Contribution** - Community involvement and philanthropy\n7. **🎓 Personal Growth \u0026 Purpose** - Learning and life direction\n\n---\n\n## 🛠️ Technology Stack\n\n- **Frontend Framework**: React 18.2.0\n- **UI Components**: Custom CSS with modern design principles\n- **Sliders**: React Slider for interactive input\n- **Styling**: CSS3 with responsive design and animations\n- **Icons**: React Icons (Material Design)\n- **Export Tools**: html2canvas \u0026 jsPDF for data export\n- **Build Tool**: Create React App\n- **Package Manager**: npm\n\n---\n\n## 🎨 New Features \u0026 Improvements\n\n### 🆕 **Export \u0026 Download System**\n- **Image Export**: High-quality PNG downloads of your personal snapshot\n- **PDF Export**: Professional PDF reports ready for printing or sharing\n- **Smart Capture**: Ensures all data and content is properly exported\n- **File Naming**: Automatic date-based file naming for organization\n\n### 🎭 **Enhanced Animations \u0026 Effects**\n- **Staggered Entrances**: Elements appear with beautiful timing sequences\n- **Shimmer Effects**: Magical light sweeps across interactive elements\n- **Hover Animations**: Rich hover states with transforms and shadows\n- **Smooth Transitions**: Professional cubic-bezier easing throughout\n- **Responsive Animations**: Optimized for different screen sizes\n\n### 🔧 **Smart Navigation System**\n- **Auto-Advance**: Cards automatically advance on slider release\n- **Smart Scrolling**: Intelligent scroll positioning to newly revealed content\n- **Progress Tracking**: Visual progress indicators throughout the journey\n- **Completion Buttons**: Clear completion indicators for each section\n\n### 🎯 **Professional Icon System**\n- **Material Design Icons**: Consistent, professional iconography\n- **Semantic Meaning**: Each icon directly relates to its content\n- **Color Coordination**: Icons use the existing color palette\n- **Accessibility**: Icons enhance rather than replace text content\n\n### 📱 **Mobile-First Responsiveness**\n- **Touch Optimized**: Larger slider thumbs for mobile devices\n- **Responsive Layouts**: Adapts perfectly to all screen sizes\n- **Performance**: Optimized animations for mobile devices\n- **Safari Compatibility**: Special handling for Safari-specific behaviors\n\n---\n\n## 📱 Screenshots\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to view screenshots\u003c/summary\u003e\n\n### Welcome Page\n![Welcome Page](docs/screenshots/welcome.png)\n\n### Life Assessment\n![Life Assessment](docs/screenshots/assessment.png)\n\n### Results Dashboard\n![Results Dashboard](docs/screenshots/results.png)\n\n### Export Options\n![Export Options](docs/screenshots/export.png)\n\n\u003c/details\u003e\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (version 16 or higher)\n- npm (version 8 or higher)\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/yourusername/lifebalance.git\n   cd lifebalance\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm start\n   ```\n\n4. **Open your browser**\n   Navigate to [http://localhost:3000](http://localhost:3000)\n\n### Available Scripts\n\n| Command | Description |\n|---------|-------------|\n| `npm start` | Runs the app in development mode |\n| `npm run build` | Builds the app for production |\n| `npm test` | Launches the test runner |\n| `npm run eject` | Ejects from Create React App |\n\n---\n\n## 🏗️ Project Structure\n\n```\nlifebalance/\n├── public/                 # Static assets\n│   ├── index.html         # Main HTML file\n│   ├── WhiteLogo.png      # Application logo\n│   └── manifest.json      # PWA manifest\n├── src/                   # Source code\n│   ├── lifebalance/       # Main application\n│   │   ├── components/    # Reusable components\n│   │   │   └── LifeBalanceHeader.js  # Header with progress tracking\n│   │   ├── pages/         # Page components\n│   │   │   ├── WelcomePage.js        # Welcome and onboarding\n│   │   │   ├── Page2.js             # Life area assessment\n│   │   │   ├── Page3.js             # Money impact assessment\n│   │   │   ├── Page4.js             # Time impact assessment\n│   │   │   └── Page5.js             # Results and export\n│   │   └── styles/        # CSS stylesheets\n│   ├── App.js            # Main App component\n│   └── index.js          # Application entry point\n├── docs/                  # Documentation\n├── .github/               # GitHub-specific files\n├── package.json           # Dependencies and scripts\n└── README.md              # This file\n```\n\n---\n\n## 🎨 Design System\n\n### Color Palette\n- **Primary**: #B79BFF (Purple)\n- **Secondary**: #97A1FF (Blue)\n- **Accent**: #64FFD0 (Green), #FF9264 (Orange)\n- **Background**: Dark theme with gradients\n- **Text**: White and light gray for readability\n\n### Typography\n- **Headings**: Bold, large fonts for hierarchy\n- **Body Text**: Readable sans-serif fonts\n- **Responsive**: Font sizes scale with viewport\n\n### Components\n- **Cards**: Glassmorphism design with backdrop blur\n- **Sliders**: Custom-styled range inputs with enhanced thumbs\n- **Buttons**: Consistent primary and secondary styles\n- **Forms**: Clean, accessible form elements\n- **Icons**: Material Design icon system throughout\n\n### Animation System\n- **Entrance Animations**: Staggered fade-in effects\n- **Hover States**: Rich interactive feedback\n- **Shimmer Effects**: Light sweeps across elements\n- **Transitions**: Smooth cubic-bezier easing\n- **Responsive**: Optimized for different devices\n\n---\n\n## 📱 Responsive Design\n\nThe application is fully responsive and optimized for:\n- **Desktop**: 1200px+ (Full feature set with enhanced animations)\n- **Tablet**: 768px - 1199px (Adapted layout with touch optimization)\n- **Mobile**: 320px - 767px (Mobile-first design with larger touch targets)\n\n### Mobile Optimizations\n- **Larger Slider Thumbs**: Easier touch interaction\n- **Touch-Friendly Buttons**: Optimized button sizes\n- **Smooth Scrolling**: Native-like mobile experience\n- **Safari Compatibility**: Special handling for iOS devices\n\n---\n\n## 🧪 Testing\n\n### Running Tests\n```bash\nnpm test\n```\n\n### Test Coverage\n```bash\nnpm run test:coverage\n```\n\n---\n\n## 🚀 Deployment\n\n### Production Build\n```bash\nnpm run build\n```\n\n### Deployment Options\n- **Netlify**: Drag and drop the `build` folder\n- **Vercel**: Connect your GitHub repository\n- **GitHub Pages**: Use the `gh-pages` package\n- **AWS S3**: Upload the `build` folder to S3\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for details.\n\n### Development Workflow\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 🙏 Acknowledgments\n\n- **LifeSmart Team** - For the vision and concept\n- **React Community** - For the amazing framework\n- **Material Design** - For the comprehensive icon system\n- **Open Source Contributors** - For the tools and libraries\n\n---\n\n## 📞 Support\n\n- **Email**: support@lifesmart.com\n- **Issues**: [GitHub Issues](https://github.com/yourusername/lifebalance/issues)\n- **Documentation**: [Wiki](https://github.com/yourusername/lifebalance/wiki)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ by the LifeSmart Team**\n\n[![GitHub stars](https://img.shields.io/github/stars/yourusername/lifebalance?style=social)](https://github.com/yourusername/lifebalance)\n[![GitHub forks](https://img.shields.io/github/forks/yourusername/lifebalance?style=social)](https://github.com/yourusername/lifebalance)\n[![GitHub watchers](https://img.shields.io/github/watchers/yourusername/lifebalance?style=social)](https://github.com/yourusername/lifebalance)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhum2a%2Flifebalance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhum2a%2Flifebalance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhum2a%2Flifebalance/lists"}