{% extends "main.html" %}

{% block content %}
<style>
    .cv-container {
        margin: 50px auto;
        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 1200px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        padding: 20px;
    }

    header {
        text-align: center;
        margin-bottom: 20px;
    }

    header .profile-pic {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin: 15px auto;
        background: url("{{ url_for('static', filename='images/about/profile_picture.jpg') }}") center/cover;
    }

    header .name {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 5px;
    }

    header .role {
        font-size: 1.2rem;
        color: #ccc;
    }

    .section {
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 10px;
        text-transform: uppercase;
        color: #f0f0f0;
        position: relative;
    }

    .section-title::after {
        content: '';
        display: block;
        width: 50px;
        height: 3px;
        background: #fff;
        margin-top: 5px;
    }

    .content {
        background: rgba(255, 255, 255, 0.2);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .experience, .education {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .entry {
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    .entry img {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        object-fit: contain;
    }

    .entry .details {
        flex: 1;
    }

    .entry .details h3 {
        margin-bottom: 5px;
        font-size: 1.2rem;
        color: #fff;
    }

    .entry .details .date {
        font-size: 0.9rem;
        color: #ccc;
        margin-bottom: 5px;
    }

    .entry .details p {
        font-size: 0.9rem;
        color: #f0f0f0;
    }

    .skills {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .skill {
        background: rgba(255, 255, 255, 0.2);
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .skill-name {
        font-size: 1rem;
        color: #fff;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .progress-bar-container {
        width: 100%;
        height: 12px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        background: linear-gradient(to right, #5a0fb8, #1f65d6);
        border-radius: 8px;
        transition: width 0.5s ease;
    }

    /* Contact Section Styling */
    .contact {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .contact-item {
        font-size: 1.2rem;
        color: #f0f0f0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .contact-item a {
        color: #5a0fb8;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .contact-item a:hover {
        color: #1f65d6;
    }

    .contact-item i {
        font-size: 1.5rem;
        color: #5a0fb8;
        transition: color 0.3s ease;
    }

    .contact-item i:hover {
        color: #1f65d6;
    }

    @media (max-width: 768px) {
        .entry {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .entry img {
            margin-bottom: 10px;
        }
    }
</style>

<!-- Font Awesome Icons CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="cv-container">
    <header>
        <div class="profile-pic"></div>
        <div class="name">Gosztolya Máté</div>
        <div class="role">Computer Science Engineer</div>
    </header>

    <div class="section">
        <div class="section-title">Work Experience</div>
        <div class="content experience">
            <div class="entry">
                <img src="{{ url_for('static', filename='images/about/logiscool_logo.png') }}" alt="Company Logo">
                <div class="details">
                    <h3>Programming Teacher at Logiscool</h3>
                    <div class="date">2020 - 2022</div>
                    <p>As a programming teacher at Logiscool, I was responsible for teaching coding skills to children and teenagers, using interactive and fun methods to foster a love for technology. I lead classes on the programming language JavaScript, designing hands-on projects and challenges that encourage problem-solving and creativity. Additionally, I've guided students through the development of their own projects, ensuring they grasp fundamental coding concepts while developing practical skills for the future.</p>
                </div>                
            </div>
            <div class="entry">
                <img src="{{ url_for('static', filename='images/about/telekom_logo.jpg') }}" alt="Company Logo">
                <div class="details">
                    <h3>Volunteer at Telekom Legyélteis! Most Generációs</h3>
                    <div class="date">2019</div>
                    <p>As a volunteer at Telekom's "Legyélteis! Most Generációs" program, I had the rewarding opportunity to teach older adults how to confidently use modern technology, such as computers, smartphones, and tablets. My role involved guiding participants through basic digital skills, helping them stay connected with loved ones, manage daily tasks, and access useful online services.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Education</div>
        <div class="content education">
            <div class="entry">
                <img src="{{ url_for('static', filename='images/about/sze_logo.png') }}" alt="School Logo">
                <div class="details">
                    <h3>Széchenyi István Egyetem</h3>
                    <div class="date">2022 - present</div>
                    <p>Higher</p>
                </div>
            </div>
            <div class="entry">
                <img src="{{ url_for('static', filename='images/about/hbsz_logo.png') }}" alt="School Logo">
                <div class="details">
                    <h3>Vas Megyei SZC Horváth Boldizsár Közgazdasági és Informatikai Technikum</h3>
                    <div class="date">2018 - 2022</div>
                    <p>Secondary</p>
                </div>
            </div>
            <div class="entry">
                <img src="{{ url_for('static', filename='images/about/nyitra_logo.png') }}" alt="School Logo">
                <div class="details">
                    <h3>Nyitra Utcai Álltalános Iskola</h3>
                    <div class="date">2010 - 2018</div>
                    <p>Elementary</p>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Skills</div>
        <div class="content skills">
            <div class="skill">
                <div class="skill-name">JavaScript</div>
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: 90%;"></div>
                </div>
            </div>
            <div class="skill">
                <div class="skill-name">HTML - CSS</div>
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: 90%;"></div>
                </div>
            </div>
            <div class="skill">
                <div class="skill-name">C#</div>
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: 70%;"></div>
                </div>
            </div>
            <div class="skill">
                <div class="skill-name">Python</div>
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: 75%;"></div>
                </div>
            </div>
            <div class="skill">
                <div class="skill-name">SQL</div>
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: 65%;"></div>
                </div>
            </div>
            <div class="skill">
                <div class="skill-name">GDScript</div>
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: 65%;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Contact</div>
        <div class="content contact">
            <div class="contact-item">
                <i class="fas fa-phone-alt"></i> <strong>Phone:</strong> +36 30 716 6070
            </div>
            <div class="contact-item">
                <i class="fas fa-envelope"></i> <strong>Email:</strong> mategm88@gmail.com
            </div>
            <div class="contact-item">
                <i class="fas fa-map-marker-alt"></i> <strong>Location:</strong> Szombathely, Hungary
            </div>
            <div class="contact-item">
                <i class="fab fa-linkedin"></i> <strong>LinkedIn:</strong> <a href="https://www.linkedin.com" target="_blank">Not-yet</a>
            </div>
            <div class="contact-item">
                <i class="fab fa-github"></i> <strong>GitHub:</strong> <a href="https://github.com/mategm88" target="_blank">github.com/mategm88</a>
            </div>
            <div class="contact-item">
                <i class="fab fa-instagram"></i> <strong>Instagram:</strong> <a href="https://www.instagram.com/mategm.77/" target="_blank">instagram.com/mategm.77</a>
            </div>
            <div class="contact-item">
                <i class="fab fa-facebook"></i> <strong>Facebook:</strong> <a href="https://www.facebook.com/" target="_blank">Not-yet</a>
            </div>
        </div>
    </div>
</div>

{% endblock %}