index.html

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./dist/output.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/2954c025eb.js" crossorigin="anonymous"></script>
    <title>resume</title>
</head>

<body class=" p-10 bg-yellow-100">

    <div class="container max-w-5xl mx-auto bg-white border-solid border-2 ">
        <div class="header p-10 flex flex-row text-left flex-wrap">
            <img class="w-[210px] h-[220px] rounded-2xl"
                src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3024&q=80"
                alt="">
            <dv class="ml-3 mt-8">
                <p class="text-4xl font-bold">이윤구 (LEE YUNGU)</p>
                <p class="bg-amber-100 text-2xl inline-block mt-3">Frontend-Developer</p>
            </dv>
            <ul class="ml-auto mt-auto">
                <li>
                    <div class="fa-solid fa-envelope"></div>
                    <a href="yunkoooooo@gmail.com">yunkoooooo@gmail.com</a>
                </li>
                <li class="mt-2 mb-2">
                    <i class="fa-solid fa-phone"></i>
                    <a href="yunkoooooo@gmail.com">010-1234-5678</a>
                </li>
                <li>
                    <i class="fa-brands fa-github"></i>
                    <a href="yunkoooooo@gmail.com">https://github.com/yunkooo</a>
                </li>
                <li class="mt-2 mb-2">
                    <i class="fa-solid fa-rss"></i>
                    <a href="yunkoooooo@gmail.com">https://velog.io/@yunkooo</a>
                </li>
            </ul>
        </div>
        <div class="introduce flex p-10  flex-wrap">
            <p class="text-2xl font-bold intro-tit basis-1/6">INTRODUCE</p>
            <div class="intro-txt basis-5/6 space-y-2">
                <p class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid a totam
                    voluptatibus omnis
                    repudiandae nisi, aliquam consequatur esse amet qui blanditiis placeat praesentium vitae error
                    dignissimos modi, quisquam illo!</p>
                <p class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid a totam
                    voluptatibus omnis
                    repudiandae nisi, aliquam consequatur esse amet qui blanditiis placeat praesentium vitae error
                    dignissimos modi, quisquam illo!</p>
            </div>
        </div>
        <div class="skill flex p-10">
            <div class="skill-tit text-2xl font-bold basis-1/6">SKILL</div>
            <div class="sill-txt basis-5/6 flex flex-row flex-wrap pt-12">
                <div class="flex flex-shrink-0">
                    <div class="text-xl">Front-end</div>
                    <ul class="ml-13 p-5 h-[180px] space-y-2">
                        <li><span class="bg-amber-200 w-[20px] h-[100%] inline-block text-center rounded-full">3</span>
                            Livingstandard HTML
                        </li>
                        <li class=""><span
                                class="bg-amber-200 w-[20px] h-[100%] inline-block text-center rounded-full">3</span>
                            CSS
                        </li>
                        <li><span class="bg-amber-200 w-[20px] h-[100%] inline-block text-center rounded-full">1</span>
                            JavsScript</li>
                        <li class=""><span
                                class="bg-amber-200 w-[20px] h-[100%] inline-block text-center rounded-full">3</span>
                            TypeScript
                        </li>
                    </ul>
                </div>
                <div class=" flex flex-shrink-0 ml-auto mr-auto">
                    <div class="text-xl">Back-end</div>
                    <ul class="ml-13 p-5 h-[180px] space-y-2">
                        <li><span class="bg-amber-200 w-[20px] h-[100%] inline-block text-center rounded-full">1</span>
                            Node.js
                        </li>
                        <li class=""><span
                                class="bg-amber-200 w-[20px] h-[100%] inline-block text-center rounded-full">2</span>
                            AWS
                        </li>
                        <li><span class="bg-amber-200 w-[20px] h-[100%] inline-block text-center rounded-full">1</span>
                            Python</li>
                        <li class=""><span
                                class="bg-amber-200 w-[20px] h-[100%] inline-block text-center rounded-full">3</span>
                            TypeScript
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="Experience p-10">
            <div class="experience-tit text-2xl font-bold">PROJECT</div>
            <div class="space-y-3">
                <div class="flex pl-5 pr-5 items-center">
                    <div class="shrink-0 basis-3/12">
                        <p class="text-xl font-bold">감귤마켓</p>
                        <p>2022.11 ~ 2023.02</p>
                        <div class="flex flex-wrap gap-2">
                            <p class="bg-red-300 rounded-md px-1 text-red-700">HTML</p>
                            <p class="bg-blue-300 text-blue-700 rounded-md px-1">CSS</p>
                            <p class="bg-yellow-300 text-yellow-700 rounded-md px-1">JavaScript</p>
                            <p class="bg-blue-300 text-blue-700 rounded-md px-1">React</p>
                        </div>
                    </div>
                    <div class="ml-7 basis-6/12 shrink-0">
                        <ul class="marker:text-yellow-400 list-disc">
                            <li>React 프로젝트</li>
                            <li>HTML/CSS 숙련도 향상</li>
                            <li>Javascript 숙련도 향상</li>
                            <li>상태 관리 경험</li>
                        </ul>
                    </div>
                    <div class="basis-3/12 py-2">
                        <img src="./img/market.png" alt="">
                    </div>
                </div>
                <div class="flex pl-5 pr-5 items-center">
                    <div class="shrink-0 basis-3/12">
                        <p class="text-xl font-bold">Vending-Machine</p>
                        <p>2022.06 ~ 2022.11</p>
                        <div class="flex flex-wrap gap-2">
                            <p class="bg-red-300 rounded-md px-1 text-red-700">HTML</p>
                            <p class="bg-blue-300 text-blue-700 rounded-md px-1">CSS</p>
                            <p class="bg-yellow-300 text-yellow-700 rounded-md px-1">JavaScript</p>

                        </div>
                    </div>
                    <div class="ml-7 basis-6/12 shrink-0">
                        <ul class="marker:text-yellow-400 list-disc">
                            <li>Javascript 프로젝트</li>
                            <li>HTML/CSS 숙련도 향상</li>
                            <li>Lorem ipsum dolor sit amet consectetur adipisicing</li>
                        </ul>
                    </div>
                    <div class="basis-3/12 py-2">
                        <img src="./img/vending_maching.png" alt="">
                    </div>
                </div>

                <div class="flex pl-5 pr-5 items-center h-[240px]">
                    <div class="shrink-0 basis-3/12">
                        <p class="text-xl font-bold">1만시간의 법칙</p>
                        <p>2022.03 ~ 2022.05</p>
                        <div class="flex flex-wrap gap-2">
                            <p class="bg-red-300 rounded-md px-1 text-red-700">HTML</p>
                            <p class="bg-blue-300 text-blue-700 rounded-md px-1">CSS</p>
                            <p class="bg-yellow-300 text-yellow-700 rounded-md px-1">JavaScript</p>
                        </div>
                    </div>
                    <div class="ml-7 basis-6/12 shrink-0">
                        <ul class="marker:text-yellow-400 list-disc">
                            <li>Javascript 프로젝트</li>
                            <li>HTML/CSS 숙련도 향상</li>
                            <li>Lorem ipsum dolor sit amet consectetur adipisicing</li>
                        </ul>
                    </div>
                    <div class="basis-3/12 py-2">
                        <img src="./img/10000hours.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="edu p-10">
            <div class="text-2xl font-bold">EDUCATION</div>
            <div class="pl-5 pr-5 flex mt-4">
                <p class="text-xl font-bold">멋쟁이사자처럼 프론트엔드스쿨</p>
                <p class="ml-auto text-gray-400">2022.08 ~ 2023.01</p>
            </div>
            <div class="pl-5 pr-5 flex mt-4">
                <p class="text-xl font-bold">슈퍼 개발 대학</p>
                <p class="ml-auto text-gray-400">2020.03 ~ 2022.02</p>
            </div>
            <div class="pl-5 pr-5 flex mt-4">
                <p class="text-xl font-bold">최강 고등학교</p>
                <p class="ml-auto text-gray-400">2010.03 ~ 2013.02</p>
            </div>
        </div>
        <div class="footer flex justify-end gap-5 p-5">
            <a href="#"><img class="inline-block w-[30px] -mb-1" src="./img/Gmail_Logo.png" alt=""></a>

            <a href="#"><img class="w-[30px]" src="./img/GitHub_logo.png" alt=""></a>
            <a href="#"><img class="w-[30px]" src="./img/Instagram_logo.png" alt=""></a>
            <a href="#"><img class="w-[30px]" src="./img/facebook_logo.png" alt=""></a>
            <a href="#"><img class="inline-block w-[30px] -mb-1" src="./img/Twitter_logo.png" alt=""></a>
        </div>
    </div>
</body>

</html>