{% extends 'layout.html' %}
{% block nav_about %}selected{% endblock %}

{% block content %}
    <div class="content">
        <h1 data-value="About-Me">About-Me</h1>
    </div>

    <div class="content">
        <h2 data-value="Meeeeeee">Meeeeeee</h2>
        <p>Hewwo, I'm a 17 year old nerd, who likes to code and tinker with computers!</p>
        <p>I'm mostly a frontend developer, with some knowlage of the backend. I also enjoy programming for the hell of it</p>
        <p>Fluffy Bean is a maned wolf, he reflects my personality and is my fursona</p>
        <p>Refsheet made by mrHDash</p>
    </div>
    
    <img src="{{ url_for('static', filename='images/ref.png') }}" alt="Orange maned wolf sneaking under a yellow sheet">
    
    <div class="content">
        <h2 data-value="Experiance and Projects">Experiance and Projects</h2>
        <p>I'm quite well experianced with Python, HTML, CSS/Sass, and Shell Scripting.And have some experiance with JavaScript, PHP, MySQL and a few other languages</p>
        <p>My main operating system has been Linux for about 1.5 years (Arch btw)</p>
        <p>Now I have started to learn hardware and been messing around with Pi Picos!</p>
        <p>Recently I have started working on a gallery, originally written in PHP for my own use before making it public</p>
        <p>It is now written in Python with Flask and is open source! You can find it on <a href="https://github.com/Fluffy-Bean/onlylegs">GitHub</a>. Or on my self hosted instance of <a href="https://git.leggy.dev/Fluffy/onlylegs">Gitea</a>!</p>
    </div>

    <div class="content">
        <h2 data-value="Level of knowlage">Level of knowlage</h2>
        <p>My levels of knowlage are based on a scale of 0-5, with 0 being very little experiance and 5 being best in the world, obviously ;3</p>

        <span class="bar-chart">
            <h3 data-value="Languages">Languages</h3>
            {% for lang in languages %}
                <span class="sub_experiance"
                    data-value="{{ languages[lang].level }}"
                    style="background-color: {{ languages[lang].color }};">
                    <span class="fg"><span>{{ lang }} - Since {{ languages[lang].since }}</span></span>
                    <span class="bg">{{ lang }} - Since {{ languages[lang].since }}</span>
                </span>
            {% endfor %}

            <h3 data-value="OS'">OS'</h3>
            {% for os in systems %}
                <span class="sub_experiance"
                    data-value="{{ systems[os].level }}"
                    style="background-color: {{ systems[os].color }};">
                    <span class="fg"><span>{{ os }} - Since {{ systems[os].since }}</span></span>
                    <span class="bg">{{ os }} - Since {{ systems[os].since }}</span>
                </span>
            {% endfor %}

            <span class="marker" data-value="0"></span>
            <span class="marker" data-value="1"></span>
            <span class="marker" data-value="2"></span>
            <span class="marker" data-value="3"></span>
            <span class="marker" data-value="4"></span>
        </span>
    </div>

    <script>
        var bars = document.querySelectorAll(".sub_experiance");
    
        bars.forEach(bar => {
            var value = bar.getAttribute("data-value");
            
            // 0 - 5
            if (value == 0) {
                bar.style.width = "20%";
            } else if (value == 1) {
                bar.style.width = "40%";
            } else if (value == 2) {
                bar.style.width = "60%";
            } else if (value == 3) {
                bar.style.width = "80%";
            } else if (value == 4) {
                bar.style.width = "100%";
            } else if (value == 5) {
                bar.style.width = "621%";
            }
        });

        var markers = document.querySelectorAll(".marker");
    
        markers.forEach(bar => {
            var value = bar.getAttribute("data-value");
            
            // 0 - 5
            if (value == 0) {
                bar.style.left = "20%";
            } else if (value == 1) {
                bar.style.left = "40%";
            } else if (value == 2) {
                bar.style.left = "60%";
            } else if (value == 3) {
                bar.style.left = "80%";
            } else if (value == 4) {
                bar.style.left = "100%";
            } else if (value == 5) {
                bar.style.left = "621%";
            }
        });
    </script>
{% endblock %}