|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Kamran Haider | Python Developer</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800 font-sans"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="container mx-auto px-4 py-12 max-w-6xl"> |
|
|
|
|
|
<section class="flex flex-col md:flex-row items-center gap-12 mb-20"> |
|
|
<div class="md:w-1/2"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">Kamran Haider</h1> |
|
|
<h2 class="text-2xl md:text-3xl text-indigo-600 font-semibold mb-6">Python Developer & AI Automation Specialist</h2> |
|
|
<p class="text-lg mb-8 text-gray-600">Building intelligent systems and workflow automations with Python, N8N, and Make.com.</p> |
|
|
<div class="flex gap-4"> |
|
|
<a href="#contact" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition">Contact Me</a> |
|
|
<a href="#projects" class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition">View Projects</a> |
|
|
</div> |
|
|
<div class="flex gap-4 mt-4"> |
|
|
<a href="https://github.com/Ali-Hamas" target="_blank" class="flex items-center gap-2 text-gray-700 hover:text-indigo-600"> |
|
|
<i data-feather="github" class="w-6 h-6"></i> GitHub |
|
|
</a> |
|
|
<a href="https://www.linkedin.com/in/alihamas" target="_blank" class="flex items-center gap-2 text-gray-700 hover:text-indigo-600"> |
|
|
<i data-feather="linkedin" class="w-6 h-6"></i> LinkedIn |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="http://static.photos/technology/640x360/42" alt="Kamran Haider" class="rounded-xl shadow-xl"> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="mb-20"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">About Me</h2> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md"> |
|
|
<p class="text-lg mb-6">Motivated and detail-oriented Python Developer with strong expertise in automation tools, AI integration, and backend scripting. Passionate about building intelligent systems and workflow automations.</p> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4 text-indigo-600">Education</h3> |
|
|
<div class="flex items-start gap-4 mb-6"> |
|
|
<i data-feather="book" class="text-indigo-500 mt-1"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">Bachelor's in Computer Science</h4> |
|
|
<p class="text-gray-600">Virtual University of Pakistan (Sep 2015 – Sep 2017)</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-4 text-indigo-600">Languages</h3> |
|
|
<div class="flex items-start gap-4 mb-6"> |
|
|
<i data-feather="globe" class="text-indigo-500 mt-1"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">English — Fluent</h4> |
|
|
<h4 class="font-medium">Urdu — Native</h4> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="experience" class="mb-20"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">Professional Experience</h2> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="border-l-4 border-indigo-500 pl-6 mb-8"> |
|
|
<h3 class="text-2xl font-semibold">Python Developer</h3> |
|
|
<p class="text-gray-600 mb-2">Arfa Academy (Sep 2022 – Sep 2023)</p> |
|
|
<ul class="list-disc pl-5 space-y-2"> |
|
|
<li>Developed and maintained Python-based automation scripts for internal projects</li> |
|
|
<li>Integrated APIs and workflow automation tools such as N8N and Make.com</li> |
|
|
<li>Collaborated with AI modules to implement Agentic AI features</li> |
|
|
<li>Debugged, optimized, and deployed scripts in production environments</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="mb-20"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">Technical Skills</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<i data-feather="code" class="text-indigo-500 w-8 h-8 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-3">Programming</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-indigo-500 rounded-full"></span> Python</li> |
|
|
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-indigo-500 rounded-full"></span> API Integration</li> |
|
|
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-indigo-500 rounded-full"></span> Automation</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<i data-feather="tool" class="text-indigo-500 w-8 h-8 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-3">Tools</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-indigo-500 rounded-full"></span> N8N</li> |
|
|
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-indigo-500 rounded-full"></span> Make.com</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<i data-feather="cpu" class="text-indigo-500 w-8 h-8 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-3">AI Expertise</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-indigo-500 rounded-full"></span> Agentic AI</li> |
|
|
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-indigo-500 rounded-full"></span> Machine Learning</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<i data-feather="award" class="text-indigo-500 w-8 h-8 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-3">Other Skills</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-indigo-500 rounded-full"></span> Problem Solving</li> |
|
|
<li class="flex items-center gap-2"><span class="w-2 h-2 bg-indigo-500 rounded-full"></span> Workflow Design</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="mb-20"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">Projects</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center gap-4 mb-4"> |
|
|
<div class="bg-indigo-100 p-3 rounded-lg"> |
|
|
<i data-feather="git-branch" class="text-indigo-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">GitHub Portfolio</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Collection of my open-source projects and contributions</p> |
|
|
<a href="https://github.com/Ali-Hamas" target="_blank" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-2"> |
|
|
View My GitHub Projects <i data-feather="external-link" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center gap-4 mb-4"> |
|
|
<div class="bg-indigo-100 p-3 rounded-lg"> |
|
|
<i data-feather="cpu" class="text-indigo-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold">AI Automation Framework</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Custom AI automation framework integrating Python with workflow tools</p> |
|
|
<a href="#contact" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-2"> |
|
|
Learn More <i data-feather="external-link" class="w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="contact" class="mb-20"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center">Get In Touch</h2> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md max-w-2xl mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<a href="mailto:alihamas21280811@gmail.com" class="bg-white p-6 rounded-lg border border-gray-200 hover:border-indigo-500 transition-all text-center"> |
|
|
<div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="mail" class="text-indigo-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-1">Email</h3> |
|
|
<p class="text-gray-600 text-sm">alihamas21280811@gmail.com</p> |
|
|
</a> |
|
|
<a href="https://linkedin.com/in/alihamas" target="_blank" class="bg-white p-6 rounded-lg border border-gray-200 hover:border-indigo-500 transition-all text-center"> |
|
|
<div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="linkedin" class="text-indigo-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-1">LinkedIn</h3> |
|
|
<p class="text-gray-600 text-sm">in/alihamas</p> |
|
|
</a> |
|
|
<a href="https://github.com/Ali-Hamas" target="_blank" class="bg-white p-6 rounded-lg border border-gray-200 hover:border-indigo-500 transition-all text-center"> |
|
|
<div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="github" class="text-indigo-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-1">GitHub</h3> |
|
|
<p class="text-gray-600 text-sm">@Ali-Hamas</p> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script> |
|
|
feather.replace() |
|
|
</script> |
|
|
</body> |
|
|
</html> |
