web-portfolio
Web Development Portfolio
Welcome to the official web development portfolio repository by Nandhakumar Murugan, Published AI Researcher and B.E. Computer Science and Engineering (Cybersecurity) student at KGiSL Institute of Technology.
This project is a multi-page web platform demonstrating modern HTML5 semantics, CSS flexbox layouts, keyframe animations, multimedia players, JavaScript interactions, and responsive design techniques.
🔗 Connect & Publications
- Published Research Paper: AgentShield: Zero-Trust Multi-Agent Guardrails (CERN DOI: 10.5281/zenodo.22259022)
- Live LinkedIn Announcement: AgentShield Research Paper Official Release
- Google AI Developers Forum: Approved Showcase Topic
- Google Scholar: Nandhakumar Murugan
- LinkedIn Profile: Nandhakumar Murugan
- Official Website: Prema AI Labs
- GitHub Repository: web-portfolio
📄 Pages Included in the Project
| Page File | Description & Features |
|---|---|
home.html |
Portfolio homepage featuring personal background, education details, and contact links. |
1.html |
Profile overview, technical skills list, daily routine, and academic standing. |
2.html |
Location sharing, Weather API demo, Education history table, and Programming Language definitions (<dl>). |
3.html |
Personal media player featuring Google Drive photo thumbnail, HTML5 Audio (Tabaahi.mp3), and HTML5 Video (.mp4). |
transition.html |
6 interactive CSS animation samples (Hover Zoom, 360° Rotating Box, Bouncing Button, Pulsing Circle, Floating Element, Color Shift). |
login.html |
User authentication portal with role selector (Student/Developer/Admin), Remember Me checkbox, and Password Reset options. |
project.html |
Comprehensive showcase cards summarizing all topics covered across the site. |
flexbox.html |
5 fundamental CSS Flexbox layout techniques (Space-Between Row, Centering, Column Layout, Flex Wrap, Flex Grow Ratios). |
get-style.html |
Styling without CSS using pure HTML attributes (bgcolor, align, font, border) and dynamic GET query parameter forms. |
javascript.html |
Dynamic DOM style mutation (element.style), font resizer, theme switcher, Array splice() explorer, form validation, and GET parameter parsing in JS. |
style.css |
Clean, minimal stylesheet styling navigation, container bounds, typography, tables, and media elements. |
🛠️ Tech Stack
- HTML5: Semantic document structure, data tables, forms, audio/video players.
- CSS3: Flexbox layouts, keyframe animations (
@keyframes), hover transitions, responsive design. - JavaScript: DOM manipulation and event handlers.
- Git & GitHub: Version control and repository hosting.
🚀 How to Run Locally
- Clone this repository:
git clone https://github.com/nandhakumar-murugan/web-portfolio.git - Navigate into the project folder:
cd web-portfolio - Open
home.htmlin your web browser.