index.html

<!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">
        <!-- Hero Section -->
        <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>

        <!-- About 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>

        <!-- Experience 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>

        <!-- Skills 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>

        <!-- Projects 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>
        <!-- Contact 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>