Mss Web

A highly professional, production-ready website for modern Software Houses and IT Services. Built with React + Vite and powered by an "Instant Sync" Google Sheets architecture.

🌟 Key Features

• Instant Sync Architecture: Uses short-lived caching and cache-busting URLs to ensure row updates/deletions in Google Sheets reflect on the site in under 60 seconds.
• Dynamic Profile Detection: Intelligent SafeImage component that detects image aspect ratios on-the-fly.
  • Square Headshots: Automatically rendered as perfect circles.
  • Rectangles: Rendered with professional rounded corners.
• Configurable Certificate Templates: Full control over certificate layouts via config.yml.
  • Map specific Credential ID prefixes (like DCC24) to background images.
  • Define precise coordinates (X/Y), colors, and font weights for text overlays.
• State-Aware UI:
  • Dynamic browser tab titles based on active route (e.g., MSS - Services).
  • Premium custom cursor with HMR-stable rendering and hardware acceleration.
• Corporate UX: Glassmorphism, smooth Framer Motion transitions, and a 100% responsive grid.

🚀 Quick Start

1. Clone & Install:

   git clone https://github.com/RasikhAli/MSS-Web.git
   cd MSS-Web
   npm install
   

2. Setup Config:
   • Create config.yml from config.example.yml.
   • Update your company profile and Google Sheet CSV URLs.
3. Local Development:

   npm run dev
   

4. Production Build:

   npm run build
   

🚢 Deployment (GitHub Pages)

This project is optimized for GitHub Pages using GitHub Actions:

1. Setup:
   • Go to your repository Settings > Pages.
   • Under Build and deployment, set Source to GitHub Actions.
2. Execution:
   • The included .github/workflows/deploy.yml automatically builds and deploys your site every time you push to the main branch.
3. Custom Domain:
   • If using a custom domain, add a CNAME file to the public/ folder or configure it in the Pages settings.

Alternative: Deployment to Render (Static Site)

If you prefer Render, it is highly recommended for Private Repositories (free tier):

1. Create Site: Connect your GitHub repo and select Static Site.
2. Settings:
   • Build Command: npm run build
   • Publish Directory: dist
3. SPA Routing:
   • Go to the Redirects/Rewrites tab.
   • Add a rule: /* -> /index.html (Action: Rewrite).

📊 Google Sheets Data Schema

The site fetches data from the following sheets. Ensure column headers match exactly:

1. Certificates

Full Name, Credential ID, Competition Title, Roll Number (in format), Status (must be "Done"), Timestamp.

2. Projects

Project Title, Project Category / Type, Project Status, Short Description, Duration, Tech Stack, Screenshot(s), Deployment Platform, Live Link, GitHub Repo.

3. Team

Person Name, Person Quote, Person Detail @ MSS, Job Title @ MSS, Duration, Profile Picture, GitHub Profile Link, LinkedIn Profile Link, Tech Stack.

🛠️ Troubleshooting (Console Logs)

You may see these logs in your browser console; they are benign and do not affect performance:

• NS_BINDING_ABORTED: Happens when a request is cancelled (e.g., when you refresh the page before an image finishes loading).
• The Components object is deprecated: A legacy warning from the tsparticles library; it's harmless.
• OpaqueResponseBlocking (ORB): A browser security feature. It happens with some external images (like Unsplash). The browser still renders the image but prevents script access to the image data for security.

© 2026 Marvelous Software Solutions. Professional Grade Digital Products.