profile.html

{% extends 'base.html' %}

{% block content %}

  <!-- Main Section -->
  <main class="profile my-md">
    <div class="container">
      <div class="layout">
        <div class="column column--1of3">
          <div class="card text-center">
            <div class="card__body dev">
              <img class="avatar avatar--xl" src="{{ account_query.avatar.url }}" />
              <h2 class="dev__name">{{ account_query.full_name|title }}</h2>
              <p class="dev__title">{{ account_query.direction|title }}</p>
              {% if account_query.address %}
                <p class="dev__location">Based in {{ account_query.address }}</p>
              {% endif %}
              <ul class="dev__social">
                <li>
                  <a title="Github" href="#" target="_blank"><i class="im im-github"></i></a>
                </li>
                <li>
                  <a title="Stackoverflow" href="#" target="_blank"><i class="im im-stackoverflow"></i></a>
                </li>
                <li>
                  <a title="Twitter" href="#" target="_blank"><i class="im im-twitter"></i></a>
                </li>
                <li>
                  <a title="LinkedIn" href="#" target="_blank"><i class="im im-linkedin"></i></a>
                </li>
                <li>
                  <a title="Personal Website" href="#" target="_blank"><i class="im im-globe"></i></a>
                </li>
              </ul>
              {% if request.user.id != account_query.id %}
                <a href="#" class="btn btn--sub btn--lg">Send Message </a>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="column column--2of3">
          <div class="devInfo">
            <h3 class="devInfo__title">About Me</h3>
            <p class="devInfo__about">
              {{ account_query.bio|linebreaks|urlize }}
            </p>
          </div>
          <div class="devInfo">
            <h3 class="devInfo__title">Skills</h3>
            <div class="devInfo__skills">
              {% for account_skill in account_query.skill.all %}
                <div class="devSkill">
                  <h4 class="devSkill__title">{{account_skill.name|title}} </h4>
                  <p class="devSkill__info">
                    {{ account_skill.description|linebreaks|urlize }}
                  </p>
                </div>
              {% endfor %}
  
              <!-- <h3 class="devInfo__subtitle">Other Skills</h3>
              <div class="devInfo__otherSkills">
                {% if account.query.skill.is_softskill %}
                  {% for account_softskill in account_query.skill.is_softskill %}
                    <span class="tag tag--pill tag--sub tag--lg">
                      <small>Figma</small>
                    </span>
                  {% endfor %}
                {% endif %}
              </div> -->
            </div>
          </div>
          <div class="devInfo">
            <h3 class="devInfo__title">Projects</h3>
            <div class="grid grid--two">
              {% for account_project in account_query.projects.all %}
                <div class="column">
                  <div class="card project">
                    <a href="{% url 'project-detail' account_project.slug %}" class="project">
                      <img class="project__thumbnail" src="{{ account_project.preview_image.url }}" alt="project thumbnail" />
                      <div class="card__body">
                        <h3 class="project__title">{{ account_project.title|title }}</h3>
                        <p><a class="project__author" href="{% url 'profile-detail' account_project.owner_id %}">{{ account_query.full_name|title }}</a></p> 
                        <p class="project--rating">
                          <span style="font-weight: bold;">92%</span> Postitive
                          Feedback (62 Votes)
                        </p>
                        <div class="project__tags">
                          {% for tag in account_project.tag.all %}
                            <span class="tag tag--pill tag--main">
                              <small>{{ tag|title }}</small>
                            </span>
                          {% endfor %}
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              {% endfor %}

            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
{% endblock content %}