index.html 파일의 소스코드이다.
Testimonials 섹션은 아직 미완성이라 우선 주석처리해뒀다.
캐러셀(Carousel)로 구현하고 싶은데
바닐라 자바스크립트로는 구현해본 적이 없어서 (부트스트랩으로만 해봄) 뒤로 미뤄뒀다.
JS 추가 필요 작업
+ IntersectionObserver (참고자료)
+ Carousel (참고자료)
ㄴ index.html의 Testimonials 섹션 추가
<!DOCTYPE html>
<html lang="en">
<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>Helen's Porfolio</title>
<meta name="description" content="Junior Web Developer">
<meta name="author" content="Helen">
<link rel="icon" type="image/png" href="assets/imgs/favicon.png" />
<script src="https://kit.fontawesome.com/59b71f7597.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="assets/js/main.js" defer></script>
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<div class="navbar__logo">
<a href="#">
<i class="fa fa-gg" style="color: #EB532E;"></i>
</a>
</div>
<ul class="navbar__menu">
<li class="navbar__menu__item active" data-link="#home">Home</li>
<li class="navbar__menu__item" data-link="#about">About</li>
<li class="navbar__menu__item" data-link="#skills">Skills</li>
<li class="navbar__menu__item" data-link="#work">Work</li>
<li class="navbar__menu__item">
<a id="downloadLink">Resume</a>
</li>
<li class="navbar__menu__item" data-link="#contact">Contact</li>
</ul>
<!-- Toggle button -->
<button class="navbar__toggle-btn">
<i class="fas fa-bars"></i>
</button>
</nav>
<!-- Home -->
<section id="home">
<div class="home__container">
<div><h1 class="home__title">Hyeran Park</h1></div>
<div><h2 class="home__description">Hello, I am a junior web-developer.</h2></div>
<div><button class="home__contact">Contact me</button></div>
</div>
</section>
<!-- About -->
<section id="about" class="section section__container">
<h1>About me</h1>
<div class="about__wrapper">
<div class="about__intro">
<div class="about__photo">
<div class="my__avatar__box"><img src="assets/imgs/profile.jpg" class= "my__avatar" alt="Helen's profile photo"></div>
</div>
<div class="about__text">
<p>Hi, I'm Hyeran. </br> A full-stack web developer living in Seoul, South Korea. My focus is web application programming, specializing in OOP languages including Java and PHP. I am keenly interested in service development using machine learning, deep learning, and big data.</p>
</div>
</div>
<div class="about__majors">
<div class="major">
<div class="major__icon first">
<i class="fas fa-window-restore"></i>
</div>
<h2 class="major__title">
Client
</h2>
<div class="major__description">
HTML, CSS, JavaScript,
<br/>Bootstrap, Web APIs
</div>
</div>
<div class="major">
<div class="major__icon third">
<i class="fas fa-server"></i>
</div>
<h2 class="major__title">
Server
</h2>
<div class="major__description">
Java, Spring, PHP, CodeIgniter
<br/>Oracle DBMS, MySQL
</div>
</div>
<div class="major">
<div class="major__icon second">
<i class="fas fa-database"></i>
</div>
<h2 class="major__title">
Data Science
</h2>
<div class="major__description">
Python, R, Hadoop
<br/>Tensorflow, Pytorch
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" class="section">
<div class="section__container">
<h1>Skills</h1>
<h2>Skills & Attributes</h2>
<p>Passion for learning new technologies. Capable of working within a team environment and independently. Ability to plan and time schedule, work under strict time pressure and adapt quickly when needed.</p>
<div class="skillset">
<div class="skillset__left">
<h3 class="skillset__title">Skills</h3>
<div class="skill">
<div class="skill_description">
<span>HTML</span>
</div>
<div class="skill__bar">
<div class="skill__value" style="width: 40%;"></div>
</div>
<div class="skill_description">
<span>CSS</span>
</div>
<div class="skill__bar">
<div class="skill__value" style="width: 40%;"></div>
</div>
<div class="skill_description">
<span>JavaScript</span>
</div>
<div class="skill__bar">
<div class="skill__value" style="width: 40%;"></div>
</div>
<div class="skill_description">
<span>Java</span>
</div>
<div class="skill__bar">
<div class="skill__value" style="width: 60%;"></div>
</div>
<div class="skill_description">
<span>PHP</span>
</div>
<div class="skill__bar">
<div class="skill__value" style="width: 35%;"></div>
</div>
<div class="skill_description">
<span>MySQL</span>
</div>
<div class="skill__bar">
<div class="skill__value" style="width: 55%;"></div>
</div>
</div>
</div>
<div class="skillset__right">
<div class="tools">
<h3 class="skillset__title">Tools</h3>
<ul class="tools__list"></ul>
<li><span>Visual Studio Code</span></li>
<li><span>Eclipse</span></li>
<li><span>Spring Legacy</span></li>
<li><span>Spring Boot</span></li>
<li><span>CodeIgniter</span></li>
</div>
<div class="etc">
<h3 class="skillset__title">Etc</h3>
<ul class="etc__list"></ul>
<li><span>Git</span></li>
<li><span>Unix/linux</span></li>
<li><span>AWS cloud</span></li>
</div>
</div>
</div>
</div>
</section>
<!-- Work -->
<section id="work" class="section">
<div class="section__container">
<h1>My work</h1>
<h3>Projects</h3>
<div class="work__categories">
<button class="category__btn all selected" data-filter="*">
All<span class="category__count"> 6</span></button>
<button class="category__btn" data-filter="web">
Web<span class="category__count"> 2</span></button>
<button class="category__btn" data-filter="data-analysis">
Data Analysis<span class="category__count"> 2</span></button>
<button class="category__btn" data-filter="mobile">
Mobile<span class="category__count"> 2</span></button>
</div>
<div class="work__projects">
<a class="project" href="https://github.com/hpark3/WebPortfolio" target="blank" data-type="web">
<img class="project__img" src="assets/imgs/projects/web-porfolio.png" alt="WebPortfolio">
<div class="project__description">
<h3>Portfolio Website</h3>
<span>Responsive personal portfolio website using HTML, CSS, & JS</span>
</div>
</a>
<a class="project" href="https://github.com/hpark3/WebPortfolio" target="blank" data-type="web">
<img class="project__img" src="assets/imgs/projects/web-porfolio.png" alt="WebPortfolio">
<div class="project__description">
<h3>Project</h3>
<span>Clone coding with HTML, and CSS</span>
</div>
</a>
<a class="project" href="https://github.com/hpark3/WebPortfolio" target="blank" data-type="data-analysis">
<img class="project__img" src="assets/imgs/projects/web-porfolio.png" alt="WebPortfolio">
<div class="project__description">
<h3>My personal webpage</h3>
<span>Clone coding with HTML, and CSS</span>
</div>
</a>
<a class="project" href="https://github.com/hpark3/WebPortfolio" target="blank" data-type="data-analysis">
<img class="project__img" src="assets/imgs/projects/web-porfolio.png" alt="WebPortfolio">
<div class="project__description">
<h3>My personal webpage</h3>
<span>Clone coding with HTML, and CSS</span>
</div>
</a>
<a class="project" href="https://github.com/hpark3/WebPortfolio" target="blank" data-type="mobile">
<img class="project__img" src="assets/imgs/projects/web-porfolio.png" alt="WebPortfolio">
<div class="project__description">
<h3>My personal webpage</h3>
<span>Clone coding with HTML, and CSS</span>
</div>
</a>
</div>
</div>
</section>
<!-- Testimonials
<section id="testimonials" class="section">
<div class="section__container">
<h1>Testimonials</h1>
<h3>See what people say about me</h3>
<div class="testimonials">
<div class="testimonial">
<div class="testimonial__speech-bubble">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque
fuga libero nulla eveniet aperiam laborum, quis provident
quibusdam officiis reprehenderit, placeat neque perspiciatis vero
explicabo tempora, dignissimos accusantium inventore ducimus!
</p>
<p class="name"><a href="">Jinmi</a> / CampCome</p>
</div>
</div>
<div class="testimonial">
<div class="testimonial__speech-bubble">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque
fuga libero nulla eveniet aperiam laborum, quis provident
quibusdam officiis reprehenderit, placeat neque perspiciatis vero
explicabo tempora, dignissimos accusantium inventore ducimus!
</p>
<p class="name"><a href="">Hayoung</a> / 42 Seoul</p>
</div>
</div>
</div>
</div>
</section> -->
<!-- Contact -->
<section id="contact" class="section">
<h1 class="contact__title">Let's talk</h1>
<h2 class="contact__email">dalan-i@hanmail.net</h2>
<div class="contact__links">
<li class="contact__icons">
<a href="https://github.com/hpark3" target="__blank">
<i class="fab fa-github"></i>
</a>
</li>
<li class="contact__icons">
<a href="https://hpark3.tistory.com/" target="__blank">
<i class="fas fa-rss-square"></i>
</a>
</li>
</div>
<p class="contact__rights">ⓒ 2021. Hyeran Park All Rights Reserved.</p>
</section>
<!-- Arrow-up Btn -->
<button class="arrow-up">
<i class="fas fa-angle-up"></i>
</button>
</body>
</html>
'웹 > Front-end' 카테고리의 다른 글
| [HTML/CSS] 포트폴리오 페이지 - JS 소스코드 (1) | 2021.06.07 |
|---|---|
| [HTML/CSS] 포트폴리오 페이지 - CSS 소스코드 (0) | 2021.06.07 |
| [HTML/CSS] 포트폴리오 페이지 - CSS: justify-content (0) | 2021.05.31 |
| [HTML/CSS] 포트폴리오 페이지 - CSS Flex (0) | 2021.05.28 |
| [HTML/CSS] 포트폴리오 페이지 - box-shadow, font-weight (0) | 2021.05.28 |
