{% extends 'home.html.twig' %}

{% block title %}My Own Corner Of The Internet | Alex Daniels{% endblock %}


{% block nav %}
<nav>
    <h1><a href="/">AD</a></h1>
    <i class="icon icon-menu" aria-label="open menu"></i>
    <menu class="front-menu">
        <li><a href="/words">Writing</a></li>
        <li><a href="/photos">Photography</a></li>
        <li><a href="/about">About Me</a></li>
        {% if app.user %}
            <li><a href="/brain">Brain</a></li>
            <li><a href="/letmeout">Logout</a></li>
        {% endif %}
    </menu>
</nav>
{% endblock %}


{% block intro %}
    <section id="intro">
        <p class="heading">&nbsp;cat ./about.md</p>
    </section>
{% endblock %}

{% block body %}
    <section id="body">
        <p class="about">
            hello, i'm alex<br>
            i'm a web developer based in portland, oregon<br><br>
            in my free time i enjoy hiking, camping, reading, photography, and more<br><br>
            welcome to my little corner of the internet
        </p>
    </section>
{% endblock %}

{% block outro %}
    <section id="outro">
       <p class="heading">&nbsp;ls ./menu</p>
       <div class="menu">
            <a data-scroll-to="cool-stuff">some cool stuff</a>
            <a data-scroll-to="work">work</a>
            <a data-scroll-to="contact">contact</a>
       </div>
    </section>
    <div id="continue" aria-label="continue"><i class="icon icon-arrow-down"></i></div>
{% endblock %}

{% block underFold %}
    <section id="cool-stuff">
        <h2 class="title">Some Cool Stuff</h2>
        <div class="highlights">
            <div class="highlight left">
                <i class="icon icon-paperclip"></i>
                <h3>Item 1</h3>
                <img src="/photos/road_trip_test/thumbnail.png">
                <p>I took a 6 week road trip across the united states</p>
                <a href="/photos">Road Trip</a>
            </div>
            <div class="highlight middle">
                <i class="icon icon-paperclip"></i>
                <h3>Item 2</h3>
                <img src="/photos/road_trip_test/thumbnail.png">
                <p>Some text about a thing longer text asdf 1234</p>
                <a href="/words">Project</a>
            </div>
            <div class="highlight right">
                <i class="icon icon-paperclip"></i>
                <h3>Item 3</h3>
                <img src="/photos/road_trip_test/thumbnail.png">
                <p>Some text about a thing</p>
                <a href="/about">Project</a>
            </div>
        </div>
    </section>
    <section id="work">
        <h2 class="title">Work</h2>
        <div class="jobs">
            <div class="left">
                <h3 class="title">Experience</h3>
                <div class="wrapper">
                    <div class="job latest active" data-job-id="job-1">
                        <h4 class="title">Engine Room Technology Company</h4>
                        <p><strong>2021-2026</strong> - <em>Remote</em></p>
                    </div>
                    <div class="job first" data-job-id="job-2">
                        <h4 class="title">Eastern Standard</h4>
                        <p><strong>2016-2021</strong> - <em>Philadelphia, PA</em></p>
                    </div>
                </div>
            </div>
            <div class="right">
                <h3 class="title">Highlights</h3>
                <div class="highlights">
                    <div id="job-1" class="job-highlight show">
                        <ul>
                            <li>
                                item 1
                            </li>
                            <li>
                                item 2
                            </li>
                            <li>
                                item 3
                            </li>
                        </ul>
                    </div>
                    <div id="job-2" class="job-highlight hide">
                        <ul>
                            <li>
                                2 item 1
                            </li>
                            <li>
                                2 item 2
                            </li>
                            <li>
                                2 item 3
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="contact">
        <h2 class="title">Contact</h2>
        <div class="info">
             <a href="mailto:hello@alexdaniels.dev" aria-label="email me"><i class="icon icon-email"></i></a>
        </div>
    </section>
{% endblock %}

{% block footer %}
    <p>© 2026 Alex Daniels</p>
{% endblock %}