<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Phephisa Ngcamphalala Portfolio</title>

    <!-- Google Icons for Email and WhatsApp -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <style>
        /* PAGE BACKGROUND */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
            background: linear-gradient(135deg, #1f1c2c, #928dab);
            color: #fff;
        }

        /* NAVIGATION MENU */
        nav {
            background-color: rgba(0, 0, 0, 0.7);
            position: sticky;
            top: 0;
            width: 100%;
            z-index: 1000;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 10px 0;
            display: flex;
            justify-content: center;
        }

        nav ul li {
            margin: 0 20px;
        }

        nav ul li a {
            text-decoration: none;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: #ffd700;
            cursor: pointer;
        }

        /* HEADER WITH IMAGE */
        .header {
            text-align: center;
            padding: 50px 20px 30px 20px;
        }

        .header img {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 4px solid #ffd700;
            object-fit: cover;
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 60px;
            font-weight: 900;
            color: #ffd700;
            margin: 0;
        }

        /* MOVING SKILLS */
        .moving-words {
            text-align: center;
            font-size: 22px;
            font-weight: bold;
            color: #ffcc00;
            height: 30px;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .moving-words span {
            display: inline-block;
            animation: moveWords 8s infinite;
        }

        @keyframes moveWords {
            0%, 20% { transform: translateY(0%);}
            25%, 45% { transform: translateY(-100%);}
            50%, 70% { transform: translateY(-200%);}
            75%, 95% { transform: translateY(-300%);}
            100% { transform: translateY(0%);}
        }

        /* SECTIONS */
        .section {
            padding: 30px 20px;
            margin: 20px auto;
            max-width: 900px;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        h2 {
            color: #ffd700;
            border-bottom: 2px solid #ffd700;
            padding-bottom: 5px;
        }

        h3 {
            color: #ffcc00;
        }

        ul {
            list-style-type: square;
        }

        /* CONTACT SECTION */
        .contact p {
            color: #ffffff;
            font-size: 20px;
            text-align: center;
            margin: 5px 0;
        }

        /* CONTACT BUTTONS */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            margin: 10px 5px 0 0;
            background-color: #1a237e;
            color: white;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            transition: 0.3s;
            font-size: 16px;
        }

        .btn i {
            margin-right: 8px; /* space between icon and text */
        }

        .btn:hover {
            background-color: #0d47a1;
            transform: translateY(-3px);
            cursor: pointer;
        }

        /* BACK BUTTON */
        .back-btn {
            text-align: center;
            margin: 20px;
        }

        .back-btn a {
            text-decoration: none;
            color: #ffd700;
            font-weight: bold;
            border: 2px solid #ffd700;
            padding: 10px 20px;
            border-radius: 5px;
            transition: 0.3s;
        }

        .back-btn a:hover {
            background-color: #ffd700;
            color: #1f1c2c;
        }

        /* RESPONSIVE */
        @media (max-width: 600px) {
            nav ul {
                flex-direction: column;
            }
            nav ul li {
                margin: 10px 0;
            }
            .header h1 {
                font-size: 40px;
            }
        }
    </style>
</head>
<body id="top">

    <!-- NAVIGATION MENU -->
    <nav>
        <nav>
    <ul class="nav-menu">
        <li><a href="https://www.jaekerna.com" target="_blank">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#education">Education</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

    <!-- HEADER -->
    <div class="header">
        <img src="sukuu.png" alt="Phephisa Ngcamphalala Profile Picture">
        <h1>Phephisa Ngcamphalala</h1>
    </div>

    <!-- MOVING SKILLS -->
    <div class="moving-words">
        <span>Programming &#10095; Networking &#10095; Business Intelligence &#10095; Web Development</span>
    </div>

    <!-- ABOUT SECTION -->
    <div id="about" class="section">
        <h2>About Me</h2>
        <p>Hello, I’m Phephisa Ngcamphalala, a motivated IT student passionate about technology, problem-solving, and innovation. I enjoy building websites, working with both hardware and software solutions, and learning new programming languages to improve my skills.</p>
    </div>

    <!-- SKILLS SECTION -->
    <div id="skills" class="section">
        <h2>Skills</h2>
        <ul>
            <li>Web Development (HTML, CSS, JavaScript)</li>
            <li>Database Management (MySQL, SQL Server)</li>
            <li>Networking and Troubleshooting</li>
            <li>Software Installation and Maintenance</li>
            <li>IT Support and Customer Service</li>
            <li>Programming (C++, Java, PHP)</li>
        </ul>
    </div>

    <!-- EDUCATION SECTION -->
    <div id="education" class="section">
        <h2>Education</h2>
        <ul>
            <li>Final Year IT Student at Limkokwing University</li>
            <li>Business Intelligence (BI) Fundamentals</li>
            <li>Financial Accounting and Software Project Management</li>
        </ul>
    </div>

    <!-- PROJECTS SECTION -->
    <div id="projects" class="section">
        <h2>Projects</h2>
        <h3>Banking App (Android Studio)</h3>
        <ul>
            <li>User login</li>
            <li>Send money</li>
            <li>Pay bills</li>
            <li>Change PIN</li>
        </ul>

        <h3>Business Intelligence Project (Sithobela)</h3>
        <p>Analyzed transportation challenges affecting healthcare access using data visualization tools. Created dashboards and recommendations for improving access to health services.</p>

        <h3>Web Development Projects</h3>
        <p>Created responsive websites using HTML and CSS. Developed the <strong>Pro Ticket project</strong> which allows users to buy tickets online easily.</p>
    </div>

    <!-- CONTACT SECTION -->
    <div id="contact" class="section contact">
        <h2>Contact</h2>
        <p>📧 Email: phephisa.ngcamphalala1692@gmail.com</p>
        <p>📞 Phone: 7807 9562 / 7958 7623</p>
        <p>📍 Location: Mbabane, Eswatini</p>

        <div style="text-align:center; margin-top:15px;">
            <a href="mailto:phephisa.ngcamphalala1692@gmail.com" class="btn">
                <i class="material-icons">email</i>Email Me
            </a>
            <a href="https://wa.me/26878079562" target="_blank" class="btn">
                <i class="material-icons">whatsapp</i>WhatsApp Me
            </a>
        </div>
    </div>

    <!-- BACK BUTTON -->
    <div class="back-btn">
        <a href="#top">Back to Top</a>
    </div>

</body>
</html>