<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Isrg.me - Engineer Isrg Rajan</title>
    <!-- Latest Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.4.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest Font Awesome CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(145deg, #00b4d8, #0077b6);
            color: white;
            text-align: center;
            padding: 120px 20px;
            border-radius: 15px;
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
            margin-bottom: 50px;
        }

        .hero img {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 4px solid white;
            object-fit: cover;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* Animation for Name */
        .hero h1 {
            font-size: 3rem;
            font-weight: 600;
            margin-top: 20px;
            animation: fadeInUp 1.5s ease-in-out;
        }

        /* Fade In Up Animation */
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero p {
            font-size: 1.25rem;
            font-weight: 400;
            animation: fadeInUp 1.5s ease-in-out 0.5s;
        }

        .social-icons a {
            margin: 0 15px;
            color: white;
            font-size: 28px;
            transition: transform 0.3s ease;
        }

        .social-icons a:hover {
            transform: scale(1.2);
            color: #ffdd57;
        }

        /* Section Titles */
        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 40px;
            color: #0077b6;
        }

        /* Skills Section */
        .skills-card {
            background-color: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 40px;
        }

        .skills-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .skill-item {
            font-size: 1.2rem;
            text-align: center;
            margin-bottom: 20px;
        }

        /* Footer */
        footer {
            background-color: #343a40;
            color: white;
            padding: 30px 0;
            text-align: center;
            border-top: 2px solid #f8f9fa;
        }

        footer a {
            color: #ffdd57;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero {
                padding: 80px 20px;
            }

            .social-icons a {
                margin: 0 10px;
            }
        }

    </style>
</head>
<body>

    <!-- Hero Section -->
    <section class="hero">
        <img src="https://graph.facebook.com/isrgrajan/picture?type=large" alt="Isrg Rajan">
        <h1>Isrg Rajan</h1>
        <p>Engineer | Software Developer | Tech Enthusiast</p>
        <div class="social-icons mt-4">
            <a href="https://twitter.com/isrgrajan"><i class="fab fa-twitter"></i></a>
            <a href="https://www.linkedin.com/in/isrgrajan"><i class="fab fa-linkedin"></i></a>
            <a href="https://github.com/isrgrajan"><i class="fab fa-github"></i></a>
            <a href="https://www.facebook.com/isrgrajan"><i class="fab fa-facebook"></i></a>
        </div>
    </section>

    <!-- About Me Section -->
    <section class="container py-5">
        <h2 class="section-title">About Me</h2>
        <p class="text-center">I am a passionate software engineer with expertise in web development, cloud computing, and AI-driven solutions. I am committed to creating innovative and scalable technologies and contributing to the tech community.</p>
    </section>

    <!-- Skills Section -->
    <section class="container py-5">
        <h2 class="section-title">Skills</h2>
        <div class="row">
            <!-- Skill Cards -->
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Web Development</h4>
                    <p class="text-center">HTML, CSS, JavaScript, React, Angular, Vue.js</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Cloud Computing</h4>
                    <p class="text-center">AWS, Google Cloud, Azure, IBM Cloud</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">AI & ML</h4>
                    <p class="text-center">TensorFlow, PyTorch, Scikit-learn, Keras, OpenCV</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Mobile App Development</h4>
                    <p class="text-center">React Native, Flutter, Swift, Kotlin</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">DevOps & CI/CD</h4>
                    <p class="text-center">Docker, Kubernetes, Jenkins, Git, GitHub Actions</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Database Management</h4>
                    <p class="text-center">MySQL, PostgreSQL, MongoDB, Firebase</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Backend Development</h4>
                    <p class="text-center">Node.js, Express.js, Django, Flask, Spring Boot</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Version Control</h4>
                    <p class="text-center">Git, SVN, GitHub, GitLab, Bitbucket</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Cybersecurity</h4>
                    <p class="text-center">Network Security, Penetration Testing, Firewalls, SSL/TLS</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Server Management</h4>
                    <p class="text-center">Linux, Nginx, Apache, Docker</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Design & UX/UI</h4>
                    <p class="text-center">Figma, Adobe XD, Sketch, InVision</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">API Development</h4>
                    <p class="text-center">REST, GraphQL, SOAP</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="skills-card">
                    <h4 class="text-center">Project Management</h4>
                    <p class="text-center">Jira, Trello, Asana, Microsoft Project</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <p>&copy; 2025 Isrg Rajan</p>
    </footer>

    <!-- Latest Bootstrap JS & Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
