How meliodasbatman/simple-portfolio works
This is a static, six-page personal portfolio and beginner HTML/CSS teaching project. The main workflow is opening the home page in a browser, navigating among profile and learning pages, and viewing their styled content and illustrations. The README describes login as a form-design exercise, while the sampled JavaScript implements client-side credential checking and a password-visibility toggle; the HTML-to-script link is not confirmed by the available excerpts.
Main entry points: index.html Home page · about.html About page · hobby.html Hobbies page · activity.html Activities page
Components 17
Home and navigation
- Home page
webpages/index.html
Portfolio pages
- About page
webpages/about.html - Hobbies page
webpages/hobby.html - Activities page
webpages/activity.html - Goals page
webpages/goal.html
Login interaction
- Login page
webpages/login.html - Login interaction
java/login.js
Styles and media
- Home styles
css/style.css - About styles
css/about.css - Hobbies styles
css/hobby.css - Activity styles
css/activity.css - Goals styles
css/goal.css - Login styles
css/login.css - Illustrations
images - Animated media
video
Other components
- Visitor
- Web browser
Connections 23
- Visitor → Web browser: opens pages
- Web browser → Home page: opens
- Home page → About page: links to
- Home page → Hobbies page: links to
- Home page → Activities page: links to
- Home page → Goals page: links to
- Home page → Login page: links to
- About page → Home page: links to
- Hobbies page → Home page: links to
- Activities page → Home page: links to
- Goals page → Home page: links to
- Login page → Home page: links to
- Home page → Home styles: loads styles
- About page → About styles: loads styles
- Hobbies page → Hobbies styles: loads styles
- Activities page → Activity styles: loads styles
- Goals page → Goals styles: loads styles
- Login page → Login styles: loads styles
- About page → Illustrations: references
- Hobbies page → Illustrations: references
- Activities page → Illustrations: references
- Goals page → Illustrations: references
- Login interaction → Login page: updates form