📱 Shriram Mange — Personal Portfolio

Modern, responsive, Android-inspired portfolio web application built with React, TypeScript, and Tailwind CSS.

---

🌐 View Live Site • 💼 Explore Projects • 🛠️ Tech Stack • 🚀 Quick Start • 📬 Contact

👨‍💻 About Shriram Mange

I am a passionate Android Developer specializing in Kotlin & Jetpack Compose, as well as a Full-Stack Web Developer based in Nashik, Maharashtra, India. I focus on engineering clean-architected, fluid mobile experiences and modern, scalable full-stack web applications.

• 🎓 Education: Pursuing MCA at K.K. Wagh Institute of Engineering Education and Research (8.05 CGPA) | BCA Graduate from Sandip University (8.41 CGPA)
• 💼 Experience: Freelance Developer (7+ delivered client apps), Android Intern at S.T.R.E.A.M. Edutech, Full Stack Intern at Wind Hans Technology, Android Developer at Techentrance
• 🏆 Certifications & Accolades: GitHub Foundations Certified (82%), 1st Runner Up at LogicHunt 2025, 1st Position at TechTrek 2k24, Hacktoberfest Contributor

---

✨ Portfolio Highlights & Features

• 🎨 Android & Material Theme: Distinctive dark UI inspired by Android and Jetpack Compose design tokens with #3DDC84 accent branding.
• ⚡ Blazing Fast Performance: Powered by Vite + React 18 for sub-second page loads and instantaneous hot module replacement.
• 🌌 Dynamic Particle Canvas: Interactive floating particle effects powered by tsparticles-slim and react-tsparticles.
• 📱 Fully Responsive Layout: Designed from mobile-first to 4K desktop screens with responsive grids and touch-friendly navigation.
• 📬 Interactive Contact Form: Real-time form submissions powered by EmailJS and Firebase backend integrations.
• 🤖 AI & LLM-Friendly (/llms.txt): Includes a structured context endpoint for LLM discovery and AI search agents.
• 🔍 SEO & Rich Previews: Structured JSON-LD Person schema, Open Graph tags, Twitter cards, XML sitemaps, and robots.txt.

---

🛠️ Tech Stack

Frontend & Core

Technology	Description
React 18	Component-based modern UI library
TypeScript 5	Strict type safety and maintainable codebase
Vite 5	Next-generation frontend build tooling
Tailwind CSS	Utility-first styling framework

UI, Icons & Animations

Library	Description
Lucide React	Clean, customizable modern icon set
tsParticles	Lightweight, interactive background particle network
ScrollReveal	Smooth scroll-triggered reveal animations

Services, APIs & Hosting

Service	Description
Firebase	Cloud Firestore / database & backend services
EmailJS	Client-side email dispatch for the contact form
Netlify	Continuous deployment, automated builds & edge CDN

---

📂 Project Architecture

android-portfolio/
├── public/
│   ├── logos/                     # Tech stack brand SVG/PNG icons
│   ├── projects/                  # Project preview screenshots & mockups
│   ├── Shriram_Mange_Resume.pdf   # Downloadable professional CV
│   ├── llms.txt                   # LLM/AI context documentation
│   ├── robots.txt                 # Search engine crawler policies
│   └── sitemap.xml                # Search indexing map
├── src/
│   ├── components/
│   │   ├── Achievements/          # Hackathons, coding wins & leadership
│   │   ├── Contact/               # Interactive contact form & social channels
│   │   ├── Education/             # Degree timelines & certifications
│   │   ├── Navigation/            # Responsive Navbar & mobile drawer
│   │   ├── Skills/                # Grouped tech competencies & badges
│   │   ├── Timeline/              # Professional work experience & internships
│   │   ├── ui/                    # Reusable atomic UI elements
│   │   ├── BackToTopButton.tsx    # Smooth scroll-to-top floating button
│   │   ├── Hero.tsx               # Header hero banner with call-to-actions
│   │   ├── ParticleBackground.tsx # tsParticles canvas configuration
│   │   ├── Projects.tsx           # Filterable project showcase cards
│   │   └── ScrollReveal.tsx       # Intersection-observer scroll reveal wrapper
│   ├── hooks/                     # Custom React hooks
│   ├── lib/                       # Utility helpers & configurations
│   ├── App.tsx                    # Root application component
│   ├── firebase.ts                # Firebase client initialization
│   ├── index.css                  # Global design tokens & Tailwind directives
│   └── main.tsx                   # React DOM entry point
├── index.html                     # HTML5 template with SEO & OpenGraph meta
├── netlify.toml                   # Netlify deployment & redirect settings
├── tailwind.config.js             # Tailwind custom theme & color rules
└── vite.config.ts                 # Vite bundler configuration

---

🚀 Featured Projects Showcased

Project	Platform / Tech	Description	Links
HappenGrid	Django, Python, AWS, Coolify	Complete event hosting & attendee ticket booking ecosystem with Razorpay.	🌐 Live Site
Stepo	Kotlin, Jetpack Compose, MVVM	School management app with timetable, tests, and FCM used by 150+ students.	💻 Code
Zervista	Flutter, Dart, Firebase	Full-featured salon & parlour management app with client and staff analytics.	📱 Play Store
Smart Assistant for Visually Impaired	Python, Raspberry Pi, OCR	IoT device converting physical text to real-time speech using Tesseract OCR.	💻 Code
Pdfdroid	JavaScript, PDF.js	Browser-based suite for merging, splitting, compressing, and converting PDFs.	🌐 Live Site • 💻 Code
House of Deepak	React.js, Tailwind, Firebase	E-commerce storefront for Indian and Western ethnic fashion wear.	🌐 Live Site

---

⚡ Getting Started

Follow these steps to run the portfolio locally on your machine.

Prerequisites

• Node.js: v18.0.0 or higher
• npm (or pnpm / yarn)
• Git

Installation

1. Clone the repository:

   git clone https://github.com/Shriram2005/portfolio.git
   cd portfolio

2. Install dependencies:

   npm install

3. Configure Environment Variables: Create a .env file in the root directory (refer to .env.example):

   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
   VITE_FIREBASE_APP_ID=your_firebase_app_id
   VITE_EMAILJS_SERVICE_ID=your_emailjs_service_id
   VITE_EMAILJS_TEMPLATE_ID=your_emailjs_template_id
   VITE_EMAILJS_PUBLIC_KEY=your_emailjs_public_key

4. Start the local development server:

   npm run dev

   Open your browser and navigate to http://localhost:5173.

5. Build for production:

   npm run build

---

📬 Connect & Contact

Let's collaborate or build something amazing together!

• 🌐 Portfolio: shrirammange.me
• 📧 Email: mange.shriram@gmail.com
• 💼 LinkedIn: linkedin.com/in/shriram-mange
• 🐙 GitHub: github.com/Shriram2005
• 💬 Telegram: @Shrirammange

---

_{Designed & Developed with ❤️ by Shriram Mange • © 2026 All Rights Reserved}