<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rizwan Ullah - Resume</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #fff;
        }
        
        .header {
            text-align: center;
            border-bottom: 3px solid #3b82f6;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        
        .name {
            font-size: 2.5em;
            font-weight: bold;
            color: #3b82f6;
            margin-bottom: 10px;
        }
        
        .title {
            font-size: 1.3em;
            color: #666;
            margin-bottom: 15px;
        }
        
        .contact-info {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            font-size: 0.9em;
        }
        
        .section {
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 1.4em;
            font-weight: bold;
            color: #3b82f6;
            border-bottom: 2px solid #e5e7eb;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }
        
        .project {
            margin-bottom: 25px;
            padding: 20px;
            background: #f8fafc;
            border-radius: 8px;
            border-left: 4px solid #3b82f6;
        }
        
        .project-title {
            font-size: 1.2em;
            font-weight: bold;
            color: #3b82f6;
            margin-bottom: 8px;
        }
        
        .project-tech {
            font-size: 0.9em;
            color: #666;
            margin-bottom: 10px;
            font-style: italic;
        }
        
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .skill-category {
            background: #f8fafc;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #3b82f6;
        }
        
        .skill-category h4 {
            color: #3b82f6;
            margin-bottom: 8px;
        }
        
        .skill-list {
            list-style: none;
        }
        
        .skill-list li {
            margin-bottom: 5px;
            padding-left: 15px;
            position: relative;
        }
        
        .skill-list li::before {
            content: "•";
            color: #3b82f6;
            font-weight: bold;
            position: absolute;
            left: 0;
        }
        
        @media print {
            body {
                padding: 0;
                margin: 20px;
            }
        }
    </style>
</head>
<body>
    <button onclick="window.print()" title="Print or Save as PDF" style="position: fixed; top: 24px; right: 24px; background: #3b82f6; color: #fff; border: none; border-radius: 50%; width: 44px; height: 44px; box-shadow: 0 2px 8px rgba(59,130,246,0.08); cursor: pointer; z-index: 1000; display: flex; align-items: center; justify-content: center; transition: background 0.2s;" onmouseover="this.style.background='#2563eb'" onmouseout="this.style.background='#3b82f6'">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M17 17v2H7v-2H5v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3h-2Zm3-5h-2V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v8H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h2v-2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2h2a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1ZM7 4h10v8H7V4Zm10 10H7v2h10v-2Z"/></svg>
    </button>
    <div class="header">
        <div class="name">Rizwan Ullah</div>
        <div class="title">Front-End Developer & Aspiring DevOps Engineer</div>
        <div class="contact-info">
            <div>📧 rizwan.ullah.tech@gmail.com</div>
            <div>📱 +92 340 2138959</div>
            <div>📍 Karachi, Pakistan</div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Professional Summary</div>
        <p>
            Self-taught developer with a diploma in software engineering from Aptech Pakistan. 
            Passionate about creating responsive and user-friendly web applications. Currently 
            focused on front-end development while expanding skills in DevOps and cloud technologies.
        </p>
    </div>

    <div class="section">
        <div class="section-title">Technical Skills</div>
        <div class="skills-grid">
            <div class="skill-category">
                <h4>Frontend Development</h4>
                <ul class="skill-list">
                    <li>HTML5 & CSS3</li>
                    <li>JavaScript (ES6+)</li>
                    <li>Responsive Web Design</li>
                    <li>Tailwind CSS</li>
                </ul>
            </div>
            <div class="skill-category">
                <h4>Backend & Database</h4>
                <ul class="skill-list">
                    <li>PHP</li>
                    <li>MySQL</li>
                    <li>Laravel 11</li>
                </ul>
            </div>
            <div class="skill-category">
                <h4>Currently Learning</h4>
                <ul class="skill-list">
                    <li>React.js</li>
                    <li>Node.js</li>
                    <li>Docker</li>
                    <li>AWS Cloud</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Projects</div>
        
        <div class="project">
            <div class="project-title">Personal Portfolio Website</div>
            <div class="project-tech">HTML, CSS, JavaScript, Tailwind CSS</div>
            <div class="project-description">
                A responsive portfolio website with dark/light theme toggle, smooth animations, 
                and mobile-first design. Features contact form, project showcase, and SEO optimization.
            </div>
        </div>

        <div class="project">
            <div class="project-title">Product Management System</div>
            <div class="project-tech">PHP, MySQL, HTML, CSS, JavaScript</div>
            <div class="project-description">
                A comprehensive product management system with user authentication, CRUD operations, 
                import/export functionality, and responsive admin dashboard.
            </div>
        </div>

        <div class="project">
            <div class="project-title">Simple Calculator</div>
            <div class="project-tech">HTML, CSS, JavaScript</div>
            <div class="project-description">
                A feature-rich calculator with arithmetic operations, keyboard support, 
                memory functions, and responsive design.
            </div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Education</div>
        <div class="education-item">
            <div class="education-title">Diploma in Software Engineering</div>
            <div class="education-details">Aptech Pakistan | 2023 - Present</div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Links</div>
        <p>
            <strong>GitHub:</strong> <a href="https://github.com/Rizwan-Ullah-tech">github.com/Rizwan-Ullah-tech</a><br>
            <strong>LinkedIn:</strong> <a href="https://linkedin.com/in/rizwan-ullah-356a74353">linkedin.com/in/rizwan-ullah-356a74353</a><br>
            <strong>Portfolio:</strong> <a href="https://rizwan-ullah-tech.github.io/My-Portfolio/">rizwan-ullah-tech.github.io/My-Portfolio/</a>
        </p>
    </div>
</body>
</html>