Blue.tcc Portfolio (ProfileMe) 🌌

A modern, high-performance cyber/futuristic portfolio website for Blue.tcc (Chisanupong Renuhom) featuring an interactive Live2D Cubism 4 Model Avatar, dynamic skill matrix, project showcases, audio/visual effects, and responsive cyber design.

🌐 Live Demo: https://bluetccth.github.io/ProfileMe/

---

✨ Features

• 🎭 Interactive Live2D Avatar: Real-time cursor tracking, motion gestures, expression switching, and physics simulation using PixiJS & Cubism 4 SDK.
• ⚡ Futuristic Cyber UI: Glassmorphism aesthetic, neon gradients, ambient background particle video, and responsive layout across desktop and mobile.
• 🚀 Featured Projects & Products Showcase:
  • Lily - AI: Interactive celestial Live2D AI Anime companion with real-time eye/cursor tracking, voice synthesis & Google Gemini conversational intelligence.
  • BoostPC: Windows latency optimization & performance tuning suite.
  • NetBoot-X: Cloud OS booting & network PXE solutions.
  • Overlay-PC: Real-time FPS, CPU, GPU, RAM hardware monitoring overlay.
• 🛠️ Interactive Skill Radar & Matrix: Visualized proficiency in Full-Stack Web, DevOps, Server Optimization, and Live2D rigging.
• 📱 Mobile & Desktop Responsive: Custom sticky glass navigation bar, full-screen mobile menu drawer, and smooth section scrolling.
• 🔗 Social Links & Support Integration: Direct links to Discord community, Facebook, GitHub, and EzDn donation/support.

---

🛠️ Tech Stack

• Framework: React 19 + TypeScript
• Bundler & Tooling: Vite
• Styling: Tailwind CSS v4
• Animations: Motion (Framer Motion)
• 2D Graphics & Live2D:
  • PixiJS v7
  • pixi-live2d-display
  • Live2D Cubism Core 5.1 (Cubism 4)
• Icons: Lucide React
• Hosting / CI/CD: GitHub Pages (gh-pages)

---

🚀 Getting Started

Prerequisites

• Node.js (version 18+ recommended)
• npm or bun

Installation

1. Clone the repository:

   git clone https://github.com/bluetccth/ProfileMe.git
   cd ProfileMe

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   Open http://localhost:3000 in your browser.

---

📦 Build & Deployment

Build for Production

npm run build

The optimized production bundle will be generated in the dist/ directory.

Deploy to GitHub Pages

npm run deploy

This automatically builds the project and pushes the dist/ folder to the gh-pages branch.

---

📁 Project Structure

ProfileMe/
├── public/                 # Static assets, images, video & Live2D model files
│   ├── live2d/             # Live2D Cubism model (.moc3, textures, motions, physics)
│   ├── live2dcubismcore.min.js
│   ├── background.mp4      # Cyber background loop
│   └── favicon.png
├── src/
│   ├── components/
│   │   └── Live2DAvatar.tsx # PixiJS + Live2D canvas wrapper component
│   ├── App.tsx             # Main portfolio layout & sections
│   ├── main.tsx            # React application root
│   └── index.css           # Tailwind CSS imports & global utilities
├── index.html              # Entry HTML with SEO & Open Graph meta tags
├── package.json            # Project dependencies and npm scripts
├── tsconfig.json           # TypeScript configuration
└── vite.config.ts          # Vite build & asset resolution configuration

---

📄 License

This project is licensed under the MIT License.

---

💬 Contact & Community

• Creator: Chisanupong Renuhom (Blue.tcc)
• Discord Community: https://discord.gg/WTYgx6CPeh
• Support: https://ezdn.app/blue_tcc
• GitHub: @bluetccth