<!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>[Name]</h1>
        <h2>[Position]</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>[Location]</span>
          </div>
          <div class="information-item">
            <img src="https://assets.codefriends.net/templates/web/resume-4/assets/email-icon.svg">
            <span>[Email]</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">
              
            </svg>
            [Link 1]
          </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">
              
            </svg>
            [Link 2]
          </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">
              
            </svg>
            [Link 3]
          </a>
        </div>
      </div>
    </header>

    <main>
      <section>
        <h3>Experience</h3>

        <ul class="section-content">
          <li>
            <div class="section-title">
              <h4>
                <strong>[Company Name]</strong> — [Position]
              </h4>
              <div class="section-date">
                <img class="calendar-icon" src="https://assets.codefriends.net/templates/web/resume-4/assets/calendar.svg">
                [Start Date] - [End Date]
              </div>
            </div>

            <div class="skill-list">
              <span class="skill-label">[Skill 1]</span>
              <span class="skill-label">[Skill 2]</span>
              <span class="skill-label">[Skill 3]</span>
            </div>

            <ul class="section-description">
              <li>[Key Responsibility 1]</li>
              <li>[Key Responsibility 2]</li>
              <li>[Key Responsibility 3]</li>
            </ul>
          </li>

          <li>
            <div class="section-title">
              <h4>
                <strong>[Company Name]</strong> — [Position] <span class="label-sm">[Additional Info]</span>
              </h4>
              <div class="section-date">
                <img class="calendar-icon" src="https://assets.codefriends.net/templates/web/resume-4/assets/calendar.svg">
                [Start Date] - [End Date]
              </div>
            </div>

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

            <ul class="section-description">
              <li>[Key Responsibility 1]</li>
              <li>[Key Responsibility 2]</li>
              <li>[Key Responsibility 3]</li>
            </ul>
          </li>

          <li>
            <div class="section-title">
              <h4>
                <strong>[Company Name]</strong> — [Position]
              </h4>
              <div class="section-date">
                <img class="calendar-icon" src="https://assets.codefriends.net/templates/web/resume-4/assets/calendar.svg">
                [Start Date] - [End Date]
              </div>
            </div>

            <div class="skill-list">
              <span class="skill-label">[Skill 1]</span>
              <span class="skill-label">[Skill 2]</span>
              <span class="skill-label">[Skill 3]</span>
              <span class="skill-label">[Skill 4]</span>
            </div>

            <ul class="section-description">
              <li>[Key Responsibility 1]</li>
              <li>[Key Responsibility 2]</li>
              <li>[Key Responsibility 3]</li>
            </ul>
          </li>
        </ul>
      </section>

      <div class="divide"></div>

      <section>
        <h3>Projects</h3>

        <ul class="section-content">
          <li>
            <div class="section-title">
              <h4>
                <strong>[Project Name]</strong>
              </h4>
              <p>[Description]</p>
            </div>
            <div class="skill-list">
              <span class="skill-label">[Skill 1]</span>
              <span class="skill-label">[Skill 2]</span>
              <span class="skill-label">[Skill 3]</span>
              <span class="skill-label">[Skill 4]</span>
            </div>

            <ul class="section-description">
              <li>
                <div>
                  [Additional Info]
                  <a href="#" class="description-url">
                    <img src="https://assets.codefriends.net/templates/web/resume-4/assets/link-icon.svg">
                    Link 1
                  </a>
                </div>
              </li>
            </ul>

            <div class="section-footer">
              <img src="https://assets.codefriends.net/templates/web/resume-4/assets/stars.svg">
              [Additional Info]
              <a href="#" class="description-url">
                <img src="https://assets.codefriends.net/templates/web/resume-4/assets/link-icon.svg">
                Link 2
              </a>
            </div>
          </li>
        </ul>
      </section>

      <div class="divide"></div>

      <section>
        <h3>Education</h3>

        <ul class="section-content">
          <li>
            <div class="section-title">
              <h4>
                <strong>[School]</strong> — [Major]
              </h4>
              <div class="section-date">
                <img class="calendar-icon" src="https://assets.codefriends.net/templates/web/resume-4/assets/calendar.svg">
                [Start Date] - [Graduation Date]
              </div>
            </div>
          </li>
        </ul>
      </section>

      <div class="divide"></div>

      <section>
        <h3>Skills & Tools</h3>

        <ul class="section-content">
          <li>
            <div class="section-title">
              <h4><strong>Languages</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">NodeJS</span>
                <span class="skill-label">SQL</span>
              </div>
            </div>
          </li>

          <li>
            <div class="section-title">
              <h4><strong>Libraries & Frameworks</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>
              </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">Redux</span>
                <span class="skill-label">Webpack</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>Tools & Software</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">Linux</span>
                <span class="skill-label">Git</span>
                <span class="skill-label">Jira</span>
              </div>
            </div>
            <div class="skills">
              <h5>Designer Related</h5>
              <div class="skill-list">
                <span class="skill-label">Figma</span>
                <span class="skill-label">Premiere Pro</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
})
