How zainab-arslan-dar/portfolio works
This is a static personal portfolio: visitors browse the profile and project showcase, filter projects, and use contact options or submit a client-side form. The README describes the page’s major sections and design capabilities; the sampled JavaScript confirms project rendering and filtering, navigation behavior, hero animation, and form handling. HTML and CSS implementation details were not sampled, so their specific wiring is shown only where documented.
Main entry points: index.html Portfolio page · script.js Project rendering · style.css Visual design
Components 19
Portfolio content
- Portfolio page
index.html - Visual design
style.css - Hero and about
index.html - Skill cards
index.html - Project showcase
index.html - Contact section
index.html
Page interactions
- Project catalog
script.js - Project rendering
script.js - Project filters
script.js - Contact form
index.html - Form handler
script.js - Form confirmation
index.html - Responsive navigation
script.js - Scroll navigation
script.js - Network graphic
script.js
Contact links
- Email contact
index.html - LinkedIn profile
index.html - GitHub profile
index.html
Other components
- Visitor
Connections 21
- Visitor → Portfolio page: opens
- Portfolio page → Visual design: styled by
- Portfolio page → Hero and about: presents
- Portfolio page → Skill cards: presents
- Portfolio page → Project showcase: presents
- Portfolio page → Contact section: presents
- Project catalog → Project rendering: supplies data
- Project rendering → Project showcase: renders cards
- Project filters → Project rendering: requests filtered render
- Visitor → Project filters: selects category
- Visitor → Contact form: submits
- Contact form → Form handler: handles submit
- Form handler → Form confirmation: sets message
- Visitor → Responsive navigation: toggles menu
- Responsive navigation → Portfolio page: updates menu state
- Scroll navigation → Portfolio page: updates active link
- Portfolio page → Network graphic: provides graphic targets
- Network graphic → Hero and about: creates network graphic
- Visitor → Email contact: uses contact link
- Visitor → LinkedIn profile: opens profile
- Visitor → GitHub profile: opens profile