A modern, responsive, and feature-rich personal portfolio website showcasing skills, projects, and contact information. Built with vanilla HTML, CSS, and JavaScript following modern web development best practices.

• Responsive Design: Fully responsive layout that works seamlessly on all devices (mobile, tablet, desktop)
• Modern UI/UX: Clean, professional design with smooth animations and transitions
• Dark Mode Ready: Infrastructure in place for easy dark mode implementation
• Accessibility: Semantic HTML and ARIA labels for better accessibility
• SEO Optimized: Meta tags, Open Graph, and Twitter Card support

• Typing Animation: Dynamic typing effect showcasing multiple roles
• Smooth Scrolling: Butter-smooth navigation between sections
• Animated Counters: Statistics that animate when scrolled into view
• Skill Progress Bars: Animated skill level indicators
• Hover Effects: Engaging micro-interactions throughout the site
• Mobile Navigation: Hamburger menu for mobile devices

1. Hero Section: Eye-catching introduction with profile image and CTA buttons
2. About: Personal introduction with animated statistics
3. Skills: Comprehensive skills showcase with progress bars and tech icons
4. Projects: Portfolio of featured projects with hover effects
5. Contact: Contact form with validation and contact information
6. Footer: Quick links and social media connections

• Fast Loading: Optimized assets and lazy loading
• Modern CSS: CSS Variables, Flexbox, and Grid for efficient layouts
• Modular JavaScript: Clean, maintainable, and well-documented code
• Cross-Browser Compatible: Works on all modern browsers
• Mobile-First Approach: Designed for mobile devices first

• HTML5: Semantic markup for better structure and SEO
• CSS3: Modern styling with custom properties, animations, and transitions
• JavaScript (ES6+): Vanilla JavaScript with modern features
  • Classes and modules
  • Intersection Observer API
  • requestAnimationFrame for smooth animations
  • LocalStorage for theme persistence

• Font Awesome 6.4.0: For icons
• Google Fonts: Poppins and Fira Code fonts

• Git for version control
• Modern browsers for testing

itisdb/
├── assets/              # Images, PDFs, and other media files
│   ├── angular.png
│   ├── circle-cropped.png
│   ├── DhriteshBhagatResume.pdf
│   ├── ezgif-4-5c6a7a1c5f36.gif
│   ├── Facebook-logo.png
│   ├── iconfinder_instagram_1632517.png
│   ├── iconfinder_linkedin_circle_294706.png
│   ├── iconfinder_social-facebook-2019-circle_4696483.png
│   ├── iconfinder_twitter_circle_294709.png
│   └── programer.gif
├── css/                 # Stylesheets
│   └── styles.css
├── js/                  # JavaScript files
│   └── main.js
├── index.html           # Main HTML file
└── README.md            # This file

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A text editor (VS Code, Sublime Text, Atom, etc.)
• Basic knowledge of HTML, CSS, and JavaScript (for customization)

1. Clone the repository

   git clone https://github.com/itisdb/itisdb.git
   cd itisdb

2. Open in browser

   • Simply open index.html in your web browser
   • Or use a local server for better development experience:

     # Using Python
     python -m http.server 8000
     
     # Using Node.js http-server
     npx http-server
     
     # Using VS Code Live Server extension
     # Right-click on index.html and select "Open with Live Server"

3. View the website

   • Navigate to http://localhost:8000 (or the port shown in your terminal)

1. Profile Image: Replace assets/circle-cropped.png with your own photo
2. Resume: Replace assets/DhriteshBhagatResume.pdf with your resume
3. Name & Title: Edit index.html lines 68-77
4. About Section: Update index.html lines 131-143
5. Skills: Modify index.html lines 167-254
6. Projects: Customize index.html lines 293-346
7. Contact Info: Update index.html lines 361-386

Edit CSS variables in css/styles.css (lines 9-25):

:root {
    --primary-color: #667eea;    /* Main brand color */
    --secondary-color: #764ba2;  /* Secondary brand color */
    --accent-color: #f093fb;     /* Accent color */
    /* ... more color variables */
}

Update the social media links in index.html:

• Hero section: lines 86-102
• Footer section: lines 412-418

Replace # with your actual profile URLs.

Edit the text array in js/main.js (line 562):

new TypeWriter(typingElement, [
    'Your Title 1',
    'Your Title 2',
    'Your Title 3',
    'Your Title 4'
], 100);

• Lazy Loading: Images load as they enter the viewport
• Resource Preloading: Critical resources are preloaded
• Debounced/Throttled Events: Scroll and resize events are optimized
• CSS Containment: Used where appropriate for better rendering
• Minification Ready: Code is ready for minification in production

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Mobile browsers:

• iOS Safari (latest)
• Chrome for Android (latest)

• Semantic HTML5 elements
• ARIA labels for interactive elements
• Keyboard navigation support
• Focus indicators
• Alt text for all images
• Proper heading hierarchy
• Color contrast ratios meet WCAG standards

• Add dark mode toggle
• Implement blog section
• Add testimonials section
• Create project detail pages
• Integrate with a backend for contact form
• Add animations library (AOS, GSAP)
• Implement Progressive Web App (PWA) features
• Add multi-language support
• Create admin panel for content management
• Add Google Analytics or similar

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

Dhritesh Bhagat

• Website: https://itisdb.github.io/itisdb
• Email: contact@dhriteshbhagat.com
• LinkedIn: Your LinkedIn Profile
• GitHub: @itisdb

• Font Awesome for icons
• Google Fonts for typography
• Inspiration from various portfolio websites
• The open-source community

• Complete modernization of the portfolio website
• Added responsive design with mobile-first approach
• Implemented modern animations and transitions
• Added interactive elements (typing effect, counters, skill bars)
• Organized project structure with proper directories
• Added comprehensive documentation
• Optimized for performance and accessibility
• Added SEO meta tags and social media integration

Made with ❤️ and passion by Dhritesh Bhagat