Dark/light theme switching with particle animation background
HTMLPortfolio
01_portfolio_v2 — HTML Portfolio Template
By affan675
A personal portfolio website template built with HTML, CSS, and JavaScript, featuring theme switching, particle animations, preloader animation, custom cursor, custom right-click menu, and project showcase and contact pages.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Author preview
Author-provided preview
Preview provided in the project README.
One original preview is available. Open the full image to inspect the design.
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-13View source
What stands out
A quick read of the recorded project description.
Page preloader animation and responsive custom cursor
Custom right-click menu and click sound effects and other interactive details
Multiple page sections including project showcase, about, contact, and development report
Pure HTML/CSS/JavaScript implementation without build tools
Template Details
This template is the second version of author Affan Adil's personal portfolio website, built with vanilla HTML, CSS, and JavaScript without relying on front-end frameworks. The page structure includes a home Hero section, project showcase, about, contact, and development report sections, suitable for direct replacement of text and images to use as a personal portfolio.
In terms of interaction, the template offers dark/light theme switching, particle animation background, page preloader animation, responsive custom cursor, custom right-click menu, click sound effects, and tab visibility detection. The repository README also lists an achievement system and project metrics display, but the specific data sources and implementation details need to be confirmed by checking the source code.
Usage limitations: The template is a static HTML site without backend, database, or form submission logic; the contact section only provides email and GitHub links. The licensing of third-party assets such as demo images, fonts, and icons must be checked separately and cannot be judged solely based on the code's MIT license.
HTMLPortfolio
Is it right for your project?
Use Cases
- Personal developers building a static portfolio website
- Front-end learners studying the implementation of vanilla JavaScript interaction effects
- Showcase sites that need quick content replacement and deployment to GitHub Pages
Suitable For
- Developers who want to showcase projects and personal information with pure static pages
- Front-end learners who want to study theme switching, particle animations, and custom cursor implementations
- Individual users who need a lightweight, framework-free portfolio template
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning or downloading the repository, open the HTML file directly in a browser to preview, or deploy to any static hosting service
- 2
Replace placeholder content such as name, bio, project entries, email, and social links in the pages
- 3
Third-party assets such as demo screenshots, fonts, and icons must be checked under their respective licenses before use
- 4
The contact form does not include backend submission logic; if you need to collect information, you must integrate an external service yourself
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 under their respective licenses and cannot be judged solely based on the code's MIT license.
- External services such as domain, hosting, database, payment, or AI may incur additional charges.
View Original Text Basis
https://github.com/affan675/01_portfolio_v2/blob/main/LICENSEhttps://github.com/affan675/01_portfolio_v2/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
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-06-23
- 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: 22aac6da5cf42b12859f7a87776b57c92b4cf6cb1807aced1a5ffd25b9bb308d
2026-10-13T08:10:57.302Z
Source file / repository<div align="center"> # 👋 Affan Adil ### Full-Stack Developer & Digital Polymath *Logic over luck. Discipline over motivation.* [Portfolio](https://affan675.github.io/01_portfolio_v2/projects.html) • [Wakatime](https://wakatime.com/@affan675) • [Email](mailto:[email protected]) </div> --- ## 🚀 About Me I'm a **14-year-old full-stack developer and builder** passionate about creating elegant, functional web experiences. I specialize in front-end development with a strong foundation in web standards, design systems, and modern tooling. My approach combines technical precision with creative problem-solving. **What drives me:** - Building products that matter - Writing clean, maintainable code - Exploring emerging technologies - Teaching others what I've learned --- ## 💻 Tech Stack ### Languages & Frameworks     ### Tools & Platforms     --- ## 📈 GitHub Analytics <div align="center"> [](https://github.com/affan675) </div> --- ## 🎨 Featured Projects ### Portfolio v2 A modern, responsive personal portfolio website with theme switching, particle animations, and a comprehensive project showcase. - **Stack:** HTML • CSS • JavaScript - **Features:** Dark/Light theme, smooth animations, responsive design - [View Repository](https://github.com/affan675/portfolio-v2) --- ## 🎪 Website Features 1. **Preloader** – Smooth loading animation before content appears 2. **Custom Cursor** – Interactive cursor design that responds to elements 3. **Tab Toggle** – Seamless visibility detection when switching tabs 4. **Custom Right-Click Menu** – Unique context menu experience 5. **Achievements** – Dynamic achievement system with visual display 6. **Click Sound Effects** – Auditory feedback for user interactions --- ## 📸 Screenshots <div align="center"> ### Tech Desktop Frame  *Modern tech-inspired desktop mockup view* ### Home Page  *Clean, modern landing page with hero section* ### Dark Mode  *Seamless dark theme implementation* ### Projects Showcase  *Interactive project gallery with descriptions* ### About Section  *Detailed information and skills overview* ### Contact Section  *Easy connection and outreach options* ### Development Report  *Project metrics and development insights* ### Loader Animation  *Custom preloader animation* </div> --- ## ✨ Key Skills - **Frontend Development:** Responsive Design, CSS Animations, JavaScript DOM Manipulation - **Web Standards:** Semantic HTML, Accessibility (a11y), SEO Optimization - **Tools & Workflow:** Git/GitHub, VS Code, Browser DevTools - **Problem Solving:** Algorithm Design, Data Structures, Debugging - **Design:** UI/UX Principles, Design Systems, Color Theory --- ## 🎯 Current Focus - Building more complex web applications - Mastering frontend frameworks (React/Vue) - Contributing to open-source projects - Learning backend technologies --- ## 📧 Let's Connect I'm always interested in collaborating on interesting projects or discussing web development best practices. - **GitHub:** [@affan675](https://github.com/affan675) - **Email:** [[email protected]](mailto:[email protected]) --- <div align="center"> ### "Build things that matter. Code that lasts." *Made with ❤️ by Affan Adil* </div>
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