Implemented in pure HTML5 + CSS3 + native JavaScript, with no front-end framework dependencies
HTMLPortfolio
personal-portfolio — HTML Portfolio Template
By holasoymalva
A pure HTML personal portfolio page themed around 8-bit arcade and pixel art, featuring Canvas interactions, a terminal-style resume, and an accordion timeline.
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-11View source
What stands out
A quick read of the recorded project description.
Includes a clickable 3-track railway stacking engine Canvas interaction that can derail
Runs an 8-bit pixel snake simulation in the background that chases apples and avoids the mouse
CRT green-screen terminal supports resume commands such as help, resume, stack, exp, and matrix
Accordion career timeline plays a matrix glitch decoding animation on hover or click
Uses HTML5 Canvas 2D and Web Audio API for synthesized sound effects
Template Details
This template is the personal portfolio of Martin Manriquez (@holasoymalva). The repository uses HTML as its primary technology stack, is released under the MIT license, and has a demo site at holasoymalva.com. The page is built around a retro 8-bit arcade and Notion pixel art style, using native HTML5, CSS3 custom variables and keyframes, HTML5 Canvas 2D, and the Web Audio API for interactivity, with no front-end framework dependencies.
Interactive elements include: a clickable 3-track railway stacking engine canvas that can derail, a pixel snake simulation in the background that chases apples and avoids the mouse, a Notion-style pixel avatar whose expression changes in 8 directions with the pointer, a CRT green-screen terminal that parses commands such as help, resume, stack, exp, and matrix, an accordion-style career timeline that triggers a matrix glitch decoding animation on hover or click, and an observer-based pixel mosaic scroll reveal effect.
The repository notes several cleanup actions: removing the Three.js WebGL canvas overhead, deleting over 30MB of unused media files, dropping the Sass/SCSS build process in favor of pure native CSS, and adding standard SEO tags and meta descriptions. Deployment is static hosting, published directly on GitHub Pages.
HTMLPortfolio
Is it right for your project?
Use Cases
- Building a personal portfolio homepage with a retro game atmosphere for developers or designers
- Learning to create page-level interactive effects with native Canvas and Web Audio API
- As a reference project for static sites deployed directly to GitHub Pages
- Pages that need a terminal-style resume display or an accordion timeline component
Suitable For
- Front-end developers who want to showcase personal projects and career experience
- Authors of personal sites who prefer 8-bit pixel and arcade visual styles
- Learners who want to study framework-free Canvas interaction implementations
- Users who need a lightweight portfolio template that can be directly statically hosted
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
The repository is a static HTML project and can be deployed directly to static hosting services such as GitHub Pages
- 2
Before use, retain the original author's copyright notice and the full license text in accordance with the MIT license
- 3
Third-party assets such as demo images, fonts (Space Mono, Pixelify Sans), and icons must be checked separately for their respective licenses
- 4
The page includes audio synthesis and Canvas animations, so it must be viewed in a browser that supports the Web Audio API and Canvas 2D
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license from the public repository; the free scope applies to that version's code and does not imply that external services or third-party assets are free.
Must comply with when using
- The code of this version may be used, modified, used commercially, and distributed 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.
View Original Text Basis
https://github.com/holasoymalva/personal-portfolio/blob/main/LICENSEhttps://github.com/holasoymalva/personal-portfolio/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-11. 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 · 75 / 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-09-22
- Screenshot last checked
- 2026-10-11
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: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: 308abce62af55959f1d419b501e76f75fdc6e33a5539f4406545f160c93de873
2026-10-11T16:01:19.441Z
Source file / repository# 👾 Martin Manriquez (@holasoymalva) — Personal Portfolio <img width="1511" height="862" alt="image" src="https://github.com/user-attachments/assets/faa8862b-6777-4af0-ae3c-e5412487d8fd" /> > Retro 8-Bit Arcade & Notion Pixel Art Interactive Experience [](https://holasoymalva.com/) [](https://opensource.org/licenses/MIT) Creative Senior Software Engineer & Tech Architect based in Mexico City. Building next-gen AI tools, interactive web experiences, and high-performance distributed systems. --- ## 🕹️ Interactive Features - **3-Track Railway Stack Engine** 🚂: Click-to-derail interactive physics canvas carrying the engineering toolkit with chugging mechanics and chiptune explosions. - **8-Bit Arcade Pixel Snake** 🐍: Retro background simulation where pixel snakes chase apples, grow in size, and evade the mouse cursor. - **Notion Pixel Avatar Gaze** 👀: 8-directional pointer tracking Notion-style pixel avatar changing expressions based on cursor coordinates. - **CRT Phosphor shell terminal (`~/arcade`)** 📺: Vintage green-screen console with fully parsing resume commands (`help`, `resume`, `stack`, `exp`, `matrix`). - **Interactive Accordion Timeline** 📂: Sleek career history accordion cards showcasing real-time matrix glitch text decoding animations upon mouse hover/click. - **Pixel Matrix Scroll Reveal** 🧱: Scroll assembly reveal utilizing mosaic pixel construction observers. --- ## 🛠️ Tech Stack & Toolkit - **Frontend**: Vanilla HTML5, Space Mono & Pixelify Sans typography, CSS3 custom variables & keyframes. - **Interactions**: HTML5 Canvas 2D Context, Web Audio API sound synthesis. - **Deployment**: Static hosting deployed directly on **GitHub Pages**. --- ## ⚡ Recent Cleanups & Optimizations - ✅ **Removed WebGL Bloat**: Removed heavy Three.js canvas overhead for a faster, lighter 8-bit page speed load. - ✅ **Optimized Assets**: Removed over 30MB of unused media files. - ✅ **Pure Vanilla CSS**: Cleaned Sass/SCSS build processes for clean browser-native styling. - ✅ **Modern Semantic SEO**: Standard SEO tags, meta summaries, and fast loading. --- ## 🔗 Contact & Socials - **Website**: [holasoymalva.com](https://holasoymalva.com) - **LinkedIn**: [linkedin.com/in/martin-manriquez](https://www.linkedin.com/in/martin-manriquez/) - **GitHub**: [github.com/holasoymalva](https://github.com/holasoymalva) - **Email**: [[email protected]](mailto:[email protected]) --- *Crafted with 🌮, 8-Bit Synths & Good Vibes in Mexico City.*
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