index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="George Orfanides" property="og:title" />
    <meta content="The website of George Orfanides." property="og:description" />
    <meta content="http://georgeorfa015.github.io/" property="og:url" />
    <meta content="https://i.imgur.com/fv55MPW.png" property="og:image" />
    <meta content="#090f0c" data-react-helmet="true" name="theme-color" id="theme-color"/>
    <meta name="google-site-verification" content="-lrHI5oPyUX3BqcopmztJGiredsAKYtobVhyVNhx4fg" />
    <link rel="icon" href="WebsiteLogo2.ico">
    <title>George Orfanides</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
        div{
            background-color: #ffffff00;
            padding: 0px;
        }
        a{
            text-decoration: none;
            color: #fff;
        }
        body{
            font-family: Poppins;
            background: #000;
            color: #fff;
        }
        #outer-container{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            display: grid;
            grid-template-columns: auto;
            gap: 3vw;
        }
        #topMessage{
            padding: 2vw;
        }
        #topMessageText{
            color: #fff;
            position: relative;
            top: 0vw;
            left: 0vw;
            transform: translateY(1vh);
            font-size: 6.9vw;
            font-weight: 300;
            transition: 0;
            opacity: 0;
        }
        #topMessageTextName{
            font-size: 8.4vw;
            font-weight: 600;
        }
        #aboutMe, #contactMe{
            display: grid;
            grid-template-columns: 1fr 4fr;
            margin: 0 2vw 0 2vw;
            background-color: #111;
            border-radius: 1vw;
            overflow: hidden;
            transform: translateY(1vh);
            opacity: 0;
        }
        #aboutMeTitle, #contactMeTitle{
            font-size: 2.4vw;
            text-align: center;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #222;
            padding: 0.75vw;
        }
        #aboutMeText, #contactMeText{
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 1.6vw;
            padding: 1vw;
        }
        #projects{
            display: grid;
            grid-template-columns: 1fr;
            gap: 1vw;
            margin: 0 2vw 0 2vw;
            overflow: hidden;
            transform: translateY(1vh);
            opacity: 0;
        }
        .projectsTitle{
            font-size: 3.5vw;
            font-weight: 500;
        }
        .projectsSubtitle{
            font-size: 2.6vw;
            opacity: 0;
        }
        .projectsCont{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 1vw; 
            opacity: 0;
            margin-bottom: 1vw;
        }
        .project{
            background-color: #056c30;
            padding: 0.75vw;
            border-radius: 0.75vw;
            line-height: 2vw;
            text-align: center;
        }
        .projectTitle{
            font-size: 1.8vw;
            font-weight: 600;
        }
        .projectDescription{
            font-size: 1.4vw;
            font-weight: 300;
        }
        #contributors{
            display: grid;
            grid-template-columns: 1fr;
            gap: 1vw;
            margin: 0 2vw 0 2vw;
            overflow: hidden;
            transform: translateY(1vh);
            opacity: 0;
        }
        #contributorsTitle{
            font-size: 3.5vw;
            font-weight: 500;
        }
        #contributorsCont{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1vw; 
        }
        .contributor{
            border-radius: 0.75vw;
            line-height: 2vw;
            text-align: left;
            display: grid;
            grid-template-columns: 1fr;
            overflow: hidden;
            height: fit-content;
        }
        .contributorTitle{
            font-size: 1.8vw;
            font-weight: 600;
            padding: 0.75vw;
            background: #056c30;
            height: fit-content;
        }
        .contributorDescription{
            font-size: 1.4vw;
            padding: 0.75vw;
            font-weight: 300;
            background:#045827;
        }
        a.contributor-url, a.email, a.news{
            color: #54df8e;
            transition: 0.1s color;
            text-decoration:underline;
            text-decoration-color: #065629;
        }
        a.contributor-url:hover, a.email:hover, a.news:hover{
            color: #85f6b4;
            text-decoration-color: #0b7338;
        }
        #latestNews{
            background: #111;
            opacity: 0;
            transform: translateY(1vh);
            margin: 0 2vw;
            border-radius: 1vw;
            overflow: hidden
        }
        #latestNewsHeader{
            font-size: 2.4vw;
            font-weight: 600;
            background: #222;
            padding: 0.75vw 1.5vw;
        }
        #article{
            padding: 0.75vw 1.5vw;
            display: grid;
            grid-template-columns: 1fr;
            padding-bottom: 0;
        }
        .title{
            font-size: 1.8vw;
            font-weight: 500;
        }
        .articleText{
            font-size: 1.5vw;
            font-weight: 300;
        }
        #additionalInfo{
            border-radius: 1.5vw;
            display: grid;
            grid-template-columns: 4fr 1fr;
            padding: 1vw;
            padding-left: 1.5vw;
        }
        #seeMoreText{
            text-align: center;
            padding: 0.75vw 2vw;
            background: #333;
            border-radius: 0.75vw;
            font-size: 1.25vw;
            transition: 0.2s background;
            cursor: pointer;
        }
        #seeMoreText:hover{
            background: #444
        }
        #commitInfo{
            display: grid;
            grid-template-columns: 1fr;
            color: #aaa;
            font-size: 1vw;
            align-content: center;
            width: fit-content;
        }
        #commit{
            color: #aaa;
        }
        a#commit{
            text-decoration: #444 underline;
        }
        a#commit:hover{
            text-decoration: #777 underline;
        }
        #pullRequest{
            color: #aaa;
        }
        a#pullRequest{
            text-decoration: #444 underline;
        }
        a#pullRequest:hover{
            text-decoration: #777 underline;
        }
        @media(max-width:700px) {
            #outer-container{
                gap: 6vw;
            }
            #topMessage{
                text-align: center;
            }
            #aboutMe, #contactMe{
                grid-template-columns: 1fr;
                margin: 0 4vw 0 4vw;
                border-radius: 2vw;
            }
            #aboutMeTitle, #contactMeTitle{
                font-size: 8vw;
                padding: 1vw;
            }
            #aboutMeText, #contactMeText{
                font-size: 3.5vw;
                padding: 2vw;
            }
            #projects{
                gap: 2vw;
                margin: 0 15vw 0 15vw;
                text-align: center;
            }
            .projectsTitle, #contributorsTitle{
                font-size: 8vw;
            }
            .projectsSubtitle{
                font-size: 6vw;
            }
            .projectsCont{
                grid-template-columns: 1fr;
                gap: 4vw; 
                margin-bottom: 2vw;
            }
            .project{
                padding: 3vw;
                border-radius: 2vw;
                line-height: 5.5vw;
                text-align: center;
            }
            .projectTitle{
                font-size: 5.9vw;
            }
            .projectDescription{
                font-size: 4vw;
            }
            #contributors{
                grid-template-columns: 1fr;
                gap: 2vw;
                margin: 0 4vw 0 4vw;
                text-align: center;
            }
            #contributorsCont{
                grid-template-columns: 1fr;
                gap: 3vw; 
            }
            .contributor{
                border-radius: 2vw;
                line-height: 6.5vw;
                text-align: left;
            }
            .contributorTitle{
                font-size: 5.9vw;
                padding: 3vw;
                text-align: center;
            }
            .contributorDescription{
                font-size: 4vw;
                padding: 3vw;
                line-height: 5.5vw;
            }
            #latestNews{
                margin: 0vw 4vw;
                border-radius: 2vw;
            }
            #latestNewsHeader{
                font-size: 7vw;
                text-align: center;
                padding: 1.25vw;
            }
            .title{
                font-size: 6vw;
                text-align: center;
            }
            .articleText{
                font-size: 3.5vw;
                line-height: 5.5vw;
                padding: 2vw;
                padding-bottom: 0;
                padding-top: 0;
                text-align: justify;
                text-justify: distribute;
                word-spacing: -0.4vw;
            }
            #additionalInfo{
                grid-template-columns: 1fr;
                padding-top: 0;
            }
            #commitInfo{
                text-align: center;
                width: calc(100% - 4vw);
                font-size: 2.75vw;
                padding: 2vw;
                padding-top: 0;
                padding-bottom: 0;
                text-decoration: underline;
            }
            #commit{
            color: #aaa;
            }
            a#commit{
                text-decoration: #444 underline;
            }
            a#commit:hover{
                text-decoration: #777 underline;
            }
            #pullRequest{
                color: #aaa;
            }
            a#pullRequest{
                text-decoration: #444 underline;
            }
            a#pullRequest:hover{
                text-decoration: #777 underline;
            }
            #seeMoreText{
                padding: 1.75vw;
                border-radius: 1.75vw;
                font-size: 3.75vw;
                margin: 2vw;
            }
        }
    </style>
