Section-based content structure: Origin, Craft, Missions, Flight Log, Awards, and Transmission float as glass panels in a deep-space scene
ViteReactPortfolio
vijayrajck-portfolio — Vite Portfolio Template
By Vijayrajdev
A space-themed 3D portfolio template for a senior data engineer, built with React, Three.js, and Tailwind CSS, with content driven by data files that can be replaced with your own experience and projects.
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-13View source
What stands out
A quick read of the recorded project description.
The hero section is a draggable, rotatable 3D rendering of a GCP data pipeline, with particles flowing along glowing pipes and returning to position when released
The entire site uses only two WebGL contexts, sharing an overlay canvas via scissored drei <View> to render the pipeline and project stages
FrostGL composites glass panel effects with WebGL Gaussian blur on platforms where backdrop-filter is unreliable
Provides three capability fallback tiers—real GPU, software GPU, and no WebGL—each with a corresponding visual fallback
Content is driven by data files under src/data, allowing replacement of profile, skills, 3D logos, and social links
Template Details
This is a personal portfolio template with a space visual theme, originally used to showcase a senior data engineer's experience and projects. The page organizes content into sections: Origin, Craft, Missions, Flight Log, Awards, and Transmission, each floating as a glass panel over a deep-space scene. The background includes a particle pipeline network, starfield, and comets, and extrudes product logos such as BigQuery, Vertex AI, Terraform, Google Cloud, Python, and Composer into 3D models, randomly displaying three of them on each visit. The hero section is a draggable, rotatable 3D rendering of a GCP data pipeline, with particles flowing along glowing pipes, returning to its original position when released.
Technically, the project is built with Vite, the interface is composed of React components, and the 3D parts are based on Three.js and @react-three/fiber. The entire site uses only two WebGL contexts: one background canvas plus one shared overlay canvas, rendering the pipeline and each project stage through scissored drei <View>. The project provides a glassmorphism approach called FrostGL: on Windows/Linux GPU configurations where backdrop-filter is unreliable, it uses WebGL to apply Gaussian blur to the background and composites it in real time according to the rounded rectangles of the glass panels in the DOM. The capability fallback path is: real GPU uses native blur or FrostGL, software GPU uses CSS frosted surface, and no WebGL uses a CSS starfield and a designed DOM fallback.
Content and code are separated: profile, story, experience, projects, and awards are in src/data/portfolio.js; skills and brand logos are in src/data/skills.js; the floating 3D logo pool is in src/data/logos3d.js; contact information and social icons are in src/data/socials.js. The project is an installable PWA, supports offline use, uses self-hosted fonts, and uses the VJ monogram as the app icon. The build output is static files under dist/, deployable to any static host; on Vercel, select the Vite preset, use the build command npm run build, set the output directory to dist, and pushing to master will deploy automatically.
Usage limitations: the MIT license covers the code, and the README explicitly states that personal photos, resume, and the VJ logo are not covered by the license; third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses. External services such as domains and hosting may incur separate charges.
ViteReactPortfolio
Is it right for your project?
Use Cases
- Data engineers or backend developers building a personal portfolio to showcase projects, experience, and skills
- A showcase website that needs 3D visuals and a glassmorphism interface, with usable fallbacks across different GPU environments
- As a React + Three.js learning reference for understanding dual WebGL contexts and drei View usage
- Providing an installable, offline-capable personal site as a PWA
Suitable For
- Frontend developers familiar with React and Vite who can modify data files and components
- Individuals who want to maintain portfolio content through data files rather than page markup
- Users who need static deployment to Vercel or other static hosting platforms
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After installing dependencies, run npm run dev to start the local development server, and npm run build to generate the static output in dist/
- 2
Modify src/data/portfolio.js, skills.js, logos3d.js, and socials.js to replace the site content
- 3
Use ?frostgl=1 or ?frostgl=0 to force the WebGL frosted effect on or off; the console outputs webgl, frostgl, and backdrop status
- 4
When deploying to Vercel, select the Vite preset, use the build command npm run build, and set the output directory to dist
- 5
The MIT license does not cover personal photos, resume, or the VJ logo; when replacing assets, verify the licenses of third-party images, fonts, and icons yourself
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope applies to that version's code and does not mean external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercially use, and distribute the code of this version for free.
- 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
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
- The MIT license covers only the code; personal photos, resume, and the VJ logo are not covered, and these must not be reused when replacing assets with your own.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
https://github.com/Vijayrajdev/vijayrajck-portfolio/blob/master/LICENSEhttps://github.com/Vijayrajdev/vijayrajck-portfolio/blob/master/README.mdCode is [MIT licensed](LICENSE) — fork it as a template for your own portfolio. Personal photos, resume, and the VJ mark are excluded (see LICENSE).
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-13. 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 · 85 / 100
- Technologies
- Vite · 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-09
- Screenshot last checked
- 2026-10-13
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 Vite 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.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: 36363d7a762d0f48533a2dcc10765731335c1493529f6c72776e6d871467778d
2026-10-13T09:24:59.520Z
Source file / repository<div align="center">
<img src="public/logo.svg" width="88" alt="VJ logo" />
# VIJAY RAJ C K — PORTFOLIO
**`// INCOMING TRANSMISSION — CHENNAI, INDIA`**
*A space-themed 3D portfolio for a Senior Data Engineer.
Data platforms that build themselves — and a website that behaves like one.*
[](https://vijayrajck.vercel.app)
<img src="docs/hero.png" alt="Hero — live 3D GCP pipeline render in deep space" width="100%" />
</div>
---
## `// CHAPTER 01 — WHAT IS THIS`
A portfolio that tells a story in chapters — **Origin → Craft → Missions →
Flight Log → Awards → Transmission** — floating as glass panels over a living
deep-space scene: a particle pipeline network, starfield, comets, and real
product logos (BigQuery, Vertex AI, Terraform, Google Cloud, Python, Composer)
extruded into 3D. Three of the six logos are drawn at random on every visit.
The hero is a **live 3D render of a GCP data pipeline**, built from the actual
product marks, with event particles flowing through glowing tubes:
```
╭──────────╮
SOURCES ══▶ PUB/SUB ══▶ COMPOSER ══▶ BIGQUERY ⇄ DBT
║
╚══▶ LOOKER
```
Drag it to orbit. It snaps home when released.
<div align="center">
<img src="docs/projects.png" alt="Missions — draggable 3D project artifacts" width="100%" />
</div>
## `// CHAPTER 02 — FLIGHT SYSTEMS`
| System | What it does |
| --- | --- |
| **Two WebGL contexts, total** | One background canvas + one shared overlay canvas rendering the pipeline and all project stages as scissored drei `<View>`s — immune to browser context-loss |
| **FrostGL** | macOS-grade glassmorphism on every OS: where `backdrop-filter` can't be trusted (most Windows/Linux GPU configs), the background scene is gaussian-blurred in WebGL and composited back under each glass panel's rounded rect, tracked live from the DOM |
| **Capability ladder** | Real GPU → native blur or FrostGL · software GPU → CSS frost plate · no WebGL at all → CSS starfield + designed DOM fallbacks. Nobody sees an empty box |
| **Interactive everything** | Hover the floating logos for holo-labels, click them for a shockwave burst + a synthesized space-sparkle (Web Audio, zero files) |
| **PWA** | Installable, offline-capable, custom VJ monogram as app icon, self-hosted fonts |
<div align="center">
<img src="docs/skills.png" alt="Skills & Tools — brand-logo tiles" width="100%" />
</div>
## `// CHAPTER 03 — LAUNCH SEQUENCE`
```bash
npm install # fuel
npm run dev # ignition — local dev server
npm run lint # pre-flight checks (oxlint)
npm run build # orbit — production build → dist/
npm run preview # test the production build locally
```
**Debug switches:** `?frostgl=1` / `?frostgl=0` force the WebGL frost on/off.
The console prints `[vj-portfolio] webgl=… frostgl=… backdrop=…` on every load.
## `// CHAPTER 04 — MISSION CONTROL`
All content is data, not markup. Edit these and the site rebuilds itself:
| File | Controls |
| --- | --- |
| [`src/data/portfolio.js`](src/data/portfolio.js) | Profile, story, experience, projects, awards |
| [`src/data/skills.js`](src/data/skills.js) | Skill tiles + brand logos |
| [`src/data/logos3d.js`](src/data/logos3d.js) | The floating 3D logo pool |
| [`src/data/socials.js`](src/data/socials.js) | Contact / social marks |
## `// CHAPTER 05 — DEPLOYMENT`
Static output in `dist/` — deploys anywhere. On Vercel: preset **Vite**,
build `npm run build`, output `dist`. Every push to `master` auto-deploys.
---
<div align="center">
**`// END OF TRANSMISSION`**
Built with React, Three.js & Tailwind CSS ·
Made with ❤️ by [Vijay](https://www.linkedin.com/in/vijay-raj-02)
Code is [MIT licensed](LICENSE) — fork it as a template for your own portfolio.
Personal photos, resume, and the VJ mark are excluded (see LICENSE).
[](https://www.linkedin.com/in/vijay-raj-02)
[](https://github.com/Vijayrajdev)
[](mailto:[email protected])
</div>
Explore similar templates
Compare previews and descriptions within the same stack and category.
Resumify
Resumify is a browser-based resume builder built with React, TypeScript, and Vite.
Vite · Portfolio
showlit
Showlit is a personal website template built with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui.
Vite · Portfolio
folium
A developer portfolio template built with Vite, React, TypeScript, and Tailwind CSS.
Vite · Portfolio
kurizu-discord
A personal portfolio website built with React and Vite that mimics the Discord desktop app, organizing projects, skills, and experience into customizable channels, threads, a member list, and emoji reactions.
Vite · Portfolio
about-me-personal-portfolio-website-template
AboutMe is a free personal website template built with Bootstrap and Vite, released under the MIT license. It provides a single-page index.html with organized src directories for images, JavaScript, and SCSS, along with npm scripts for development and build.
Vite · Portfolio
HackFolio
HackFolio is a hacker-style personal portfolio template for ethical hackers, penetration testers, bug bounty hunters, red teamers, and cybersecurity professionals.
Vite · Portfolio