srikanta2000/awesome-demo-portfolio

★ 20JavaScriptAudience · designerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((awesome-demo-portfolio))
    Portfolio sections
      Animated hero typing
      Filterable project cards
      Skills progress bars
      Contact form
    Dashboard widgets
      Live clock
      Bar and donut charts
      Weather display
      Task tracker
    Tech used
      Canvas API charts
      IntersectionObserver
      localStorage tasks
    Deploy
      GitHub Pages workflow
      No build step

mindmap root((awesome-demo-portfolio)) Portfolio sections Animated hero typing Filterable project cards Skills progress bars Contact form Dashboard widgets Live clock Bar and donut charts Weather display Task tracker Tech used Canvas API charts IntersectionObserver localStorage tasks Deploy GitHub Pages workflow No build step

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Clone and swap in your own projects and skills to launch a personal portfolio website in under an hour

USE CASE 2

Study how to draw animated bar charts and donut charts in the browser using the Canvas API without any library

USE CASE 3

Add an interactive task tracker with localStorage persistence to any existing static HTML page by copying the relevant section

Tech stack

HTMLCSSJavaScriptCanvas APIGitHub Pages

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose including commercial projects, just keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1

I cloned srikanta2000/awesome-demo-portfolio. Walk me through customizing the project cards section so it shows my own GitHub projects with live star counts fetched from the GitHub API.

Prompt 2

Show me how the particle animation in awesome-demo-portfolio works using the Canvas API, and help me change the colors to match my brand palette.

Prompt 3

I want to add a dark-mode toggle to awesome-demo-portfolio that saves the user preference to localStorage. Write the JavaScript and CSS needed.

Prompt 4

Explain how the IntersectionObserver in awesome-demo-portfolio triggers the skill-bar animations when they scroll into view, and show me how to add the same effect to a new section.

Open on GitHub → Explain another repo

← srikanta2000 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.