Implement AI-Assisted Dark/Light Mode Toggle, Typing Header, and Interactive Project Cards

Overview:

This issue proposes enhancing the portfolio website by introducing three key interactive features: a Dark/Light Mode toggle, a Typing Effect / Animated Header, and Interactive Project Cards. These improvements will enhance user experience, interactivity, and the overall visual appeal of the portfolio.

Proposed Solution (AI-Assisted):

Dark/Light Mode Toggle:

Add a toggle button in the navigation bar or header.

Define CSS variables for key colors (background, text, cards, links).

Create a .dark-mode class to override the variables for dark theme.

Use JavaScript to toggle the class dynamically and store the user’s preference in local Storage.

Typing Effect / Animated Header:

Animate the main header text to cycle through multiple phrases (e.g., user name, profession, skills).

Implement using either a lightweight JavaScript library or custom JS logic.

Interactive Project Cards:

Dynamically load project details (title, description, link) from a JavaScript array.

Add hover effects or flip animations to reveal additional details.

Ensure cards are responsive and visually appealing.

Expected Behavior:

Users can switch between dark and light modes with instant visual feedback.

The header displays an animated typing effect cycling through key descriptors.

Project cards are interactive, revealing additional information on hover or click.

All features are responsive across devices and enhance overall user experience.

Benefits:

Improves accessibility and user comfort through theme switching.

Adds modern, interactive UI elements for a more engaging portfolio.

Demonstrates proficiency in frontend development, including DOM manipulation, CSS animations, and event handling.

Implements AI-assisted development for efficient and structured coding.

Files to Modify:

index.html → Add toggle button, typing header container, and project cards section.

style.css → Add CSS variables, dark mode styles, hover/flip animations, and typing effect styles.

script.js → Implement toggle functionality, typing effect logic, and dynamic project rendering.

AI Tools Used:

ChatGPT (AI Assistant) was used to suggest optimal structure, generate code snippets, plan implementation workflow, and write this issue description.