<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  
  <title>Website Title</title>
  <meta name="title" content="Website Title" />
  <meta name="description" content="#" />

  
  <meta property="og:title" content="Website Title" />
  <meta property="og:description" content="#" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="#" />

  <link rel="icon" type="image/x-icon" href="https://www.codefriends.net/icons/favicon.ico" />
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
  <link rel="canonical" href="https://www.example.com" />

  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <div class="title">
      <h1>코드프렌즈</h1>
      <h2>프론트엔드 개발자</h2>
    </div>

    <div>
      <div class="information">
        <div class="information-item">
          <img src="https://assets.codefriends.net/templates/web/resume-4/assets/map-icon.svg">
          <span>서울</span>
        </div>
        <div class="information-item">
          <img src="https://assets.codefriends.net/templates/web/resume-4/assets/email-icon.svg">
          <span>me@enji.dev</span>
        </div>
      </div>

      <div class="link-list">
        <a href="https://codefriends.net" class="link-label">
          <svg width="16" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M5 8.5C5.88667 8.49995 6.74821 8.20542 7.44935 7.66268C8.15049 7.11993 8.65152 6.35969 8.87378 5.50133M5 8.5C4.11334 8.49995 3.2518 8.20542 2.55066 7.66268C1.84951 7.11993 1.34848 6.35969 1.12622 5.50133M5 8.5C6.10445 8.5 7 6.70889 7 4.5C7 2.29111 6.10445 0.5 5 0.5M5 8.5C3.89556 8.5 3 6.70889 3 4.5C3 2.29111 3.89556 0.5 5 0.5M5 0.5C5.70944 0.499704 6.40619 0.688159 7.01875 1.04603C7.63132 1.4039 8.13764 1.9183 8.48578 2.53644M5 0.5C4.29056 0.499704 3.59381 0.688159 2.98125 1.04603C2.36869 1.4039 1.86236 1.9183 1.51422 2.53644M8.48578 2.53644C7.51808 3.37464 6.28024 3.83518 5 3.83333C3.66756 3.83333 2.44889 3.34444 1.51422 2.53644M8.48578 2.53644C8.82394 3.13555 9.0011 3.81205 9 4.5C9 4.84578 8.956 5.18133 8.87378 5.50133M8.87378 5.50133C7.68852 6.15839 6.3552 6.50213 5 6.5C3.59467 6.5 2.27422 6.13778 1.12622 5.50133M1.12622 5.50133C1.04211 5.17421 0.999701 4.83776 1 4.5C1 3.78667 1.18667 3.11644 1.51422 2.53644"
              stroke="#7C3AED" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          enji.dev
        </a>
        <a href="https://codefriends.net" class="link-label">
          <svg width="16" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_320_252)">
              <path
                d="M6.81567 7.31733H5.63101V5.461C5.63101 5.01833 5.62201 4.44867 5.01367 4.44867C4.39601 4.44867 4.30167 4.93033 4.30167 5.42833V7.31733H3.11701V3.5H4.25501V4.02033H4.27034C4.42934 3.72033 4.81601 3.40367 5.39367 3.40367C6.59401 3.40367 6.81601 4.19367 6.81601 5.222V7.31733H6.81567ZM1.77901 2.97767C1.39767 2.97767 1.09134 2.669 1.09134 2.28933C1.09134 1.91 1.39801 1.60167 1.77901 1.60167C2.15901 1.60167 2.46701 1.91 2.46701 2.28933C2.46701 2.669 2.15867 2.97767 1.77901 2.97767ZM2.37301 7.31733H1.18501V3.5H2.37301V7.31733ZM7.40834 0.5H0.590341C0.264008 0.5 7.62939e-06 0.758 7.62939e-06 1.07633V7.92367C7.62939e-06 8.24233 0.264008 8.5 0.590341 8.5H7.40734C7.73334 8.5 8.00001 8.24233 8.00001 7.92367V1.07633C8.00001 0.758 7.73334 0.5 7.40734 0.5H7.40834Z"
                fill="#0A66C2" />
            </g>
            <defs>
              <clipPath id="clip0_320_252">
                <rect width="8" height="8" fill="white" transform="translate(7.62939e-06 0.5)" />
              </clipPath>
            </defs>
          </svg>
          /enji.dev
        </a>
        <a href="https://codefriends.net" class="link-label">
          <svg width="16" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_320_246)">
              <path
                d="M5.28401 3.4937H3.75467V0.500031H5.28401C6.10934 0.500031 6.78067 1.17136 6.78067 1.9967C6.78067 2.82203 6.10934 3.4937 5.28401 3.4937V3.4937ZM4.24501 3.00336H5.28401C5.83901 3.00336 6.29034 2.5517 6.29034 1.99703C6.29034 1.44236 5.83867 0.990697 5.28401 0.990697H4.24501V3.00336V3.00336ZM4.24501 3.4937H2.71601C1.89067 3.4937 1.21934 2.82236 1.21934 1.99703C1.21934 1.1717 1.89067 0.500031 2.71601 0.500031H4.24534V3.4937H4.24501ZM2.71601 0.990364C2.16101 0.990364 1.70967 1.44203 1.70967 1.9967C1.70967 2.55136 2.16101 3.00336 2.71601 3.00336H3.75501V0.990364H2.71601ZM4.24501 5.9967H2.71601C1.89067 5.9967 1.21934 5.32536 1.21934 4.50003C1.21934 3.6747 1.89067 3.00336 2.71601 3.00336H4.24534V5.9967H4.24501ZM2.71601 3.4937C2.16101 3.4937 1.70967 3.94536 1.70967 4.50003C1.70967 5.0547 2.16134 5.50636 2.71601 5.50636H3.75501V3.4937H2.71601ZM2.72401 8.50003C1.89434 8.50003 1.21901 7.8287 1.21901 7.00336C1.21901 6.17803 1.89034 5.5067 2.71567 5.5067H4.24501V6.98703C4.24501 7.82136 3.56267 8.50003 2.72401 8.50003V8.50003ZM2.71601 5.9967C2.44922 5.99705 2.19346 6.10319 2.00481 6.29184C1.81616 6.48048 1.71003 6.73624 1.70967 7.00303C1.70967 7.55803 2.16467 8.00936 2.72434 8.00936C3.29267 8.00936 3.75534 7.5507 3.75534 6.9867V5.9967H2.71601V5.9967ZM5.28401 5.9967H5.25134C4.42601 5.9967 3.75467 5.32536 3.75467 4.50003C3.75467 3.6747 4.42601 3.00336 5.25134 3.00336H5.28401C6.10934 3.00336 6.78067 3.6747 6.78067 4.50003C6.78067 5.32536 6.10934 5.9967 5.28401 5.9967V5.9967ZM5.25167 3.4937C4.69667 3.4937 4.24534 3.94536 4.24534 4.50003C4.24534 5.0547 4.69701 5.50636 5.25167 5.50636H5.28434C5.83934 5.50636 6.29067 5.0547 6.29067 4.50003C6.29067 3.94536 5.83901 3.4937 5.28434 3.4937H5.25167V3.4937Z"
                fill="#F24E1E" />
            </g>
            <defs>
              <clipPath id="clip0_320_246">
                <rect width="8" height="8" fill="white" transform="translate(7.62939e-06 0.500031)" />
              </clipPath>
            </defs>
          </svg>
          /enji.dev
        </a>
        <a href="https://codefriends.net" class="link-label">
          <svg width="16" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_320_249)">
              <path
                d="M4 0.598999C1.79 0.598999 0 2.39 0 4.599C0 6.36667 1.146 7.86566 2.735 8.394C2.935 8.43166 3.00833 8.308 3.00833 8.20166C3.00833 8.10666 3.005 7.855 3.00333 7.52167C1.89067 7.763 1.656 6.985 1.656 6.985C1.474 6.52333 1.211 6.4 1.211 6.4C0.848667 6.152 1.239 6.157 1.239 6.157C1.64067 6.185 1.85167 6.569 1.85167 6.569C2.20833 7.18067 2.788 7.004 3.01667 6.90167C3.05267 6.643 3.15567 6.46667 3.27 6.36667C2.38167 6.26666 1.448 5.92267 1.448 4.39C1.448 3.95333 1.603 3.59667 1.85967 3.31667C1.81467 3.21567 1.67967 2.809 1.89467 2.258C1.89467 2.258 2.22967 2.15067 2.99467 2.668C3.31467 2.579 3.65467 2.535 3.99467 2.533C4.33467 2.535 4.67467 2.579 4.99467 2.668C5.75467 2.15067 6.08967 2.258 6.08967 2.258C6.30467 2.809 6.16967 3.21567 6.12967 3.31667C6.38467 3.59667 6.53967 3.95333 6.53967 4.39C6.53967 5.92667 5.60467 6.265 4.71467 6.36333C4.85467 6.48333 4.98467 6.72866 4.98467 7.10333C4.98467 7.63866 4.97967 8.06867 4.97967 8.19867C4.97967 8.30367 5.04967 8.42867 5.25467 8.38867C6.855 7.864 8 6.364 8 4.599C8 2.39 6.209 0.598999 4 0.598999Z"
                fill="#222222" />
            </g>
            <defs>
              <clipPath id="clip0_320_249">
                <rect width="8" height="8" fill="white" transform="translate(0 0.5)" />
              </clipPath>
            </defs>
          </svg>
          /enji.dev
        </a>
      </div>
    </div>
  </header>

  <main>
    <section>
      <h3>교육</h3>

      <ul class="section-content">
        <li>
          <div class="section-title">
            <h4>
              <strong>코딩대학교 </strong>— 컴퓨터공학과
            </h4>
            <div class="section-date">
              <img class="calendar-icon" src="https://assets.codefriends.net/templates/web/resume-4/assets/calendar.svg">
              Oct 2018 - present
            </div>
          </div>
        </li>
      </ul>
    </section>
    <div class="divide"></div>

    <section>
      <h3>경력</h3>

      <ul class="section-content">
        <li>
          <div class="section-title">
            <h4>
              <strong>사과 컴퍼니 </strong>— Front-End Developer
            </h4>
            <div class="section-date">
              <img class="calendar-icon" src="https://assets.codefriends.net/templates/web/resume-4/assets/calendar.svg">
              Mar 2022 - present
            </div>
          </div>

          <div class="skill-list">
            <span class="skill-label">Material UI</span>
            <span class="skill-label">Electron</span>
            <span class="skill-label">React</span>
          </div>

          <ul class="section-description">
            <li>React Electron과 Material UI를 기반으로 Femicam의 데스크톱 애플리케이션의 UI 및 UX를 개선했습니다.</li>
            <li>애플리케이션 대시보드를 위한 React 컴포넌트를 디자인하고 생성했습니다.</li>
          </ul>
        </li>

        <li>
          <div class="section-title">
            <h4>
              <strong>코드프렌즈 </strong>— Front-End Developer <span class="label-sm">(self-employed)</span>
            </h4>
            <div class="section-date">
              <img class="calendar-icon" src="https://assets.codefriends.net/templates/web/resume-4/assets/calendar.svg">
              Jan 2022 - Mar 2022
            </div>
          </div>

          <div class="skill-list">
            <span class="skill-label">Tailwind CSS</span>
          </div>

          <ul class="section-description">
            <li>Tailwind CSS를 사용하여 주 사이트 탐색(메가 메뉴, 모바일 서랍)을 생성했습니다.</li>
            <li>쇼핑 카트 및 체크아웃 페이지(~총 18페이지)를 개선했습니다.</li>
          </ul>
        </li>

        <li>
          <div class="section-title">
            <h4>
              <strong>캐럿시장 </strong>— Software Developer
            </h4>
            <div class="section-date">
              <img class="calendar-icon" src="https://assets.codefriends.net/templates/web/resume-4/assets/calendar.svg">
              Jul 2016 - Jun 2021
            </div>
          </div>

          <div class="skill-list">
            <span class="skill-label">React</span>
            <span class="skill-label">Framework7</span>
            <span class="skill-label">WordPress</span>
            <span class="skill-label">Backbone.js</span>
            <span class="skill-label">Marionette.js</span>
            <span class="skill-label">Zurb Foundation</span>
          </div>

          <ul class="section-description">
            <li>웹사이트 전면 페이지를 바닐라 CSS에서 Foundation 6을 사용하도록 재디자인했습니다.</li>
            <li>Framework7, Backbone.js, Marionette.js를 사용하여 모바일 에디터에서 인터랙티브 UI를 개발했습니다.</li>
            <li>Foundation for Emails을 사용하여 이메일 마케팅 디자인 템플릿을 생성했습니다.</li>
            <li>blog.ciptaloka.com의 WordPress 테마를 주 사이트의 모습과 느낌에 맞게 사용자 정의했습니다.</li>
          </ul>
        </li>
      </ul>
    </section>
    <div class="divide"></div>

    <section>
      <h3>프로젝트</h3>

      <ul class="section-content">
        <li>
          <div class="section-title">
            <h4>
              <strong>TODO List</strong>
            </h4>
          </div>
          <div class="skill-list">
            <span class="skill-label">React</span>
            <span class="skill-label">Chakra UI</span>
            <span class="skill-label">Express</span>
            <span class="skill-label">MongoDB</span>
            <span class="skill-label">Redis</span>
          </div>

          <ul class="section-description">
            <li>
              <div>
                할 일 목록 관리 시스템은 사용자가 일상적인 할 일을 관리하고 우선순위를 설정할 수 있게 해주는 애플리케이션입니다. 이 시스템은 효율적인 할 일 관리와 진행 상황 추적을 가능하게 해줍니다. 자세한 내용은 
                <a href="#" class="description-url">
                  <img src="https://assets.codefriends.net/templates/web/resume-4/assets/link-icon.svg">
                  example.com/todolist
                </a>
              </div>
            </li>
          </ul>

          <div class="section-footer">
            <img src="https://assets.codefriends.net/templates/web/resume-4/assets/stars.svg">
            내 포트폴리오에서 모든 프로젝트를 확인하세요:
            <a href="#" class="description-url">
              <img src="https://assets.codefriends.net/templates/web/resume-4/assets/link-icon.svg">
              example.com/projects
            </a>
          </div>
        </li>
      </ul>
    </section>
    <div class="divide"></div>

    <section>
      <h3>기술 & 도구</h3>

      <ul class="section-content">
        <li>
          <div class="skills">
            <h5>Underline indicators</h5>
            <div class="skill-list">
              <span class="skill-label">Frequently Used</span>
              <span class="skill-label">Occasionally</span>
            </div>
          </div>
        </li>

        <li>
          <div class="section-title">
            <h4><strong>언어</strong></h4>
          </div>

          <div class="skills">
            <h5>FE related</h5>
            <div class="skill-list">
              <span class="skill-label">HTML</span>
              <span class="skill-label">CSS/SCSS</span>
              <span class="skill-label">TypeScript</span>
              <span class="skill-label">JavaScript</span>
            </div>
          </div>
          <div class="skills">
            <h5>BE related</h5>
            <div class="skill-list">
              <span class="skill-label">PHP</span>
              <span class="skill-label">SQL</span>
            </div>
          </div>
        </li>

        <li>
          <div class="section-title">
            <h4><strong>라이브러리 & 프레임워크</strong></h4>
          </div>

          <div class="skills">
            <h5>UI related</h5>
            <div class="skill-list">
              <span class="skill-label">Tailwind CSS</span>
              <span class="skill-label">Material UI</span>
              <span class="skill-label">Chakra UI</span>
              <span class="skill-label">Bootstrap</span>
              <span class="skill-label">Zurb Foundation</span>
            </div>
          </div>
          <div class="skills">
            <h5>FE related</h5>
            <div class="skill-list">
              <span class="skill-label">React</span>
              <span class="skill-label">Next.js</span>
              <span class="skill-label">FramerMoton</span>
              <span class="skill-label">Storybook</span>
              <span class="skill-label">Framework7</span>
              <span class="skill-label">Redux</span>
              <span class="skill-label">Webpack</span>
              <span class="skill-label">Gulp</span>
              <span class="skill-label">Backbone.js</span>
              <span class="skill-label">Marionette.js</span>
              <span class="skill-label">WordPress</span>
            </div>
          </div>
          <div class="skills">
            <h5>BE related</h5>
            <div class="skill-list">
              <span class="skill-label">Express</span>
              <span class="skill-label">Redis</span>
              <span class="skill-label">MongoDB</span>
            </div>
          </div>
        </li>

        <li>
          <div class="section-title">
            <h4><strong>도구 & 소프트웨어</strong></h4>
          </div>

          <div class="skills">
            <h5>Coder related</h5>
            <div class="skill-list">
              <span class="skill-label">VS Code</span>
              <span class="skill-label">Node.js</span>
              <span class="skill-label">Git</span>
              <span class="skill-label">Sourcetree</span>
            </div>
          </div>
          <div class="skills">
            <h5>Designer related</h5>
            <div class="skill-list">
              <span class="skill-label">Figma</span>
              <span class="skill-label">Inkscape</span>
              <span class="skill-label">Photoshop</span>
            </div>
          </div>
        </li>
        </div>
    </section>
    <div class="divide"></div>
  </main>

  <button id="moveToTop" class="top-btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up">
      <path d="m18 15-6-6-6 6" />
    </svg>
  </button>
</body>

</html>

const moveToTop = document.getElementById('moveToTop')

moveToTop.addEventListener('click', function () {
  document.body.scrollTop = 0 // For Safari
  document.documentElement.scrollTop = 0 // For Chrome, Firefox, IE and Opera
})
