web/index.njk

---
pagination:
  data: i18n
  size: 1
  alias: langKey
permalink: "/{{ langKey }}/index.html"
layout: base.njk
---
{% from "macros.njk" import i88x31 with context %}
{% from "macros.njk" import videoCard with context %}
{% from "macros.njk" import projectCard %}

<div id="homeSquares">
</div>

<main>
    <script src="{{ '/static/scripts/home.js' | url }}" defer></script>

    <noscript>
        <style>
            .hs {
                display: unset !important;
            }
            #homeSquares {
                display: none;
            }
        </style>
    </noscript>

    <div class="hs" id="hsDefault">
        <div class="box kaoBox">
            <p>{{ i18n[langKey].kaoMain | safe }}</p>
            <p class="end-text nomargin">{{ i18n[langKey].kaoLink | safe }}</p>
        </div>
        <div class="box pageHeaderBox">
            <h1 id="homeTitle">{{ i18n[langKey].welcome | smartTitle }}</h1>
            <p>{{ i18n[langKey].homeWelcomeParagraph | safe }}</p>

            <div class="homeBadgesBox">
                {{ i88x31("tenkuma.gif") }}
                {{ i88x31("anybrowser6.gif") }}
                {{ i88x31("ai.gif") }}
                {{ i88x31("WEBP.gif") }}
                {{ i88x31("rainbowrain.gif") }}
                {{ i88x31("blasphemy.gif") }}
                {{ i88x31("css3.gif") }}
                {{ i88x31("best_viewed_with_open_eyes.gif") }}
                {{ i88x31("gnu-linux.gif") }}
            </div>
        </div>

        <hr>

        <h2>{{ i18n[langKey].aboutMe | smartTitle }}</h2>
        <p>{{ i18n[langKey].homeAboutMeParagraph | safe }}</p>
        <p>{{ i18n[langKey].homeAboutMeParagraphTwo | safe }}</p>

        <h2>{{ i18n[langKey].socialsAndContact | smartTitle }}</h2>
        <p>{{ i18n[langKey].homeSocialsAndContactParagraph | safe }}</p>
        <p>{{ i18n[langKey].homeSocialsAndContactParagraphTwo | safe }}</p>

        <h2>Webrings</h2>
        <div id="homeWebrings">
              <center>
                <div class="droidringwidget">
                    <a href="https://kanandraw.neocities.org/stuffs/droidring/home"><img src="https://kanandraw.neocities.org/stuffs/droidring/assets/logo.png" style="width: 200px;"></a><br/>
                    <img src="https://kanandraw.neocities.org/stuffs/droidring/assets/droidwidget.png" style="width: 115px;"><br>
                    <div class="buttonsdroidring">
                    <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=previous"><button class="navdroidring">←</button></a>
                    <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=random"><button class="navdroidring" style="position: relative; top: 1.6px;">⚄</button></a>
                    <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=next"><button class="navdroidring">→</button></a>
                    </div>
                    <style>
                    .droidringwidget {
                    font-family: 'Droid Sans',sans-serif;
                    align-content: center;
                    text-align: center;
                    width: 215px;
                    border: 1px solid #666666;
                    background: linear-gradient(0deg, black, #000000db);
                    padding: 5px;
                    }
                    .buttonsdroidring {
                    background: #989898;
                    padding: 4px;
                    margin: -5px;
                    }
                    
                    .navdroidring {
                    background: linear-gradient(to bottom, #F1F1F1, #B8B8B8);
                    padding: 5px;
                    color: black;
                    box-shadow: 0 3px 6px #00000029, 0 3px 6px #0000003B;
                    border: none;
                    width: 50px;
                    height: 27px;
                    min-width: 50px;
                    }
                    .navdroidring:active {
                    background: linear-gradient(to bottom,#FFD554,#E99D00);
                    }
                    /* .navdroidring:hover {
                    background: linear-gradient(to bottom, #ffebc4, #f2f2f2);
                    } */
                    </style>
                </div>
            </center>
        </div>
    </div>

    <div class="hs" id="hsMusic">
        <div class="box pageHeaderBox">
            <h1>{{ i18n[langKey].myMusic | smartTitle }}</h1>
            <p>{{ i18n[langKey].homeMyMusicParagraph | safe }}</p>
            <p>{{ i18n[langKey].homeMyMusicParagraphTwo | safe }}</p>

            <div class="homeBadgesBox">
                {{ i88x31("rave.gif") }}
                {{ i88x31("happymix.gif") }}
            </div>
        </div>

        <hr>

        <div class="hsMusicCard">
            {{
                videoCard(
                    i18n["global"].homeSongLink,
                    i18n["global"].homeSongTitle,
                    i18n["global"].homeSongImage,
                    i18n["global"].homeSongWebsite,
                    i18n["global"].homeSongDuration,
                    i18n["global"].homeSongAccent
                )
            }}
        </div>
    </div>

    <div class="hs" id="hsVideo">
        <div class="box pageHeaderBox">
            <h1>{{ i18n[langKey].myVideos | smartTitle }}</h1>
            <p>{{ i18n[langKey].homeMyVideoParagraph | safe }}</p>
        </div>

        <hr>

        {{
            videoCard(
                i18n["global"].homeVideoLink,
                i18n[langKey].homeVideoTitle,
                i18n["global"].homeVideoImage,
                i18n["global"].homeVideoWebsite,
                i18n["global"].homeVideoDuration
            )
        }}
    </div>

    <div class="hs" id="hsCode">
        <div class="box pageHeaderBox">
            <h1>{{ i18n[langKey].mySoftware | smartTitle }}</h1>
            <p>{{ i18n[langKey].homeMySoftwareParagraph | safe }}</p>
        </div>

        <hr>

        <div class="hsProjects">
            {{
                projectCard(
                    "Jamfish",
                    i18n[langKey].jamfishProjectDesctiption,
                    "https://github.com/adrianvic/jamfish",
                    '/static/images/jamfish-wide.png',
                    "Jamfish"
                )
            }}

            {{
                projectCard(
                    "ItemEconomy",
                    i18n[langKey].itemeconomyProjectDesctiption,
                    "https://github.com/adrianvic/ItemEconomy",
                    '/static/images/itemeconomy2-wide.png',
                    "ItemEconomy"
                )
            }}

            {{
                projectCard(
                    "Eye of Nemesis",
                    i18n[langKey].eyeofnemesisProjectDesctiption,
                    "https://github.com/adrianvic/NemesisEye",
                    '/static/images/eye_of_nemesis.png',
                    "Eye of Nemesis"
                )
            }}

            {{
                projectCard(
                    "PestoWiki",
                    i18n[langKey].pestoProjectDesctiption,
                    "https://github.com/Margarina-not-butter/PestoWiki",
                    '/static/images/pestowikifullwhite.png',
                    "PestoWiki"
                )
            }}
        </div>
    </div>
</main>