# Muhammad Umer Farooq — Full Knowledge Base & Context > Complete context, project specifications, technical skills, and background information for Muhammad Umer Farooq's portfolio. --- ## 1. Biography & Professional Summary - **Name**: Muhammad Umer Farooq - **Role**: Full-Stack Developer & Software Engineering Student - **Location**: Lahore, Pakistan - **Education**: 5th-Semester Computer Science undergraduate at Superior University, Lahore - **Leadership**: Academic Group Leader at Superior University (directing development teams, managing GitHub workflows and version control) - **Focus Areas**: MERN Stack (MongoDB, Express, React, Node.js), C++ with Data Structures & Algorithms (DSA), AI-driven applications, real-time interactive systems, and Computer Vision. - **Certifications**: Full-Stack Web Development, SQL Database Design, Digital Marketing. - **Website**: https://umersmx.vercel.app - **GitHub**: https://github.com/umersmx - **LinkedIn**: https://linkedin.com/in/umersmx - **Email**: umersmx@gmail.com --- ## 2. Technical Skills Matrix ### Programming Languages - **JavaScript (ESNext)** — Expert: Modern ES6+, asynchronous programming, event-driven architecture, DOM manipulation. - **C++** — Proficient: Object-Oriented Programming (OOP), Data Structures & Algorithms (DSA), memory management, competitive problem solving. - **Python** — Proficient: Scripting, backend automation, Computer Vision with OpenCV and MediaPipe. - **SQL** — Proficient: Relational database design, querying, joins, indexing, normalization. - **PHP** — Familiar: Server-side scripting, relational data handling with MySQL. ### Web Development & Frameworks - **React.js** — Expert: Custom hooks, component lifecycle, Context API, state management, performance optimization, React Router/Remix. - **Node.js** — Expert: Asynchronous event loops, REST API design, middleware architecture, file streaming, backend services. - **Express.js** — Expert: Modular routing, JWT authentication, role-based access control (RBAC), error handling middleware. - **MongoDB & Mongoose** — Proficient: Document modeling, schema validation, aggregation pipelines, indexing. - **Tailwind CSS & CSS Modules** — Expert: Responsive design, custom design systems, CSS variables, glassmorphic UI styling. - **Three.js & WebGL** — Proficient: 3D interactive graphics, shaders, 3D device mockups, canvas rendering. - **Framer Motion** — Proficient: Fluid UI animations, layout transitions, micro-interactions. ### Tools & DevOps - **Git & GitHub** — Expert: Version control, branching strategies, collaborative PR workflows, team code reviews. - **Vite** — Proficient: Build configuration, fast HMR, asset optimization. - **Firebase** — Proficient: Hosting, Firestore, authentication, cloud functions. - **Railway & Vercel** — Proficient: Cloud deployments, serverless functions, environment configuration. - **VS Code** — Expert: Primary development environment, linting, debugging. --- ## 3. Projects Breakdown ### 1. SMX AI — Glassmorphic Conversational Assistant - **Live URL**: https://smx-ai.vercel.app - **Overview**: An advanced, responsive AI conversational web application with real-time token streaming and multi-provider model routing. - **Key Features**: - Dynamic model routing between Google Gemini 2.0 Flash and Groq Llama 3.3. - Real-time Server-Sent Events (SSE) token streaming for zero-latency responses. - 3D interactive avatar protocol rendered via Three.js. - Glassmorphic UI theme with responsive layout for mobile, tablet, and desktop. - Serverless edge architecture for ultra-low latency. ### 2. SkillNest — Full-Stack Learning Management System (LMS) - **Portfolio Route**: https://umersmx.vercel.app/projects/smart-sparrow/ - **Overview**: A scalable education platform designed to connect instructors with students in an interactive virtual learning environment. - **Tech Stack**: React.js, Node.js, Express.js, MongoDB, Mongoose, JWT, Tailwind CSS. - **Key Features**: - Secure role-based authentication (Student, Instructor, Administrator). - Course creation, lesson management, dynamic progress tracking, and student dashboards. - RESTful API with validation, error handling, and structured database schemas. ### 3. AI Gym Bro — Computer Vision Fitness Tracker - **Portfolio Route**: https://umersmx.vercel.app/projects/ai-gym-bro/ - **Overview**: An intelligent desktop application utilizing computer vision to analyze human biomechanics in real-time during exercise routines. - **Tech Stack**: Python, OpenCV, MediaPipe, NumPy. - **Key Features**: - Webcam-based skeletal pose estimation and landmark angle calculation (e.g. elbow/shoulder angles for bicep curls, shoulder press). - Real-time repetition counting and form quality assessment. - Live visual feedback and posture correction warnings on screen. ### 4. Modern Residentia — Luxury Property Rental Platform - **Portfolio Route**: https://umersmx.vercel.app/projects/modern-residentia/ - **GitHub Repository**: https://github.com/umersmx/Modern-Residentia-Project - **Overview**: A premium real estate and property rental web platform with an aesthetic dark glassmorphic design and role-based user management. - **Tech Stack**: React, CSS Modules, Modern JavaScript, Node.js. - **Key Features**: - Comprehensive property listings with filtering by price, location, and amenities. - Role-based portal for property seekers, property owners/hosts, and platform administrators. - Dynamic theming with smooth CSS transitions. --- ## 4. Technical Writing & Articles ### "You (probably) don't need CSS-in-JS" - **URL**: https://umersmx.vercel.app/articles/modern-styling-in-react - **Summary**: An in-depth critique of runtime CSS-in-JS libraries comparing performance trade-offs against modern Vanilla CSS with CSS custom properties (variables) and CSS Modules in React applications. ### "Hello world: how I built this site" - **URL**: https://umersmx.vercel.app/articles/hello-world - **Summary**: Architectural overview of this portfolio website, covering the transition from Create React App to Next.js/Remix, integrating interactive Three.js 3D models, cyber-aesthetic design inspirations, and custom MDX blog pipeline. --- ## 5. Contact & Social Channels - **Portfolio**: [https://umersmx.vercel.app](https://umersmx.vercel.app) - **Contact Form**: [https://umersmx.vercel.app/contact/](https://umersmx.vercel.app/contact/) - **GitHub**: [https://github.com/umersmx](https://github.com/umersmx) - **LinkedIn**: [https://linkedin.com/in/umersmx](https://linkedin.com/in/umersmx) - **Email**: [umersmx@gmail.com](mailto:umersmx@gmail.com)