简体中文

Spatialfolio — Interactive Academic Portfolio

A cinematic, interactive academic portfolio template for researchers who want their website to explain a research system, not merely reproduce a CV.

View Qinfeng Zhu's live research portfolio ↗
_{The production reference behind Spatialfolio · spatial intelligence, 3D vision, remote sensing and panoramic perception}

Customization guide · Codex visual guide · 中文说明

The live reference is Qinfeng Zhu's production portfolio. This repository ships fictional sample content so you can safely replace it with your own work.

Why Spatialfolio

• Interactive Canvas hero with four responsive sensing modes and pointer/tap interactions.
• Connected research atlas driven by one structured JSON file.
• Searchable publication library with year/type filters and one-click BibTeX copying.
• Project index and long-form project pages for methods, datasets and research maps.
• Command palette for fast search across pages, topics, projects and papers.
• Zero-build deployment: semantic HTML, custom CSS and vanilla JavaScript work directly on GitHub Pages.
• Responsive and considerate: keyboard access, meaningful fallback content and reduced-motion support are built in.
• Designed for adaptation: replace the visual field with a Codex-generated scene for your discipline.

Preview

Research directions with original scientific illustrations	Editorial featured publications with integrated figures
Project stories for methods, datasets and research maps	A full-screen explorer with discipline-specific sensing modes

Quick start

1. Click Use this template on GitHub.
2. Name the new repository yourusername.github.io for a user site, or choose any name for a project site.
3. Replace the identity placeholders in the HTML files and update assets/data/research.json.
4. In Settings → Pages, deploy from your default branch and repository root.
5. Run npm run validate before publishing. No package installation is required.

Local preview:

npm run serve

Open http://127.0.0.1:4173/.

Customize the content

What	Where
Name, biography, contact links, SEO metadata	HTML files in /, research/, publications/, projects/, and explorer/
Research areas, papers, projects and news	assets/data/research.json
Homepage editorial selection	index.html
Colors, typography and layouts	assets/css/cosmic.css and assets/css/subpages.css
Interactive Canvas scenes	assets/js/spatial-world.js
Research illustrations	assets/images/directions/ and assets/images/publications/

The detailed checklist in docs/CUSTOMIZE.md covers identity replacement, publication metadata, project pages, SEO, accessibility and deployment.

Make the interaction belong to your research

The included point-cloud, Earth-observation, spherical and embodied-AI modes are examples—not a visual identity you must keep.

Ask Codex to study your research concepts and redesign assets/js/spatial-world.js while preserving its public interface and accessibility constraints. The guide includes ready-to-use briefs for:

• world models and autonomous systems;
• medical image segmentation and volumetric uncertainty;
• condensed-matter physics, lattices and spin textures;
• remote sensing, robotics and multimodal scientific data.

See docs/CODEX_VISUALS.md.

Attribution requirement

Public websites built substantially from Spatialfolio must keep a visible footer credit linking to this repository. The template already includes:

<a href="https://github.com/zhuqinfeng1999/interactive-academic-portfolio">
  Built with Spatialfolio · View the source on GitHub ↗
</a>

The included credit is a compact GitHub provenance card: visible enough to make the source discoverable, but visually subordinate to the portfolio itself. You may restyle or reword it, but the source link must remain readable and accessible. See LICENSE for the complete terms.

Project structure

.
├── index.html                     # Homepage
├── research/                     # Interactive research atlas
├── publications/                 # Searchable publication library
├── projects/                     # Project index and detail pages
├── explorer/                     # Full-screen interactive scene
├── assets/
│   ├── css/                      # Visual system and responsive layouts
│   ├── data/research.json        # Shared structured research content
│   ├── images/                   # Original SVG example visuals
│   └── js/                       # UI, atlas, library and Canvas engine
├── docs/                         # English and Chinese customization guides
└── scripts/                      # Dependency-free preview and validation

Validation

npm run validate

The validator checks JSON integrity, internal assets and routes, filename case, duplicate HTML IDs, publication/domain relationships and the required attribution link.

Repository discoverability

Recommended GitHub About text:

A cinematic, interactive academic portfolio template for researchers, with live Canvas scenes, a research atlas, searchable publications and zero-build GitHub Pages deployment.

Recommended topics:

academic-website · academic-portfolio · portfolio-template · researcher-portfolio · github-pages · interactive-website · canvas-animation · research-website · vanilla-javascript · non-commercial

Contributing

Bug fixes, accessibility improvements and discipline-specific visual modes are welcome. Please read CONTRIBUTING.md before opening a pull request.

License

Spatialfolio is released under the Spatialfolio Non-Commercial Attribution License 1.0. Personal, academic, educational, research, charitable, and nonprofit use is permitted with attribution. Commercial use—including paid website work, resale, commercial product integration, and company marketing—requires prior written permission from Qinfeng Zhu.

Created by Qinfeng Zhu.