This is my modular, dynamic personal portfolio built with HTML, CSS, and JavaScript. It showcases my skills, education, projects, certifications, workshops, and experience—all loaded dynamically from JSON files for easy updates. The design is responsive, scroll-aware, and visually expressive with a custom color palette and interactive elements.
👉 To view the live portfolio, click here.
portfolio/
├── index.html # Landing page with hero intro
├── home.html # Main portfolio dashboard with dynamic sections
├── about.html # Personal bio, academic journey, and experience
├── contact.html # Contact details and external links
├── assets/ # Static assets like images
│ └── pic/
│ └── profile.png # Current profile picture
├── css/
│ └── style.css # Unified global styles with custom color theme
├── js/
│ ├── loadPartials.js # Loads HTML partials into target elements by ID
│ └── main.js # Loads JSON data and handles scroll behavior
├── partials/ # Reusable HTML components for headers and footer
│ ├── footer.html # Global footer for all pages
│ ├── header-about.html # Navigation bar for About page
│ ├── header-section.html # Hero section with name and tagline
│ ├── header-home.html # Navigation bar for Home page with section links
│ └── header.html # Default navigation bar for general pages
├── data/ # Modular content in JSON format
│ ├── projects.json # Modular project entries
│ ├── certificates.json # Certifications and workshops
│ ├── experience.json # Academic and technical experience
│ └── academics.json # Academic journey entries
├── LICENSE # License information for the project
├── README.md # Project overview and documentation
└── temp.html # Temporary testing file
- 🔄 Modular content loading via JSON (projects, experience, academics, certifications)
- 🧠 Dynamic academic journey powered by
academics.json - 🪄 Floating “Contact Me” button with scroll-aware visibility
- ⬆️ “Go to Top” button with smooth scroll and fade-in effect
- 🎓 Split view for Certifications & Workshops
- 📱 Fully responsive layout with semantic HTML5 structure
- 🎨 Custom color palette with hover transitions and depth effects
Feel free to connect via:
Built with 💙 using GitHub Pages and Microsoft Copilot