React + TypeScript component-based structure, with Vite for building and development server
ReactPortfolio
personal-3d-portfolio-template-V1 — React Portfolio Template
By naborajs
A personal 3D portfolio template built with React and TypeScript, including a particle background, animated typography, project archive, capability matrix, document library, and contact channels, released under the MIT license.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-03View source
What stands out
A quick read of the recorded project description.
HTML5 Canvas 2D particle constellation background with mouse interaction
Hero animation with staggered 3D text entrance and cursor parallax
Built-in content modules such as project archive, capability matrix, document library, and timeline
⌘K command palette for global search and section navigation
Schema.org JSON-LD structured data for search engines and AI crawlers
Template Details
This is a 3D portfolio template for personal branding, from GitHub user naborajs, built with React and TypeScript and using Vite as the build tool. The template uses the "NS CODEX" personal digital system as sample content. Its page structure includes: a hero section with staggered 3D text entrance and cursor parallax, a concept explanation section, a selected project archive (with problem/solution cards and blueprint modals), a technical capability matrix, a capability protocol registry, a knowledge document library, a live "Now Node" status section (with an Indian Standard Time clock), a timeline, and a social and contact registry. Visually, it uses dark glassmorphism layers with warm orange accents, and the background is a particle constellation drawn with HTML5 Canvas 2D that supports mouse interaction; it also provides a ⌘K command palette for quick navigation and Schema.org JSON-LD structured data.
Usage restrictions: The brand identity, logo, and the personal identity of "Naboraj Sarkar" in the template are the author's personal property and are not licensed along with the code's MIT license; third-party assets such as demo images, fonts, and icons require separate verification of their respective licenses. The tech stack version numbers listed in the repository README have not been checked against the dependency manifest and are not repeated here. The template does not include free commitments for external services such as backend services, databases, or payments; related services may incur separate charges.
ReactPortfolio
Is it right for your project?
Use Cases
- Developers or students building personal portfolio and resume-style sites
- Showcasing multiple projects with problem/solution descriptions and detail modals
- Organizing technical capability categories and engineering protocol lists
- Publishing technical documentation, learning paths, or tutorial content
- Centrally displaying social and contact links such as GitHub, YouTube, and LinkedIn
Suitable For
- Developers who want to quickly build a personal brand site
- Job seekers who need to showcase a project archive and technical capability matrix
- Users who prefer dark glassmorphism and animated visual styles
- Front-end developers willing to use React and TypeScript for further development
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, run npm install to install dependencies
- 2
Use npm run dev to start the local development server
- 3
Use npm run build to build the production bundle
- 4
Replace the brand identity, logo, and personal identity information in the template; these are not covered by the MIT license
- 5
Verify the licenses of third-party assets such as demo images, fonts, and icons, and confirm the costs of external services such as domain and hosting
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in a public repository; the free scope is the code of this version and does not mean that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The MIT license covers only the code logic and architecture; the NS CODEX brand, logo, and the personal identity marks of "Naboraj Sarkar" are not licensed with the code and must be replaced before redistribution or commercial use.
- The project is released under the MIT license, allowing free use, modification, redistribution, and commercial use, but the original copyright and license notices must be retained.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domain, hosting, database, payment, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
The **NS CODEX branding, logo, and the personal identity "Naboraj Sarkar"** remain the personal property of Naboraj Sarkar.
Original README
https://github.com/naborajs/personal-3d-portfolio-template-V1/blob/main/LICENSEhttps://github.com/naborajs/personal-3d-portfolio-template-V1/blob/main/README.mdDistributed under the **MIT License**.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 87 / 100
- Technologies
- React
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-08-28
- Screenshot last checked
- 2026-10-03
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies React as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: 744a9f36d2509da7e8c445a4e5c59890d9fd039d7b9ec8f1a6d871cc003ae9a7
2026-10-03T00:02:57.030Z
Source file / repository<div align="center">
<img src="/public/logo.png" width="120" height="120" style="border-radius: 50%; filter: drop-shadow(0 0 25px rgba(255, 107, 44, 0.4));" alt="NS CODEX Emblem">
<h1>🌐 NABORAJ SARKAR | NS CODEX</h1>
<h3>Student • Builder • Developer • Systems & AI Explorer</h3>
<p>
<a href="https://naborajsarkar-me.vercel.app/"><img src="https://img.shields.io/badge/Live_Node-naborajsarkar--me.vercel.app-ff6b2c?style=for-the-badge&logo=vercel&logoColor=white" alt="Live Site"></a>
<a href="https://github.com/naborajs/personal-3d-portfolio-template"><img src="https://img.shields.io/badge/Source_Code-v12.6-white?style=for-the-badge&logo=github&logoColor=black" alt="Source Code"></a>
<img src="https://img.shields.io/badge/Status-Active_Node-10b981?style=for-the-badge" alt="Status">
</p>
<p align="center">
<strong>"Synthesizing High-Performance Systems with Cinematic Digital Identity."</strong>
<br />
<em>Official authority node and personal digital operating system.</em>
</p>
</div>
---
## ⚡ Mission & Identity
This repository is the **Official Authority Node** for **Naboraj Sarkar** (operating under the personal brand **NS CODEX**). It represents an evolving digital operating system that unifies software deployments, bot automation infrastructure, open technical documentation, and a dedicated mission to provide **free coding education** across India.
### Core Guiding Philosophy
- **BUILD**: Create functional, maintainable systems that solve real problems with zero bloat.
- **LEARN**: Explore emerging technologies deeply—from low-level logic to modern AI pipelines.
- **DOCUMENT**: Demystify complex engineering concepts through clear, open guides.
- **IMPROVE**: Iterate continuously, refining motion, architecture, and user experience with every release.
---
## 🛠 Technical Matrix (The Stack)
| Layer | Technology | Purpose |
| :--- | :--- | :--- |
| **Interface** | `React 19` | Declarative, component-driven logic flow. |
| **Language** | `TypeScript` | Strict end-to-end type safety and maintainable data contracts. |
| **Motion** | `Framer Motion 12` | Physics-driven spring dynamics, hardware-accelerated transforms. |
| **Design System** | `Liquid Smoked Glass` | 3-tier dark architectural glass hierarchy with warm amber/orange accents. |
| **Canvas** | `HTML5 Canvas 2D` | Siri-inspired neural particle constellation background with mouse reaction. |
| **Search / Tools** | `Command Palette (⌘K)` | Global keyboard-driven search and fast section jumping. |
| **SEO & Entity** | `Schema.org JSON-LD` | Machine-readable entity graph for Google, Bing, and AI crawlers. |
| **Build & Deploy** | `Vite 6` + `Vercel Edge` | Rapid ESM bundler and global zero-latency edge distribution. |
---
## 🧩 System Architecture Modules
### 1. Hero & Staggered Reveal Engine
Staggered 3D typographic entrance with live system metadata badges and subtle cursor-reactive depth parallax.
### 2. Dedicated NS CODEX Concept Section
Architectural breakdown deconstructing **NS** (Personal Identity) and **CODEX** (Evolving digital archive of Projects, Systems, Knowledge, Experiments, and Ideas).
### 3. Selected Systems & Project Archive
Editorial showcase highlighting core deployments (*NS CODEX Authority Node*, *Neuro-Mimetic Bot Suite*, *Spatial Experience Engine*, *Open Education Codex*, *Global Pipeline Bridge*) with problem/solution cards and deep blueprint inspection modals.
### 4. Technical Capability Matrix
Categorized matrix covering Languages, AI & Automation, Systems & Backend, Web & 3D, and DevOps without misleading percentage bars.
### 5. Capability Protocols Registry
Interactive registry covering 6 core engineering protocols with category filtering and direct links to project implementations.
### 6. Knowledge Archive & Documentation
Technical documentation library featuring guides on bot architecture, high-performance smoked glass, ICSE-to-fullstack roadmap, and Redis caching with interactive reader overlays.
### 7. Real-Time "Now Node"
Live operational broadcast displaying active priorities (Building, Exploring, Learning, Documenting) accompanied by a live Indian Standard Time (IST) clock.
### 8. Temporal Evolution Timeline
Chronological log from 2021 beginnings to 2026 current node and next-generation distributed systems exploration.
### 9. Digital Network & Direct Inquiry
Verified communication channels (GitHub, YouTube, LinkedIn, Instagram, X, WhatsApp Business) with copyable email/contact utilities.
---
## 📡 Connectivity Registry
| Node | Handle / Endpoint | Purpose |
| :--- | :--- | :--- |
| **Primary Website** | [naborajsarkar-me.vercel.app](https://naborajsarkar-me.vercel.app/) | Official Digital System |
| **Code Repository** | [github.com/naborajs](https://github.com/naborajs) | Open Source Codebases |
| **Educational Channel** | [youtube.com/@Nishant_sarkar](https://youtube.com/@Nishant_sarkar) | Free Coding Tutorials |
| **Professional Sync** | [linkedin.com/in/naboraj-sarkar](https://linkedin.com/in/naboraj-sarkar) | Professional Network |
| **Creative Log** | [instagram.com/naborajs](https://instagram.com/naborajs) | Builder Journey |
| **Ideas & Updates** | [x.com/ItsNaborajs](https://x.com/ItsNaborajs) | Tech Discourse & Updates |
| **Direct WhatsApp** | [+91 89006 53250](https://wa.me/918900653250) | WhatsApp Business Direct |
| **Direct Email** | [[email protected]](mailto:[email protected]) | Professional Inquiries |
---
## 🚀 Local Development & Execution
```bash
# 1. Clone the repository
git clone https://github.com/naborajs/personal-3d-portfolio-template.git
# 2. Navigate to project directory
cd personal-3d-portfolio-template
# 3. Install dependencies
npm install
# 4. Start local development server
npm run dev
# 5. Build production bundle
npm run build
```
---
## ⚖️ License & Attribution
Distributed under the **MIT License**.
**Identity Notice:** Code logic and architecture are open-source. The **NS CODEX branding, logo, and the personal identity "Naboraj Sarkar"** remain the personal property of Naboraj Sarkar.
Explore similar templates
Compare previews and descriptions within the same stack and category.
react-portfolio-template
A React-based developer portfolio template for showcasing projects, work history, and skills. It offers a multi-component layout, dark and light modes, and responsive mobile adaptation, with text and images editable in src/components.
React · Portfolio
personal-website-react
A single-page developer portfolio template built with React and Material-UI, driven by a JSON Resume-compliant resume.json. It offers light/dark theme switching with localStorage persistence, a clean responsive layout, and Create React App tooling for simple builds and static deployment.
React · Portfolio
karngyan.com
A personal website and blog template for developers, built with TanStack Start, React 19, Tailwind CSS v4, and shadcn/ui. It uses MDX for articles with Shiki highlighting and GFM tables, and automatically generates RSS, sitemap, robots.txt, llms.txt, and OG images.
React · Portfolio
react-portfolio-template
A React portfolio template by Ryan Balieiro with a fixed sidebar and page-turn transitions on desktop, bottom navigation on mobile, multilingual support, light/dark themes, and content components for experience, education, skills, projects, and testimonials.
React · Portfolio
portfolio
A data scientist personal portfolio template built with React and MUI, with content centrally managed through configuration files in the assets directory.
React · Portfolio
react-portfolio
A React 16 and Material-UI developer portfolio template that centralizes personal information in a JSON Resume-compliant resume.json, with light/dark theme switching saved to local storage. It currently provides portfolio display only; resume page templates and structured data enhancements are still planned.
React · Portfolio