MANOJ M Portfolio Website

Welcome to my personal portfolio website repository. This project showcases my skills, projects, and background in electronics engineering and software development.

🌟 Features

• Responsive Design: Fully optimized for all device sizes from mobile to desktop
• Interactive Elements: 3D animations using Three.js for visual appeal
• Profile Card: Unique hover effect revealing name and social links
• Skills Showcase: Comprehensive overview of technical abilities with gold-colored cards
• Project Showcase: Highlighting my work in embedded systems, robotics, and web development
• Achievements Section: Competitions, hackathons, and event organization experience
• Contact Form: Easy way for potential employers or collaborators to reach out
• Dark/Light Mode Toggle: Theme switching with smooth transitions
• Performance Optimized: Fast loading with smooth animations
  • ⚡ Deferred JavaScript loading for non-blocking render
  • 🖼️ Lazy loading for below-fold images
  • 🚀 Aggressive caching via Vercel configuration
  • 📦 Optimized asset loading

🛠️ Technologies Used

• HTML5: Semantic markup structure
• CSS3: Styling with custom properties and animations
• JavaScript: Interactive elements and animations
• Tailwind CSS: Utility-first CSS framework for responsive design
• Three.js: 3D background effects and animations
• Font Awesome: Icons for enhanced visual elements

📱 Sections

The portfolio includes the following sections:

1. Hero Section: Introduction with animated background and scrolling tech logos
2. About Section: Profile card with hover effect revealing social links
3. Services Section: Overview of development services offered
4. Projects Section: Showcase of key projects with live demos and GitHub links
5. Skills Section: 17 technical skills organized in gold-colored cards
6. Achievements Section: Competition wins, hackathons, and event organization
7. Contact Section: Contact form and direct email access

🚀 Projects Featured

1. BCI-Controlled Car Game: Brain-computer interface using EEG sensor data
2. Yellow Shade Plant Disease Detection: Real-time plant health monitoring tool with live demo
3. BuildbyManoj-chatbot: AI assistant with RAG capabilities and live demo
4. NutritionTracker: MERN stack nutrition monitoring application with live demo

🔧 Skills Highlighted

Programming Languages: C, Java, Python, JavaScript Web Technologies: HTML, CSS, React, Node.js, Express.js, MongoDB AI & Computer Vision: OpenCV, Hugging Face Design Tools: Figma, Canva Development Tools: Git, GitHub, VS Code, Docker

📱 Responsive Design

The portfolio is built with a mobile-first approach ensuring excellent user experience across all devices:

• Mobile: Optimized layout and performance for smartphones
• Tablet: Adjusted content display for medium-sized screens
• Desktop: Enhanced visual experience for larger displays

🎨 Interactive Features

• Profile Card Hover Effect: Image expands on hover revealing name and social icons
• Skills Cards: Gold-colored cards with hover animations
• Theme Toggle: Day/night mode switcher with smooth transitions
• Scrolling Logos: Infinite scroll of tech stack logos in hero section
• Glowing Project Cards: Animated borders and hover effects
• Contact Form: Functional form with Formspree integration

🔧 Local Development

To run this project locally:

1. Clone this repository:

   git clone https://github.com/buildbymanoj/buildbymanoj_portfolio.git
   

2. Navigate to the project directory:

   cd buildbymanoj_portfolio
   

3. Open the project in your code editor, or start a local server:

   python -m http.server 8000

4. View the website at http://localhost:8000

⚡ Performance

This portfolio is optimized for speed and efficiency:

• Optimization techniques:
  • Preconnect to external domains for faster DNS resolution
  • Deferred JavaScript loading for non-blocking HTML parsing
  • Lazy loading for below-the-fold images
  • Aggressive asset caching (1-year cache for static files)
  • Optimized favicon loading

Test the performance:

• Pingdom Speed Test
• Google Lighthouse

📚 Folder Structure

/
├── index.html          # Main HTML file
├── style.css           # CSS styles
├── script.js           # JavaScript functionality
├── vercel.json         # Vercel deployment & caching config
├── assets/             # Resources folder
│   ├── applogo.jpg     # Logo image
│   └── MANOJ.jpg       # Profile photo
└── README.md           # This file

📝 License

MIT

🔗 Connect With Me

• LinkedIn
• GitHub
• Email

---

© 2025 MANOJ M. All rights reserved.