Improve portfolio interactivity, responsiveness and add dark mode support

[Smrithi-krishna]

Summary [required]

This PR enhances the portfolio website by completing missing JavaScript functionality and improving overall interactivity, responsiveness, and user experience.
It implements key UI/UX features including navigation improvements, scroll-based interactions, form validation, and theme switching.

Related Issue [required]

Closes #171

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
portfolio.html	Improved portfolio UI/UX with responsive design, navigation enhancements, animations, form validation, and dark mode support.
.nojekyll	Added to support GitHub Pages deployment

How to Test This PR [required]

1. Clone this branch: git checkout your-branch-name
2. Install dependencies: pip install -r requirements.txt
3. Run the app: python app.py
4. Open http://127.0.0.1:5000 and...
5. Run the tests: python tests/test_basic.py

Expected test output:

27 passed, 0 failed out of 27 tests

Test Results [required]

  PASS  test_projects_json_loads
  PASS  test_each_project_has_required_fields
  PASS  test_find_project_by_id_found
  PASS  test_find_project_by_id_missing
  PASS  test_parse_skills_basic
  PASS  test_parse_skills_empty_string
  PASS  test_parse_skills_single_entry
  PASS  test_score_single_project_full_match
  PASS  test_score_single_project_no_match
  PASS  test_get_recommendations_returns_results
  PASS  test_get_recommendations_max_three
  PASS  test_get_recommendations_no_match_returns_empty
  PASS  test_get_recommendations_result_format
  PASS  test_validate_all_valid
  PASS  test_validate_missing_skills
  PASS  test_validate_missing_level
  PASS  test_validate_missing_interest
  PASS  test_validate_missing_time
  PASS  test_validate_all_missing
  PASS  test_home_route
  PASS  test_recommend_api_valid
  PASS  test_recommend_api_missing_field
  PASS  test_recommend_api_empty_body
  PASS  test_project_detail_found
  PASS  test_project_detail_not_found
  PASS  test_internal_server_error_page
  PASS  test_view_code_found
  PASS  test_download_code_found
  PASS  test_scoring_weights_has_all_keys

29 passed, 0 failed out of 29 tests

Screenshots (if UI change)

Before

|

After

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• I have run python tests/test_basic.py and all 27 tests pass
• I have run flake8 . locally and there are no errors
• I have not introduced any print() or console.log() debug statements
• Every new function I wrote has a docstring
• I have not modified files outside the scope of the linked issue
• If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
• If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

This PR focuses on improving interactivity, responsiveness, and user experience of the portfolio website. Please let me know if any improvements or changes are required.

[vercel]

@Smrithikrishna123 is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.

[komalharshita]

@Smrithi-krishna ensure that all checks pass

[Smrithi-krishna]

@komalharshita All checks are passing now
Added the missing /health endpoint and fixed the failing test cases.

[Smrithi-krishna]

Hello @komalharshita, could you please review my PR?. All tests are now passing.

[Smrithi-krishna]

hi @komalharshita ,mam can you please check when you have time

[komalharshita]

Thanks for the contribution — there are several good improvements here, especially the mobile nav behavior, scroll reveal implementation, form validation structure, and theme persistence logic.

However, this PR needs cleanup before it can be merged.

Main issues to address:

• Do not replace template placeholders with personal/demo content (YK, [YOUR NAME], custom descriptions, etc.). This repository is a starter template and those placeholders should remain generic.
• Please restore the educational TODO comments/instructions that were removed throughout the file. They are important for beginner contributors using this project as a learning resource.
• The navbar currently contains an invalid HTML structure (<li> outside a <ul>).
• Improve accessibility for the dark mode toggle (aria-label, accessible semantics, focus states).
• Dark mode styling needs a more complete contrast/accessibility pass across all sections.
• The PR scope is too broad. Try to keep unrelated cleanup/template edits separate from feature work.

There is good work here overall, but the PR needs refinement and cleaner scoping before approval.

[Smrithi-krishna]

Thank you for the detailed review and feedback. I understand the concerns raised.
Thanks again for reviewing the PR and pointing these out — I’ll work on the refinements and update the PR soon.

[Smrithi-krishna]

hi @komalharshita ,can you please check it now

[komalharshita]

Thanks for the updates and for addressing several of the requested changes.

The functionality additions (theme persistence, navigation highlighting, scroll reveal, skill bar animation, and form validation) are appreciated and generally look good.

However, I cannot approve this PR yet because some previously requested issues remain unresolved:

• The navbar still contains invalid HTML (<li> is placed outside of a <ul>).
• The dark mode toggle lacks accessibility improvements (aria-label, accessible state indication, etc.).
• Template placeholders/content were modified unnecessarily ([Your Name], [Your Title], etc.) and should remain consistent with the starter template.
• Dark mode styling still needs a more complete accessibility/contrast review.
• The PR scope remains quite broad and mixes feature work with unrelated template/formatting changes.

Please address these points and update the PR for another review.

Thank you for the contribution.

[komalharshita]

@Smrithi-krishna ping me when you're done

[Smrithi-krishna]

Hey @komalharshita! Just letting you know I'm all done. I've gone ahead and addressed all your comments, so could you please take a look and let me know if anything else is needed? Thanks!