A fully responsive and interactive personal portfolio website built using HTML, CSS, and JavaScript. This project showcases my skills, experience, digital awareness, and creative works, while demonstrating clean architecture, performance optimization, and modern UI/UX practices.
-
Responsive Design: Works seamlessly across all screen sizes using
clamp()and media queries. -
Independent Home Page: Fully functional even without global scripts or styles.
-
Typing Animation: Dynamic display of skills and areas of expertise.
-
Gradient Text & Animated Headings: Adds an elegant, modern visual appeal.
-
Modular Architecture: Low coupling and high cohesion — each section operates independently.
-
Home & Work Sections:
- Moving, animated backgrounds to create an immersive and dynamic user experience.
- Project cards with dynamic content generation.
- Minimalist image slider with smooth transition effects, hover animations, and numbered navigation dots.
- Optional Download SRS button available for select projects.
-
About & Insights Section:
- Interactive profile image responding to cursor movement for enhanced user engagement.
- Education and experience cards with links to HackerRank, LinkedIn, and LeetCode.
- Digital Awareness summary with Read More / Read Less toggles for concise or detailed viewing.
- Writings section showcasing the author’s first novel with curly underline and gradient heading animations.
-
Contact Section:
- Custom form integrated with Google Forms backend for seamless submissions.
- Regex validation implemented for all inputs.
- Designed in dark mode for optimal eye comfort — even preferred by light-mode users.
-
Global Assets:
- Shared resources limited to
script-global.jsandstyle-global.cssto minimize redundancy and improve maintainability.
- Shared resources limited to
-
Fallbacks:
- Each independent module includes lightweight backup logic to ensure functionality even if a global file fails.
portfolio/
├── assets/
│ ├── documents/
│ ├── images/
│ ├── videos/
│ ├── ...
│ └── section-modules/ ← contains CSS and JS modules for each section
│
├── index.html
├── about.html
├── work.html
├── contact.html
│
├── script-global.js
├── style-global.css
├── favicon.webp
│
├── 🕒CHANGELOG.md
├── 🔑LICENSE
├── 📄README.md
└── 📓portfolio-srs.pdf
-
Clone this repository:
git clone https://github.com/dipsana/portfolio.git
-
Navigate to the folder:
cd portfolio -
Open
index.htmlin your browser.
| Version | Date | Highlights |
|---|---|---|
| v1.0.2 | 2025-10-08 | YouTube demos, 46% asset optimization, bug fixes |
| v1.0.1 | 2025-10-08 | Brand compliance, legal safety, critical fixes |
| v1.0.0 | 2025-10-07 | Initial release with full portfolio features |
For detailed changes, see CHANGELOG.md
This project is protected under the Creative Commons Attribution–NonCommercial–NoDerivatives 4.0 license. It is available for educational and learning purposes only. Commercial use, redistribution, or re-branding as a personal portfolio is strictly prohibited.
Developed and designed with ❤️ by Dipsana Roy
“I built this portfolio to express both my technical foundation and my creative evolution.”