| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8" /> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| | <title>Sarim Khan | Portfolio</title> |
| | <meta name="description" content="Sarim Khan – Mobile & AI Software Developer (Flutter, SwiftUI, LLMs, RAG)" /> |
| | <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| | <style> |
| | :root { |
| | --bg: #0b0d10; |
| | --card: #12151b; |
| | --text: #e6e6e6; |
| | --muted: #9aa4b2; |
| | --accent: #4f8cff; |
| | --border: #1f2430; |
| | } |
| | |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | |
| | body { |
| | font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; |
| | background: linear-gradient(180deg, #0b0d10, #0e1220); |
| | color: var(--text); |
| | line-height: 1.6; |
| | } |
| | |
| | a { |
| | color: var(--accent); |
| | text-decoration: none; |
| | } |
| | |
| | a:hover { |
| | text-decoration: underline; |
| | } |
| | |
| | .container { |
| | max-width: 1100px; |
| | margin: 0 auto; |
| | padding: 3rem 1.5rem; |
| | } |
| | |
| | header { |
| | display: grid; |
| | grid-template-columns: 1fr; |
| | gap: 1.5rem; |
| | margin-bottom: 3rem; |
| | } |
| | |
| | header h1 { |
| | font-size: 2.5rem; |
| | font-weight: 700; |
| | } |
| | |
| | header p { |
| | color: var(--muted); |
| | max-width: 800px; |
| | } |
| | |
| | .links { |
| | display: flex; |
| | flex-wrap: wrap; |
| | gap: 1rem; |
| | font-size: 0.95rem; |
| | } |
| | |
| | section { |
| | margin-bottom: 3rem; |
| | } |
| | |
| | section h2 { |
| | font-size: 1.6rem; |
| | margin-bottom: 1.2rem; |
| | border-bottom: 1px solid var(--border); |
| | padding-bottom: 0.5rem; |
| | } |
| | |
| | .grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| | gap: 1.5rem; |
| | } |
| | |
| | .card { |
| | background: var(--card); |
| | border: 1px solid var(--border); |
| | border-radius: 14px; |
| | padding: 1.5rem; |
| | transition: transform 0.2s ease, border 0.2s ease; |
| | } |
| | |
| | .card:hover { |
| | transform: translateY(-4px); |
| | border-color: var(--accent); |
| | } |
| | |
| | .card h3 { |
| | margin-bottom: 0.4rem; |
| | font-size: 1.1rem; |
| | } |
| | |
| | .card p { |
| | font-size: 0.95rem; |
| | color: var(--muted); |
| | margin-bottom: 0.8rem; |
| | } |
| | |
| | .tags { |
| | display: flex; |
| | flex-wrap: wrap; |
| | gap: 0.4rem; |
| | } |
| | |
| | .tag { |
| | font-size: 0.75rem; |
| | padding: 0.25rem 0.6rem; |
| | background: #1a2030; |
| | border-radius: 999px; |
| | color: #cdd6f4; |
| | } |
| | |
| | .experience-item { |
| | margin-bottom: 1.5rem; |
| | } |
| | |
| | .experience-item h3 { |
| | font-size: 1.05rem; |
| | } |
| | |
| | .experience-item span { |
| | font-size: 0.85rem; |
| | color: var(--muted); |
| | } |
| | |
| | footer { |
| | text-align: center; |
| | font-size: 0.85rem; |
| | color: var(--muted); |
| | margin-top: 4rem; |
| | } |
| | |
| | @media (max-width: 600px) { |
| | header h1 { |
| | font-size: 2rem; |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <header> |
| | <h1>Sarim Khan</h1> |
| | <p> |
| | Versatile mobile and AI-driven software developer specializing in Flutter, SwiftUI, and cross-platform development. |
| | Experienced in LLM integration, RAG pipelines, FastAPI backends, and real-time analytics. |
| | </p> |
| | <div class="links"> |
| | <a href="tel:+923213735925">📞 +92 321 3735925</a> |
| | <a href="mailto:sarimk80@gmail.com">✉️ Email</a> |
| | <a href="https://www.linkedin.com/in/sarim-khan-595214130/" target="_blank">LinkedIn</a> |
| | <a href="https://github.com/sarimk80" target="_blank">GitHub</a> |
| | <a href="https://medium.com/@sarimk80" target="_blank">Medium</a> |
| | <a href="https://www.youtube.com/channel/UCLCtTsl5ndKcnZ8pexG4CRQ" target="_blank">YouTube</a> |
| | </div> |
| | </header> |
| |
|
| | <section> |
| | <h2>Highlighted Projects</h2> |
| | <div class="grid"> |
| |
|
| | <div class="card"> |
| | <h3>Xpence</h3> |
| | <p>Smart business spend platform with integrated payment cards for freelancers, corporates, and everyone in between.</p> |
| | <a href="https://xpence.com" target="_blank">Link →</a> |
| | <div class="tags"> |
| | <span class="tag">Flutter</span><span class="tag">Bloc</span><span class="tag">Provider</span><span class="tag">Riverpod</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h3>PSX AI Assistant</h3> |
| | <p>AI-powered financial analytics platform with LLM insights, RAG retrieval, and interactive charts.</p> |
| | <a href="https://github.com/sarimk80/psx_ai" target="_blank">GitHub →</a> |
| | <div class="tags"> |
| | <span class="tag">SwiftUI</span><span class="tag">FastAPI</span><span class="tag">LLM</span><span class="tag">RAG</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h3>PSX StockApp (Real-Time)</h3> |
| | <p>Real-time iOS stock tracking app using WebSockets and live PSX data.</p> |
| | <a href="https://github.com/sarimk80/psx_sockets" target="_blank">GitHub →</a> |
| | <div class="tags"> |
| | <span class="tag">SwiftUI</span><span class="tag">WebSockets</span><span class="tag">Combine</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h3>NutriFit AI</h3> |
| | <p>AI-powered diet planner integrating HealthKit with LLM-based recommendations.</p> |
| | <a href="https://github.com/sarimk80/NutriFit-AI" target="_blank">GitHub →</a> |
| | <div class="tags"> |
| | <span class="tag">SwiftUI</span><span class="tag">HealthKit</span><span class="tag">FastAPI</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h3>RAG Platform</h3> |
| | <p>Custom document ingestion and vector-based retrieval system using Ollama.</p> |
| | <a href="https://github.com/sarimk80/ollama_RAG" target="_blank">GitHub →</a> |
| | <div class="tags"> |
| | <span class="tag">Python</span><span class="tag">Streamlit</span><span class="tag">Vector DB</span> |
| | </div> |
| | </div> |
| | |
| | <div class="card"> |
| | <h3>Supabase Auth App </h3> |
| | <p>Authentication starter kit using Supabase and SwiftUI. </p> |
| | <a href="https://github.com/sarimk80/Supa_base_app " target="_blank">GitHub →</a> |
| | <div class="tags"> |
| | <span class="tag">SwiftUI</span><span class="tag">Supabase</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h3>PSX (Android) </h3> |
| | <p>Android application for monitoring Pakistan Stock Exchange.</p> |
| | <a href="https://github.com/sarimk80/Psx" target="_blank">GitHub →</a> |
| | <div class="tags"> |
| | <span class="tag">Kotlin</span><span class="tag">Android</span> |
| | </div> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h3>MacAI Clipboard Assistant</h3> |
| | <p>A macOS application that supercharges your clipboard using AI! |
| | Whether you're copying non-English text or code snippets, this app steps in to help—instantly.</p> |
| | <a href="https://github.com/sarimk80/code_assistance" target="_blank">GitHub →</a> |
| | <div class="tags"> |
| | <span class="tag">SwiftUI</span><span class="tag">Python</span><span class="tag">FastAPI</span><span class="tag">Ollama</span> |
| | </div> |
| | </div> |
| |
|
| |
|
| | </div> |
| | </section> |
| |
|
| | <section> |
| | <h2>Experience</h2> |
| | <div class="experience-item"> |
| | <h3>XPENCE — Software Developer</h3> |
| | <span>Jun 2020 – Present · Remote (Dubai)</span> |
| | <p>Developed cross-platform mobile apps, reusable Flutter components, and collaborated in agile global teams.</p> |
| | </div> |
| | <div class="experience-item"> |
| | <h3>10 Pearls — Trainee Software Engineer</h3> |
| | <span>Dec 2019 – Feb 2020 · Karachi</span> |
| | <p>Worked on Flutter development using BLoC architecture and reusable UI widgets.</p> |
| | </div> |
| | <div class="experience-item"> |
| | <h3>Kumba Africa — Flutter Developer</h3> |
| | <span>Sep 2019 – Apr 2020 · Remote</span> |
| | <p>Built a multi-platform travel application with flexible and responsive UI layouts.</p> |
| | </div> |
| | </section> |
| |
|
| | <section> |
| | <h2>Skills</h2> |
| | <div class="tags"> |
| | <span class="tag">Flutter</span><span class="tag">SwiftUI</span><span class="tag">Android</span> |
| | <span class="tag">Dart</span><span class="tag">Swift</span><span class="tag">Kotlin</span> |
| | <span class="tag">FastAPI</span><span class="tag">LLMs</span><span class="tag">RAG</span> |
| | <span class="tag">Agile</span> |
| | </div> |
| | </section> |
| |
|
| | <footer> |
| | © 2025 Sarim Khan · Built with HTML & CSS |
| | </footer> |
| | </div> |
| | </body> |
| | </html> |
