How angkon-kar/angkon-kar-portfolio works
This repository is a static personal portfolio: visitors browse profile pages, project and extension showcases, credentials, and contact options. The main discovery flow is project listing → selected project detail, with project records supplying both views. Extensions have a similar listing/detail flow, plus a browser-local setup checklist. The sampled JavaScript supports these data-driven views, certification rendering, shared interactions, mascot behavior, and contact-form submission. The README is minimal, and some page wiring is inferred from filenames rather than sampled HTML, so uncertain links are omitted.
Main entry points: script.js Site interactions · projects.html Project listing · extensions.html Extension listing · projects-data.js Project records
Components 21
Portfolio pages
- Home
index.html - Profile pages
about.html - Experience
experience.html - Achievements
achievements.html - Certifications
certifications.html - Contact
contact.html - Certificate records
certificates.js
Project showcase
- Project listing
projects.html - Project detail
project-detail.html - Project records
projects-data.js - Project detail renderer
project-detail.js
Extension showcase
- Extension listing
extensions.html - Extension detail
extension-detail.html - Extension records
extensions-data.js - Extension detail renderer
extension-detail.js
Shared interactions
- Site interactions
script.js - Interactive mascot
mascot.js - Toast notifications
toast.js - Context and shortcut guard
devtools.js
Other components
- Visitor
- EmailJS
Connections 22
- Visitor → Home: opens
- Visitor → Project listing: browses
- Visitor → Extension listing: browses
- Visitor → Certifications: views
- Visitor → Contact: contacts
- Project listing → Project detail: opens selected
- Project records → Site interactions: supplies records
- Site interactions → Project listing: renders and filters
- Project records → Project detail renderer: supplies records
- Project detail renderer → Project detail: renders selected
- Extension records → Site interactions: supplies records
- Site interactions → Extension listing: renders
- Extension listing → Extension detail: opens selected
- Extension records → Extension detail renderer: supplies records
- Extension detail renderer → Extension detail: renders and tracks setup
- Certificate records → Certifications: groups and renders
- Contact → Site interactions: submits form
- Site interactions → EmailJS: sends form
- Home → Interactive mascot: mounts hero mascot
- Profile pages → Interactive mascot: mounts floating mascot
- Site interactions → Toast notifications: uses notifications
- Context and shortcut guard → Toast notifications: shows notices