• Overview
• Features
• Technologies
• Sections
• Installation
• API Documentation
• Recent Enhancements
• Performance
• Browser Support
• Contributing
• Contact
• License

A professional portfolio website for Dhruv Thakar, Computer Science student at Ontario Tech University. This portfolio showcases technical projects, leadership experience, and skills through an engaging, modern interface with advanced animations and interactive components.

• ✨ 15+ Featured Projects spanning web development, algorithms, robotics, and electronics
• 🎨 Unified Gradient Theme with teal-cyan color scheme throughout
• 🎬 Advanced Animations including particle networks, blob morphing, and scroll effects
• 📱 Fully Responsive design optimized for all devices
• ⚡ Performance Optimized with lazy loading and efficient animations

• Consistent Gradient Theme - Unified teal-cyan gradient across all sections
• Glassmorphism Effects - Modern backdrop blur and transparency
• Smooth Animations - Scroll-triggered animations with Intersection Observer
• Interactive Components - Hover effects, transitions, and micro-interactions
• Dark Mode Ready - Optimized for dark theme with optional toggle

• Home Page:
  • Animated mesh gradient with morphing blobs
  • Multi-layer twinkling starfield
  • Floating geometric shapes
  • Canvas-based particle network with connecting lines
  • Subtle grid pattern overlay
• Project Cards:
  • Staggered entrance animations (fade-in + slide-up)
  • Hover effects with scale, lift, and glow
  • Icon rotation animations
• Navigation:
  • Scroll progress bar
  • Active section highlighting
  • Animated underlines on hover

• 15+ projects with enhanced cards
• Project thumbnails with gradient backgrounds
• Status badges (Featured, Active, Coming Soon, etc.)
• Filterable by technology (HTML, CSS, JavaScript, Java, Python, C++, Arduino)
• Consistent action buttons (Live Demo + Code)
• Key features with checkmark lists
• Project statistics dashboard

• Impact statistics (Leadership roles, students reached, events)
• Enhanced goal cards with progress tracking
• Timeline badges (2025-2026, 2026-2030)
• Modern volunteer cards with status indicators
• Active/Completed badges with animations

• Enhanced university card with progress bar
• Academic highlights grid (3 cards)
• Colorful focus area tags
• "Currently Enrolled" badge
• Hover effects and transitions

• Call-to-action section
• 4-column layout with organized information
• Social media buttons with unique hover colors
• Quick stats (location, availability)
• Gradient divider and back-to-top button

• Scroll Progress Bar - Visual indicator of page position
• Active Link Highlighting - Auto-highlights current section
• Animated Underlines - Expand from center on hover
• Mobile-Optimized Menu - Icons, borders, and smooth animations
• Sticky Header - Always accessible while scrolling

• Mobile-first approach
• Breakpoints: sm, md, lg, xl
• Optimized touch targets
• Fluid typography
• Adaptive grid layouts

• Intersection Observer API - Scroll animations
• HTML5 Canvas - Particle network animation
• CSS Grid & Flexbox - Modern layouts
• Custom CSS Variables - Theme consistency
• Local Storage - User preferences (optional)

• Animated background with particles and blobs
• Professional profile with glow effects
• Typing animation for roles
• Quick stats showcase
• Social media links with tooltips
• Multiple call-to-action buttons

• Tabbed content (My Story, Interests, Fun Facts)
• Profile image with hover effects
• Download resume button
• Personal introduction and background
• Quick links to other sections

15+ featured projects including:

• Completed Projects (11):

  • Common Algorithms Library (Java)
  • iPhonePhone OOP Simulator
  • Numeric Data GUI
  • Personal Portfolio Website
  • Calculator App
  • Contact Manager
  • Airline Reservation System (Python)
  • File Compression Tool (Huffman)
  • CS Quiz Application
  • LED Circuit Design
  • Sumo Bot Competition

• Upcoming Projects (4):

  • 2D Game Engine (C++)
  • Arduino Smart Home System
  • Arduino Weather Station
  • Advanced Data Structures Library (C++)

• Programming Languages (Java, Python, JavaScript, C++)
• Web Development (HTML/CSS, Tailwind, React)
• Tools & Technologies
• Progress bars with tooltips
• Hover effects for detailed information

• Ontario Tech University details
• Bachelor of Science in Computer Science
• Expected Graduation: April 2028
• Academic progress tracker (50%)
• Key focus areas with colorful tags
• Academic highlights grid

• Impact statistics dashboard
• Short-term and long-term goals
• 5+ leadership positions with status badges
• Volunteering experience cards
• Timeline and progress tracking

• Functional contact form
• Email integration
• Social media links
• Response validation

# Clone the repository
git clone https://github.com/dhruvht612/Portfolio.git

# Navigate to the project directory
cd Portfolio

# Open in browser
open index.html
# or double-click index.html

# Clone the repository
git clone https://github.com/dhruvht612/Portfolio.git

# Navigate to the project directory
cd Portfolio

# Install dependencies
npm install

# Create .env file
cp .env.example .env

# Add your email credentials to .env
# EMAIL_USER=your-email@gmail.com
# EMAIL_PASS=your-app-password

