📸 PixelFrame Studio

👥 Group Project - NEWTON SCHOOL OF TECHNOLOGY

A modern, responsive photography portfolio website with stunning galleries, seamless navigation, and client booking features.

Academic Project | Collaborative Development | Web Development Course

Live Demo • Website • Report Issue • Project Board

---

👥 Team Members

Name	GitHub
Prithviraj	@prithviraj-1657
Suraj Patil	@SurajPatil1404
Atharv Deshpande	@Noctis-404

💡 Note: Update the team member table with actual names, GitHub profiles, and specific responsibilities.

---

📋 Project Overview

This is a collaborative web development project created by students at NEWTON SCHOOL OF TECHNOLOGY (NST-ADYPU). The project aims to demonstrate professional web development practices including:

• ✅ Version control and Git workflows
• ✅ Responsive design and mobile-first development
• ✅ JavaScript DOM manipulation and interactivity
• ✅ Team collaboration and code reviews
• ✅ Deployment and hosting

---

✨ Features

• 🎨 Responsive Design - Optimized for desktop, tablet, and mobile devices
• 🖼️ Image Gallery - Categorized portfolio sections (weddings, portraits, events, etc.)
• 📱 Mobile First - Built with mobile-first approach for perfect responsiveness
• ✉️ Contact Form - Client inquiries and booking system
• 🎭 Smooth Animations - Beautiful CSS animations and transitions
• 🚀 Performance Optimized - Lightweight and fast-loading
• 🎯 SEO Friendly - Structured HTML for better search visibility
• 💾 Easy to Deploy - Perfect for GitHub Pages, Vercel, or Netlify

---

🛠️ Tech Stack

┌──────────────────────────────┐
│   Frontend Technologies      │
├──────────────────────────────┤
│ • HTML5 - Semantic markup    │
│ • CSS3 - Modern styling      │
│ • JavaScript - Interactivity │
│ • Responsive Grid/Flexbox    │
└──────────────────────────────┘

Version Control & Collaboration:

• Git & GitHub for version control
• GitHub Issues for task tracking
• Pull Requests for code reviews

Development Environment:

• VS Code (Recommended)
• Live Server Extension
• Chrome DevTools

---

🚀 Quick Start

Prerequisites

• Git installed on your machine
• A modern web browser (Chrome, Firefox, Safari, Edge)
• VS Code or any code editor
• GitHub account for collaboration

Setup Instructions

1. Clone the repository:

   git clone https://github.com/prithviraj-1657/PixelFrame-Studio.git
   cd PixelFrame-Studio

2. Create a feature branch:

   git checkout -b feature/your-feature-name

3. Open with Live Server:

   • Install Live Server extension in VS Code
   • Right-click index.html → "Open with Live Server"
   • Browser will open at http://127.0.0.1:5500

4. Make changes and commit:

   git add .
   git commit -m "feat: Add feature description"
   git push origin feature/your-feature-name

5. Create a Pull Request on GitHub

---

📁 Project Structure

PixelFrame-Studio/
├── index.html                 # Main landing page
├── pages/
│   ├── portfolio.html         # Gallery/portfolio page
│   ├── services.html          # Services offered
│   ├── about.html             # About photographer
│   └── contact.html           # Contact & booking form
├── assets/
│   ├── images/                # High-quality photos
│   ├── icons/                 # SVG icons
│   └── logo/                  # Brand logo
├── css/
│   ├── style.css              # Main stylesheet
│   ├── responsive.css         # Mobile/tablet styles
│   └── animations.css         # CSS animations
├── js/
│   ├── script.js              # Main JavaScript
│   ├── gallery.js             # Gallery interactions
│   └── form.js                # Form handling
├── README.md                  # This file
└── .gitignore

---

🤝 Contribution Guidelines

For Team Members

1. Before Starting Work:

   • Check the Project Board for assigned tasks
   • Create/update an issue for your work
   • Pull the latest changes: git pull origin main

2. While Developing:

   • Create a feature branch: git checkout -b feature/task-name
   • Keep commits atomic and meaningful
   • Write descriptive commit messages:

     git commit -m "feat: Add gallery filter functionality"
     git commit -m "fix: Resolve mobile menu animation bug"
     git commit -m "docs: Update README with setup instructions"

   • Follow the existing code style
   • Test your changes before pushing

3. Creating a Pull Request:

   • Push to your feature branch: git push origin feature/task-name
   • Create a PR with a clear title and description
   • Link related issues: "Closes #123"
   • Request review from team members
   • Address feedback and push updates

4. Code Review Checklist:

   • Code follows project style guide
   • Changes work on desktop and mobile
   • No console errors or warnings
   • Comments added for complex logic
   • Documentation updated if needed

Commit Message Format

<type>: <subject>

<body (optional)>

<footer (optional)>

Types:

• feat: New feature
• fix: Bug fix
• docs: Documentation changes
• style: Code style changes (no logic change)
• refactor: Code refactoring
• test: Test additions/modifications

---

🎓 Learning Outcomes

This project helps team members understand:

• ✅ HTML5 semantic markup
• ✅ CSS3 Flexbox and Grid layouts
• ✅ Responsive web design principles
• ✅ JavaScript DOM manipulation
• ✅ Git version control and GitHub workflows
• ✅ Team collaboration and code reviews
• ✅ Web performance optimization
• ✅ Deployment and hosting

---

📊 Development Progress

Phase 1: Foundation ✅

• Project setup and Git initialization
• HTML structure and semantic markup
• Basic CSS styling
• Navigation implementation

Phase 2: Core Features 🔄

• Gallery implementation with filter
• Contact form with validation
• Image lazy-loading
• Mobile responsiveness

Phase 3: Enhancement 📋

• Advanced animations
• Form backend integration
• Performance optimization
• SEO improvements

Phase 4: Testing & Deployment 📋

• Cross-browser testing
• Mobile device testing
• Accessibility audit
• Deployment to live server

---

🚀 Deployment

GitHub Pages

git push origin main:gh-pages

Access at: https://prithviraj-1657.github.io/PixelFrame-Studio/

Vercel

vercel --prod

Netlify

• Connect repository to Netlify
• Auto-deploy on push to main

---

📚 Resources & References

• MDN Web Docs
• CSS Tricks
• Git & GitHub Guide
• Responsive Design
• JavaScript Guide

---

📞 Communication

Team Communication Channels:

• 💬 GitHub Issues - For technical discussions
• 📋 Project Board - For task tracking
• 📧 Email - For urgent matters
• 🤝 Weekly Meetings - Every [Day] at [Time]

---

📜 License

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

---

🙏 Acknowledgments

• NEWTON SCHOOL OF TECHNOLOGY - Academic institution
• Course Instructor - Guidance and mentorship
• Team Collaboration - Collective effort and dedication
• Open Source Community - Inspiration and resources

---

📝 Notes for Team

Important Reminders

• ⚠️ Always pull before starting work: git pull origin main
• ⚠️ Create feature branches for each task
• ⚠️ Write meaningful commit messages
• ⚠️ Test on mobile before pushing
• ⚠️ Request peer review before merging
• ⚠️ Keep the main branch stable

Meeting Schedule

• Status Updates: [Day/Time]
• Code Reviews: [Day/Time]
• Testing & QA: [Day/Time]

---

Made with ❤️ by the PixelFrame Studio Team

NEWTON SCHOOL OF TECHNOLOGY

Last Updated: December 2025

⬆ back to top