The default mode provides pannable, zoomable SVG node-tree navigation; clicking a node expands sub-files and opens a holographic content panel.
HTMLPortfolio
Portfolio-Template-28 — HTML Portfolio Template
By Muhammad112233-creator
NOVA.SYS is a sci-fi HUD-style personal portfolio static website template written in HTML, CSS, and vanilla JavaScript, with no build step or backend, and includes two browsing modes: node tree and cockpit.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-15View source
What stands out
A quick read of the recorded project description.
Pro Mode is located in /pro-mode/ and includes a warp-speed starfield, floating pods, a console overlay, and keyboard flight controls.
The boot screen includes a typing terminal log, progress bar, audio calibration panel, language preselection, and skip button.
Three ambient tracks are generated with a Web Audio synthesizer without audio files, and playback, pause, previous, next, and a progress bar are provided.
Built-in English, Turkish, and German; switching saves to localStorage, and node-tree and panel content switch in sync.
Provides semantic screen-reader summaries, skip links, ARIA roles and labels, keyboard navigation, and prefers-reduced-motion support.
Template Details
The template uses a spaceship interface as its visual theme and offers two browsing experiences: the default mode is a pannable, zoomable SVG node tree where clicking a node expands sub-files and opens a holographic panel; Pro Mode is located in the /pro-mode/ directory and uses a pseudo-3D cockpit, warp-speed starfield, and floating pods to display the same content. The boot screen includes terminal logs, a progress bar, an audio calibration panel, language preselection, and a skip button. Audio is generated by a Web Audio synthesizer with no audio files, providing three ambient tracks and playback controls. The interface supports English, Turkish, and German, with the language selection saved in localStorage. The project structure is simple, with content centralized in arrays such as I18N, PROJECTS, and SKILL_FIELDS in script.js for easy replacement. The README does not state the template's production readiness, performance, or specific browser compatibility version ranges; it only lists Chrome, Edge, Firefox, Safari, iOS Safari, and Android Chrome for the current and previous major versions.
HTMLPortfolio
Is it right for your project?
Use Cases
- Quickly building a personal portfolio static page with a sci-fi visual style.
- Wishing to organize and present projects, skills, education, and contact information in non-traditional ways such as a node tree or cockpit.
- Needing to host the portfolio directly on static hosting services such as GitHub Pages without build tools or a backend.
- Wanting the template to include multilingual switching, generative background music, and accessibility support to reduce additional integration work.
Suitable For
- Individual developers with basic HTML, CSS, and JavaScript editing skills who are willing to modify data arrays directly in the source code.
- Users who prefer a static website approach with no framework and no build step, and who accept previewing via a local server.
- Users who need a multilingual portfolio and do not mind manually maintaining translations in the I18N object.
- Users who wish to freely modify, redesign, and publish it as a personal portfolio under the MIT license.
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
For local preview, use python3 -m http.server 8000, or open index.html via Live Server in VS Code; you can also double-click index.html directly, but the README recommends using a local server to ensure fonts and paths work correctly.
- 2
To deploy, drag the entire folder to GitHub and enable Pages; the README calls this the complete deployment process.
- 3
Content modifications are centralized in script.js: search for AYAAN MALIK and hero.sub to change the name and tagline, modify the introduction paragraph in the I18N object, modify the six projects in the PROJECTS array, and modify the skill bars in the SKILL_FIELDS array.
- 4
Social links must be replaced by searching for github.com/ and linkedin.com/ in index.html and script.js; the email is changed in one place each in Holo.contact() and the JSON-LD in index.html.
- 5
The accent color can be adjusted in the :root block at the top of styles.css, the music mood can be modified in the TRACKS array in script.js, and the avatar and project images can be replaced by swapping files with the same names in the assets/ directory.
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean 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
- 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 domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Compiled by DeepSeek based on repository license and README ·2026-10-15. 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 · 80 / 100
- Technologies
- HTML
- 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-10-15
- Screenshot last checked
- 2026-10-15
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 HTML 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: codex-user-requested-batch-review-20261017 · 2026-10-16
Inspect the recorded source material
SHA-256: 8e6d8300c3901f9017da5671ac3aba2a995dc7a456093c0d987d7ae8cc596217
2026-10-15T15:32:45.047Z
Source file / repository<div align="center"> <img src="readme-assets/header.svg" alt="NOVA.SYS — HUD Portfolio Template" width="100%"> <img src="readme-assets/typing.svg" alt="git clone curiosity.git --depth=1 && ship_it" width="75%"> <br> <img src="readme-assets/badge-html.svg" alt="HTML5"> <img src="readme-assets/badge-css.svg" alt="CSS3"> <img src="readme-assets/badge-js.svg" alt="Vanilla JS"> <img src="readme-assets/badge-deps.svg" alt="Zero dependencies"> <img src="readme-assets/badge-modes.svg" alt="2 modes, 3 languages"> <img src="readme-assets/badge-license.svg" alt="MIT license"> </div> <img src="readme-assets/divider.svg" alt="" width="100%"> # 🛰️ NOVA.SYS — HUD Portfolio Template An interactive, **sci-fi HUD-style personal portfolio** that runs as a static site — no build step, no frameworks, no backend. The interface is a spaceship: boot it up, calibrate the audio, and navigate a glowing **node tree** of your life. Feeling brave? Switch to the **Pro Mode** cockpit and fly through your projects at warp speed. > ✅ **Just HTML + CSS + JS.** Drag the folder onto GitHub, flip on Pages, and your portfolio is live. That's the whole deployment pipeline. <img src="readme-assets/divider.svg" alt="" width="100%"> ## ✨ Feature Manifest | 🎯 Feature | 📖 Details | | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 🖥 **Two experiences** | **Default Mode** — interactive SVG node tree with pan & zoom camera · **Pro Mode** — pseudo-3D cockpit with warp starfield, floating pods and console overlays | | 🚀 **Cinematic boot screen** | Typed terminal log, progress bar, sweeping meteor, **audio calibration panel** with a volume test sweep, language pre-select and a `SKIP ▸` mercy button | | 🌳 **Node tree navigation** | Root avatar → section nodes → child files, animated edge drawing, glowing halos, breadcrumb HUD (`MAIN TREE / PROJECTS / …`) and a `◄ GO BACK` button | | 🛸 **Hologram panels** | Content opens in a scanlined holographic panel with a glitch-in animation — text stays selectable and copyable | | 🎛 **Generative audio engine** | Zero audio files. A Web-Audio synth plays three ambient tracks (**DEEP FIELD · ION RAIN · PULSAR DRIFT**) with play/pause/prev/next, loop progress and seek bar — plus tiny UI blips for every interaction | | 🎚 **Segmented volume widgets** | Retro block-meter volume control on the boot screen _and_ in the top-left HUD, fully draggable & keyboard accessible | | 🖱 **Custom cursor trio** | Dot + lerp ring + glowing splash trail, context-aware growth over interactive elements | | 🌌 **Three living canvas layers** | Perspective grid that scrolls toward you, constellation particles that link to your cursor, and a fading neon cursor trail — each **toggleable** from the toolbar | | 🌍 **Trilingual** | English 🇬🇧 · Türkçe 🇹🇷 · Deutsch 🇩🇪 — one-click switch, remembered in `localStorage`, including the whole node tree and panel content | | 📱 **Fully responsive** | Bottom-sheet panels on mobile, touch-friendly pods, adaptive camera zoom, coarse-pointer fallbacks | | ♿ **Built-in accessibility** | Semantic screen-reader summary, skip links, ARIA roles/labels on the tree and sliders, keyboard navigation (`Tab` / `Enter` / `Esc` / arrows), `prefers-reduced-motion` support | | 🔍 **SEO ready** | Open Graph + Twitter cards, JSON-LD `Person` schema, canonical link, social cover image included | <img src="readme-assets/divider.svg" alt="" width="100%"> ## 🖥 The Two Modes ### 1️⃣ Default Mode — _"The Node Tree"_ <img src="assets/og-cover.jpg" alt="Default mode preview" width="100%"> A full-screen SVG constellation is your sitemap. Click a node to zoom the camera in, expand child files, and open holographic dossier panels. Wheel to zoom, drag to pan, `Esc` to climb back up. ### 2️⃣ Pro Mode — _"The Cockpit"_ (`/pro-mode/`) - ☄️ **Warp starfield** on canvas with a speed slider (`WARP 1–10`) - 🛰 **Five floating pods** (About · Projects · Skills · Hobbies · Contact) drifting in pseudo-3D space with mouse parallax - 🕹 **Keyboard flight:** `◄ ►` select pod · `Enter` open · `Esc` close/eject - 🖥 Console overlays, amber HUD, targeting reticle, occasional planets — same content, different spaceship <img src="readme-assets/divider.svg" alt="" width="100%"> ## 🚀 Quick Start (local preview — 30 seconds) **Option A — Python (any OS):** ```bash cd portfolio python3 -m http.server 8000 # open http://localhost:8000 ``` **Option B — VS Code:** install the **Live Server** extension → right-click `index.html` → _Open with Live Server_. **Option C — Double-click `index.html`.** It mostly works str aight from disk since there are no fetches — but a local server is recommended for correct fonts and paths. > 💡 The generative music starts only after you press ▶ in the top-left player (browsers require a user gesture for audio — the boot calibration sets the volume). <img src="readme-assets/divider.svg" alt="" width="100%"> ## 📂 Project Structure ``` portfolio/ ├── index.html ← Default Mode (node tree) ├── styles.css ← design system + every animation ├── script.js ← boot · audio synth · canvases · tree · panels · i18n ├── pro-mode/ │ ├── index.html ← Pro Mode cockpit page │ ├── pro.css ← amber cockpit theme │ └── pro.js ← warp starfield + pods + console ├── assets/ ← images (avatar, meteor, og cover, 6 project artworks) ├── readme-assets/ ← animated SVGs used by this README ├── README.md ← you are here ├── .gitignore └── LICENSE ← MIT — make it yours ``` **Total: 25 files ~ 0.8 MB** — comfortably under GitHub's 100-file drag-and-drop limit. ✅ <img src="readme-assets/divider.svg" alt="" width="100%"> ## 🛠 Make It Yours (5-minute customization) Everything content-related lives in **one place** — no hunting through markup: | ✏️ To change… | 🔎 Where | 💡 Hint | | ----------------------- | -------------------------------------------------------------------- | ------------------------------------------------- | | **Your name / tagline** | `script.js` → search `AYAAN MALIK` & `hero.sub` | also update `<title>` + meta tags in `index.html` | | **Intro paragraphs** | `I18N` object in `script.js` → keys `about.p1–p3` | per language: `en` / `tr` / `de` | | **Projects (6)** | `PROJECTS` array in `script.js` | swap title, tags, description, image path & link | | **Skill bars** | `SKILL_FIELDS` array in `script.js` | `['Python', 90]` = label + percent | | **Education list** | `Holo.profile()` in `script.js` | edit the `edu.*` strings per language | | **Social links** | search `github.com/` & `linkedin.com/` in `index.html` + `script.js` | replace with your profiles | | **Email** | `Holo.contact()` + JSON-LD in `index.html` | one place each | | **Accent colors** | `:root` block at the top of `styles.css` | `--cyan`, `--pink`, `--yellow`… | | **Music moods** | `TRACKS` array in `script.js` | chord numbers are semitone offsets | | **Avatar & artworks** | `assets/` | keep the same filenames → zero code changes | > 🗣 **Adding a 4th language:** copy one block inside `I18N`, translate the strings, add a `<button class="tb-lang" data-lang="xx">`. Done. <img src="readme-assets/divider.svg" alt="" width="100%"> ## 🌍 Compatibility & Accessibility | ✅ | Detail | | -------- | ----------------------------------------------------------------- | | Browsers | Chrome, Edge, Firefox, Safari (current + previous major) | | Mobile | iOS Safari, Chrome on Android — panels become bottom sheets | | Motion | Respects `prefers-reduced-motion` (calms the whole universe down) | | Keyboard | Full navigation without a mouse — `Tab`, `Enter`, `Esc`, arrows | | Readers | Semantic summary of all content for screen readers & SEO crawlers | <img src="readme-assets/divider.svg" alt="" width="100%"> ## 📄 License Released under the **MIT License** — see [`LICENSE`](LICENSE). Fork it, restyle it, launch it as your own. A ⭐ on the repo is the nicest thank-you. > 🎨 All artwork in `assets/` and `readme-assets/` was generated for this template and ships with it. The sample persona **"Ayaan Malik / NOVA"** is fictional — replace it with _you_. <div align="center"> <br> <b>◈ NOVA.SYS</b> — build the weird thing. then make it useful. <br><br> <img src="readme-assets/divider.svg" alt="" width="100%"> <sub>crafted with vanilla HTML · CSS · JS — zero frameworks were harmed</sub> </div> <div align="center"> ## 🌟 Support the Project If you find this template useful, please consider giving it a star! It helps others discover the repository and supports future development. </div> <img src="readme-assets/divider.svg" alt="" width="100%">
Explore similar templates
Compare previews and descriptions within the same stack and category.
simplefolio
Simplefolio is a minimal single-page portfolio template for developers, built with HTML, Bootstrap, SCSS, and Parcel under the MIT license. It includes Hero, About, Projects, Contact, and Footer sections, with content edited in /src/index.html and theme colors controlled by two SCSS variables.
HTML · Portfolio
Freelancer
A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.
HTML · Portfolio
Resume
A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.
HTML · Portfolio
Creative
A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.
HTML · Corporate Website
Grayscale
A dark single-page Bootstrap template from Start Bootstrap for photography, events and brand storytelling, with a large hero and clearly separated sections.
HTML · Corporate Website
startbootstrap-stylish-portfolio
A one-page Bootstrap portfolio theme from Start Bootstrap with multiple content sections and an off-canvas navigation menu. Basic use means editing HTML/CSS under dist and opening index.html; advanced use relies on npm with Pug and SCSS build scripts.
HTML · Portfolio