<!DOCTYPE html>
<html lang="en">

<head>
    <title>m1lken01 - Home</title>
    <script src="script.js" defer></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" type="image/x-icon" href="/images/logo128x.png">
    <meta property="og:site_name" content="m1lk3n.net" />
    <meta property="og:title" content="m1lk3n.net" />
    <meta property="og:description" content="m1lk3n.net" />
    <meta property="og:url" content="https://m1lk3n.net/" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINcclRMA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="/main.js"></script>
</head>

<body>
    <main id="home">
        <h1 class="center title subtitle">Welcome to My Portfolio</h1>
        <p class="center">This is definitely not a default HTML page with a basic boilerplate.</p>
    </main>
    <section id="about">
        <h2 class="subtitle">About Me</h2>
        <p>My name is Artner Milan, and I am a
            <script>
                document.write(Math.floor((new Date() - new Date("2006-06-16")) / (1000 * 60 * 60 * 24 * 365.25)));
            </script> years old software developer student. I am currently in high school and I have a strong passion for software engineering. I am actively working towards improving my skills and knowledge in the field and I am eager to pursue a career
            in software engineering in the future.
        </p>
    </section>
    <section id="skills">
        <h2 class="subtitle">My Skills</h2>
        <p>As a young and passionate software developer, I have a strong foundation in multiple programming languages including JavaScript, Python, and C#. I have been coding since 2018 and I am always eager to learn and expand my skills.</p>
        <!-- TODO: cleanup the css classes -->
        <div class="vertical-chart chart">
            <div class="data-container">
                <div class="bar" style="height: 12vh"></div>
                <h4 class="label">Java</h4>
            </div>
            <div class="data-container">
                <div class="bar" style="height: 16vh"></div>
                <h4 class="label">Kotlin</h4>
            </div>
            <div class="data-container">
                <div class="bar" style="height: 20vh"></div>
                <h4 class="label">C#</h4>
            </div>
            <div class="data-container">
                <div class="bar" style="height: 10vh"></div>
                <h4 class="label">C++</h4>
            </div>
            <div class="data-container">
                <div class="bar" style="height: 20vh"></div>
                <h4 class="label">MySql</h4>
            </div>
            <div class="data-container">
                <div class="bar" style="height: 34vh"></div>
                <h4 class="label">Python</h4>
            </div>
            <div class="data-container">
                <div class="bar" style="height: 38vh"></div>
                <h4 class="label">JavaScript</h4>
            </div>
        </div>
        <div class="horizontal-chart chart">
            <div class="data-container">
                <h4 class="label">Java</h4>
                <div class="bar" style="width: 24vw"></div>
            </div>
            <div class="data-container">
                <h4 class="label">Kotlin</h4>
                <div class="bar" style="width: 28vw"></div>
            </div>
            <div class="data-container">
                <h4 class="label">C#</h4>
                <div class="bar" style="width: 36vw"></div>
            </div>
            <div class="data-container">
                <h4 class="label">C++</h4>
                <div class="bar" style="width: 16vw"></div>
            </div>
            <div class="data-container">
                <h4 class="label">MySql</h4>
                <div class="bar" style="width: 36vw"></div>
            </div>
            <div class="data-container">
                <h4 class="label">Python</h4>
                <div class="bar" style="width: 52vw"></div>
            </div>
            <div class="data-container">
                <h4 class="label">JavaScript</h4>
                <div class="bar" style="width: 60vw"></div>
            </div>
        </div>
    </section>
    <section id="projects">
        <h2 class="subtitle">My Projects</h2>
        <div class="cards">
            <div class="card">
                <h4>js-Minesweeper</h4>
                <p>Simple Minesweeper game made in JavaScript</p>
                <div class="link-container">
                    <a href="https://github.com/M1lken01/js-Minesweeper" class="link" target="_blank">View On GitHub</a>
                </div>
            </div>
            <div class="card">
                <h4>js-Chess</h4>
                <p>Simple Chess game made in JavaScript</p>
                <div class="link-container">
                    <a href="https://github.com/M1lken01/js-Chess" class="link" target="_blank">View On GitHub</a>
                </div>
            </div>
            <div class="card">
                <h4>csgo-case-odds</h4>
                <p>Simulates opening a lot of CSGO cases at once.</p>
                <div class="link-container">
                    <a href="https://github.com/M1lken01/csgo-case-odds" class="link" target="_blank">View On GitHub</a>
                </div>
            </div>
        </div>
    </section>
    <section id="contact">
        <h2 class="subtitle">
            Contact
        </h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas mollitia ipsa expedita ipsum quibusdam possimus quam culpa est officia illo dolorem, modi earum doloremque. Fugit, nemo. Rem quam esse repudiandae.
        </p>
    </section>
    <div class="wave">
    </div>
    <footer>
        <h2><a href="/home">m1lken01.wip.net</a></h2>
        <p class="nav">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#skills">Skills</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contact</a>
        </p>
        <ul class="horizontal-list">
            <li>
                <a href="/email" target="_blank"><img class="icon" src="./images/icons/icons8-gmail-logo-512.png"></img>
                    </img>
                </a>
            </li>
            <li>
                <a href="/github" target="_blank"><img class="icon" src="./images/icons/icons8-github-512.png"></img>
                    </img>
                </a>
            </li>
            <li>
                <a href="/facebook" target="_blank"><img class="icon" src="./images/icons/icons8-facebook-512.png"></img>
                    </img>
                </a>
            </li>
            <li>
                <a href="/instagram" target="_blank"><img class="icon" src="./images/icons/icons8-instagram-512.png"></img>
                    </img>
                </a>
            </li>
            <li>
                <a href="/discord" target="_blank"><img class="icon" src="./images/icons/icons8-discord-512.png"></img>
                </a>
            </li>
            <li>
                <a href="/steam" target="_blank"><img class="icon" src="./images/icons/icons8-steam-circled-512.png"></img>
                    </img>
                </a>
            </li>
            <li>
                <a href="/faceit" target="_blank"><img class="icon" src="./images/icons/icons8-faceit-512.png"></img>
                    </img>
                </a>
            </li>
        </ul>
        <div>
            <p class="copyright">
                Copyright &copy;
                <script>
                    document.write(new Date().getFullYear());
                </script> All rights reserved | Made with &#10084; by <a href="/github" target="_blank">M1lken01</a>
            </p>
        </div>
    </footer>
</body>

</html>