Hardik Kumar - Developer Portfolio

A modern, responsive developer portfolio website showcasing my work in Frontend Development, UI/UX Design, and Cybersecurity.

🚀 Live Demo

View Live Site

✨ Features

Core Sections

• Hero Section - Animated introduction with typing effect and particle background
• About Me - Professional summary with profile photo
• Skills - Categorized technical skills with modern icons
• Projects - Featured projects with hover animations
• Education - Academic timeline (10th, 12th, B.Tech)
• Certifications - Professional certificates with preview
• Achievements - Awards and recognitions
• Contact Form - EmailJS-powered contact form

Technical Highlights

• ✅ Fully responsive design
• ✅ Modern glassmorphism UI
• ✅ Smooth scroll animations
• ✅ Interactive particles background
• ✅ EmailJS integration for contact form
• ✅ SEO optimized
• ✅ Fast loading performance
• ✅ Accessible navigation

🛠️ Tech Stack

Category	Technologies
Frontend	HTML5, CSS3, JavaScript (ES6+)
Styling	Custom CSS, Flexbox, Grid
Icons	Font Awesome 6.5
Fonts	Google Fonts (Syne, JetBrains Mono, DM Sans)
Email Service	EmailJS
Deployment	GitHub Pages

📂 Project Structure

Hardik/
├── index.html                 # Main HTML file
├── Hardik_Kumar_CV.pdf       # Downloadable CV
├── public/
│   └── images/
│       ├── hardik.jpg                    # About section photo
│       ├── hardik2.jpg                   # Hero avatar photo
│       └── cybersecurity-certificate.jpg # Certificate preview
└── README.md                   # Project documentation

🎨 Design Features

Color Palette

• Primary Purple: #6366f1
• Secondary Green: #22c55e
• Accent Cyan: #06b6d4
• Background: #07090f
• Surface: #161d2b

Animations

• Smooth scroll reveal effects
• Particle system background
• Typing animation for hero text
• Card hover effects with glow
• Spinning gradient ring on avatar
• Navbar transparency on scroll

🔧 Setup & Installation

Prerequisites

• A code editor (VS Code recommended)
• Modern web browser

Local Setup

1. Clone the repository

   git clone https://github.com/yourusername/your-repo-name.git
   cd Hardik

2. Open in browser

   # Simply open index.html in your browser
   # Or use a local server (recommended)
   npx live-server

3. Customize content

   • Edit index.html to update personal information
   • Replace images in public/images/ folder
   • Update EmailJS configuration in the script section

📧 EmailJS Configuration

To enable the contact form:

1. Sign up at EmailJS
2. Create an email service (Gmail recommended)
3. Create an email template with variables:
   • {{name}}
   • {{email}}
   • {{message}}
4. Update the configuration in index.html:

   const EMAILJS_PUBLIC_KEY = "your_public_key";
   const EMAILJS_SERVICE_ID = "your_service_id";
   const EMAILJS_TEMPLATE_ID = "your_template_id";

🎯 Key Features Implementation

Contact Form

The contact form uses EmailJS to send emails directly from the frontend without a backend. Form data is validated before submission and displays success/error messages.

Responsive Design

Mobile-first approach with hamburger menu for mobile devices and optimized layouts for different screen sizes.

Performance

• Minimal external dependencies
• Optimized images
• Clean, semantic HTML
• Efficient CSS animations

📱 Browser Compatibility

• Chrome (Latest)
• Firefox (Latest)
• Safari (Latest)
• Edge (Latest)
• Mobile browsers

🔒 Security

• No sensitive data exposed
• Email validation on contact form
• Secure EmailJS integration
• HTTPS enforced on deployment

📄 License

This project is open source and available under the MIT License.

👤 Author

Hardik Kumar

• Frontend Developer
• UI/UX Designer
• Cybersecurity Engineer

📍 Gajapati, Odisha, India

🔗 Connect With Me

• GitHub: hardik9981
• Email: hardikgupta2763@gmail.com
• Phone: +91 99738 88674

🙏 Acknowledgments

• Font Awesome for icons
• Google Fonts for typography
• EmailJS for email functionality
• Centurion University of Technology and Management

---

Last Updated: 2026