A 3D wireframe sphere rendered with Three.js in the hero section, responding to mouse movement
HTMLPortfolio
Personal-Porfolio — HTML Portfolio Template
By WanadeBotman
A personal portfolio page template built with HTML5, CSS3, and JavaScript, using Three.js to render a 3D wireframe sphere, with a Canvas particle background, light/dark theme switching, and an EmailJS contact form.
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-02View source
What stands out
A quick read of the recorded project description.
A lightweight particle background based on the HTML5 Canvas API
Light/dark theme switching, with the selected state persisted via localStorage
Scroll progress bar, typing animation, and Intersection Observer section transitions
Mobile-first responsive layout built with CSS Grid and Flexbox
Contact form integrated with EmailJS for sending messages
Template Details
This is a purely static personal portfolio page. The repository contains only three files: index.html, style.css, and script.js. Open index.html directly in a browser to view it. The page is aimed at front-end developers showcasing personal skills and work. The hero section uses Three.js to draw a 3D wireframe sphere that responds to mouse movement, and the background consists of a particle system based on the HTML5 Canvas API.
Interaction and visual features include: light/dark theme switching with the choice remembered via localStorage; a scroll progress bar; a typing animation for the professional role; section entrance transitions implemented with the Intersection Observer API; and a mobile-first responsive layout using CSS Grid and Flexbox. The contact form integrates EmailJS to send messages, and icons use Unicons.
Usage limitations: The project has no build step or dependency management files, and all logic is concentrated in a single script.js. Three.js, Unicons, and EmailJS are external dependencies; you must verify how they are included and whether they are available. EmailJS requires configuring your own service and template parameters to actually send emails. The repository is licensed under Apache-2.0, allowing free use, modification, and distribution, but third-party assets such as demo images, fonts, and icons in the page must be checked separately for licensing.
HTMLPortfolio
Is it right for your project?
Use Cases
- Front-end developers building a personal portfolio and resume showcase page
- As an introductory reference page for Three.js and Canvas particle effects
- For practicing light/dark theme switching and localStorage state persistence
- Deploying as a purely static site to GitHub Pages or other static hosting
Suitable For
- Developers with basic HTML/CSS/JavaScript knowledge who want to quickly launch a personal homepage
- Freelancers or job seekers who need to showcase skills, projects, and contact information
- Front-end learners who want to reference how 3D and particle backgrounds are implemented
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, open index.html directly in a browser; no build or dependency installation is required
- 2
The repository structure consists of three files: index.html, style.css, and script.js; modifications are concentrated in script.js
- 3
The contact form depends on EmailJS; you must register and replace the service ID, template ID, public key, and other configuration
- 4
External resources such as Three.js and Unicons need their inclusion method confirmed; they may fail to load in an offline environment
- 5
Before use, replace the personal information, social links, and demo images in the page, and verify the licensing of third-party assets
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version from a public repository under the Apache-2.0 license; 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
- Free use, modification, commercial use, and distribution are permitted; the Apache-2.0 license must be included when distributing.
- Modified files must carry prominent notices of changes, and relevant copyright, patent, trademark, and attribution notices must be retained.
- If the original project includes a NOTICE file, applicable attribution notices from it must be retained when distributing derivative works.
- The license includes an applicable contributor patent grant; initiating patent litigation as described in the license terminates that patent grant, and no trademark rights are granted.
- 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
- The contact form depends on the third-party service EmailJS; you must register an account and configure the service ID, template ID, public key, and other parameters, otherwise the form cannot actually send emails.
- The 3D wireframe sphere depends on the external library Three.js; its inclusion method (CDN or local file) must be confirmed, and it may fail to load in an offline environment.
- Icons use the external resource Unicons; you must verify its inclusion method and availability.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; the code's Apache-2.0 license alone cannot be used to judge them.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
no-charge, royalty-free, irrevocable copyright license
Original License Text
Fully functional contact form integrated with **EmailJS** for direct client communication.
Original README
* **3D Graphics**: Three.js
Original README
https://github.com/WanadeBotman/Personal-Porfolio/blob/main/LICENSEhttps://github.com/WanadeBotman/Personal-Porfolio/blob/main/README.md* **Icons**: Unicons
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. 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-01-18
- Screenshot last checked
- 2026-10-02
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.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: d233d97b45b4aaecdaa36e29c870598c6a8a0b2c4fb61aec44e4a0eccfd482a0
2026-10-02T08:33:54.376Z
Source file / repository# Wanade Botman | Front-End Developer Portfolio 🚀 --- <img width="1917" height="902" alt="Portfolio" src="https://github.com/user-attachments/assets/0d2307b6-f2d2-469b-bf7e-a865b62a6c24" /> A high-performance, interactive portfolio website designed to showcase modern web development skills. This project features a unique 3D interactive interface, dynamic animations, and a seamless user experience across all devices. ## 🔗 Live Demo Check out the live version of this project here: **[View Live Demo](https://wanadebotman.github.io/Personal-Porfolio/)** ## ✨ Key Features * **Interactive 3D Elements**: Uses **Three.js** to render a dynamic 3D wireframe sphere in the hero section that responds to mouse movement. * **Custom Particle System**: A lightweight, high-performance background particle engine built using the **HTML5 Canvas API**. * **Dynamic Theme Switching**: Seamless toggle between **Light and Dark modes** with persistent state using `localStorage`. * **Modern UI/UX**: Includes a scroll progress bar, custom typing animations for professional roles, and smooth section transitions using **Intersection Observer API**. * **Responsive Architecture**: Built with a mobile-first approach using **CSS Grid and Flexbox** to ensure compatibility across all screen sizes. * **Contact Integration**: Fully functional contact form integrated with **EmailJS** for direct client communication. ## 🛠️ Tech Stack * **Core**: HTML5, CSS3, JavaScript (ES6+) * **3D Graphics**: Three.js * **Icons**: Unicons * **Form Handling**: EmailJS * **Animations**: CSS Keyframes & JavaScript-driven particle logic ## 🚀 Getting Started To run this project locally, follow these steps: 1. **Clone the repository:** ```bash git clone https://github.com/WanadeBotman/portfolio.git ``` 2. **Navigate to the project folder:** ```bash cd portfolio ``` 3. **Open in Browser:** Simply open `index.html` in your preferred web browser. ## 📂 Project Structure ```text ├── index.html # Main structure and layout ├── style.css # Custom properties, glassmorphism, and responsive styles └── script.js # Three.js logic, particle engine, and theme management ``` ## 👤 About the Author I am a passionate Front-End Developer with an **IT Diploma in Software Development**. I specialize in transforming complex ideas into elegant, high-performance web experiences. * **GitHub**: [@WanadeBotman](https://github.com/WanadeBotman) * **LinkedIn**: [Wanade Botman](https://linkedin.com/in/https://www.linkedin.com/in/wanade-botman/) * **Instagram**: [@sharkcxde_](https://www.google.com/search?q=https://instagram.com/sharkcxde_) --- *Designed & Built with ❤️ by sharkcxde*
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