</head>
<body>
    <div id="outer-container">
        <div id="topMessage">
            <div id="topMessageText">Welcome to the website of <br><span id="topMessageTextName">George Orfanides</b></span></div>
        </div>
        <div id="latestNews">
            <div id="latestNewsHeader">Latest News</div>
            <div id="article">
                <span class="title">
                    Friday, April 18, 2025
                </span>
                <span class="articleText">
                    Added groups in <a href="timers/index.html" class="news">Timers</a>, <a href="progress-bars/index.html" class="news">Progress Bars</a> and <a href="counters/index.html" class="news">Counters</a> for better categorization and organization. Save codes have all received a version update as well.
                </span>
            </div>
            <div id="additionalInfo">
                <div id="commitInfo">
                    <a id="commit" href="https://github.com/GeorgeOrfa015/georgeorfa015.github.io/commit/007b3fd6f93662ba135e9f57b890dbf23cbd79fa">Commit 3 on savecode-groups</a>
                    <a id="pullRequest" href="https://github.com/GeorgeOrfa015/georgeorfa015.github.io/commit/0d2ad04d69534360e1f07d700c2dc8f741d4044f">Pull Request #15 by GeorgeOrfa015</a>
                </div>
            <a id="seeMoreText" href="news.html">See More...</a></div>
        </div>
        <div id="projects">
            <div class="projectsTitle">Projects</div>
            <div class="projectsSubtitle" id="ps1">Utility</div>
            <div class="projectsCont" id="pc1">
                <a href="progress-bars/"><div class="project">
                    <span class="projectTitle">Progress Bars</span><br>
                    <span class="projectDescription">Create your own custom progress bars!</span>
                </div></a>
                <a href="timers/"><div class="project">
                    <span class="projectTitle">Custom Timers</span><br>
                    <span class="projectDescription">See how long ago/in how much time a date is.</span>
                </div></a>
                <a href="counters/"><div class="project">
                    <span class="projectTitle">Counters</span><br>
                    <span class="projectDescription">Create tally counters for anything.</span>
                </div></a>
            </div>
            <div class="projectsSubtitle" id="ps2">Calculators and Generators</div>
            <div class="projectsCont" id="pc2">
                <a href="math/"><div class="project">
                    <span class="projectTitle">Math Tools</span><br>
                    <span class="projectDescription">A variety of modules to help with Math.</span>
                </div></a>
                <a href="random/"><div class="project">
                    <span class="projectTitle">Random Generators</span><br>
                    <span class="projectDescription">Generators for random numbers, letters and colors.</span>
                </div></a>
                <a href="voltage-drop/"><div class="project">
                    <span class="projectTitle">Cable Voltage Drop</span><br>
                    <span class="projectDescription">Calculator for finding out the voltage drop of a cable.</span>
                </div></a>
            </div>
            <div class="projectsSubtitle" id="ps3">Dates and Times</div>
            <div class="projectsCont" id="pc3">
                <a href="timer/"><div class="project">
                    <span class="projectTitle" id="yearTimerProject">Text filled by function.</span><br>
                    <span class="projectDescription">A countdown to the next year with customization options.</span>
                </div></a>
                <a href="clock/"><div class="project">
                    <span class="projectTitle">Custom Digital Clock</span><br>
                    <span class="projectDescription">A time display with multiple customization options.</span>
                </div></a>
                <a href="year-progress/"><div class="project">
                    <span class="projectTitle">Year Progress</span><br>
                    <span class="projectDescription">See what percentage of the year has passed.</span>
                </div></a>
            </div>
            <div class="projectsSubtitle" id="ps4">Fun and Games</div>
            <div class="projectsCont" id="pc4">
                <a href="chase-button/"><div class="project">
                    <span class="projectTitle">Chase the Button</span><br>
                    <span class="projectDescription">Chase a button with your cursor and get points!</span>
                </div></a>
                <a href="platformer/"><div class="project">
                    <span class="projectTitle">2D Platformer</span><br>
                    <span class="projectDescription">A simple platformer made from a YouTube tutorial.</span>
                </div></a>
            </div>
            <div class="projectsSubtitle" id="ps5">In development</div>
            <div class="projectsCont" id="pc5">
                <a href="indev/"><div class="project">
                    <span class="projectTitle">Indev</span><br>
                    <span class="projectDescription">Unsupported experimental scripts and pages.</span>
                </div></a>
            </div>
        </div>
        <div id="contributors">
            <div id="contributorsTitle">Contributors</div>
            <div id="contributorsCont">
                <div class="contributor">
                    <div class="contributorTitle">Jacey Li</div>
                    <div class="contributorDescription">
                        Github Profile: <a class="contributor-url" href="https://github.com/gimpysploosh">gimpysploosh</a><br>
                        Website:<br>
                        <a class="contributor-url" href="https://gimpysploosh.github.io/thing">https://gimpysploosh.github.io/thing</a><br>
                        Helped with creating the Least Common Multiplier script in "Math Tools".
                    </div>
                </div>
                <div class="contributor">
                    <div class="contributorTitle">Giannis Ioannidis</div>
                    <div class="contributorDescription">
                        Github Profile: <a class="contributor-url" href="https://github.com/xdn3">xdn3</a><br>
                        Added the "Show seconds" option in "Wall Clock" <br><br>&nbsp;
                    </div>
                </div>
            </div>
        </div>
        <div id="aboutMe">
            <div id="aboutMeTitle">About me</div><div id="aboutMeText">I am a high school student that enjoys making random websites with JavaScript to help with everyday life, or just have fun! I know how to use the three basic web development languages, these being HTML, CSS and JS.</div>
        </div>
        <div id="contactMe">
            <div id="contactMeTitle">Contact me</div><div id="contactMeText"><span>Email: <a class="email" href="mailto:georgeorfa015@gmail.com">georgeorfa015@gmail.com</a></span></div>
        </div>
        <div></div>
    </div>
    <script>
        let delay = 100
        let duration = 1;
        function animation1() {
            let item = document.getElementById("topMessageText");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.51,.9) transform, ${duration}s cubic-bezier(.2,.79,.51,.9) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1
            setTimeout(animation2, delay+100)
        }
        function animation2() {
            let item = document.getElementById("latestNews");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.51,.9) transform, ${duration}s cubic-bezier(.2,.79,.51,.9) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            setTimeout(animation3, delay)
        }
        function animation3() {
            let item = document.getElementById("projects");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.51,.9) transform, ${duration}s cubic-bezier(.2,.79,.51,.9) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            setTimeout(animation4, delay)
        }
        function animation4() {
            let item = document.getElementById("pc1");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            item = document.getElementById("ps1");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            setTimeout(animation5, delay)
        }
        function animation5() {
            let item = document.getElementById("pc2");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            item = document.getElementById("ps2");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            setTimeout(animation6, delay)
        }
        function animation6() {
            let item = document.getElementById("pc3");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            item = document.getElementById("ps3");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            setTimeout(animation7, delay)
        }
        function animation7() {
            let item = document.getElementById("pc4");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            item = document.getElementById("ps4");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            setTimeout(animation8, delay)
        }
        function animation8() {
            let item = document.getElementById("pc5");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            item = document.getElementById("ps5");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            setTimeout(animation9, delay);
        }
        function animation9() {
            let item = document.getElementById("contributors");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            setTimeout(animation10, delay)
        }
        function animation10() {
            let item = document.getElementById("aboutMe");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
            setTimeout(animation11, delay)
        }
        function animation11() {
            let item = document.getElementById("contactMe");
            item.style.transition = `${duration}s cubic-bezier(.2,.79,.05,.99) transform, ${duration}s cubic-bezier(.2,.79,.05,.99) opacity`
            item.style.transform = "translateY(0%)";
            item.style.opacity = 1;
        }
        setTimeout(animation1, 750)
        let date = new Date();
        document.getElementById("yearTimerProject").innerHTML = "Countdown to " + (date.getFullYear()+1);
    </script>
</body>
</html>