# Start the server
npm start

# Or use nodemon for development
npm run dev

Server runs at: http://localhost:3000

Handles contact form submissions and sends email notifications.

Request Body:

{
  "name": "John Doe",
  "email": "john@example.com",
  "message": "Hello! I'd like to discuss a project."
}

Success Response:

{
  "success": true,
  "message": "Thank you for reaching out! I'll get back to you soon."
}

Error Response:

{
  "success": false,
  "message": "Failed to send message. Please try again."
}

📖 Full API Documentation: API.md

• ✅ Multi-layer animated background system
• ✅ Morphing gradient blobs (20s animation)
• ✅ Three-layer twinkling starfield
• ✅ Canvas-based particle network with connecting lines
• ✅ Floating geometric shapes (6 elements)
• ✅ Subtle grid pattern overlay
• ✅ Performance-optimized animations

• ✅ Enhanced project cards with gradient thumbnails
• ✅ Status badges (Featured, Coming Soon, In Progress, etc.)
• ✅ 140px height icon thumbnails with hover animations
• ✅ Improved typography and spacing
• ✅ Consistent action buttons across all projects
• ✅ Key features with checkmark icons
• ✅ Project statistics dashboard (15+ projects, 8+ technologies)
• ✅ Color-coded technology tags with borders
• ✅ Scroll-triggered entrance animations

• ✅ Impact statistics dashboard
• ✅ Enhanced goal cards with timeline badges
• ✅ Progress tracking on short-term goals
• ✅ Modern volunteer cards with status indicators
• ✅ Active/Completed badges with pulse animations
• ✅ Unique color themes per organization
• ✅ Icon containers with hover scale effects

• ✅ "Currently Enrolled" animated badge
• ✅ Academic progress bar (Year 2 of 4)
• ✅ Enhanced logo with glow effect
• ✅ Academic highlights grid (3 cards)
• ✅ Colorful focus area tags
• ✅ Modern card design with hover effects

• ✅ Scroll progress indicator
• ✅ Active section highlighting
• ✅ Animated underlines on hover
• ✅ Enhanced logo with glow effect
• ✅ Gradient contact button
• ✅ Improved mobile menu with icons
• ✅ Hamburger to X animation
• ✅ Dark mode toggle with rotation effect

• ✅ Call-to-action section at top
• ✅ 4-column organized layout
• ✅ Enhanced social media buttons
• ✅ Location and availability stats
• ✅ Gradient divider line
• ✅ Animated back-to-top button

