awesome-demo-portfolio
Modern Portfolio & Interactive Dashboard - Built with HTML/CSS/JS
A ready-to-use personal portfolio template built with plain HTML, CSS, and JavaScript, no frameworks needed, featuring animated sections, interactive charts, a task tracker, and one-click deploy to GitHub Pages.
Awesome Demo Portfolio is a single-page personal portfolio website built with plain HTML, CSS, and JavaScript, with no frameworks or external libraries. It is designed as a showcase template with a dark color scheme and neon accent colors, and it includes both a traditional portfolio layout and a small interactive dashboard.
The portfolio side covers the sections you would expect: an animated hero with a typing effect, a project gallery with filterable cards, a skills section with animated progress bars that activate as you scroll, and a contact form with client-side validation. A particle animation plays in the background of the hero and responds to mouse movement.
The dashboard section adds several interactive widgets. There is a live clock showing the current time and date, an animated bar chart for weekly activity data, a donut chart for skills distribution, a simulated weather display, a browser and device information panel, and animated counters for key statistics. A task tracker is also included: it supports creating, editing, and deleting tasks, stores them in the browser's localStorage so they survive page refreshes, and lets you filter by priority.
The whole thing runs directly in a browser with no build step. You can clone it and open the HTML file locally, or serve it with any simple static file server. It is deployed automatically to GitHub Pages via a workflow included in the repository.
The project uses the Canvas API for the particle animation and the charts, the IntersectionObserver API to trigger scroll animations, and Google Fonts for typography. It includes accessibility features such as ARIA attributes, keyboard navigation support, and respect for the user's reduced-motion preference. The license is MIT.
Where it fits
- Clone and swap in your own projects and skills to launch a personal portfolio website in under an hour
- Study how to draw animated bar charts and donut charts in the browser using the Canvas API without any library
- Add an interactive task tracker with localStorage persistence to any existing static HTML page by copying the relevant section