Personal Portfolio - Prateek Kumar

Welcome to my personal portfolio website! This project showcases my skills, experience, and projects as a passionate web developer and creative designer. Built with modern web technologies, it features a dynamic, responsive design with multiple themes, interactive elements, and a sleek user experience.

Table of Contents

• Overview
• Features
• Technologies Used
• Project Structure
• Installation
• Usage
• Themes
• Contact

Overview

This portfolio serves as a digital resume and showcase of my work. It includes sections for my bio, experience, education, skills, projects, and a contact form. The design is enhanced with animations, a theme switcher, and a Matrix-style background effect, reflecting my passion for both functionality and aesthetics.

Features

• Responsive Design: Optimized for desktops, tablets, and mobile devices.
• Theme Switcher: Eight customizable themes (Dark, Light, Neon, Violet, Cyan, Emerald, Sunset, Midnight) with animated gradient backgrounds.
• Interactive Elements:
  • Smooth scrolling navigation with active link highlighting.
  • Typing animation in the hero section.
  • Project modals with live demo and GitHub links.
  • Back-to-top button for easy navigation.
• Animations:
  • Preloader with a spinning loader.
  • Fade-in and slide-in effects for section visibility.
  • Matrix rain background animation.
• Contact Form: Client-side validation for name, subject, email, and message fields.
• Accessibility: ARIA labels and focus states for improved usability.

Technologies Used

• HTML5: Semantic structure and content.
• CSS3: Styling with CSS variables, animations, and responsive layouts.
• JavaScript: Dynamic functionality, DOM manipulation, and canvas-based Matrix animation.
• Google Fonts: Inter font for typography.
• External Libraries:
  • Particles.js for particle effects.
  • GSAP (GreenSock Animation Platform) for advanced animations and scroll triggers.

Project Structure

PortfolioWebsite/
├── index.html                # Main HTML file
├── README.md                 # Project documentation
├── resume.pdf                # Resume file
├── images/
│   ├── favicon.png           # Favicon for the site
│   ├── profile.jpg           # Profile picture
│   ├── library.png           # Project screenshot
│   ├── myportfolio.png       # Project screenshot
│   ├── psych-seva.png        # Project screenshot
│   └── smart-site-maker.png  # Project screenshot
├── scripts/
│   └── script.js             # JavaScript for interactivity and animations
└── styles/
    ├── styles.css            # Main stylesheet with themes and animations
    └── polish.css            # Additional styling refinements

Installation

1. Clone the Repository:

   git clone https://github.com/prateekCodeLab/PortfolioWebsite.git

2. Navigate to the Project Directory:

   cd PortfolioWebsite

3. Open the Project:
   • Open index.html in a web browser (e.g., Chrome, Firefox) to view the portfolio locally.
   • No additional dependencies or server setup is required since it’s a static site.

Usage

• Navigation: Use the top navigation bar to jump to Home, About, Projects, or Contact sections.
• Theme Switching: Click the theme toggle button (e.g., 🌙) in the top-right corner to cycle through themes.
• Projects: Click on project cards to open modals with detailed information and links.
• Contact: Fill out the form to send a message (currently displays a success alert; backend integration pending).
• Resume: Download the resume via the link in the Contact section.

Themes

The portfolio includes eight distinct themes, each with unique gradient backgrounds and accent colors:

1. Dark (🌙): Slate-blue gradient with purple accents.
2. Light (🌞): Soft gray gradient with green accents.
3. Neon (✨): Dark blue gradient with neon green text and accents.
4. Violet (🌸): Purple gradient with violet text and accents.
5. Cyan (💧): Teal gradient with cyan text and accents.
6. Emerald (🍃): Green gradient with deep teal accents.
7. Sunset (🌅): Warm orange-purple gradient with orange accents.
8. Midnight (🌠): Deep blue gradient with light blue accents.

Themes persist across sessions using localStorage.

Contact

• Name: Prateek Kumar
• Email: prateekkmr3151@gmail.com
• LinkedIn: linkedin.com/in/prateekkmr3151
• GitHub: github.com/prateekCodeLab
• Location: New Delhi, India

© 2026 Prateek Kumar. All rights reserved.