Repository navigation
Expand file tree
/
Copy pathservices.html
More file actions
215 lines (197 loc) · 11.8 KB
/
Copy pathservices.html
File metadata and controls
215 lines (197 loc) · 11.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services - Muhammad Saad Jamal</title>
<meta name="description" content="Flutter development, Firebase architecture, API integration, and MVP builds for founders — from Muhammad Saad Jamal.">
<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg">
<link rel="apple-touch-icon" href="assets/img/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<a href="index.html" class="logo">SAAD<span class="dim">.dev</span></a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="hamburger">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</nav>
</header>
<main>
<!-- ============ HEADER ============ -->
<section style="padding-bottom: 50px;">
<div class="section-head">
<span class="eyebrow">Services</span>
<h2>What I Can Build For You</h2>
<p>I work with founders and teams who need a Flutter app built right the first time — from architecture through to a shipped release. Here's exactly what that looks like.</p>
</div>
</section>
<!-- ============ SERVICES (EXPANDED) ============ -->
<section style="padding-top: 0;">
<div class="service-grid">
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<rect x="7" y="2" width="10" height="20" rx="2"/><line x1="11" y1="18" x2="13" y2="18"/>
</svg>
<h3>Mobile App Development</h3>
<p>End-to-end cross-platform apps for Android & iOS, from architecture through to a shipped release.</p>
<p class="spec-label">What's Included</p>
<ul class="spec-list">
<li>Cross-platform build for Android & iOS from one codebase</li>
<li>Custom UI matched to your brand, not a template</li>
<li>State management (GetX or Provider) chosen for your app's actual complexity</li>
<li>Store-ready release build</li>
</ul>
<div class="chip-row" style="margin-top: 16px;">
<span class="chip">Flutter</span>
<span class="chip">Dart</span>
</div>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<ellipse cx="12" cy="5" rx="7" ry="2.5"/><path d="M5 5v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5V5"/><path d="M5 11v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-6"/>
</svg>
<h3>Backend & Firebase Architecture</h3>
<p>Authentication, Firestore data modeling, security rules, and role-based access control built to hold up under real users.</p>
<p class="spec-label">What's Included</p>
<ul class="spec-list">
<li>Firebase Authentication — email, social, or custom flows</li>
<li>Firestore data modeling built for how your app actually queries data</li>
<li>Security rules and role-based access control (RBAC) for multi-user apps</li>
<li>Real-time sync where it matters, not everywhere by default</li>
</ul>
<div class="chip-row" style="margin-top: 16px;">
<span class="chip">Firebase</span>
<span class="chip">RBAC</span>
</div>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5"/><path d="M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5"/>
</svg>
<h3>API & Third-Party Integration</h3>
<p>REST API integration and conversational AI — including Dialogflow chatbots wired directly into app workflows.</p>
<p class="spec-label">What's Included</p>
<ul class="spec-list">
<li>REST API integration with existing backends or third-party services</li>
<li>Dialogflow chatbot integration wired into real app workflows</li>
<li>Payment gateway and notification service integration</li>
</ul>
<div class="chip-row" style="margin-top: 16px;">
<span class="chip">REST API</span>
<span class="chip">Dialogflow</span>
</div>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<polygon points="12,3 21,8 12,13 3,8"/><polyline points="3,13 12,18 21,13"/><polyline points="3,17.5 12,22 21,17.5"/>
</svg>
<h3>Clean Architecture & Refactors</h3>
<p>Repository-Service-Provider architecture for codebases that stay maintainable as features and teams grow — including audits of existing apps.</p>
<p class="spec-label">What's Included</p>
<ul class="spec-list">
<li>Repository-Service-Provider architecture for new or existing codebases</li>
<li>Audits of existing apps — finding where technical debt is slowing you down</li>
<li>Refactors that don't require a full rewrite</li>
</ul>
<div class="chip-row" style="margin-top: 16px;">
<span class="chip">Clean Architecture</span>
<span class="chip">Code Review</span>
</div>
</div>
<div class="service-card">
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<path d="M12 2c3 2 4.5 5.5 4.5 9 0 2-1 4-1 4h-7s-1-2-1-4c0-3.5 1.5-7 4.5-9z"/><circle cx="12" cy="9" r="1.5"/><path d="M8.5 15c-2 0-3 2-3 5 2-1 3-2 3-2M15.5 15c2 0 3 2 3 5-2-1-3-2-3-2"/>
</svg>
<h3>MVP Development for Founders</h3>
<p>Fast, production-minded builds for early-stage products — the kind of app you can actually launch, not just demo.</p>
<p class="spec-label">What's Included</p>
<ul class="spec-list">
<li>Scoped for speed without cutting corners on architecture</li>
<li>Built to extend, not thrown away once you raise funding or gain users</li>
<li>Direct collaboration — you're talking to the person writing the code</li>
</ul>
<div class="chip-row" style="margin-top: 16px;">
<span class="chip">MVP</span>
<span class="chip">Rapid Prototyping</span>
</div>
</div>
</div>
</section>
<!-- ============ PROCESS ============ -->
<div class="section-divider"><span class="label">// Process</span><span class="line"></span></div>
<section>
<div class="section-head">
<span class="eyebrow">How I Work</span>
<h2>From First Call to Shipped App</h2>
</div>
<div class="process-grid">
<div class="process-step">
<span class="step-num">01</span>
<h3>Discovery Call</h3>
<p>We'll talk through what you're building, the constraints, and what "done" looks like.</p>
</div>
<div class="process-step">
<span class="step-num">02</span>
<h3>Scope & Architecture</h3>
<p>I map out the technical approach — data model, state management, integrations — before writing a line of code.</p>
</div>
<div class="process-step">
<span class="step-num">03</span>
<h3>Build & Iterate</h3>
<p>Regular check-ins as features ship, not a black box until the very end.</p>
</div>
<div class="process-step">
<span class="step-num">04</span>
<h3>Ship & Support</h3>
<p>Deployment, plus a window of post-launch fixes and a clean handoff.</p>
</div>
</div>
</section>
<!-- ============ CTA ============ -->
<div class="section-divider"><span class="label">// Next Step</span><span class="line"></span></div>
<section>
<div class="wrap" style="text-align: center;">
<h2 style="margin-bottom: 14px;">Have a Project in Mind?</h2>
<p style="color: var(--text-secondary); max-width: 520px; margin: 0 auto;">
Tell me what you're building — I'll get back to you with honest thoughts on scope, timeline, and whether I'm the right fit.
</p>
<div class="btn-row" style="justify-content: center;">
<a href="contact.html" class="btn btn-primary">Get In Touch</a>
<a href="projects.html" class="btn btn-outline">See My Work First</a>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-inner">
<p>© 2026 Muhammad Saad Jamal. All rights reserved.</p>
<div class="footer-social">
<a href="https://github.com/DevExplorerr" target="_blank" rel="noopener" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" aria-hidden="true"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
<a href="https://linkedin.com/in/muhammadsaadjamal" target="_blank" rel="noopener" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
</a>
<a href="mailto:[email protected]" aria-label="Email">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"><path d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg>
</a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>