My Portfolio Website

Welcome to my personal portfolio website. This project showcases my skills, projects, and experience as a developer. It includes a responsive design, dark/light mode toggling, a navigation bar with scroll effects, typing animation, scroll reveal animations, and a contact form with email functionality. See Live Demo:- https://glowing-marshmallow-1c4793.netlify.app/

Project Overview

This portfolio website serves as a personal space to display my projects, skills, and experience. The website is fully responsive and supports both dark and light modes. It also includes interactive features such as scroll animations, a typing effect, and a fully functional contact form that uses EmailJS for form submissions.

Features

• Responsive Design: Compatible with various screen sizes, including mobile devices.
• Dark/Light Mode Toggle: Users can switch between dark and light themes.
• Navigation Bar: Includes a responsive navigation menu with a scroll shadow effect.
• Typing Effect: Dynamic typing effect for introducing titles.
• Scroll Reveal Animations: Smooth animations when scrolling through different sections.
• Active Navigation Link: Automatically highlights the navigation link of the current section in view.
• Contact Form: Users can send messages directly via EmailJS.

Project Structure

├── index.html
├── Assets/
│   ├── CV.pdf
│   ├── profile.jpeg
├── Screenshots/
│   ├── Dark mode preview.png
│   ├── Light mode preview.png
├── styles/
│   ├── lightMode.css
│   ├── darkMode.css
├── script/
│   ├── script.js
└── README.md

Explanation of Key Files:

• index.html: The main HTML file that structures the webpage.
• Assets/: Directory containing your resume (CV.pdf) and profile picture (profile.jpeg).
• Screenshots/: Directory containing screenshots of the website in dark and light modes.
• styles/: Directory containing CSS stylesheets for different modes and responsive design.
• script/: Directory containing the main JavaScript file for interactive functionality.

Installation and Setup

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Gitkakkar1597/Personal-Portfolio
   cd your-repository

2. Open the project in your preferred code editor.

3. Open index.html in your web browser to view the portfolio.

Usage

Toggling Modes:

• The website loads in light mode by default. Click on the toggle button to switch to dark mode.
• The mode toggle functionality is managed by the toggleMode function in script.js, which dynamically loads the respective CSS file.

Navigation:

• The navigation bar is fully responsive. On smaller screens, the menu will collapse into a hamburger menu.
• The active section in view is highlighted in the navigation menu as you scroll.

Contact Form:

• The contact form uses EmailJS to handle submissions. Fill out the form and click "Send" to contact me directly via email.

Screenshots

Light Mode Preview

Dark Mode Preview

Technologies Used

• HTML5
• CSS3
• JavaScript
• EmailJS
• ScrollReveal.js
• Typed.js

Contact

If you have any questions or just want to get in touch, you can:

• Send me an email
• Connect with me on LinkedIn