https://github.com/arjun-p-jayakrishnan/arjun-p-jayakrishnan.github.io
Web components based portfolio
https://github.com/arjun-p-jayakrishnan/arjun-p-jayakrishnan.github.io
threejs web-components
Last synced: 2 months ago
JSON representation
Web components based portfolio
- Host: GitHub
- URL: https://github.com/arjun-p-jayakrishnan/arjun-p-jayakrishnan.github.io
- Owner: Arjun-P-Jayakrishnan
- Created: 2024-07-14T15:55:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-26T20:17:34.000Z (over 1 year ago)
- Last Synced: 2024-12-26T21:19:53.289Z (over 1 year ago)
- Topics: threejs, web-components
- Language: HTML
- Homepage: https://arjun-p-jayakrishnan.github.io/
- Size: 8.92 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project Portfolio Engine
> **Status:** Under Maintenance 🚧
>
> **Version:** 0.1.0-alpha
A 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.
---
## Why Web Components & Three.js?
### ✅ Web Components (instead of React or other frameworks)
- **Framework Agnostic**: Native browser support; no framework lock-in.
- **Lightweight**: No virtual DOM overhead.
- **Isolation**: Shadow DOM encapsulates styles and logic.
- **Future-Proof**: Aligned with evolving web standards.
- **Reusable**: Components can be shared across any frontend project.
### ✅ Three.js (instead of React + Canvas libraries)
- **Direct WebGL Access**: Lower-level control over rendering.
- **Rich Ecosystem**: Built-in loaders, geometries, materials, post-processing.
- **Performance**: Fine-grained optimization for real-time 3D experiences.
- **Separation of Concerns**: Keeps rendering separate from UI and state management.
---
## What Makes This Stand Out?
- 🔧 **Custom Engine Architecture**: Fully decoupled engine with core, managers, entities, and plugins.
- 🔄 **Lifecycle Management**: Clean handling of component lifecycles and resource disposal.
- 🌐 **Global Event Bus & State Management**: Simplifies communication across modules.
- 🎯 **Precision Control**: Direct input, rendering, and scene orchestration without hidden abstractions.
- ⚡ **Optimized Performance**: Minimal runtime overhead compared to heavy frontend frameworks.
- 🧩 **Extensible Plugin System**: Optional debugging and development tools.
- 🚀 **Developer Friendly**: Simple, understandable code structure for both 3D and DOM development.
---
## Features
- Modular, extensible architecture
- Pure Web Components (Custom Elements, Shadow DOM)
- TypeScript-first development
- Real-time 3D rendering powered by Three.js
- Global state management and event bus
- Asynchronous resource management and loading system
- Built-in input handling and persistence layer
- Plugin system for easy debugging and extension
- Uses **tsconfig.json** for clean TypeScript compilation and type safety
- Bundles to pure JavaScript for production deployment
---
## Technologies Used
- TypeScript
- Web Components
- Three.js
- Vite (or your chosen bundler)
- tsconfig.json for build configuration
---
## Getting Started
### Prerequisites
- Node.js (>= 18 recommended)
- npm or yarn
### Installation
```bash
git clone https://github.com/your-username/your-project-portfolio.git
cd your-project-portfolio
npm install
# or
yarn install
```
### Development Server
```bash
npm run dev
# or
yarn dev
```
### Production Build
```bash
npm run build
# or
yarn build
```
### Preview Production Build
```bash
npm run preview
# or
yarn preview
```
---
## Deployment
The 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.
For 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.
---
## Project Structure
```plaintext
src/
/engine
/core
Engine.ts # Main orchestrator
LifecycleManager.ts # Handles onLoad/onMount/onUpdate/onDestroy
EventBus.ts # Global pub-sub system
StateManager.ts # Global reactive state store
ResourceManager.ts # Asset loader and cache
LoadingManager.ts # Track async loading progress
/managers
DOMManager.ts # Mount/detach Web Components
RenderManager.ts # Three.js Scene/Renderer/Camera wrapper
InputManager.ts # Keyboard, mouse, touch, gamepad input
StorageManager.ts # Persistence layer (localStorage, IndexedDB, etc.)
/components
/ui
AppShell.ts # Root web component
MainMenu.ts # Example UI component
SettingsPanel.ts # Example settings panel
/scenes
Scene3D.ts # 3D Scene entry
SceneUI.ts # DOM/3D hybrid scene
/entities
Player.ts # Example 3D entity
Environment.ts # Skybox, environment models, lighting
Lighting.ts # Scene lighting setup
/resources
GLTFLoaderWrapper.ts # 3D model loader helpers
TextureLoaderWrapper.ts# Texture loader helpers
AudioLoaderWrapper.ts # Sound/music loader helpers
/utils
Logger.ts # Logging utility
Disposable.ts # Safe Three.js object disposal pattern
Time.ts # Time helpers
/plugins
DebugPanel.ts # Optional dev plugin system
index.ts # Main entry point
public/ # Static assets
vite.config.ts # Build configuration
```
---
## License
This project is licensed under the MIT License.
---
## Author
- Your Name
- \[[your-email@example.com](mailto:your-email@example.com)]
- \[your-portfolio-link]
---
## Roadmap
- ⚙️ Modular plugin system
- 🧪 Automated tests
- 📦 Component marketplace for reusable UI parts
- 🔧 Editor tooling for scene and entity management
- 📈 Performance optimizations
- 📊 Telemetry and analytics integration
---
> This architecture is designed for scalability: easy to add new scenes, entities, components, and systems as your portfolio evolves.