https://gdre.dev/

Scan ID:: e7121b29-50d6-417d-8930-409cda0e8485Finished
Submitted URL:: https://gdre.dev/
Report Finished:: Oct 10, 2024, 05:11:12
Links · 6 found

The outgoing links identified from the page
Link	Text
https://worldvectorlogo.com/	Worldvectorlogo
https://www.monstereng.com/	몬스터어학원Monster English
https://studeet.com/meal/archive/	STUDEET 세종대성고 급식 아카이브
https://open.kakao.com/me/godroble	https://open.kakao.com/me/godroble
https://t.me/godroble	@godroble
https://velog.io/@godroble/posts	@godroble
JavaScript Variables · 13 found

Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
Name	Type
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
gtag	function
dataLayer	object
toggleTheme	function
getCurrentLang	function
toggleLang	function
copy	function
google_tag_manager	object
Console log messages · 2 found

Messages logged to the web console
Type	Category	Log
error	network	URL https://cdn.worldvectorlogo.com/logos/php-1.svg Text Failed to load resource: the server responded with a status of 403 ()
error	network	URL https://gdre.dev/favicon.ico Text Failed to load resource: the server responded with a status of 404 ()
HTML

The raw HTML body of the page
<!DOCTYPE html><html lang="ko"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Introduce myself</title>

    <meta name="author" content="Seo Woojin">
    <meta name="description" content="I'm Seo Woojin and developing Full Stack Web. Let's take a look at who I am.">

    <style>
        @import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css";
        /* @import "https://fonts.googleapis.com/earlyaccess/nanumpenscript.css"; */
        /* @font-face {
            font-family: 'Handletter';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Handletter.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        } */
        
        :root {
            --bg-color: #ffffff;
            --text-color: #181818;
        }

        body {
            margin: 0;
            border: 0;
            padding: 0;
            background-color: var(--bg-color);
            touch-action: pan-y;

            font-family: 'Pretendard';
            color: var(--text-color);
        }

        .theme-light {
            --bg-color: #ffffff;
            --text-color: #181818;
        }
        
        .theme-dark {
            --bg-color: #181818;
            --text-color: #ffffff;
        }

        .lang-ko .lang:not(.ko) {
            display: none;
        }
        .lang-en .lang:not(.en) {
            display: none;
        }

        a:link,
        a:visited,
        a:active {
            text-decoration: none;
            color: inherit;
        }
        a:link:hover {
            text-decoration: underline;
        }

        .emphasis {
            font-weight: bold;
            /* font-family: 'Nanum Pen Script'; */
            /* font-family: 'Handletter'; */
        }

        .btn-contact {
            font-family: 'Pretendard';
            color: var(--bg-color);
            background: var(--text-color);
            font-weight: bold;
            border: 0;
            border-radius: 2rem;
            font-size: 2rem;
            padding: 0.5rem 1rem;
            margin-top: 2rem;
            cursor: pointer;
        }

        .header-btns {
            position: absolute;
            top: 1rem; left: 1rem;

            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .header-btns > button {
            font-family: 'Pretendard';
            color: var(--bg-color);
            background: var(--text-color);
            border: 0;
            border-radius: 1rem;
            font-size: 1rem;
            padding: 0.25rem 0.5rem;
        }

        .page {
            width: 100%;
            min-height: 100vh;
        }

        .page.layout-1 {
            display: flex;
            align-items: center;
            gap: 4rem;
        }
        .page.layout-1:nth-child(even) {
            flex-direction: row-reverse;
        }

        .page.layout-1 > .title {
            display: flex;
            justify-content: center;

            width: 50%;
            font-size: 3rem;
        }
        .page.layout-1:nth-child(odd) > .title {
            text-align: right;
        }

        .page.layout-1 > .content {
            display: flex;
            justify-content: center;

            width: 50%;
        }
        
        .tmi {
            font-size: 1rem;
            color: #999;
        }

        .profile-image {
            width: 16rem;
            height: 16rem;
            border-radius: 32rem;

            background-image: url("/assets/profile-image.jpeg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .profile-image-comingsoon {
            width: 16rem;
            height: 16rem;
            border-radius: 32rem;
            border: 1px solid #999;

            text-align: center;
            line-height: 16rem;
        }

        .jumbotron {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .jumbotron > .item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;

            width: 8rem;
            height: 8rem;
            padding: 1rem;
            border: 0.5rem solid;
            border-radius: 1rem;
        }

        .jumbotron > .item > .img {
            width: 100%;
            flex-grow: 1;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
        .jumbotron > .item > p {
            text-align: center;
            margin: 0;
        }
        
        .list {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 1.5rem;
        }

        .list > .item {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .list > .item > .title {
            font-size: 2rem;
            font-weight: bold;
        }

        .page.layout-contact {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;
        }

        .page.layout-contact > .title {
            display: flex;
            justify-content: center;
            text-align: center;

            font-size: 3rem;
        }
        .page.layout-contact > .contact {
            display: flex;
            flex-direction: column;
            align-items: start;
            
            font-size: 2rem;
        }

        .footer {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            margin: 1rem 0;
        }

        .footer p {
            margin: 0;
        }

        .scrollGuidance {
            position: fixed;
            bottom: 3rem;
            width: 100%;
            margin: 0;
            text-align: center;
            color: #999;
            text-shadow: 0px 0px 1rem var(--bg-color);
            transition: 1s;
        }
        .scrollGuidance:not(.fadeout) {
            animation-name: glow;
            animation-duration: 500ms;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: ease-in-out
        }
        .scrollGuidance.fadeout {
            animation-name: fadeout;
            animation-duration: 500ms;
            color: transparent;
        }

        @keyframes glow {
            from {
                color: #999;
            }

            to {
                color: var(--text-color);
            }
        }

        @keyframes fadeout {
            from {
                color: #999;
            }

            to {
                color: transparent;
            }
        }


        @media screen and (max-width: 950px) {
            .page.layout-1,
            .page.layout-1:nth-child(even) {
                flex-direction: column;
                justify-content: center;
                gap: 3rem;
                width: 100%;
            }
            
            .page.layout-1 > .content,
            .page.layout-1 > .content {
                width: 100%;
            }

            .page.layout-1 > .title,
            .page.layout-1:nth-child(odd) .title {
                width: 100%;
                text-align: center;
                font-size: 1.5rem;;
            }

            .tmi {
                font-size: 0.7rem;
            }

            .jumbotron .item {
                width: 8rem;
                height: 6rem;
                padding: 0.5rem;
            }

            .list {
                margin: 0 2rem;    
            }

            .list > .item > .title {
                font-size: 1.25rem;
            }

            .page.layout-contact > .title {
                font-size: 1.5rem;
            }
            
            .page.layout-contact > .contact {
                font-size: 1rem;
            }
            
            .btn-contact {
                border-radius: 1.25rem;
                font-size: 1.25rem;
                padding: 0.25rem 0.75rem;
                margin-top: 0.5rem;
                cursor: pointer;
            }
        }

        @media (prefers-color-scheme: light) {
            :root {
                --bg-color: #ffffff;
                --text-color: #181818;
            }
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #181818;
                --text-color: #ffffff;
            }
        }
    </style>
</head>
<body class="lang-ko">
    <div class="page layout-1">
        <div class="title">
            <div class="lang ko">
                안녕하세요, 저는 <br>
                <span class="emphasis">풀스택 웹 개발</span>하는 <br>
                <span class="emphasis">서우진</span>입니다. <br>
                <button class="btn-contact" onclick="window.scrollTo({top:document.querySelector('#contact').offsetTop, behavior:'smooth'});">연락하기</button>
            </div>
            <div class="lang en">
                Hello! This is <br>
                <span class="emphasis">Seo Woojin</span> <br>
                and I'm developig <br>
                <span class="emphasis">Full-Stack</span> web. <br>
                <button class="btn-contact" onclick="window.scrollTo({top:document.querySelector('#contact').offsetTop, behavior:'smooth'});">Get in touch</button>
            </div>
        </div>
        <div class="content">
            <!-- <div class="profile-image"></div> -->
            <div class="profile-image-comingsoon">Profile image is coming soon</div>
        </div>
    </div>

    <div class="page layout-1">
        <div class="title">
            <div class="lang ko">
                제가 사용하는 <br>
                <span class="emphasis">언어</span>와 <span class="emphasis">라이브러리</span>, <br>
                <span class="emphasis">프레임워크</span>입니다.
                <p class="tmi">이미지 출처: <a href="https://worldvectorlogo.com/" target="_blank">Worldvectorlogo</a></p>
            </div>
            <div class="lang en">
                They are <br>
                <span class="emphasis">languages</span>, <span class="emphasis">libraries</span>, <br>
                and <span class="emphasis">frameworks</span> I use.
                <p class="tmi">Image Source: <a href="https://worldvectorlogo.com/" target="_blank">Worldvectorlogo</a></p>
            </div>
        </div>
        <div class="content">
            <div class="jumbotron">
                <div class="item" style="border-color: #e34f26;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/html-1.svg');"></div>
                    <p>HTML</p>
                </div>
                <div class="item" style="border-color: #f0db4f;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/logo-javascript.svg');"></div>
                    <p>JavaScript</p>
                </div>
                <div class="item" style="border-color: #1b73ba;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/css-3.svg');"></div>
                    <p>CSS</p>
                </div>
                <div class="item" style="border-color: #7952b3;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/bootstrap-5-1.svg');"></div>
                    <p>Bootstrap</p>
                </div>
                <div class="item" style="border-color: #131b28;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/jquery.svg');"></div>
                    <p>jQuery</p>
                </div>
                <div class="item" style="border-color: #8993be;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/php-1.svg');"></div>
                    <p>PHP</p>
                </div>
                <div class="item" style="border-color: #f29111;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/mariadb.svg');"></div>
                    <p>SQL</p>
                </div>
                <!-- <div class="item" style="border-color: #3a89c9;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/flutter.svg');"></div>
                    <p>Dart & Flutter</p>
                </div> -->
                <div class="item" style="border-color: #659ad2;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/c-1.svg');"></div>
                    <p>C</p>
                </div>
                <!-- <div class="item" style="border-color: #366f9e;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/python-5.svg');"></div>
                    <p>Python</p>
                </div> -->
            </div>
        </div>
    </div>
    
    <div class="page layout-1">
        <div class="title">
            <div class="lang ko">
                제가 사용하는 <br>
                <span class="emphasis">프로그램</span>입니다.
                <p class="tmi">이미지 출처: <a href="https://worldvectorlogo.com/" target="_blank">Worldvectorlogo</a></p>
            </div>
            <div class="lang en">
                They are <br>
                <span class="emphasis">programs</span> I use.
                <p class="tmi">Image Source: <a href="https://worldvectorlogo.com/" target="_blank">Worldvectorlogo</a></p>
            </div>
        </div>
        <div class="content">
            <div class="jumbotron">
                <div class="item" style="border-color: #31a8ff;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/visual-studio-code-1.svg');"></div>
                    <p>Visual Studio Code</p>
                </div>
                <div class="item" style="border-color: #31a8ff;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/adobe-photoshop-2.svg');"></div>
                    <p>Photoshop</p>
                </div>
                <div class="item" style="border-color: #9999ff;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/premiere-pro-cc.svg');"></div>
                    <p>Premiere Pro</p>
                </div>
                <div class="item" style="border-color: #9999ff;">
                    <div class="img" style="background-image: url('https://cdn.worldvectorlogo.com/logos/after-effects-1.svg');"></div>
                    <p>After Effects</p>
                </div>
            </div>
        </div>
    </div>

    <div class="page layout-1">
        <div class="title">
            <div class="lang ko">
                제가 <span class="emphasis">참여</span>하거나 <br>
                <span class="emphasis">기획</span>, <span class="emphasis">개발</span>했었던 <br>
                프로젝트들 입니다.
                <p class="tmi">프로젝트를 클릭하여 자세한 내용 살펴보기.</p>
            </div>
            <div class="lang en">
                These are <br>
                projetcts I'd <span class="emphasis">participated in</span>, <br>
                <span class="emphasis">designed</span>, <span class="emphasis">developed</span>.
                <p class="tmi">Click the projetcts to learn more.</p>
            </div>
        </div>
        <div class="content">
            <div class="jumbotron">
                <a class="item" style="border-color: #231f20; background-color: #231f20;" href="https://www.monstereng.com/" target="_blank">
                    <div class="img" style="background-image: url('https://www.monstereng.com/assets/logo.png');"></div>
                    <p style="color: #ffffff;" class="lang ko">몬스터어학원</p>
                    <p style="color: #ffffff;" class="lang en">Monster English</p>
                </a>
                <a class="item" style="border-color: #333333; background-color: #333333;" href="https://studeet.gdre.dev/" target="_blank">
                    <div class="img" style="background-image: url('https://studeet.gdre.dev/assets/studeet.png');"></div>
                    <p style="color: #ffffff;">STUDEET</p>
                </a>
                <div class="item" style="border-color: #0a5395; background-color: #0a5395;">
                    <div class="img" style="background-image: url('/assets/timefile.svg');"></div>
                    <p style="color: #ffffff;" class="lang ko">TimeFile (개발중)</p>
                    <p style="color: #ffffff;" class="lang en">TimeFile (Developing)</p>
                </div>
                <div class="item" style="border-color: #333333; background-color: #333333;">
                    <div class="img" style="background-image: url('');"></div>
                    <p style="color: #ffffff;" class="lang ko">Build Your Wiki (개발중)</p>
                    <p style="color: #ffffff;" class="lang en">Build Your Wiki (Developing)</p>
                </div>
            </div>
        </div>
    </div>

    <div class="page layout-1">
        <div class="title">
            <div class="lang ko">
                간단하게 만들어본 <br>
                <span class="emphasis">미니 서비스들</span> 입니다.
                <p class="tmi">서비스명을 클릭하여 자세한 내용 살펴보기.</p>
            </div>
            <div class="lang en">
                These are <br>
                <span class="emphasis">mini services</span> <br>
                I'd made simply.
                <p class="tmi">Click the service name to learn more.</p>
            </div>
        </div>
        <div class="content">
            <div class="list lang ko">
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/2mh41k_wallpaper/" target="_blank">2MH41K 배경화면 생성기</a>
                    <div>'2 MANY HOMES 4 1 KID' 앨범커버를 이용한 배경화면을 생성해줍니다.</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/etc/foods/" target="_blank">음식 추천</a>
                    <div>503개의 랜덤한 음식 중 하나를 추천해줍니다.</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/etc/drawAngleFunc.html" target="_blank">삼각 함수 그래프 그리기</a>
                    <div>고등학교 2학년(수학 II) 수준의 삼각 함수 그래프를 그려줍니다.</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/etc/instagram.html" target="_blank">인스타그램 맞팔 확인기</a>
                    <div>인스타그램 맞팔 여부를 확인할 수 있습니다.</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/lyrics-projector/" target="_blank">가사 프로젝터</a>
                    <div>빔 프로젝터에 음악 가사 등을 손쉽게 출력할 수 있습니다.</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://studeet.com/meal/archive/" target="_blank">STUDEET 세종대성고 급식 아카이브</a>
                    <div>세종대성고등학교 2021년~2024년 급식 사진을 볼 수 있습니다.</div>
                </div>
            </div>
            <div class="list lang en">
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/2mh41k_wallpaper/" target="_blank">2MH41K wallpaper generator</a>
                    <div>It generates wallpaper using '2 MANY HOMES 4 1 KID' album cover.</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/etc/foods/" target="_blank">Food recommender</a>
                    <div>It recommends one of 503 random foods.</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/etc/drawAngleFunc.html" target="_blank">Draw trigonometric functions graph</a>
                    <div>It draws a trigonometric graph of the 11th grade level(precalculus).</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/etc/instagram.html" target="_blank">Instagram following &amp; follower checker</a>
                    <div>You can check if the account you followed follows you.</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://html.gdre.dev/lyrics-projector/" target="_blank">Lyrics viewer</a>
                    <div>You can easily output music lyrics and more on the beam projector.</div>
                </div>
                <div class="item">
                    <a class="title" style="text-align: left;" href="https://studeet.com/meal/archive/" target="_blank">STUDEET SJDSHS meal archive</a>
                    <div>You can see the photos of Sejong Daeseong High School's 2021-2024 school meal.</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="page layout-contact" id="contact">
        <div class="title">
            <div class="lang ko">
                <span class="emphasis">언제든</span>, <span class="emphasis">편하게</span>, <span class="emphasis">부담없이</span> 연락주세요!
            </div>
            <div class="lang en">
                Don't hesitate to <span class="emphasis">contact me</span> anytime!
            </div>
        </div>
        <div class="contact">
            <!-- <div><span class="emphasis">Phone</span>: 010-0000-0000</div> -->
            <div><span class="emphasis">Email</span>: <a href="javascript:void(0);" onclick="copy(this.textContent);">[email protected]</a></div>
            <div><span class="emphasis">Kakao Talk</span>: <a href="https://open.kakao.com/me/godroble" target="_blank">https://open.kakao.com/me/godroble</a></div>
            <div><span class="emphasis">Instagram</span>: <a href="http://instagram.com/gdre.dev/" target="_blank">@gdre.dev</a></div>
            <div><span class="emphasis">Telegram</span>: <a href="https://t.me/godroble" target="_blank">@godroble</a></div>
            <div><span class="emphasis">Discord</span>: <a href="javascript:void(0);" onclick="copy(this.textContent);">MineRoble#0170</a></div>
            <div><span class="emphasis">velog</span>: <a href="https://velog.io/@godroble/posts" target="_blank">@godroble</a></div>
        </div>
    </div>

    <div class="footer">
        <p>Copyright 2024. Seo Woojin. All rights reserved.</p>
        <p>Last Updated at Thursday, Jan 04, 2024.</p>
    </div>
    
    <div class="header-btns">
        <button onclick="toggleTheme();">Toggle theme</button>
        <button onclick="toggleLang();">Toggle Ko/En</button>
    </div>
    <div class="scrollGuidance">
        <div class="lang ko">아래로 스크롤하여 더 많은 내용보기</div>
        <div class="lang en">Scroll down to see more</div>
    </div>

    <!-- Google tag (gtag.js) -->
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-D1ECGQ1CC4"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-D1ECGQ1CC4');
    </script>

    <script>
        function toggleTheme() {
            if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) document.body.classList.toggle("theme-light");
            else document.body.classList.toggle("theme-dark");
        }

        function getCurrentLang() {
            if(document.body.classList.contains("lang-en")) return "en";
            else return "ko";
        }

        function toggleLang() {
            if(getCurrentLang() == "en") {
                document.body.classList.remove("lang-en");
                document.body.classList.add("lang-ko");
            } else {
                document.body.classList.remove("lang-ko");
                document.body.classList.add("lang-en");
            }
        }

        function copy(content) {
            window.navigator.clipboard.writeText(content).then(() => {
                if(getCurrentLang() == "en") alert(`"${content}" is copied.`);
                else alert(`"${content}"가 복사되었습니다.`);
            });
        }

        window.addEventListener("load", (event) => {
            if(["ko", "ko-KR"].includes(navigator.language || navigator.userLanguage) === false) toggleLang();
        });

        window.addEventListener("scroll", (event) => {
            if(window.scrollY == 0) document.querySelector(".scrollGuidance").classList.remove("fadeout");
            else document.querySelector(".scrollGuidance").classList.add("fadeout");
        });
    </script>

</body></html>