How zakymaizi2031/portofolio works
This React portfolio lets visitors explore a profile, edit semester grades and skill percentages, and build a printable CV. App.jsx owns the shared state, calculates cumulative GPA and skill summaries, and persists editable data in browser localStorage. Home presents the profile and project showcase; the calculator and CV builder update shared state. Source excerpts support these main interactions, but README describes only a Vite template, so product capabilities are inferred from the sampled components.
Main entry points: App.jsx App State & Calculations · Navbar.jsx Tab Navigation · CvBuilder.jsx CV Editor & Preview · main.jsx React Entry
Components 10
Application Shell
- React Entry
src/main.jsx - App State & Calculations
src/App.jsx - Browser Local Storage
- Tab Navigation
src/components/Navbar.jsx
Portfolio Profile
- Profile & Projects
src/components/Home.jsx
Academic Calculator
- Grade & Skills Editor
src/components/GradeCalculator.jsx
CV Builder
- CV Editor & Preview
src/components/CvBuilder.jsx
Other components
- Visitor
- Browser Print
- GitHub
Connections 13
- Visitor → React Entry: opens app
- React Entry → App State & Calculations: renders
- App State & Calculations → Browser Local Storage: reads and writes
- App State & Calculations → Tab Navigation: renders
- App State & Calculations → Profile & Projects: renders with profile data
- App State & Calculations → Grade & Skills Editor: renders with grade state
- App State & Calculations → CV Editor & Preview: renders with CV data
- Tab Navigation → App State & Calculations: selects tab
- Profile & Projects → App State & Calculations: selects tab
- Grade & Skills Editor → App State & Calculations: updates grades and skills
- CV Editor & Preview → App State & Calculations: updates CV data
- CV Editor & Preview → Browser Print: opens print dialog
- Tab Navigation → GitHub: links to