index.html

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="./assets/images/website-icon.ico">
    <title>Home - Mimolet</title>
    <link rel="stylesheet" href="/assets/style/main.css">
    <link rel="stylesheet" href="/assets/style/home.css">
    <meta property="og:title" content="Mimolet's Website!">
    <meta property="og:description" content="Hi ! Come and check out my website :)">
    <meta property="og:image" content="/assets/images/mimo-pfp.png">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Mimolet's Website!">
    <meta name="twitter:description" content="Hi ! Come and check out my website :)">
    <meta name="twitter:image" content="/assets/images/mimo-pfp.png">
    <script src="/assets/scripts/theme.js"></script>
</head>

<body>
    <main>
        <div class="top-bg">
            <div class="right-buttons">

                <!-- Dark theme button -->

                <button type="button" class="menu-buttons" id="dark-mode-btn" onclick="darkThemeButton()">
                    <img src="/assets/icons/lightTheme.svg" class="icon-light" alt="light icon">
                    <img src="/assets/icons/darkTheme.svg" class="icon-dark" alt="dark icon">
                </button>

                <!-- Languages select -->

                <select class="menu-buttons" id="languages-select"></select>
                <script src="/assets/scripts/language.js"></script>

            </div>
        </div>

        <!-- Main page start -->

        <div class="header_picture">
            <img src="/assets/images/mimo-pfp.png" alt="Mimolet profile picture">
        </div>

        <h1>Mimolet</h1>
        <p id="citation">"Say cheese !"</p>

        <!-- Description -->

        <p id="greeting"></p>

        <section id="about">
            <p>
                Hello ! My name is <span class="bold" title="it's me !">Samuel</span>, but I'm known as
                <span class="bold" title="that's still me !">Mimolet</span> !
            </p>
            <p>
                <span class="bold" title="pew pew ! 🔫">Video games</span>, <span class="bold"
                    title="tchoo tchoo ! 🚂">trains</span> and <span class="bold"
                    title="bip boop ! 🤖">technology</span> are my passion !
                I also like making <span class="bold">montages</span> et <span class="bold">video edits</span>… and,
                to be honest, <span class="italic" title="and proud to be one 😎"> I'm a full-time nerd !</span>
            </p>
            <p>
                I'm currently studying <span class="bold" title="at Ynov Campus">informatics</span>, and I've made
                this website to make it easier for you to discover <span class="bold">my projects</span> and to
                <span class="bold">find me</span> on the Internet.
            </p>
            <p>Enjoy your visit ! 🚀 </p>
            <p>⚠️ You are viewing the page without the scripts enabled - some infos may be outdated ⚠️</p>
        </section>

        <!-- Links to my socials -->

        <div id="socials">

            <!-- Bluesky -->

            <a href="https://bsky.app/profile/themimolet.bsky.social" title="Bluesky">
                <img src="./assets/icons/socials/bluesky.svg" alt="icon bluesky">
                Bluesky
            </a>

            <!-- Instagram -->

            <a href="https://www.instagram.com/themimolet/" title="Instagram">
                <img src="./assets/icons/socials/instagram.svg" alt="icon instagram">
                Instagram
            </a>

            <!-- YouTube -->

            <a href="https://www.youtube.com/@Mimolet" title="YouTube">
                <img src="./assets/icons/socials/youtube.svg" alt="icon youtube">
                YouTube
            </a>

            <!-- X -->

            <a href="https://x.com/themimolet" title="X/Twitter">
                <img src="./assets/icons/socials/x.svg" alt="icon x">
                X
            </a>

            <!-- Twitch -->


            <a href="https://www.twitch.tv/themimolet" title="Twitch">
                <img src="./assets/icons/socials/twitch.svg" alt="icon twitch">
                Twitch
            </a>

            <!-- Steam -->

            <a href="https://steamcommunity.com/id/Mimolet/" title="Steam">
                <img src="./assets/icons/socials/steam.svg" alt="steam icon">
                Steam
            </a>

            <!-- Itch -->

            <a href="https://themimolet.itch.io/" title="Itch">
                <img src="./assets/icons/socials/itch.svg" alt="icon itch">
                Itch
            </a>

            <!-- RSS -->

            <a href="https://themimolet.github.io/feed" title="RSS Feed">
                <img src="./assets/icons/socials/rss.svg" alt="icon rss">
                RSS Feed
            </a>

            <!-- Mail -->

            <a href="mailto:mimolet@mailo.com" title="E-mail">
                <img src="./assets/icons/socials/mail.svg" alt="icon mail">
                E-mail
            </a>

        </div>

        <hr>

        <!-- Game section -->

        <div id="game-gallery">
            <a href="/projects/TheTotemOfDestiny" class="game-card" title="The Totem Of Destiny">
                <img id="totem-destiny-thumbnail" src="assets/images/games-thumbnail/ttod-thumbnail.png"
                    alt="The Totem of Destiny Thumbnail">
            </a>
            <a href="/projects/SaveNautica" class="game-card" title="Save Nautica">
                <img id="save-nautica-thumbnail" src="assets/images/games-thumbnail/save-thumbnail.png"
                    alt="Save Nautica Thumbnail">
            </a>
            <a href="/projects/ColourGuess" class="game-card" title="ColourGuess">
                <img id="colourguess-thumbnail" src="assets/images/games-thumbnail/colourguess-thumbnail.png"
                    alt="ColourGuess Thumbnail">
            </a>
        </div>
    </main>
</body>

</html>