<!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}">
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
</head>

<body>

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

    <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="profile-img mb-3" width="180" height="180" alt="Kiyan Mckop">
                </div>
                <div class="col-md-8">
                    <h1 class="display-5 fw-bold">Kiyan Mckop</h1>
                    <p class="lead text-secondary mb-3">
                        Software Engineer specializing in <span class="text-primary fw-semibold">Java, Spring Boot</span>, and backend systems.
                    </p>
                    <p class="text-muted">
                        Honours graduate in IT with experience building secure, maintainable enterprise software and internal ERP systems.
                    </p>
                    <div class="d-flex flex-wrap gap-2 my-4">
                        <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>
                    <div class="d-flex gap-4">
                        <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>

    <section id="resume-details" class="bg-light">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-6">
                    <div class="section-header">
                        <h2 class="fw-bold"><i class="bi bi-briefcase me-2"></i>Experience</h2>
                    </div>
                    <div class="card p-4 border-0 shadow-sm">
                        <div class="timeline-card">
                            <h5 class="fw-bold mb-0">Graduate Software Engineer</h5>
                            <p class="text-primary small mb-2">WBHO Construction · 2025</p>
                            <p class="small text-muted mb-0">Developed and maintained internal ERP software systems.</p>
                        </div>
                        <div class="timeline-card">
                            <h5 class="fw-bold mb-0">Data Capturer</h5>
                            <p class="text-primary small mb-2">Wealth Associates · 2022</p>
                            <p class="small text-muted mb-0">Handled sensitive data with high accuracy and integrity.</p>
                        </div>
                        <div class="timeline-card mb-0">
                            <h5 class="fw-bold mb-0">General Office Work</h5>
                            <p class="text-primary small mb-2">Wealth Associates · 2019</p>
                            <p class="small text-muted mb-0">Administrative and operational support.</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="section-header">
                        <h2 class="fw-bold"><i class="bi bi-mortarboard me-2"></i>Education</h2>
                    </div>
                    <div class="card p-4 border-0 shadow-sm">
                        <div class="timeline-card">
                            <h5 class="fw-bold mb-0">BSc Honours in IT</h5>
                            <p class="text-primary small mb-2">Software Engineering</p>
                            <p class="small text-muted mb-0">Graduated with Honours</p>
                        </div>
                        <div class="timeline-card">
                            <h5 class="fw-bold mb-0">BSc in IT</h5>
                            <p class="text-primary small mb-2">Software Engineering</p>
                        </div>
                        <div class="timeline-card mb-0">
                            <h5 class="fw-bold mb-0">Matric Certificate</h5>
                            <p class="text-primary small mb-2">IT | CAT | Business</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="projects" class="bg-white">
        <div class="container">
            <div class="section-header">
                <h2 class="fw-bold"><i class="bi bi-code-slash me-2"></i>Projects</h2>
            </div>
            <div class="row g-4">
                <div class="col-md-6 col-lg-4" th:each="project : ${projects}">
                    <div class="project-item h-100 p-4 d-flex flex-column shadow-sm">
                        <h5 class="fw-bold mb-1" th:text="${project.name}">Project Name</h5>
                        <p class="text-muted small flex-grow-1">2025 - Present</p>
                        <!-- <code class="small text-primary mb-3" th:text="${project.default_branch}">main</code> -->
                        <p class="text-muted small flex-grow-1" th:text="${project.description}">Description goes here...</p>
                        <a class="btn btn-outline-primary btn-sm mt-3 w-fit" th:href="@{/project/{repo}(repo=${project.name})}">
                            View Details <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="contact" class="bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="section-header text-center border-0">
                        <h2 class="fw-bold"><i class="bi bi-envelope me-2"></i>Contact</h2>
                        <p class="text-muted">Let’s work together</p>
                    </div>
                    <div class="contact-box p-4 shadow-sm border-0">
                        <form th:action="@{/contact}" th:attr="hx-post=@{/contact}" hx-target="#toast-container" hx-swap="beforeend" hx-on:htmx:after-request="this.reset()">
                            <div class="mb-3">
                                <input class="form-control" name="name" placeholder="Name" required>
                            </div>
                            <div class="mb-3">
                                <input type="email" class="form-control" name="email" placeholder="Email" required>
                            </div>
                            <div class="mb-3">
                                <textarea class="form-control" name="message" rows="4" placeholder="Your Message" required></textarea>
                            </div>
                            <button class="btn btn-primary w-100 py-2 fw-bold">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>

    <div th:fragment="alertSuccess" th:if="${alertMessage}">
        <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body" th:text="${alertMessage}">
                    Message sent successfully!
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>

    <div th:replace="~{fragments/footer :: footer}"></div>
    <script th:src="@{/assets/js/bootstrap.bundle.min.js}"></script>
</body>
</html>