<!DOCTYPE html>
<html lang="en" data-bs-theme="light" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kiyan Mckop | Software Engineer Portfolio</title>

    <meta name="description" content="Software Engineer specializing in Java and Spring Boot">
    <meta name="author" content="Kiyan Mckop">

    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/assets/css/home.css}">
</head>

<body>

    <!-- NAVBAR -->
    <div th:replace="~{fragments/navbar :: navbar}"></div>

    <!-- INTRO / HERO + ABOUT -->
    <header id="about" class="intro">
        <div class="container">
            <div class="row align-items-center gy-4">

                <div class="col-md-4 text-center">
                    <img th:src="@{/assets/images/profileImage.jpg}" class="rounded-circle mb-3" width="160"
                        height="160" alt="Kiyan Mckop">
                </div>

                <div class="col-md-8">
                    <h1 class="fw-bold">Kiyan Mckop</h1>
                    <p class="lead text-muted mb-3">
                        Software Engineer specializing in Java, Spring Boot, and backend systems.
                    </p>

                    <p>
                        Honours graduate in Information Technology with experience building secure,
                        maintainable enterprise software and internal ERP systems.
                    </p>

                    <!-- Skills -->
                    <div class="d-flex flex-wrap gap-2 my-3">
                        <span class="skill-badge">Java</span>
                        <span class="skill-badge">Spring Boot</span>
                        <span class="skill-badge">REST APIs</span>
                        <span class="skill-badge">SQL</span>
                        <span class="skill-badge">Docker</span>
                    </div>

                    <!-- Actions -->
                    <div class="d-flex gap-4 mt-3">
                        <a class="icon-link" th:href="@{/resume}" title="Resume">
                            <i class="bi bi-file-earmark-person"></i>
                        </a>
                        <a class="icon-link" th:href="@{/cv}"
                            title="CV">
                            <i class="bi bi-file-earmark-text"></i>
                        </a>
                        <a class="icon-link" href="https://mckopserver.ddns.net" target="_blank" title="Server">
                            <i class="bi bi-hdd-network"></i>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </header>

    <!-- EXPERIENCE -->
    <section id="experience">
        <div class="container">
            <div class="section-header">
                <i class="bi bi-briefcase"></i>
                <h2 class="fw-bold mt-2">Work Experience</h2>
            </div>

            <div class="row g-4">
                <div class="col-md-4" th:each="exp : ${null}">
                    <!-- Static cards retained -->
                </div>

                <!-- WBHO -->
                <div class="col-md-4">
                    <div class="card h-100 p-3">
                        <h5>Graduate Software Engineer</h5>
                        <p class="text-muted">WBHO Construction · 2025</p>
                        <p>Developed and maintained internal ERP software systems.</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card h-100 p-3">
                        <h5>Data Capturer</h5>
                        <p class="text-muted">Wealth Associates · 2022</p>
                        <p>Handled sensitive data with high accuracy and integrity.</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card h-100 p-3">
                        <h5>General Office Work</h5>
                        <p class="text-muted">Wealth Associates · 2019</p>
                        <p>Administrative and operational support.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- EDUCATION -->
    <section id="education" class="bg-light">
        <div class="container">
            <div class="section-header">
                <i class="bi bi-mortarboard"></i>
                <h2 class="fw-bold mt-2">Education</h2>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card p-4 text-center">
                        <h5>BSc Honours in Information Technology</h5>
                        <p class="text-muted mb-1">Specialization: Software Engineering</p>
                        <p class="text-muted">Graduated with Honours</p>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card p-4 text-center">
                        <h5>BSc in Information Technology</h5>
                        <p class="text-muted mb-1">Specialization: Software Engineering</p>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card p-4 text-center">
                        <h5>Matric Certificate</h5>
                        <p class="text-muted mb-1">Major Subjects: IT | CAT |Business</p>
                    </div>
                </div>
            </div>


        </div>
    </section>

    <!-- PROJECTS -->
    <section id="projects">
        <div class="container">
            <div class="section-header">
                <i class="bi bi-code-slash"></i>
                <h2 class="fw-bold mt-2">Projects</h2>
                <p class="text-muted">Selected technical work</p>
            </div>

            <div class="row g-4 d-inline-flex justify-content-center align-items-center" style="width: 100%;">
                <div class="col-md-6 col-lg-4" th:each="project : ${projects}">
                    <div class="project-item h-100 p-3 ">
                        <h5 th:text="${project.name}"></h5>
                        <p class="small text-muted" th:text="${project.default_branch}"></p>
                        <p th:text="${project.description}"></p>
                        <a th:href="@{/project/{repo}(repo=${project.name})}">View Details</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CONTACT -->
    <section id="contact" class="bg-light">
        <div class="container">
            <div class="section-header">
                <i class="bi bi-envelope"></i>
                <h2 class="fw-bold mt-2">Contact</h2>
                <p class="text-muted">Let’s work together</p>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="contact-box p-4">
                        <form method="post" th:action="@{/contact}">
                            <input class="form-control mb-3" name="name" placeholder="Name" required>
                            <input type="email" class="form-control mb-3" name="email" placeholder="Email" required>
                            <textarea class="form-control mb-3" name="message" rows="4" placeholder="Message"
                                required></textarea>
                            <button class="btn btn-primary w-100">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div th:fragment="alertSuccess" role="alert" class='alert alert-success' th:text="${alertMessage}">Thank you! Your message has been sent.</div>

    <!-- FOOTER -->
    <div th:replace="~{fragments/footer :: footer}"></div>

    <script th:src="@{/assets/js/bootstrap.bundle.min.js}"></script>
</body>

</html>