A modern, elegant image search web application built with pure HTML, CSS, and JavaScript.
📋 Project Overview
PicFinder is a modern, elegant web application designed for seamless image discovery. Built with pure HTML, CSS, and JavaScript, it provides users with an intuitive platform to search and explore high-quality images from Unsplash's extensive database. The application features a stunning visual design with interactive elements and smooth animations.
✨ Key Feature
🔍 Advanced Search Capabilities
Real-time Image Search - Instant results from Unsplash API Smart Pagination - "Show More" button for endless scrolling High-Quality Content - Curated collection of professional images Direct Source Links - Access original images on Unsplash
🎨 Visual Excellence
Modern Glass-morphism Design - Sleek translucent panels and effects Animated Backgrounds - Interactive Vanta.js particle animations Smooth Animations - CSS transitions and fade-in effects Responsive Layout - Optimized for all device sizes
💻 User Experience
Intuitive Navigation - Simple three-page structure Fast Performance - Optimized loading and API calls Clean Interface - Minimalist design focused on content Cross-Browser Compatibility - Works on all modern browsers
External Integrations
Unsplash REST API - Primary image data source Three.js - 3D graphics rendering engine Vanta.js - Interactive background animations Bootstrap Icons - Clean SVG icons for UI
Project Structure
text picfinder/
index.html # Main search interface
about.html # Project information
contact.html # Team contact form
style.css # Global stylesheet
index.js # Search functionality
contact.js # Form handling
🚀 Core Functionality
Image Search System Dynamic API calls to Unsplash with search queries Pagination handling for loading additional results Error handling for network requests Smooth DOM updates with fade animations
Interactive Elements
Form submission with validation Responsive navigation between pages Animated background interactions Mobile-friendly touch controls
👥 Development Team
Project Contributors: Aryan Goel Mudassir Kamaal Naman Chaurasiya Divit Khandelwal Lakshay Aggarwal
🌟 Technical Highlights
Modern JavaScript Usage ES6+ syntax with arrow functions and template literals Async/await for API calls Event delegation and efficient DOM handling Modular function structure
CSS Innovations
CSS custom properties for theming Backdrop filter effects for glass-morphism Responsive grid layouts Smooth transition animations
API Integration
RESTful API consumption Proper error handling Parameterized requests JSON data processing
📞 Contact & Support
Email: aryangoel600@gmail.com
Phone: +91 9811796645
🤖 AI Usage
- Deepseek has been used to write the vanta.js external file which helped us in the 3d animated background.
- CHatgpt has been used to find out about different websites like vanta.js and bootstrap icons.
- Claude has been used to learn about the js animation in the contact page.