---
pagination:
  data: i18n
  size: 1
  alias: langKey
permalink: "/{{ langKey }}/index.html"
layout: base.njk
---

<div id="homeSquares">
</div>
<main>
    <script src="/static/scripts/home.js" defer></script>
    <noscript><style>
        .hs {
            display: unset!important;
        }
        #homeSquares {
            display: none;
        }
    </style></noscript>
    <div class="hs" id="hsDefault">
        <h1 id="homeTitle">{{ i18n[langKey].welcome | smartTitle }}</h1>
        <p>{{ i18n[langKey].homeWelcomeParagraph | safe }}</p>
        <h2>{{ i18n[langKey].socialsAndContact | smartTitle }}</h2>
        <p>{{ i18n[langKey].homeSocialsAndContactParagraph | safe }}</p>
        <p>{{ i18n[langKey].homeSocialsAndContactParagraphTwo | safe }}</p>
    </div>
    <div class="hs" id="hsMusic">
        <h1>{{ i18n[langKey].myMusic | smartTitle }}</h1>
        <p>{{ i18n[langKey].homeMyMusicParagraph | safe }}</p>
        <p>{{ i18n[langKey].homeMyMusicParagraphTwo | safe }}</p>
    </div>
    <div class="hs" id="hsVideo">
        <h1>{{ i18n[langKey].myVideos | smartTitle }}</h1>
        <p>{{ i18n[langKey].homeMyVideoParagraph | safe }}</p>
        <p>{{ i18n[langKey].homeMyVideoRandomVideoParagraph | safe }}</p>
        <a href="https://youtu.be/tZLoSxzsfpM" id="youtubeVideo">
            <img src="/static/images/youtube_video.jpg" alt="" id="youtubeVideoImage">
            <p>{{ i18n[langKey].homeVideoTitle | safe }}</p>
        </a>
    </div>
    <div class="hs" id="hsCode">
        <h1>{{ i18n[langKey].mySoftware | smartTitle }}</h1>
        <p>{{ i18n[langKey].homeMySoftwareParagraph | safe }}</p>
        {# <p>{{ i18n[langKey].homeMySoftwareNotableProjects | safe }}</p> #}
        <div class="hsProjects">
        <div class="hsProject">
            <div class="hsProjectHeader">
                <div class="hsProjectImage"><img src="/static/images/jamfish-wide.png" alt="{{ i18n[langKey].pestoWikiLogoAlt | safe }}"></div>
                <a href="https://github.com/adrianvic/jamfish" class="hsProjectHeaderIcon">
                    <img src="/static/visual/github.svg" class="invertedc">
                </a>
            </div>
            <div class="hsProjectContent">
                <p>{{ i18n[langKey].jamfishProjectDesctiption | safe }}</p>
            </div>
        </div>
        <div class="hsProject">
            <div class="hsProjectHeader">
                <div class="hsProjectImage"><img src="/static/images/eye_of_nemesis.png" alt="{{ i18n[langKey].eyeofnemesisLogoAlt | safe }}"></div>
                <a href="https://github.com/adrianvic/NemesisEye" class="hsProjectHeaderIcon">
                    <img src="/static/visual/github.svg" class="invertedc">
                </a>
            </div>
            <div class="hsProjectContent">
                <p>{{ i18n[langKey].eyeofnemesisProjectDesctiption | safe }}</p>
            </div>
        </div>

        <div class="hsProject">
            <div class="hsProjectHeader">
                <div class="hsProjectImage"><img src="/static/images/itemeconomy2-wide.png" alt="{{ i18n[langKey].itemeconomyLogoAlt | safe }}"></div>
                <a href="https://github.com/adrianvic/ItemEconomy" class="hsProjectHeaderIcon">
                    <img src="/static/visual/github.svg" class="invertedc">
                </a>
            </div>
            <div class="hsProjectContent">
                <p>{{ i18n[langKey].itemeconomyProjectDesctiption | safe }}</p>
            </div>
        </div>
        <div class="hsProject">
            <div class="hsProjectHeader">
                <div class="hsProjectImage"><img src="/static/images/pestowikifullwhite.png" alt="{{ i18n[langKey].jamfishLogoAlt | safe }}"></div>
                <a href="https://github.com/Margarina-not-butter/PestoWiki" class="hsProjectHeaderIcon">
                    <img src="/static/visual/github.svg" class="invertedc">
                </a>
            </div>
            <div class="hsProjectContent">
                <p>{{ i18n[langKey].eyeofnemesisProjectDesctiption | safe }}</p>
            </div>
        </div>
        </div>
    </div>
</main>