{"id":29804318,"url":"https://github.com/l1ve4code/live4code","last_synced_at":"2025-08-11T21:35:29.213Z","repository":{"id":298985201,"uuid":"1001743792","full_name":"l1ve4code/live4code","owner":"l1ve4code","description":"An immersive 3D interactive portfolio showcasing software engineering expertise with a cosmic theme and modern web technologies.","archived":false,"fork":false,"pushed_at":"2025-07-15T09:41:14.000Z","size":11875,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-28T12:47:32.825Z","etag":null,"topics":["3d","cursor-ai","effects","immersive-audio","js"],"latest_commit_sha":null,"homepage":"https://l1ve4code.github.io/live4code/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/l1ve4code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-13T23:51:45.000Z","updated_at":"2025-07-22T00:33:39.000Z","dependencies_parsed_at":"2025-06-14T01:27:25.349Z","dependency_job_id":"68ddc893-a1cc-4154-8caf-244c8e6a40af","html_url":"https://github.com/l1ve4code/live4code","commit_stats":null,"previous_names":["l1ve4code/live4code"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/l1ve4code/live4code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/l1ve4code%2Flive4code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/l1ve4code%2Flive4code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/l1ve4code%2Flive4code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/l1ve4code%2Flive4code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/l1ve4code","download_url":"https://codeload.github.com/l1ve4code/live4code/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/l1ve4code%2Flive4code/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269962053,"owners_count":24504260,"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-08-11T02:00:10.019Z","response_time":75,"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":["3d","cursor-ai","effects","immersive-audio","js"],"created_at":"2025-07-28T12:44:52.738Z","updated_at":"2025-08-11T21:35:29.204Z","avatar_url":"https://github.com/l1ve4code.png","language":"CSS","readme":"# Interactive Portfolio\n\n[Check product](https://l1ve4code.github.io/live4code/)\n\nAn immersive 3D interactive portfolio showcasing software engineering expertise with a cosmic theme and modern web technologies.\n\n![Product image](resources/image.png)\n\n## 🚀 Features\n\n### Interactive 3D Experience\n- **3D Rotating Cube**: Navigate through 6 faces representing different portfolio sections\n- **Cosmic Background**: Animated starfield with nebulae, particles, and asteroids\n- **Smooth Transitions**: Fluid animations between sections with CSS3 transforms\n- **Audio Integration**: Background music and sound effects with visual audio analyzer\n\n### Responsive Design\n- **Desktop Version**: Full 3D cube navigation with mouse controls\n- **Mobile Version**: Horizontal slider interface optimized for touch devices\n- **Adaptive Layout**: Seamless experience across all screen sizes\n\n### Portfolio Sections\n1. **Home** - Welcome screen with typing animation\n2. **About** - Professional background and expertise\n3. **Skills** - Technical stack and competencies\n4. **Experience** - Career timeline and achievements\n5. **Projects** - GitHub integration with live project showcase\n6. **Contact** - Professional contact information\n\n### Technical Highlights\n- **GitHub API Integration**: Automatic project fetching with caching\n- **Audio Visualization**: Real-time audio analysis and visual effects\n- **Performance Optimized**: Efficient rendering and resource management\n- **SEO Ready**: Proper meta tags and favicon implementation\n\n## 🛠️ Technologies Used\n\n- **Frontend**: Vanilla JavaScript (ES6+), HTML5, CSS3\n- **3D Graphics**: CSS3 Transforms, WebGL effects\n- **Audio**: Web Audio API for visualization and playback\n- **APIs**: GitHub REST API for project data\n- **Design**: Responsive design with mobile-first approach\n\n## 📁 Project Structure\n\n```\nlive4code/\n├── index.html          # Main HTML file (541 lines)\n├── script.js           # Core JavaScript logic (1542 lines)\n├── styles.css          # Styling and animations (2649 lines)\n├── sounds/             # Audio assets\n│   ├── background.mp3  # Background music\n│   ├── click.mp3       # UI interaction sounds\n│   └── ...\n├── favicon/            # Favicon files\n│   ├── favicon.ico\n│   ├── favicon-16x16.png\n│   ├── favicon-32x32.png\n│   └── favicon-256x256.png\n└── README.md\n```\n\n## 🎯 Core Classes\n\n### JavaScript Architecture\n- **`App`** - Main application controller\n- **`CubeController`** - 3D cube navigation and rotation\n- **`AudioManager`** - Sound effects and background music\n- **`AudioVisualizer`** - Real-time audio analysis and visualization\n- **`TypingAnimation`** - Typewriter effect for text display\n- **`StarfieldManager`** - Cosmic background animations\n- **`GitHubProjectsManager`** - GitHub API integration and project display\n- **`MobileSlider`** - Touch-optimized mobile navigation\n- **`VisibilityManager`** - Performance optimization for animations\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Modern web browser with JavaScript enabled\n- Local web server (for GitHub API functionality)\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/l1ve4code/live4code.git\n   cd live4code\n   ```\n\n2. **Serve locally**\n   ```bash\n   # Using Python\n   python -m http.server 8000\n   \n   # Using Node.js\n   npx serve .\n   \n   # Using PHP\n   php -S localhost:8000\n   ```\n\n3. **Open in browser**\n   ```\n   http://localhost:8000\n   ```\n\n## 🎮 Navigation\n\n### Desktop Controls\n- **Mouse Click**: Click on visible cube faces to navigate\n- **Navigation Buttons**: Use right-side navigation panel\n- **Auto-rotation**: Cube rotates automatically when idle\n\n### Mobile Controls\n- **Swipe**: Horizontal swipe gestures to navigate between sections\n- **Touch**: Tap navigation buttons for direct section access\n\n## 🎨 Customization\n\n### Modifying Content\n- **Personal Info**: Update contact details in both mobile and desktop sections\n- **Skills**: Modify skill categories and proficiency levels\n- **Experience**: Update career timeline and achievements\n- **Projects**: GitHub projects are fetched automatically from the configured username\n\n### Styling\n- **Colors**: Cosmic theme with customizable color variables in CSS\n- **Animations**: Adjustable timing and easing functions\n- **Layout**: Responsive breakpoints for different screen sizes\n\n### Audio\n- **Background Music**: Replace files in `/sounds/` directory\n- **Sound Effects**: Customize interaction sounds\n- **Visualization**: Modify audio analyzer parameters\n\n## 🔧 Configuration\n\n### GitHub Integration\nUpdate the GitHub username in `script.js`:\n```javascript\nconst GITHUB_USERNAME = 'your-username';\n```\n\n### Audio Settings\nModify audio preferences in the AudioManager class:\n```javascript\nthis.backgroundVolume = 0.3; // Background music volume\nthis.effectsVolume = 0.5;    // Sound effects volume\n```\n\n## 📱 Browser Support\n\n- **Chrome**: Full support (recommended)\n- **Firefox**: Full support\n- **Safari**: Full support\n- **Edge**: Full support\n- **Mobile Browsers**: Optimized touch interface\n\n## 🎯 Performance Features\n\n- **Lazy Loading**: Resources loaded on demand\n- **Caching**: GitHub API responses cached locally\n- **Optimization**: Efficient animation loops and memory management\n- **Responsive Images**: Optimized assets for different screen sizes\n\n## 👨‍💻 Author\n\n**Ivan Vedenin (live4code)**\n- GitHub: [@l1ve4code](https://github.com/l1ve4code)\n- LinkedIn: [vedenin-ivan](https://linkedin.com/in/vedenin-ivan)\n- Email: steven.marelly@gmail.com\n\n*Built with ❤️ and lots of ☕ by live4code* \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fl1ve4code%2Flive4code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fl1ve4code%2Flive4code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fl1ve4code%2Flive4code/lists"}