Matrix-themed animated loading screen and terminal-style visuals
portfolio-website — HTML Portfolio Template
By ak23bar
Source code for Akbar Aman's personal portfolio website, built with HTML, CSS, and vanilla JavaScript, themed around The Matrix, featuring a terminal-style interactive interface and responsive layout.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
Simulated command-line interface (CLI) for visitor interaction
Quick actions: download resume, back to top, open terminal
CSS split into global, component, and responsive layers for modular adjustments
Provides local Python static server preview method and Cloudflare Pages deployment instructions
Template Details
This is a personal portfolio website for a computer engineer, created by Akbar Aman. The page uses a Matrix theme as its visual foundation, implemented with HTML5, CSS3, and vanilla JavaScript. It includes an animated loading screen, simulated terminal command-line interaction, quick actions (download resume, back to top, open terminal), and mobile-adapted navigation and layout.
The project structure is clear: index.html is the main entry point; assets/css is split into global styles, component styles, and responsive styles; assets/js is divided into animation, main logic, and modal components; assets/files stores the resume PDF and avatar image. The README explains that you can preview locally using Python 3 to start a static server, and recommends deploying via Cloudflare Pages with no build command required.
Usage limitations: This project is a personal portfolio template, and its content is tied to personal data; you must replace the resume, avatar, and copy yourself. The README mentions attempts at accessibility such as color contrast, terminal keyboard navigation, and semantic HTML, but does not provide a full compliance statement. Third-party assets (fonts, icons, images) must be checked separately under their respective licenses.
Is it right for your project?
Use Cases
- As an online portfolio for individual developers or computer engineers
- For a static site showcasing resume downloads, skills, and project information
- As a reference project for learning vanilla JavaScript animations and terminal-style interactions
- Deploying to static hosting platforms such as Cloudflare Pages
Suitable For
- Developers who need a Matrix-style personal homepage
- Those who want to build a portfolio with pure HTML/CSS/JS without build tools
- Front-end learners who want to reference terminal-style UI and loading animation implementations
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, start a local preview with python3 -m http.server 8001
- 2
Replace assets/files/Akbar_Resume.pdf and neo.png with your own materials
- 3
Modify personal information, skills, and section content in index.html
- 4
When deploying to Cloudflare Pages, use the default static site settings with no build command
- 5
Third-party assets such as fonts and icons must be checked under their respective licenses before use
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 applies to that version's code and does not imply that 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 liability limitations 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; they cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional fees.
- The resume PDF in the template is the author's personal material; users must replace it with their own resume file and cannot directly reuse the original author's resume content.
- Page content is tied to the author's personal information; you must modify the personal data, skills, and section copy in index.html yourself.
- The avatar image and resume are the author's personal assets; the README does not state their license, so you must confirm or replace them before use.
- Fonts are from Google Fonts and must be used under their respective license terms; they are not covered by this project's code license.
- Icons use Font Awesome and must follow its own license (including differences between free and commercial versions); they are not granted together with this project's code license.
- Deployment relies on the external service Cloudflare Pages; you must register an account yourself and comply with its terms of service and possible fee policies.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Replace `Akbar_Resume.pdf` in `assets/files/` with your own.
Original README
Edit `index.html` to update profile info, skills, and sections.
Original README
**Images**: Profile image (`neo.png`) and downloadable resume.
Original README
**Fonts**: Uses [Fira Code](https://fonts.google.com/specimen/Fira+Code) and [Share Tech Mono](https://fonts.google.com/specimen/Share+Tech+Mono).
Original README
**Icons**: [Font Awesome](https://fontawesome.com/) for UI icons.
Original README
https://github.com/ak23bar/portfolio-website/blob/main/LICENSEhttps://github.com/ak23bar/portfolio-website/blob/main/README.mdThis site is deployed using **Cloudflare Pages** for fast, secure, and global delivery.
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 · 83 / 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-16
- 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 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: 39e820a477b5d21052df005d8f168bf2e22a0e9b34dbb272e25bf1041921b19c
2026-10-13T04:02:35.601Z
Source file / repository# Akbar Aman Portfolio Website Welcome to the source code for [Akbar Aman’s Portfolio Website](http://localhost:8001/), a modern, interactive showcase for a Computer Engineer. This site is designed with a Matrix-inspired theme, featuring a terminal CLI, smooth animations, and responsive layouts. --- ## Live Demo & Deployment This site is deployed using **Cloudflare Pages** for fast, secure, and global delivery. To deploy your own version: 1. Fork or clone this repository. 2. Push your code to a public GitHub repository. 3. Go to [Cloudflare Pages](https://pages.cloudflare.com/) and create a new project, connecting your GitHub repo. 4. Use the default build settings for static sites (no build command required). 5. Your site will be live at `https://<your-project>.pages.dev`. --- ## Technologies Used - **HTML5** & **CSS3** (custom, modular, and responsive) - **JavaScript** (vanilla, for interactivity and animations) - **Font Awesome** (icon library) - **Google Fonts** (Fira Code, Share Tech Mono) - **Cloudflare Pages** (hosting) --- ## Browser Compatibility Tested on latest versions of Chrome, Firefox, Edge, and Safari. Fully responsive and mobile-friendly. --- ## Accessibility Efforts have been made to ensure: - Sufficient color contrast - Keyboard navigation for terminal CLI - Semantic HTML structure Further improvements are welcome! --- ## Screenshots  _Matrix-style loading screen from the portfolio website._ --- ## Contributing Contributions, suggestions, and improvements are welcome! 1. Fork the repository 2. Create a new branch (`git checkout -b feature-name`) 3. Commit your changes 4. Open a pull request Please follow best practices and keep code modular and well-documented. --- ## Table of Contents - [Features](#features) - [Project Structure](#project-structure) - [Installation & Usage](#installation--usage) - [Customization](#customization) - [Assets](#assets) - [License](#license) - [Contact](#contact) --- ## Features - **Matrix-style Loading Screen**: Animated intro with terminal-like messages. - **Interactive Terminal CLI**: Simulated command-line interface for user interaction. - **Quick Actions**: Download resume, scroll to top, open terminal. - **Responsive Design**: Mobile-friendly layouts and navigation. - **Modern UI**: Custom fonts, icons, and visual effects. - **Downloadable Resume**: PDF available in the assets. --- ## Project Structure ``` index.html # Main HTML file assets/ css/ styles.css # Global styles components.css # UI components (nav, buttons, etc.) responsive.css # Mobile responsiveness styles_new.css # (Alternate/experimental styles) components_new.css # (Alternate/experimental components) responsive_new.css # (Alternate/experimental responsive) files/ Akbar_Resume.pdf # Downloadable resume neo.png # Profile image js/ animations.js # Matrix rain, loading, and other animations main.js # Main site logic, event handlers modals.js # Modal popups and overlays LICENSE # License information README.md # Project documentation ``` --- ## Installation & Usage 1. **Clone the repository**: ```bash git clone https://github.com/ak23bar/portfolio-website.git cd portfolio-website ``` 2. **Start a local server** (Python 3): ```bash python3 -m http.server 8001 ``` Visit [http://localhost:8001/](http://localhost:8001/) in your browser. --- ## Customization - **Content**: Edit `index.html` to update profile info, skills, and sections. - **Styles**: Modify CSS files in `assets/css/` for colors, fonts, and layout. - **Scripts**: Enhance interactivity via JS files in `assets/js/`. - **Resume**: Replace `Akbar_Resume.pdf` in `assets/files/` with your own. --- ## Assets - **Fonts**: Uses [Fira Code](https://fonts.google.com/specimen/Fira+Code) and [Share Tech Mono](https://fonts.google.com/specimen/Share+Tech+Mono). - **Icons**: [Font Awesome](https://fontawesome.com/) for UI icons. - **Images**: Profile image (`neo.png`) and downloadable resume. --- ## License See `LICENSE` for details. --- ## Professional Notes - This portfolio is designed for high performance and modern aesthetics. - All code is original and modular for easy maintenance. - For deployment, Cloudflare Pages is recommended for its speed and reliability. --- --- ## Contact For questions or collaboration, reach out via [LinkedIn](https://linkedin.com/in/akbaraman) or email (see website). --- Feel free to further personalize this README to match your professional style or add more technical details! Let me know if you want to include screenshots, deployment instructions, or anything else.
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
