{% extends "base/website_base.html" %}

<!-- -----------------------------------------------------WEBSITE HEAD----------------------------------------------------- -->

{% block website_head %}

<!-- --------------------------LIBRARIES-------------------------- -->

{% load static %}
{% load website_tags %}
{% load i18n %}

<!-- --------------------------HEAD META TAGS-------------------------- -->

{% block page_head %}

<title>Portfolio</title>

{% endblock page_head %}

<!-- --------------------------PAGE CSS-------------------------- -->

{% block page_css %}

<link rel="stylesheet" type="text/x-scss" href="{% static 'website/css/home/landing.scss' %}">
<link rel="stylesheet" type="text/x-scss" href="{% static 'website/css/home/about.scss' %}">
<link rel="stylesheet" type="text/x-scss" href="{% static 'website/css/home/projects.scss' %}">

{% endblock page_css %}

<!-- --------------------------PAGE JS-------------------------- -->

{% block page_js %}

{% endblock page_js %}

{% block js_cdn %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
{% endblock js_cdn %}

{% endblock website_head %}

<!-- -----------------------------------------------------MAIN BODY----------------------------------------------------- -->

{% block website_body %}

{% set_local_img_dir "home" %}

<div class="page_container">

    <div class="page page-100 landing" id="home">

        <div class="gradient_parent_container">
            <div class="gradient_container">
                <canvas id="gradient-canvas" data-transition-in></canvas>
            </div>
        </div>
        
        <div class="text_container">
            <h5>Hi all. I am</h5>
            <h1>Yassin Rakha</h1>
            <code class="code">
                <span class="variable">proffesion</span>.<span class="function">append</span><span class="brackets">(<span class="str">"developer"</span>)</span><br>
                <span class="variable">proffesion</span>.<span class="function">append</span><span class="brackets">(<span class="str">"designer"</span>)</span><br>
                <span class="variable">proffesion</span>.<span class="function">append</span><span class="brackets">(<span class="str">"entrepreneur"</span>)</span>
            </code>
        </div>

        <div class="transition"></div>

    </div>

    <div class="page page-100 about" id="about">

        <div class="initial_view">
            <h1 class="hero_text">Run this <span>python</span> script to know more about me</h1>

            <div class="code_container" id="code_container" style="cursor: pointer;">
                <div class="line"></div>

                <div class="run_button_area">
                    <div class="run_button" id="code_run"><i class="bi bi-triangle"></i></div>
                    <div class="bracket">
                        <code>
                            [197]
                        </code>
                    </div>
                </div>

                <code class="hero_code">
                    <span class="class">chatgpt</span>.<span class="function">generate</span><span class="bracket">(<span class="str">"Who is Yassin Rakha?"</span>)</span>
                </code>
                
                <button class="btn btn-primary run_button" type="submit" id="run_button">Run Code</button>
            </div>

        </div>

        <div class="final_view">
            <!-- <div class="main_title"><h1>About Me</h1></div> -->

            <div class="bio_section" id="bioLoader">
                <h1 id="bioHeading">Yassin Rakha: Driven by Passion, Guided by Tech</h1>
                <p id="bioText">
                    Yassin Rakha is a 18-year-old visionary blending creativity and logic to shape the future of technology. 
                    As a passionate web developer and AI enthusiast, he has honed his skills in crafting intelligent, efficient 
                    systems since beginning his programming journey in 2020. Yassin thrives on solving complex problems with clean, 
                    scalable code and exploring how AI can enhance lives. Known for his ambition and positivity, he 
                    embodies the spirit of innovation, constantly learning and pushing boundaries to bring cutting-edge ideas to life
                </p>

                <a href="{% static 'website/img/home/Yassin_Rakha_CV.pdf' %}" download="Yassin Rakha's CV.pdf" id="download_cv"><button type="button" class="btn btn-primary download_cv_button_desktop"><p>Download CV</p></button></a>
            </div>
              

            <div class="skills_section">

                <div class="vertical_divider"></div>

                <div class="expertise">
                    <h1 class="title">Expertise</h1>

                    <div class="item">
                        <h1>Full-Stack Web Development</h1>
                        <div class="progress" role="progressbar" progress_value="92">
                            <div class="progress-bar web"></div>
                        </div>
                    </div>

                    <div class="item">
                        <h1>AI Engineering</h1>
                        <div class="progress" role="progressbar" progress_value="68">
                            <div class="progress-bar ai"></div>
                        </div>
                    </div>
                    
                </div>

                <div class="horizontal_divider"></div>

                <div class="tools">

                    <div class="tools_container" id="tools_container">

                        <div class="row row-cols-2 text-center">
                            <div class="divider_1"></div>
                            <div class="row item">
                                <h1>Programming Languages:</h1>

                                <div class="row-cols-2 values">    
                                    <div class="col">- Python</div>
                                    <div class="col">- HTML/CSS</div>
                                    <div class="col">- JavaScript</div>
                                    <div class="col">- SQL</div>
                                </div>

                                <div class="item_divider"></div>

                            </div>

                            <div class="row item">
                                <h1>Design Tools</h1>

                                <div class="row-cols-2 values">
                                    <div class="col">- Figma</div>
                                    <div class="col">- Canva</div>
                                    <div class="col">- Illustrator</div>
                                    <div class="col">- Photoshop</div>
                                    
                                </div>

                                <div class="item_divider"></div>

                            </div>
                            
                            <div class="row item">
                                <h1>Frameworks</h1>

                                <div class="row-cols-2 values">
                                    <div class="col">- Django</div>
                                    <div class="col">- Bootstrap</div>
                                </div>

                                <div class="item_divider last_divider"></div>
                            </div>
                            
                            <div class="row item version_control">
                                <h1>Version Control</h1>

                                <div class="row-cols-2 values">
                                    <div class="col">- git</div>
                                    <div class="col">- GitHub</div>
                                </div>

                            </div>

                            <div class="row item">
                                <h1>Other</h1>

                                <div class="row-cols-2 values">
                                    <div class="col">- Ollama</div>
                                    <div class="col">- FilzeZilla</div>
                                </div>

                            </div>

                        </div>


                      </div>

                </div>

                <a href="{% static 'website/img/home/Yassin_Rakha_CV.pdf' %}" download="Yassin Rakha's CV.pdf" id="download_cv"><button type="button" class="btn btn-primary download_cv_button_mobile"><p>Download CV</p></button></a>
                
            </div>

        </div>

        
    </div>

    <div class="page page-100 projects" id="projects">

        <div class="transition"></div>

        <h1 class="title">My  top Projects</h1>

        <div class="holder">

            <div id="carouselExampleIndicators" class="carousel slide">

                <div class="carousel-indicators">

                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

                    {% for  indicator in projects %}

                        {% if forloop.first %}
                        {% else %}

                        {% with index=forloop.counter|add:"-1" %}
                        <button type="button" 
                        data-bs-target="#carouselExampleIndicators"
                        data-bs-slide-to="{{index}}"                        
                        aria-label="Slide {{index}}"></button>
                        {% endwith %}

                        {% endif %}

                    {% endfor %}
                </div>
    
                <div class="carousel-inner">
    
                    {% for project in projects %}
                        <div class="carousel-item {% if forloop.first %}active{% endif %} ">

                            <div class="content_holder">
                                <div class="img_holder">
                                    <div class="overlay"></div>
                                    <img src="{% static 'website/img/home/' %}{{ project.img }}" class="d-block" alt="...">
                                </div>

                                <div class="text_holder">
                                    <a href="https://{{ project.title }}" target="_blank">{{ project.title }}</a>
                                    <p>
                                        {{ project.description }} 
                                    </p>
                                </div>
                            </div>

                        </div>
                    {% endfor %}
    
                </div>
    
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
                </button>
    
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
    
            </div>

        </div>
        
    </div>

</div>

{% endblock website_body %}

<!-- -----------------------------------------------------DOM AREA----------------------------------------------------- -->

{% block additional_dom_scripts %}

<script src="{% static 'website/js/home/landing.js' %}"></script>
<script src="{% static 'website/js/home/about.js' %}"></script>
<script src="{% static 'website/js/__common__/gradient.js' %}"></script>

{% endblock additional_dom_scripts %}