• ✅ Unified gradient theme (Teal → Cyan → Light Cyan)
• ✅ CSS variables for consistent styling
• ✅ Animated gradient text on all headings
• ✅ Synchronized backgrounds (#0f172a)
• ✅ Consistent decorative elements
• ✅ Performance optimizations

• ✅ Lazy Loading - Images load on demand
• ✅ Intersection Observer - Efficient scroll detection
• ✅ Canvas Animation Pause - Stops when not visible
• ✅ Responsive Particle Count - Adapts to screen size
• ✅ CSS Animations - GPU-accelerated transforms
• ✅ Preloader - Smooth initial load experience
• ✅ Backdrop Blur - Modern glassmorphism effects
• ✅ Code Splitting - Deferred JavaScript loading

• 🎯 First Contentful Paint: < 1.5s
• 🎯 Time to Interactive: < 3.0s
• 🎯 Lighthouse Score: 90+
• 🎯 Mobile Optimized: Yes
• 🎯 Accessibility: ARIA labels and semantic HTML

Note: Modern CSS features (backdrop-filter, CSS Grid) require recent browser versions.

Portfolio/
│
├── 📁 Documentation/               # Project documentation
│   ├── 📖 API.md                  # API endpoints and examples
│   ├── 📖 DEVELOPER_GUIDE.md      # Development guide
│   └── 📖 DOCUMENTATION.md        # Technical documentation
│
├── 📁 models/                     # Backend data models
│   └── 📄 Message.js              # Message schema for contact form
│
├── 🌐 index.html                  # Main portfolio page (3,472 lines)
│   ├── ✨ Enhanced home with animated background
│   ├── 🎨 15+ project cards with filters
│   ├── 🧭 Advanced navigation with scroll progress
│   ├── 🌟 Beyond the Classroom section
│   ├── 🎓 Education with progress tracking
│   └── 📬 Contact form integration
│
├── 📄 script.js                   # Frontend JavaScript (769 lines)
│   ├── Navigation & menu logic
│   ├── Project filtering
│   ├── Chatbot functionality
│   ├── Tab switching
│   └── Form validation
│
├── 📄 index.js                    # Backend server (256 lines)
│   ├── Express.js setup
│   ├── Contact API routes
│   ├── Security middleware
│   └── Static file serving
│
├── 🎨 style.css                   # Additional custom styles
├── 📄 sw.js                       # Service Worker (PWA)
├── 📄 testContact.js              # API testing script
│
├── 📁 assets/                     # All images, logos, and files (~1.1 MB)
│   ├── logo.png                   # Portfolio logo
│   ├── profile.png                # Profile picture
│   ├── resume.pdf                 # Downloadable resume
│   ├── ontariotechu_logo.png      # Ontario Tech University logo
│   ├── ontariotechu_logo.jpeg     # Ontario Tech logo (alternate)
│   ├── fletcher's_meadow.png      # Fletcher's Meadow SS logo
│   ├── fletcher's_meadow_logo.png # Fletcher's Meadow (alternate)
│   ├── google_logo.jpg            # Google Developer Groups logo
│   ├── Forage_logo.jpeg           # Forage logo
│   ├── HackerRank_logo.png        # HackerRank logo
│   ├── oneroadmap_logo.jpeg       # OneRoadmap logo
│   └── README.md                  # Assets documentation
│
├── 📄 Configuration/
│   ├── package.json               # Node.js dependencies
│   ├── package-lock.json          # Locked versions
│   ├── manifest.json              # PWA manifest
│   ├── robots.txt                 # SEO crawler rules
│   ├── sitemap.xml                # Site structure
│   └── .env                       # Environment variables (gitignored)
│
├── 📝 Documentation/
│   ├── README.md                  # Main documentation (this file)
│   ├── File_Tree.md               # Project structure overview
│   ├── SECURITY.md                # Security policy
│   └── .gitignore                 # Git ignore rules (306 lines)
│
└── 📁 node_modules/               # Dependencies (~150 packages, gitignored)

📊 See File_Tree.md for detailed file structure

--gradient-primary: #14b8a6 → #22d3ee → #06b6d4
--bg-primary: #0f172a (Dark Slate)
--bg-secondary: #111827 (Gray 900)
--text-primary: #ffffff (White)
--text-secondary: #9ca3af (Gray 400)

• Font Family: System UI / Sans-serif
• Headings: 4xl-6xl (Extrabold, Animated Gradient)
• Body: Base size with responsive scaling
• Code: Monospace for technical content

• Sections: py-20 (80px vertical padding)
• Cards: p-6 to p-12 (24px-48px)
• Gaps: 4-12 units (16px-48px)

• Blob Morphing - Organic gradient movement (20s cycles)
• Starfield - Three-layer twinkling stars (5s, 7s, 10s)
• Particle Network - Canvas-based with connecting lines
• Floating Shapes - Smooth up/down + rotation
• Scroll Animations - Cards fade in with stagger effect

• Icon thumbnails (140px height)
• Gradient backgrounds per project
• Status badges (Featured, Active, Coming Soon, etc.)
• Action buttons (Live Demo, Code)
• Hover effects (scale, lift, glow)

• Icon containers with backgrounds
• Active/Completed status badges
• Pulse animations on active roles
• Unique color themes per organization

• Timeline badges with date ranges
• Progress bars and vision statements
• Icon containers with hover scale
• Bullet points with colored dots

Create a .env file in the root directory:

# Email Configuration
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-app-specific-password

# Server Configuration
PORT=3000
NODE_ENV=production

# CORS Configuration (Optional)
ALLOWED_ORIGINS=http://localhost:3000,https://yourdomain.com

1. Enable 2-Factor Authentication in your Google Account
2. Generate an App Password:
   • Go to Google Account Settings
   • Security → 2-Step Verification
   • App passwords → Generate
3. Use the generated password in .env

See API.md for complete documentation.

Deploy to platforms like:

• GitHub Pages
• Netlify
• Vercel
• Cloudflare Pages

Deploy to platforms like:

• Heroku
• Railway
• Render
• DigitalOcean

• ✅ Semantic HTML5 elements
• ✅ Meta tags (description, keywords, author)
• ✅ Open Graph tags for social sharing
• ✅ Twitter Card meta tags
• ✅ Structured data (JSON-LD)
• ✅ Sitemap ready
• ✅ Descriptive alt texts

• ✅ ARIA labels and roles
• ✅ Keyboard navigation support
• ✅ Focus indicators
• ✅ Skip to content link
• ✅ Semantic heading structure
• ✅ Color contrast compliance

• All links work correctly
• Contact form submits successfully
• Project filters work
• Mobile menu opens/closes
• Animations run smoothly
• Images load properly
• Responsive on all devices
• Cross-browser compatibility

• Run Lighthouse audit
• Check Core Web Vitals
• Test on slow 3G network
• Verify animation performance

While this is a personal portfolio, suggestions and feedback are welcome!

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

Dhruv Thakar

• 📧 Email: thakardhruvh@gmail.com
• 💼 LinkedIn: linkedin.com/in/dhruv-thakar-ba46aa296
• 💻 GitHub: github.com/dhruvht612
• 📍 Location: Oshawa, Ontario, Canada
• 🎓 University: Ontario Tech University
• 📅 Graduation: April 2028

© 2025 Dhruv Thakar. All rights reserved.

This project is for personal portfolio purposes. Feel free to use it as inspiration for your own portfolio, but please provide appropriate credit.

• Tailwind CSS - For the amazing utility-first framework
• Font Awesome - For comprehensive icon library
• Ontario Tech University - For the amazing education and opportunities
• Community - For inspiration and feedback