{"id":23629622,"url":"https://github.com/arjun-p-jayakrishnan/arjun-p-jayakrishnan.github.io","last_synced_at":"2026-04-13T11:01:53.177Z","repository":{"id":248402381,"uuid":"828591339","full_name":"Arjun-P-Jayakrishnan/Arjun-P-Jayakrishnan.github.io","owner":"Arjun-P-Jayakrishnan","description":"Web components based portfolio","archived":false,"fork":false,"pushed_at":"2024-12-26T20:17:34.000Z","size":9357,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-26T21:19:53.289Z","etag":null,"topics":["threejs","web-components"],"latest_commit_sha":null,"homepage":"https://arjun-p-jayakrishnan.github.io/","language":"HTML","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/Arjun-P-Jayakrishnan.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}},"created_at":"2024-07-14T15:55:08.000Z","updated_at":"2024-12-26T20:18:26.000Z","dependencies_parsed_at":"2024-12-26T21:29:26.538Z","dependency_job_id":null,"html_url":"https://github.com/Arjun-P-Jayakrishnan/Arjun-P-Jayakrishnan.github.io","commit_stats":null,"previous_names":["arjun-p-jayakrishnan/portfolio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arjun-P-Jayakrishnan%2FArjun-P-Jayakrishnan.github.io","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arjun-P-Jayakrishnan%2FArjun-P-Jayakrishnan.github.io/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arjun-P-Jayakrishnan%2FArjun-P-Jayakrishnan.github.io/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arjun-P-Jayakrishnan%2FArjun-P-Jayakrishnan.github.io/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arjun-P-Jayakrishnan","download_url":"https://codeload.github.com/Arjun-P-Jayakrishnan/Arjun-P-Jayakrishnan.github.io/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239546898,"owners_count":19657047,"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","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":["threejs","web-components"],"created_at":"2024-12-28T01:16:22.013Z","updated_at":"2026-04-13T11:01:53.170Z","avatar_url":"https://github.com/Arjun-P-Jayakrishnan.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project Portfolio Engine\n\n\u003e **Status:** Under Maintenance 🚧\n\u003e\n\u003e **Version:** 0.1.0-alpha\n\nA modular project portfolio framework built with **Vanilla TypeScript**, **Web Components**, and **Three.js**. This architecture cleanly separates engine, UI, scenes, entities, and resource management for scalable, maintainable development.\n\n---\n\n## Why Web Components \u0026 Three.js?\n\n### ✅ Web Components (instead of React or other frameworks)\n\n- **Framework Agnostic**: Native browser support; no framework lock-in.\n- **Lightweight**: No virtual DOM overhead.\n- **Isolation**: Shadow DOM encapsulates styles and logic.\n- **Future-Proof**: Aligned with evolving web standards.\n- **Reusable**: Components can be shared across any frontend project.\n\n### ✅ Three.js (instead of React + Canvas libraries)\n\n- **Direct WebGL Access**: Lower-level control over rendering.\n- **Rich Ecosystem**: Built-in loaders, geometries, materials, post-processing.\n- **Performance**: Fine-grained optimization for real-time 3D experiences.\n- **Separation of Concerns**: Keeps rendering separate from UI and state management.\n\n---\n\n## What Makes This Stand Out?\n\n- 🔧 **Custom Engine Architecture**: Fully decoupled engine with core, managers, entities, and plugins.\n- 🔄 **Lifecycle Management**: Clean handling of component lifecycles and resource disposal.\n- 🌐 **Global Event Bus \u0026 State Management**: Simplifies communication across modules.\n- 🎯 **Precision Control**: Direct input, rendering, and scene orchestration without hidden abstractions.\n- ⚡ **Optimized Performance**: Minimal runtime overhead compared to heavy frontend frameworks.\n- 🧩 **Extensible Plugin System**: Optional debugging and development tools.\n- 🚀 **Developer Friendly**: Simple, understandable code structure for both 3D and DOM development.\n\n---\n\n## Features\n\n- Modular, extensible architecture\n- Pure Web Components (Custom Elements, Shadow DOM)\n- TypeScript-first development\n- Real-time 3D rendering powered by Three.js\n- Global state management and event bus\n- Asynchronous resource management and loading system\n- Built-in input handling and persistence layer\n- Plugin system for easy debugging and extension\n- Uses **tsconfig.json** for clean TypeScript compilation and type safety\n- Bundles to pure JavaScript for production deployment\n\n---\n\n## Technologies Used\n\n- TypeScript\n- Web Components\n- Three.js\n- Vite (or your chosen bundler)\n- tsconfig.json for build configuration\n\n---\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js (\u003e= 18 recommended)\n- npm or yarn\n\n### Installation\n\n```bash\ngit clone https://github.com/your-username/your-project-portfolio.git\ncd your-project-portfolio\nnpm install\n# or\nyarn install\n```\n\n### Development Server\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\n### Production Build\n\n```bash\nnpm run build\n# or\nyarn build\n```\n\n### Preview Production Build\n\n```bash\nnpm run preview\n# or\nyarn preview\n```\n\n---\n\n## Deployment\n\nThe production build bundles all TypeScript code into pure JavaScript using the **tsconfig.json** and build system. This allows direct deployment of the `/dist` folder to any static hosting service such as Netlify, Vercel, GitHub Pages, Cloudflare Pages, etc.\n\nFor example, when deploying to **GitHub Pages**, simply push the contents of `/dist` to your `gh-pages` branch or configure your hosting action to use the build output.\n\n---\n\n## Project Structure\n\n```plaintext\nsrc/\n  /engine\n    /core\n      Engine.ts            # Main orchestrator\n      LifecycleManager.ts  # Handles onLoad/onMount/onUpdate/onDestroy\n      EventBus.ts          # Global pub-sub system\n      StateManager.ts      # Global reactive state store\n      ResourceManager.ts   # Asset loader and cache\n      LoadingManager.ts    # Track async loading progress\n    /managers\n      DOMManager.ts        # Mount/detach Web Components\n      RenderManager.ts     # Three.js Scene/Renderer/Camera wrapper\n      InputManager.ts      # Keyboard, mouse, touch, gamepad input\n      StorageManager.ts    # Persistence layer (localStorage, IndexedDB, etc.)\n  /components\n    /ui\n      AppShell.ts          # Root web component\n      MainMenu.ts          # Example UI component\n      SettingsPanel.ts     # Example settings panel\n  /scenes\n    Scene3D.ts             # 3D Scene entry\n    SceneUI.ts             # DOM/3D hybrid scene\n  /entities\n    Player.ts              # Example 3D entity\n    Environment.ts         # Skybox, environment models, lighting\n    Lighting.ts            # Scene lighting setup\n  /resources\n    GLTFLoaderWrapper.ts   # 3D model loader helpers\n    TextureLoaderWrapper.ts# Texture loader helpers\n    AudioLoaderWrapper.ts  # Sound/music loader helpers\n  /utils\n    Logger.ts              # Logging utility\n    Disposable.ts          # Safe Three.js object disposal pattern\n    Time.ts                # Time helpers\n  /plugins\n    DebugPanel.ts          # Optional dev plugin system\n  index.ts                 # Main entry point\npublic/                    # Static assets\nvite.config.ts             # Build configuration\n```\n\n---\n\n## License\n\nThis project is licensed under the MIT License.\n\n---\n\n## Author\n\n- Your Name\n- \\[[your-email@example.com](mailto:your-email@example.com)]\n- \\[your-portfolio-link]\n\n---\n\n## Roadmap\n\n- ⚙️ Modular plugin system\n- 🧪 Automated tests\n- 📦 Component marketplace for reusable UI parts\n- 🔧 Editor tooling for scene and entity management\n- 📈 Performance optimizations\n- 📊 Telemetry and analytics integration\n\n---\n\n\u003e This architecture is designed for scalability: easy to add new scenes, entities, components, and systems as your portfolio evolves.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farjun-p-jayakrishnan%2Farjun-p-jayakrishnan.github.io","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farjun-p-jayakrishnan%2Farjun-p-jayakrishnan.github.io","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farjun-p-jayakrishnan%2Farjun-p-jayakrishnan.github.io/lists"}