{{ define "styles" }}
    {{ $styles := resources.Get "css/index.css" | toCSS | minify }}

    <link rel="stylesheet" href="{{ $styles.Permalink }}" />
{{ end }}
{{ define "main" }}
    {{ $faceImage := resources.Get "images/big-face.png" }}
    
    <section id="intro">
        <div>
            <h1>Hi! I am <span>Hazem</span>, a sofware engineer currently working at <a href="https://finteum.com" target="_blank">Finteum</a></h1>
            <p>I have over two years of experience mainly working on web and cross platform mobile applications in E-Commerce, Fintech, Auditing and Compliance. My role was mainly working on the front-end.</p>
            <div id="action-buttons">
                <a href="{{ urls.JoinPath .Site.BaseURL "blog" }}">Blog</a>
                <a href="{{ urls.JoinPath .Site.BaseURL "contact" }}">Contact</a>
            </div>
        </div>
        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face">
    </section>

    <section id="about">
        <h2>About</h2>
        <p>Tinkering is what got me to where I am now as a professional engineer.</p>
        {{ partial "about-card.html" . }}
    </section>

    <section id="projects">
        <div>
            <h2>Projects</h2>
            <a class="read-more" href="{{ urls.JoinPath .Site.BaseURL "projects" }}">
                View more
            </a>
        </div>
        <p>These are all the projects I worked on personally and professionally.</p>
        {{ range (where .Site.Pages "Section" "projects") }}
            {{ range .Pages }}
                {{ partial "card.html" . }}
            {{ end }}
        {{ end }}
    </section>
    
    <section id="blog">
        <div>
            <h2>Blog</h2>
            <a class="read-more" href="{{ urls.JoinPath .Site.BaseURL "blog" }}">
                View more
            </a>
        </div>
        <p>These are articles about things I learned about software engineering.</p>
        {{ range (where .Site.Pages "Section" "blog") }}
            {{ range .Pages }}
                {{ partial "card.html" . }}
            {{ end }}
        {{ end }}
    </section>

    <section id="contact">
        <h2>Contact</h2>
        <p>Here you can contact me personally for any questions or opportunities.</p>

        {{ partial "contact-form.html" . }}
    </section>
{{ end }}