{% extends "base.html" %}

{% import "teasers.html" as teasers %}

{% block head %}
{{super()}}
<style>
#Intro
  {display: flex; flex-direction: row}
#ProfilePicture
  {flex: 0 0 220px; margin-right: 10px}
#ProfilePicture > img
  {background: hsl(217, 100%, 94%); padding: 10px; border-radius: 10px; box-shadow: 4px 4px 4px 0 #eeeeee; width: 192px}
#About
  {flex: 1 1 auto}
#About > h1
  {text-align: center; width: 100%; background: rgba(20, 20, 20, 0.8); color: white; box-shadow: 0 0 4px 0 rgba(20, 20, 20, 0.8); border-radius: 10px}

#FeaturedPosts > h1
  {font-size: 12pt; text-align: right; background: #FAFAFA; color: hsl(217, 100%, 83%); border-radius: 10px; padding: 4px 10px}
#FeaturedPosts > div
  {display: flex; flex-direction: row; flex-wrap: wrap}
#FeaturedPosts > div article
  {flex: 1 1 385px}

@media (max-width: 900px) {
  #Intro
    {flex-direction: column}
  #ProfilePicture
    {margin-left: auto; margin-right: auto}
}
</style>
{% endblock %}

{% block title %}David Zaslavsky{% endblock %}

{% block content %}
<section id="Intro">
    <div id="ProfilePicture">
        <img src="{{STATIC_BASEURL}}/images/david-zaslavsky.png">
    </div>

    <div id="About">
        <h1 class="name">David Zaslavsky</h1>

        <p>Welcome to my website! I am a physicist, science communicator, and programmer with a background in particle physics, numerical programming, web technologies, and design.</p>

        <p>I have a degree in physics from <a href="https://www.princeton.edu">Princeton University</a> and a PhD from <a href="https://www.psu.edu">Penn State University</a>. During grad school I specialized in high-energy computational particle phenomenology (what a mouthful!), which means I wrote computer programs to model the behavior of fundamental particles in high-energy collisions, like those at the <a href="https://home.cern/topics/large-hadron-collider">LHC</a>. I've written <a href="https://www.ellipsix.net/blog/2014/02/what-s-in-a-proton.html">blog posts</a> about my research.</p>

        <p>I started learning computer programming around 1999, beginning with Java. Over the years my programming language of choice has shifted from Java to PHP (those were dark days), then to C, then Python. Along the way I've picked up substantial experience with over a dozen other languages. I try to be a "tech polyglot", switching freely between different languages and libraries depending on what's right for the job. (<a href="https://xkcd.com/353/">Python is always right for the job</a>.)</p>

        <p>I'm very interested in improving communication within the scientific community and between scientists and the public. My main communication efforts are through this very blog, explaining my research and other scientific concepts to nonspecialists.</p>

        <ul id="ElsewhereOnline" class="fa-ul">
            <li class="contact-email">
                <span class="fa-li fa fa-envelope"></span> <a href="mailto:contact@ellipsix.net"><span>Email <span class="contact-name">contact@ellipsix.net</span></span></a><br>
                <a href="{{STATIC_BASEURL}}/D1DC92A1.asc"><span>PGP key <code>9CB9 306F F40B 5B82 13C8 B714 C3D3 545C D1DC 92A1</code></span></a>
            </li>
            <li class="contact-twitter"><span class="fa-li fa fa-twitter"></span> <a href="https://twitter.com/ellipsix"><span>Twitter <span class="contact-name">@ellipsix</span></span></a></li>
            <li class="contact-facebook"><span class="fa-li fa fa-facebook-official"></span> <a href="https://www.facebook.com/ellipsix/"><span>Facebook</span></a></li>
            <li class="contact-google-plus"><span class="fa-li fa fa-google-plus-official"></span> <a href="https://plus.google.com/+DavidZaslavsky"><span>Google+</span></a></li>
            <li class="contact-github"><span class="fa-li fa fa-github"></span> <a href="https://github.com/diazona"><span>Github <span class="contact-name">diazona</span></span></a></li>
            <li class="contact-mendeley"><span class="fa-li ai ai-mendeley-square"></span> <a href="https://www.mendeley.com/profiles/david-zaslavsky/"><span>Mendeley</span></a></li>
            <li class="contact-physics-stack-exchange"><span class="fa-li fa fa-stack-exchange"></span> <a href="https://physics.stackexchange.com/users/124"><span>Physics Stack Exchange</span></a></li>
            <li class="contact-stack-overflow"><span class="fa-li fa fa-stack-overflow"></span> <a href="https://stackoverflow.com/users/56541"><span>Stack Overflow</span></a></li>
        </ul>
    </div>
</section>

<section id="FeaturedPosts">
    <h1>Featured Posts</h1>
    <div>
        {% for article in articles|selectattr('featured')|selectattr('author', 'equalto', 'David Zaslavsky') %}
            {{teasers.small_teaser(article, show_authors=False, dark_title=True)}}
        {% endfor %}
    </div>
    {# TODO find the right way to link to post list #}
    <p><a href="{{SITEURL}}/blog/author/david-zaslavsky.html">All my posts</a></p>
</section>
{% endblock %}

{# kate: syntax Jinja2/HTML; #}