포트폴리오 마크업1

·2023년 8월 17일
0

배고프다

모바일 페이지 마크업 완료

밸리데이터 검사를 통과했다!

새로운 포트폴리오 주소

마크업 고쳤으면 하는 부분이 있다면 알려주세용🤖

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!-- reset.css -->
    <link rel="stylesheet" href="./common/minireset.css" />
    <!-- common.css -->
    <link rel="stylesheet" href="./common/commonCss.css" />
    <title>이주현 웹퍼블리셔 포트폴리오</title>
  </head>
  <body>
    <header>
      <button><img src="#" alt="bunny" /></button>
      <ul>
        <!-- moblie, tablet menu -->
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PROJECT</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </header>
    <main>
      <!-- main section -->
      <section>
        <!-- big logo -->
        <h2>JUHYEON PORTFOLIO</h2>

        <!-- category -->
        <ul>
          <li>
            <a href="#"><img src="#" alt="lineBox" />ABOUT</a>
          </li>
          <li>
            <a href="#"><img src="#" alt="lineBox" />PROJECT</a>
          </li>
          <li>
            <a href="#"><img src="#" alt="lineBox" />CONTACT</a>
          </li>
        </ul>

        <!-- homepage icon -->
        <ul>
          <li><a href="#">github</a></li>
          <li><a href="#">velog</a></li>
        </ul>

        <!-- scroll icon -->
        <a href="#">🔻</a>
      </section>

      <!-- about section -->
      <section>
        <h2>About</h2>

        <!-- big text + keyword -->
        <div class="aboutContainer">
          <h3>디자인에서 퍼블리싱까지</h3>

          <ul>
            <li><img src="#" alt="blueBall" />분석력</li>
            <li><img src="#" alt="redBall" />꼼꼼함</li>
            <li><img src="#" alt="navyBall" />차분함</li>
          </ul>
        </div>

        <!-- 자기소개 + 더보기 -->
        <div class="info">
          <!-- text -->
          <p>
            신입 웹 퍼블리셔 이주현입니다.<br />
            탐색하고 배우며, 내 것으로 만들기를 좋아합니다.<br />
            끝없이 공부하는 성장형 퍼블리셔 입니다!
          </p>

          <!-- expand arrow -->
          <div class="expandArrow">
            <a href="#">더보기</a>
            <a href="#">🔻</a>
          </div>

          <div class="expandInfo">
            <!-- pixel popup img -->
            <img src="#" alt="popUp" />

            <p>
              안녕하세요! 시각디자인 디지털 학과를 전공한 이주현입니다.<br />

              UX/UI 디자인 직무를 희망하고 있던 중,<br />
              “내가 디자인한 앱/웹을 구현할 수 있다면 어떨까?”<br />
              하는 생각이 들었고, 대학교에서 한 학기 동안 <br />
              HTML, CSS를 배웠던 것이 떠올랐습니다.<br /><br />

              디자인과 코딩을 동시에 다루는 웹퍼블리셔라는<br />
              직업을 알게 되었고, 컴퓨터 작업을 좋아하는 제게<br />
              잘 맞는 일이라고 판단되어 학원에서 웹 퍼블리셔<br />
              과정을 이수하게 되었습니다.<br /><br />

              내가 좋아하는, 새로운 것을 배우니 자연스럽게<br />
              열정이 생겼습니다.<br /><br />

              멈추지 않고! 끝없이 성장하는 퍼블리셔가<br />
              되겠다고 다짐했습니다.
            </p>

            <!-- close button -->
            <button>
              <img src="#" alt="closeBtn" />
              닫기
            </button>
          </div>
        </div>
      </section>

      <!-- tool & skill section -->
      <section>
        <h2>Tool & Skills</h2>

        <!-- publishing -->
        <div class="toolContainer">
          <div class="blackBoxContainer">
            <img src="#" alt="blackBox" />
            &lt; &gt; Publishing &lt; / &gt;
          </div>

          <ul>
            <li><img src="#" alt="heart" />HTML5</li>
            <li><img src="#" alt="heart" />CSS3</li>
            <li><img src="#" alt="heartLess" />JavaScript(ES6+)</li>
            <li><img src="#" alt="heartLess" />jQuery</li>
            <li><img src="#" alt="heart" />Git & GitHub</li>
          </ul>
        </div>

        <!-- design -->
        <div class="toolContainer">
          <div class="blackBoxContainer">
            <img src="#" alt="blackBox" />
            ☆ --- Design --- ☆
          </div>
          <ul>
            <li><img src="#" alt="heart" />Photoshop</li>
            <li><img src="#" alt="heart" />Illustrator</li>
            <li><img src="#" alt="heartLess" />Figma</li>
            <li><img src="#" alt="heartLess" />Adobe XD</li>
            <li><img src="#" alt="heart" />Zeplin</li>
          </ul>
        </div>
      </section>

      <!-- project section -->
      <section>
        <h2>Select Project</h2>

        <div class="projectBox">
          <ul>
            <li>
              <a href="#"><img src="#" alt="lineBox" />All</a>
            </li>
            <li>
              <a href="#"><img src="#" alt="lineBox" />Publishing</a>
            </li>
            <li>
              <a href="#"><img src="#" alt="lineBox" />Design</a>
            </li>
          </ul>

          <!-- gameboy background img -->
          <div class="gameBoy">
            <img src="#" alt="projectImg" />

            <ul>
              <li>펫살롱</li>
              <li>반려동물 미용 예약 앱</li>

              <!-- br -->

              <li>#UX/UI 디자인</li>
              <li>#기획</li>
              <li>#모바일</li>
            </ul>

            <div class="btnContainer">
              <button>
                <img src="#" alt="projectBtnLeft" />
              </button>

              <button>
                <img src="#" alt="projectBtnRight" />
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- contact section -->
      <section>
        <h2>Contact</h2>
        <ul>
          <li>
            <a href="#"><img src="#" alt="email" />이메일</a>
          </li>
          <li>
            <a href="#"><img src="#" alt="phone" />전화번호</a>
          </li>
          <li>
            <a href="#"><img src="#" alt="kakaoTalk" />카카오톡</a>
          </li>
        </ul>
      </section>
    </main>

    <footer>Copyright 2023. Lee JuHyeon All rights reserved.</footer>
  </body>
</html>
profile
저녁놀 마을 사람

0개의 댓글

관련 채용 정보