Skip to content

Personal Portfolio Website showcasing projects, skills, digital awareness, writings, and interactive UI/UX with fully responsive design and modular architecture.

License

Notifications You must be signed in to change notification settings

dipsana/portfolio

Repository files navigation

🪶 Personal Portfolio — Dipsana Roy

HTML5 CSS3 JavaScript

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.


✨ Features

  • 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.js and style-global.css to minimize redundancy and improve maintainability.
  • Fallbacks:

    • Each independent module includes lightweight backup logic to ensure functionality even if a global file fails.

📁 Clickable Folder Structure

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


🚀 Installation & Usage

  1. Clone this repository:

    git clone https://github.com/dipsana/portfolio.git
  2. Navigate to the folder:

    cd portfolio
  3. Open index.html in your browser.


📋 Changelog

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


🪪 License

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.


📜 Credits

Developed and designed with ❤️ by Dipsana Roy

“I built this portfolio to express both my technical foundation and my creative evolution.”

About

Personal Portfolio Website showcasing projects, skills, digital awareness, writings, and interactive UI/UX with fully responsive design and modular architecture.

Topics

Resources

License

Stars

Watchers

Forks